HTML spec build for whatwg/html#4369

mustaqahmed · Feb 21, 2019 · 8b5b642 · 8b5b642
1 parent cb0e0c1
commit 8b5b642
Show file tree

Hide file tree

Showing 219 changed files with 232,901 additions and 0 deletions.
diff --git a/token-test.zip b/token-test.zip
diff --git a/whatwg-html-pull-4369-2019-02-21/404.html b/whatwg-html-pull-4369-2019-02-21/404.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<script src="/link-fixup.js" defer></script>
+<title>404 Not Found</title>
+<style>
+ body.loading div.failed, body.failed div.loading, div.failed { display: none; }
+ body.loading div.loading, body.failed div.failed, div.loading { display: block; }
+</style>
+<body onload="document.body.className = 'failed'">
+<script>document.body.className = 'loading'</script>
+<div class="loading">
+ <p>Loading...</p>
+</div>
+<div class="failed">
+ <h1>Not Found</h1>
+ <p>The page you are looking for is no longer available at this URL.</p>
+ <p>Links to the multipage version of the specification are
+ unfortunately likely to break over time. You might be able to find
+ what you want from <a href="/multipage/">the contents page</a>.</p>
+ <p>If you have found a broken link on the WHATWG site itself, please
+ <a href="https://github.com/whatwg/html/issues/new">file an issue</a>.
+ If you found a broken link from another site pointing to the WHATWG site,
+ please let that site know of the problem instead. Thanks!</p>
+</div>
diff --git a/whatwg-html-pull-4369-2019-02-21/demos/canvas/blue-robot/blue-robot.png b/whatwg-html-pull-4369-2019-02-21/demos/canvas/blue-robot/blue-robot.png
diff --git a/whatwg-html-pull-4369-2019-02-21/demos/canvas/blue-robot/index-idle.html b/whatwg-html-pull-4369-2019-02-21/demos/canvas/blue-robot/index-idle.html
@@ -0,0 +1,188 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Blue Robot Demo</title>
+<style>
+  html { overflow: hidden; min-height: 200px; min-width: 380px; }
+  body { height: 200px; position: relative; margin: 8px; }
+  .buttons { position: absolute; bottom: 0px; left: 0px; margin: 4px; }
+</style>
+<canvas width="380" height="200"></canvas>
+<script>
+ var Landscape = function (context, width, height) {
+   this.offset = 0;
+   this.width = width;
+   this.advance = function (dx) {
+     this.offset += dx;
+   };
+   this.horizon = height * 0.7;
+   // This creates the sky gradient (from a darker blue to white at the bottom)
+   this.sky = context.createLinearGradient(0, 0, 0, this.horizon);
+   this.sky.addColorStop(0.0, 'rgb(55,121,179)');
+   this.sky.addColorStop(0.7, 'rgb(121,194,245)');
+   this.sky.addColorStop(1.0, 'rgb(164,200,214)');
+   // this creates the grass gradient (from a darker green to a lighter green)
+   this.earth = context.createLinearGradient(0, this.horizon, 0, height);
+   this.earth.addColorStop(0.0, 'rgb(81,140,20)');
+   this.earth.addColorStop(1.0, 'rgb(123,177,57)');
+   this.paintBackground = function (context, width, height) {
+     // first, paint the sky and grass rectangles
+     context.fillStyle = this.sky;
+     context.fillRect(0, 0, width, this.horizon);
+     context.fillStyle = this.earth;
+     context.fillRect(0, this.horizon, width, height-this.horizon);
+     // then, draw the cloudy banner
+     // we make it cloudy by having the draw text off the top of the
+     // canvas, and just having the blurred shadow shown on the canvas
+     context.save();
+     context.translate(width-((this.offset+(this.width*3.2)) % (this.width*4.0))+0, 0);
+     context.shadowColor = 'white';
+     context.shadowOffsetY = 30+this.horizon/3; // offset down on canvas
+     context.shadowBlur = '5';
+     context.fillStyle = 'white';
+     context.textAlign = 'left';
+     context.textBaseline = 'top';
+     context.font = '20px sans-serif';
+     context.fillText('WHATWG ROCKS', 10, -30); // text up above canvas
+     context.restore();
+     // then, draw the background tree
+     context.save();
+     context.translate(width-((this.offset+(this.width*0.2)) % (this.width*1.5))+30, 0);
+     context.beginPath();
+     context.fillStyle = 'rgb(143,89,2)';
+     context.lineStyle = 'rgb(10,10,10)';
+     context.lineWidth = 2;
+     context.rect(0, this.horizon+5, 10, -50); // trunk
+     context.fill();
+     context.stroke();
+     context.beginPath();
+     context.fillStyle = 'rgb(78,154,6)';
+     context.arc(5, this.horizon-60, 30, 0, Math.PI*2); // leaves
+     context.fill();
+     context.stroke();
+     context.restore();
+   };
+   this.paintForeground = function (context, width, height) {
+     // draw the box that goes in front
+     context.save();
+     context.translate(width-((this.offset+(this.width*0.7)) % (this.width*1.1))+0, 0);
+     context.beginPath();
+     context.rect(0, this.horizon - 5, 25, 25);
+     context.fillStyle = 'rgb(220,154,94)';
+     context.lineStyle = 'rgb(10,10,10)';
+     context.lineWidth = 2;
+     context.fill();
+     context.stroke();
+     context.restore();
+   };
+ };
+</script>
+<script>
+ var BlueRobot = function () {
+   this.sprites = new Image();
+   this.sprites.src = 'blue-robot.png'; // this sprite sheet has 8 cells
+   this.targetMode = 'idle';
+   this.walk = function () {
+     this.targetMode = 'walk';
+   };
+   this.stop = function () {
+     this.targetMode = 'idle';
+   };
+   this.frameIndex = {
+     'idle': [0], // first cell is the idle frame
+     'walk': [1,2,3,4,5,6], // the walking animation is cells 1-6
+     'stop': [7], // last cell is the stopping animation
+   };
+   this.mode = 'idle';
+   this.frame = 0; // index into frameIndex
+   this.tick = function () {
+     // this advances the frame and the robot
+     // the return value is how many pixels the robot has moved
+     this.frame += 1;
+     if (this.frame >= this.frameIndex[this.mode].length) {
+       // we've reached the end of this animation cycle
+       this.frame = 0;
+       if (this.mode != this.targetMode) {
+         // switch to next cycle
+         if (this.mode == 'walk') {
+           // we need to stop walking before we decide what to do next
+           this.mode = 'stop';
+         } else if (this.mode == 'stop') {
+           if (this.targetMode == 'walk')
+             this.mode = 'walk';
+           else
+             this.mode = 'idle';
+         } else if (this.mode == 'idle') {
+           if (this.targetMode == 'walk')
+             this.mode = 'walk';
+         }
+       }
+     }
+     if (this.mode == 'walk')
+       return 8;
+     return 0;
+   },
+   this.paint = function (context, x, y) {
+     if (!this.sprites.complete) return;
+     // draw the right frame out of the sprite sheet onto the canvas
+     // we assume each frame is as high as the sprite sheet
+     // the x,y coordinates give the position of the bottom center of the sprite
+     context.drawImage(this.sprites,
+                       this.frameIndex[this.mode][this.frame] * this.sprites.height, 0, this.sprites.height, this.sprites.height,
+                       x-this.sprites.height/2, y-this.sprites.height, this.sprites.height, this.sprites.height);
+   };
+ };
+</script>
+<script>
+ var animating = false;
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ var landscape = new Landscape(context, canvas.width, canvas.height);
+ var blueRobot = new BlueRobot();
+ // paint when the browser wants us to, using requestAnimationFrame()
+ function paint() {
+   context.clearRect(0, 0, canvas.width, canvas.height);
+   landscape.paintBackground(context, canvas.width, canvas.height);
+   blueRobot.paint(context, canvas.width/2, landscape.horizon*1.1);
+   landscape.paintForeground(context, canvas.width, canvas.height);
+   if (animating)
+     requestAnimationFrame(paint);
+ }
+ var interval = null;
+ var cancelingTimeout = null;
+ function startAnim() {
+   if (cancelingTimeout) {
+     clearTimeout(cancelingTimeout);
+     cancelingTimeout = null;
+   }
+   if (!animating) {
+     animating = true;
+     paint();
+     // but tick every 100ms, so that we don't slow down when we don't paint
+     interval = setInterval(function () {
+       var dx = blueRobot.tick();
+       landscape.advance(dx);
+     }, 100);
+   }
+ }
+ function stopAnim() {
+   if (cancelingTimeout) return;
+   cancelingTimeout = setTimeout(function () {
+     cancelingTimeout = null;
+     if (animating) {
+       clearInterval(interval);
+       animating = false;
+     }
+   }, 1000);
+ }
+ paint();
+ blueRobot.sprites.onload = paint;
+</script>
+<p class="buttons">
+ <input type=button value="Walk" onclick="blueRobot.walk(); startAnim();">
+ <input type=button value="Stop" onclick="blueRobot.stop(); stopAnim();">
+<footer>
+ <small> Blue Robot Player Sprite by <a href="https://johncolburn.deviantart.com/">JohnColburn</a>.
+ Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small>
+ <small> This work is itself licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">Creative
+ Commons Attribution-ShareAlike 3.0 Unported License</a>.</small>
+</footer>
diff --git a/whatwg-html-pull-4369-2019-02-21/demos/canvas/blue-robot/index.html b/whatwg-html-pull-4369-2019-02-21/demos/canvas/blue-robot/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Blue Robot Demo</title>
+<style>
+  html { overflow: hidden; min-height: 200px; min-width: 380px; }
+  body { height: 200px; position: relative; margin: 8px; }
+  .buttons { position: absolute; bottom: 0px; left: 0px; margin: 4px; }
+</style>
+<canvas width="380" height="200"></canvas>
+<script>
+ var Landscape = function (context, width, height) {
+   this.offset = 0;
+   this.width = width;
+   this.advance = function (dx) {
+     this.offset += dx;
+   };
+   this.horizon = height * 0.7;
+   // This creates the sky gradient (from a darker blue to white at the bottom)
+   this.sky = context.createLinearGradient(0, 0, 0, this.horizon);
+   this.sky.addColorStop(0.0, 'rgb(55,121,179)');
+   this.sky.addColorStop(0.7, 'rgb(121,194,245)');
+   this.sky.addColorStop(1.0, 'rgb(164,200,214)');
+   // this creates the grass gradient (from a darker green to a lighter green)
+   this.earth = context.createLinearGradient(0, this.horizon, 0, height);
+   this.earth.addColorStop(0.0, 'rgb(81,140,20)');
+   this.earth.addColorStop(1.0, 'rgb(123,177,57)');
+   this.paintBackground = function (context, width, height) {
+     // first, paint the sky and grass rectangles
+     context.fillStyle = this.sky;
+     context.fillRect(0, 0, width, this.horizon);
+     context.fillStyle = this.earth;
+     context.fillRect(0, this.horizon, width, height-this.horizon);
+     // then, draw the cloudy banner
+     // we make it cloudy by having the draw text off the top of the
+     // canvas, and just having the blurred shadow shown on the canvas
+     context.save();
+     context.translate(width-((this.offset+(this.width*3.2)) % (this.width*4.0))+0, 0);
+     context.shadowColor = 'white';
+     context.shadowOffsetY = 30+this.horizon/3; // offset down on canvas
+     context.shadowBlur = '5';
+     context.fillStyle = 'white';
+     context.textAlign = 'left';
+     context.textBaseline = 'top';
+     context.font = '20px sans-serif';
+     context.fillText('WHATWG ROCKS', 10, -30); // text up above canvas
+     context.restore();
+     // then, draw the background tree
+     context.save();
+     context.translate(width-((this.offset+(this.width*0.2)) % (this.width*1.5))+30, 0);
+     context.beginPath();
+     context.fillStyle = 'rgb(143,89,2)';
+     context.lineStyle = 'rgb(10,10,10)';
+     context.lineWidth = 2;
+     context.rect(0, this.horizon+5, 10, -50); // trunk
+     context.fill();
+     context.stroke();
+     context.beginPath();
+     context.fillStyle = 'rgb(78,154,6)';
+     context.arc(5, this.horizon-60, 30, 0, Math.PI*2); // leaves
+     context.fill();
+     context.stroke();
+     context.restore();
+   };
+   this.paintForeground = function (context, width, height) {
+     // draw the box that goes in front
+     context.save();
+     context.translate(width-((this.offset+(this.width*0.7)) % (this.width*1.1))+0, 0);
+     context.beginPath();
+     context.rect(0, this.horizon - 5, 25, 25);
+     context.fillStyle = 'rgb(220,154,94)';
+     context.lineStyle = 'rgb(10,10,10)';
+     context.lineWidth = 2;
+     context.fill();
+     context.stroke();
+     context.restore();
+   };
+ };
+</script>
+<script>
+ var BlueRobot = function () {
+   this.sprites = new Image();
+   this.sprites.src = 'blue-robot.png'; // this sprite sheet has 8 cells
+   this.targetMode = 'idle';
+   this.walk = function () {
+     this.targetMode = 'walk';
+   };
+   this.stop = function () {
+     this.targetMode = 'idle';
+   };
+   this.frameIndex = {
+     'idle': [0], // first cell is the idle frame
+     'walk': [1,2,3,4,5,6], // the walking animation is cells 1-6
+     'stop': [7], // last cell is the stopping animation
+   };
+   this.mode = 'idle';
+   this.frame = 0; // index into frameIndex
+   this.tick = function () {
+     // this advances the frame and the robot
+     // the return value is how many pixels the robot has moved
+     this.frame += 1;
+     if (this.frame >= this.frameIndex[this.mode].length) {
+       // we've reached the end of this animation cycle
+       this.frame = 0;
+       if (this.mode != this.targetMode) {
+         // switch to next cycle
+         if (this.mode == 'walk') {
+           // we need to stop walking before we decide what to do next
+           this.mode = 'stop';
+         } else if (this.mode == 'stop') {
+           if (this.targetMode == 'walk')
+             this.mode = 'walk';
+           else
+             this.mode = 'idle';
+         } else if (this.mode == 'idle') {
+           if (this.targetMode == 'walk')
+             this.mode = 'walk';
+         }
+       }
+     }
+     if (this.mode == 'walk')
+       return 8;
+     return 0;
+   },
+   this.paint = function (context, x, y) {
+     if (!this.sprites.complete) return;
+     // draw the right frame out of the sprite sheet onto the canvas
+     // we assume each frame is as high as the sprite sheet
+     // the x,y coordinates give the position of the bottom center of the sprite
+     context.drawImage(this.sprites,
+                       this.frameIndex[this.mode][this.frame] * this.sprites.height, 0, this.sprites.height, this.sprites.height,
+                       x-this.sprites.height/2, y-this.sprites.height, this.sprites.height, this.sprites.height);
+   };
+ };
+</script>
+<script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ var landscape = new Landscape(context, canvas.width, canvas.height);
+ var blueRobot = new BlueRobot();
+ // paint when the browser wants us to, using requestAnimationFrame()
+ function paint() {
+   context.clearRect(0, 0, canvas.width, canvas.height);
+   landscape.paintBackground(context, canvas.width, canvas.height);
+   blueRobot.paint(context, canvas.width/2, landscape.horizon*1.1);
+   landscape.paintForeground(context, canvas.width, canvas.height);
+   requestAnimationFrame(paint);
+ }
+ paint();
+ // but tick every 100ms, so that we don't slow down when we don't paint
+ setInterval(function () {
+   var dx = blueRobot.tick();
+   landscape.advance(dx);
+ }, 100);
+</script>
+<p class="buttons">
+ <input type=button value="Walk" onclick="blueRobot.walk()">
+ <input type=button value="Stop" onclick="blueRobot.stop()">
+<footer>
+ <small> Blue Robot Player Sprite by <a href="https://johncolburn.deviantart.com/">JohnColburn</a>.
+ Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small>
+ <small> This work is itself licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">Creative
+ Commons Attribution-ShareAlike 3.0 Unported License</a>.</small>
+</footer>
diff --git a/whatwg-html-pull-4369-2019-02-21/demos/offline/clock/clock.appcache b/whatwg-html-pull-4369-2019-02-21/demos/offline/clock/clock.appcache
@@ -0,0 +1,4 @@
+CACHE MANIFEST
+clock2.html
+clock.css
+clock.js
diff --git a/whatwg-html-pull-4369-2019-02-21/demos/offline/clock/clock.css b/whatwg-html-pull-4369-2019-02-21/demos/offline/clock/clock.css
@@ -0,0 +1,2 @@
+/* clock.css */
+output { font: 2em sans-serif; }
diff --git a/whatwg-html-pull-4369-2019-02-21/demos/offline/clock/clock.js b/whatwg-html-pull-4369-2019-02-21/demos/offline/clock/clock.js
@@ -0,0 +1,4 @@
+/* clock.js */
+setInterval(function () {
+    document.getElementById('clock').value = new Date();
+}, 1000);