HTML spec build for whatwg/html#4369

mustaqahmed · Feb 21, 2019 · b9c6018 · b9c6018
1 parent cb0e0c1
commit b9c6018
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);