diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/canvas | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/canvas')
120 files changed, 2960 insertions, 0 deletions
diff --git a/layout/reftests/canvas/1074733-1-ref.html b/layout/reftests/canvas/1074733-1-ref.html new file mode 100644 index 000000000..89b87374d --- /dev/null +++ b/layout/reftests/canvas/1074733-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script type="text/javascript"> + function bodyonload() { + var canvas=document.getElementById('test'); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = 'green'; + ctx.fillRect(-1, 50, 151, 50); // left at -1 + ctx.fillStyle = 'red'; + ctx.rect(-1, 100, 151, 50); // left at -1 + ctx.fill(); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 150, 150, 50); // left at 0 + } + </script> + </head> + <body onload="bodyonload();"> + <canvas id="test" width="200" height="200"></canvas> + </body> +</html> + diff --git a/layout/reftests/canvas/1074733-1.html b/layout/reftests/canvas/1074733-1.html new file mode 100644 index 000000000..6a13bd1b9 --- /dev/null +++ b/layout/reftests/canvas/1074733-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script type="text/javascript"> + function bodyonload() { + var canvas=document.getElementById('test'); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = 'green'; + ctx.fillRect(150, 50, -151, 50); // left at -1 + ctx.fillStyle = 'red'; + ctx.rect(150, 100, -151, 50); // left at -1 + ctx.fill(); + ctx.fillStyle = 'blue'; + ctx.fillRect(150, 150, -150, 50); // left at 0 + } + </script> + </head> + <body onload="bodyonload();"> + <canvas id="test" width="200" height="200"></canvas> + </body> +</html> + diff --git a/layout/reftests/canvas/1107096-invisibles-ref.html b/layout/reftests/canvas/1107096-invisibles-ref.html new file mode 100644 index 000000000..4c6698d28 --- /dev/null +++ b/layout/reftests/canvas/1107096-invisibles-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8" /> +<script> +function draw() { + var c = document.getElementById('cc'); + var g = c.getContext('2d'); + g.fillStyle = 'red'; + g.fillRect(0, 0, 200, 200); + g.font = '24px arial, sans-serif'; + g.fillStyle = '#fff'; + g.fillText('__', 10, 30); + g.fillText('__', 10, 60); + g.fillText('__', 10, 90); + g.fillText('__', 10, 120); +} +</script> +</head> +<body onload='draw()'> +<canvas id='cc' width='200' height='200'></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1107096-invisibles.html b/layout/reftests/canvas/1107096-invisibles.html new file mode 100644 index 000000000..78f3b9856 --- /dev/null +++ b/layout/reftests/canvas/1107096-invisibles.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8" /> +<script> +function draw() { + var c = document.getElementById('cc'); + var g = c.getContext('2d'); + g.fillStyle = 'red'; + g.fillRect(0, 0, 200, 200); + g.font = '24px arial, sans-serif'; + g.fillStyle = '#fff'; + g.fillText('_\u00AD_', 10, 30); // soft hyphen + g.fillText('_\u200B_', 10, 60); // ZWSP + g.fillText('_\u200C_', 10, 90); // ZWNJ + g.fillText('_\u200D_', 10, 120);// ZWJ +} +</script> +</head> +<body onload='draw()'> +<canvas id='cc' width='200' height='200'></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1151821-1-ref.html b/layout/reftests/canvas/1151821-1-ref.html new file mode 100644 index 000000000..993fd790a --- /dev/null +++ b/layout/reftests/canvas/1151821-1-ref.html @@ -0,0 +1,20 @@ +<!docytpe html> +<html> +<head> +<meta charset="UTF-8" /> +<script> +window.onload=function(){ + +var c=document.getElementById("myCanvas").getContext("2d"); + +c.fillStyle="green"; + +c.fillRect(0, 0,100,100); + +} +</script> +</head> +<body> +<canvas id="myCanvas" height=50 width=100></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1151821-1.html b/layout/reftests/canvas/1151821-1.html new file mode 100644 index 000000000..f34cdaded --- /dev/null +++ b/layout/reftests/canvas/1151821-1.html @@ -0,0 +1,26 @@ +<!docytpe html> +<html> +<head> +<meta charset="UTF-8" /> +<script> +window.onload=function(){ + +var c=document.getElementById("myCanvas").getContext("2d"); + +c.fillStyle = "green"; + +c.fillRect(0, 0,100,100); + +c.fillStyle = "red"; +c.globalCompositeOperation = "destination-over"; +c.rect(0, 0, 100, 100); +c.clip(); +c.fillRect(0, 0, 100, 100); + +} +</script> +</head> +<body> +<canvas id="myCanvas" height=50 width=100></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1201272-1-ref.html b/layout/reftests/canvas/1201272-1-ref.html new file mode 100644 index 000000000..75c992fc9 --- /dev/null +++ b/layout/reftests/canvas/1201272-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8" /> +<script> +function draw() { +var ctx = document.getElementById('c').getContext('2d'); + +ctx.beginPath(); +ctx.arc(75, 75, 74, 0, 2 * Math.PI); +ctx.closePath(); +ctx.fill(); + +ctx.globalCompositeOperation = 'destination-out'; +ctx.beginPath(); +ctx.arc(75, 75, 40, 0, 2 * Math.PI); +ctx.closePath(); +ctx.fill(); + +ctx.globalCompositeOperation = 'source-over'; +ctx.lineWidth = 10; +ctx.strokeStyle = 'green'; +ctx.beginPath(); +ctx.arc(75, 75, 40, 0, 2 * Math.PI); +ctx.closePath(); +ctx.stroke(); +} +</script> +</head> +<body onload='draw()' style='background: white;'> +<canvas id='c' width='200' height='200'></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1201272-1.html b/layout/reftests/canvas/1201272-1.html new file mode 100644 index 000000000..e9a7a2834 --- /dev/null +++ b/layout/reftests/canvas/1201272-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8" /> +<script> +function draw() { +var ctx = document.getElementById('c').getContext('2d'); + +ctx.beginPath(); +ctx.arc(75, 75, 74, 0, 2 * Math.PI); +ctx.closePath(); +ctx.fill(); + +ctx.globalCompositeOperation = 'destination-out'; +ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; +ctx.shadowBlur = 3; +ctx.beginPath(); +ctx.arc(75, 75, 40, 0, 2 * Math.PI); +ctx.closePath(); +ctx.fill(); +ctx.shadowBlur = 0; + +ctx.globalCompositeOperation = 'source-over'; +ctx.lineWidth = 10; +ctx.strokeStyle = 'green'; +ctx.beginPath(); +ctx.arc(75, 75, 40, 0, 2 * Math.PI); +ctx.closePath(); +ctx.stroke(); +} +</script> +</head> +<body onload='draw()' style='background: white;'> +<canvas id='c' width='200' height='200'></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1224976-1-ref.html b/layout/reftests/canvas/1224976-1-ref.html new file mode 100644 index 000000000..24b18fad3 --- /dev/null +++ b/layout/reftests/canvas/1224976-1-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="background:black; width:10px; height:10px"></div> diff --git a/layout/reftests/canvas/1224976-1.html b/layout/reftests/canvas/1224976-1.html new file mode 100644 index 000000000..63badf019 --- /dev/null +++ b/layout/reftests/canvas/1224976-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<canvas id="c"></canvas> +<script> +var ctx = c.getContext('2d'); +ctx.scale(0,1); +ctx.fillStyle = "black"; +ctx.fillRect(0, 0, 10, 10); +ctx.setTransform(1, 0, 0, 1, 0, 0); +ctx.fillRect(0, 0, 10, 10); +</script> diff --git a/layout/reftests/canvas/1238795-1-ref.html b/layout/reftests/canvas/1238795-1-ref.html new file mode 100644 index 000000000..b49a08640 --- /dev/null +++ b/layout/reftests/canvas/1238795-1-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function draw() { + var c = document.getElementById('c').getContext('2d'); + + c.fillStyle = 'red'; + c.fillRect(0, 0, 200, 200); + + c.fillStyle = 'lime'; + c.fillRect(0, 0, 100, 100); + } + </script> + </head> + <body onload="draw();"> + <canvas id='c' width='200' height='200'></canvas> + </body> +</html> diff --git a/layout/reftests/canvas/1238795-1.html b/layout/reftests/canvas/1238795-1.html new file mode 100644 index 000000000..8431d8e01 --- /dev/null +++ b/layout/reftests/canvas/1238795-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function draw() { + var c = document.getElementById('c').getContext('2d'); + var img = document.getElementById("img"); + + c.fillStyle = 'red'; + c.fillRect(0, 0, 200, 200); + + c.rect(0, 0, 100, 100); + c.clip(); + + c.drawImage(img, 0, 0, 200, 200); + } + </script> + </head> + <body onload="draw();"> + <canvas id='c' width='200' height='200'></canvas> + <img id="img" src="image_green-16x16.png" style="display:none"> + </body> +</html> diff --git a/layout/reftests/canvas/1303534-1-ref.html b/layout/reftests/canvas/1303534-1-ref.html new file mode 100644 index 000000000..d7ee6c756 --- /dev/null +++ b/layout/reftests/canvas/1303534-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function draw() { + var c = document.getElementById('c').getContext('2d'); + + c.fillStyle = 'lime'; + c.fillRect(0, 0, 200, 100); + } + </script> + </head> + <body onload="draw();"> + <canvas id='c' width='200' height='100'></canvas> + </body> +</html> diff --git a/layout/reftests/canvas/1303534-1.html b/layout/reftests/canvas/1303534-1.html new file mode 100644 index 000000000..e937c6fcf --- /dev/null +++ b/layout/reftests/canvas/1303534-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function draw() { + var c = document.getElementById('c').getContext('2d'); + var img = document.getElementById("img"); + + c.fillStyle = 'lime'; + c.fillRect(0, 0, 200, 100); + + c.rect(0, 0, 200, 100); + c.clip(); + + c.globalCompositeOperation = "multiply"; + c.fillStyle = 'rgb(255, 255, 255)'; + c.fillRect(0, 0, 200, 100); + } + </script> + </head> + <body onload="draw();"> + <canvas id='c' width='200' height='100'></canvas> + </body> +</html> diff --git a/layout/reftests/canvas/1304353-text-global-alpha-1-ref.html b/layout/reftests/canvas/1304353-text-global-alpha-1-ref.html new file mode 100644 index 000000000..d9ed082d1 --- /dev/null +++ b/layout/reftests/canvas/1304353-text-global-alpha-1-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> + +<script> +function do_test() { + var canvas = document.getElementById("test"); + var ctx = canvas.getContext("2d"); + + var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); + g.addColorStop(0, "red"); + g.addColorStop(1, "green"); + + ctx.fillStyle = g; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.fillStyle = "white"; + ctx.font = "bold 24px sans-serif"; + + ctx.fillText('globalAlpha = 1.0', 20, 40); + + // for reference, use a fill color with alpha instead of global alpha + ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; + ctx.fillText('globalAlpha = 0.5', 20, 80); + + ctx.fillStyle = "rgba(255, 255, 255, 0.2)"; + ctx.fillText('globalAlpha = 0.2', 20, 120); +}; +</script> + +</head> + +<body onload="do_test()"> + +<canvas id="test"></canvas> + +</body> +</html> diff --git a/layout/reftests/canvas/1304353-text-global-alpha-1.html b/layout/reftests/canvas/1304353-text-global-alpha-1.html new file mode 100644 index 000000000..bb38c0180 --- /dev/null +++ b/layout/reftests/canvas/1304353-text-global-alpha-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> + +<script> +function do_test() { + var canvas = document.getElementById("test"); + var ctx = canvas.getContext("2d"); + + var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); + g.addColorStop(0, "red"); + g.addColorStop(1, "green"); + + ctx.fillStyle = g; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.fillStyle = "white"; + ctx.font = "bold 24px sans-serif"; + + ctx.fillText('globalAlpha = 1.0', 20, 40); + + ctx.globalAlpha = 0.5; + ctx.fillText('globalAlpha = 0.5', 20, 80); + + ctx.globalAlpha = 0.2; + ctx.fillText('globalAlpha = 0.2', 20, 120); +}; +</script> + +</head> + +<body onload="do_test()"> + +<canvas id="test"></canvas> + +</body> +</html> diff --git a/layout/reftests/canvas/1304353-text-global-alpha-2-ref.html b/layout/reftests/canvas/1304353-text-global-alpha-2-ref.html new file mode 100644 index 000000000..66c4d8062 --- /dev/null +++ b/layout/reftests/canvas/1304353-text-global-alpha-2-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> + +<script> +function do_test() { + var canvas = document.getElementById("test"); + var ctx = canvas.getContext("2d"); + + var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); + g.addColorStop(0, "red"); + g.addColorStop(1, "green"); + + ctx.fillStyle = g; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.strokeStyle = "white"; + ctx.font = "bold 24px sans-serif"; + + ctx.strokeText('globalAlpha = 1.0', 20, 40); + + // for reference, use a stroke color with alpha instead of global alpha + ctx.strokeStyle = "rgba(255, 255, 255, 0.5)"; + ctx.strokeText('globalAlpha = 0.5', 20, 80); + + ctx.strokeStyle = "rgba(255, 255, 255, 0.2)"; + ctx.strokeText('globalAlpha = 0.2', 20, 120); +}; +</script> + +</head> + +<body onload="do_test()"> + +<canvas id="test"></canvas> + +</body> +</html> diff --git a/layout/reftests/canvas/1304353-text-global-alpha-2.html b/layout/reftests/canvas/1304353-text-global-alpha-2.html new file mode 100644 index 000000000..1957fda7c --- /dev/null +++ b/layout/reftests/canvas/1304353-text-global-alpha-2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> + +<script> +function do_test() { + var canvas = document.getElementById("test"); + var ctx = canvas.getContext("2d"); + + var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); + g.addColorStop(0, "red"); + g.addColorStop(1, "green"); + + ctx.fillStyle = g; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.strokeStyle = "white"; + ctx.font = "bold 24px sans-serif"; + + ctx.strokeText('globalAlpha = 1.0', 20, 40); + + ctx.globalAlpha = 0.5; + ctx.strokeText('globalAlpha = 0.5', 20, 80); + + ctx.globalAlpha = 0.2; + ctx.strokeText('globalAlpha = 0.2', 20, 120); +}; +</script> + +</head> + +<body onload="do_test()"> + +<canvas id="test"></canvas> + +</body> +</html> diff --git a/layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html b/layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html new file mode 100644 index 000000000..0123c3706 --- /dev/null +++ b/layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<script> +function test() { + var c = document.getElementById("c"); + var ctx = c.getContext("2d"); + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, 300, 75); + ctx.font = "36px sans-serif"; + ctx.fillStyle = "white"; + ctx.fillText("HELLO", 50, 50); + ctx.fillStyle = "green"; + ctx.fillText("WORLD", 50, 120); +} +</script> +</head> +<body onload="test()"> +<canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas> +</body> +</html diff --git a/layout/reftests/canvas/1304353-text-global-composite-op-1.html b/layout/reftests/canvas/1304353-text-global-composite-op-1.html new file mode 100644 index 000000000..cb7e00ae7 --- /dev/null +++ b/layout/reftests/canvas/1304353-text-global-composite-op-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<script> +function test() { + var c = document.getElementById("c"); + var ctx = c.getContext("2d"); + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, 300, 150); + ctx.fillStyle = "red"; + ctx.font = "36px sans-serif"; + ctx.globalCompositeOperation = "destination-out"; + ctx.fillText("HELLO", 50, 50); + ctx.rect(0, 75, 300, 75); + ctx.clip(); + ctx.globalCompositeOperation = "destination-atop"; + ctx.fillText("WORLD", 50, 120); +} +</script> +</head> +<body onload="test()"> +<canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas> +</body> +</html diff --git a/layout/reftests/canvas/672646-alpha-radial-gradient-ref.html b/layout/reftests/canvas/672646-alpha-radial-gradient-ref.html new file mode 100644 index 000000000..90dcdff63 --- /dev/null +++ b/layout/reftests/canvas/672646-alpha-radial-gradient-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<head> + <style> + body { + background-color: blue; + } + </style> + +<body> + <canvas id="mycanvas" width="200" height="200"></canvas> + + <script type="text/javascript"> + var cx = document.getElementById('mycanvas').getContext('2d'); + cx.beginPath(); + cx.arc(100, 100, 80, 0, Math.PI*2, true); + cx.closePath(); + cx.fillStyle = "white"; + cx.fill(); + </script> diff --git a/layout/reftests/canvas/672646-alpha-radial-gradient.html b/layout/reftests/canvas/672646-alpha-radial-gradient.html new file mode 100644 index 000000000..4969a3250 --- /dev/null +++ b/layout/reftests/canvas/672646-alpha-radial-gradient.html @@ -0,0 +1,24 @@ +<!doctype html> +<head> + <style> + body { + background-color: blue; + } + </style> + +<body> + <canvas id="mycanvas" width="200" height="200"></canvas> + + <script type="text/javascript"> + var cx = document.getElementById('mycanvas').getContext('2d'); + var g = cx.createRadialGradient(100, 100, 50, 100, 100, 75); + g.addColorStop(0, 'rgba(100%, 100%, 0%, 0.5)'); + g.addColorStop(1, 'rgba(100%, 100%, 0%, 0)'); + cx.fillStyle = g; + cx.fillRect(0, 0, 200, 200); + cx.beginPath(); + cx.arc(100, 100, 80, 0, Math.PI*2, true); + cx.closePath(); + cx.fillStyle = "white"; + cx.fill(); + </script> diff --git a/layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html new file mode 100644 index 000000000..f90e61da8 --- /dev/null +++ b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html @@ -0,0 +1,11 @@ +<body bgcolor="orange"> + <canvas width="300" height="300" id="testcase-canvas-dest"></canvas> + <script> + const kTransparent = "rgba(0%, 100%, 100%, 0.5)"; + + cx2 = document.getElementById('testcase-canvas-dest').getContext('2d'); + cx2.fillStyle = kTransparent; + cx2.fillRect(0,0,100,20); + </script> + +</window> diff --git a/layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html new file mode 100644 index 000000000..7d2ba0aa3 --- /dev/null +++ b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html @@ -0,0 +1,36 @@ +<body bgcolor="orange"> + <canvas width="300" height="300" id="testcase-canvas" style="display:none"></canvas> + <canvas width="300" height="300" id="testcase-canvas-dest"></canvas> + <script> + const kShadow = "rgba(00%, 0%, 0%, 1)"; + const kTransparent = "rgba(0%, 100%, 100%, 0.5)"; + + var cx, g; + + cx = document.getElementById('testcase-canvas').getContext('2d'); + + cx.fillStyle = kShadow; + cx.fillRect(100, 50, 150, 50); + + g = cx.createLinearGradient(0, 50, 0, 0); + g.addColorStop(0, kShadow); + g.addColorStop(0.2, kTransparent); + g.addColorStop(1, kTransparent); + cx.fillStyle = g; + cx.fillRect(100, 0, 150, 50); + + g = cx.createRadialGradient(100, 100, 50, 100, 100, 100); + g.addColorStop(0, kShadow); + g.addColorStop(0.2, kTransparent); + g.addColorStop(1, kTransparent); + cx.fillStyle = g; + cx.beginPath(); + cx.arc(100, 100, 100, Math.PI * 0.5, Math.PI * 1.5); + cx.fill(); + + cx2 = document.getElementById('testcase-canvas-dest').getContext('2d'); + // draw a chunk of the gradients from above onto testcase-canvas-dest + cx2.drawImage(document.getElementById('testcase-canvas'),45,20, 100,20 ,0,0, 100,20); + </script> + +</window> diff --git a/layout/reftests/canvas/693610-1-notref.html b/layout/reftests/canvas/693610-1-notref.html new file mode 100644 index 000000000..6f2642da1 --- /dev/null +++ b/layout/reftests/canvas/693610-1-notref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> +<p><canvas width="500" height="200" id="c"></canvas></p> +<script type="text/javascript"> +const t1 = 'ä½ å¥½'; +const t2 = 'Hello'; +var c = document.getElementById('c').getContext('2d'); +c.font = 'serif'; +c.fontSize = '15'; +c.fillText(t1, 10, 100); +c.fillText(t2, 10, 100); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/693610-1.html b/layout/reftests/canvas/693610-1.html new file mode 100644 index 000000000..77745ae5f --- /dev/null +++ b/layout/reftests/canvas/693610-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> +<p><canvas width="500" height="200" id="c"></canvas></p> +<script type="text/javascript"> +const t = 'ä½ å¥½Hello'; +var c = document.getElementById('c').getContext('2d'); +c.font = 'serif'; +c.fontSize = '15'; +c.fillText(t, 10, 100); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/726951-shadow-clips-ref.html b/layout/reftests/canvas/726951-shadow-clips-ref.html new file mode 100644 index 000000000..b7be1ec0c --- /dev/null +++ b/layout/reftests/canvas/726951-shadow-clips-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<head> + +<body> + <canvas id="mycanvas" width="200" height="200"></canvas> + + <script type="text/javascript"> + var cx = document.getElementById('mycanvas').getContext('2d');
+ cx.beginPath();
+ cx.rect(10, 10, 50, 50);
+ cx.clip();
+ cx.beginPath();
+ cx.rect(0, 0, 50, 50);
+ cx.shadowColor = "black";
+ cx.shadowOffsetX = 10;
+ cx.shadowOffsetY = 10;
+ cx.fill(); + </script> diff --git a/layout/reftests/canvas/726951-shadow-clips.html b/layout/reftests/canvas/726951-shadow-clips.html new file mode 100644 index 000000000..b14e0c307 --- /dev/null +++ b/layout/reftests/canvas/726951-shadow-clips.html @@ -0,0 +1,18 @@ +<!doctype html> +<head> + +<body> + <canvas id="mycanvas" width="200" height="600"></canvas> + + <script type="text/javascript"> + var cx = document.getElementById('mycanvas').getContext('2d');
+ cx.beginPath();
+ cx.rect(10, 10, 50, 50);
+ cx.clip();
+ cx.beginPath();
+ cx.rect(0, 0, 50, 50);
+ cx.shadowColor = "black";
+ cx.shadowOffsetX = 10;
+ cx.shadowOffsetY = 10;
+ cx.fill(); + </script> diff --git a/layout/reftests/canvas/749467-1-ref.html b/layout/reftests/canvas/749467-1-ref.html new file mode 100644 index 000000000..fe3aa32d6 --- /dev/null +++ b/layout/reftests/canvas/749467-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> +<p><canvas width="500" height="200" id="c"></canvas></p> +<script type="text/javascript">
+
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
+
+ ctx.beginPath();
+
+ ctx.lineWidth = 20;
+ ctx.strokeStyle = 'rgb(0,0,0)';
+
+ ctx.moveTo(10, 30);
+ ctx.lineTo(50, 50);
+
+ ctx.stroke();
+
+ ctx.lineTo(80, 80);
+ ctx.stroke(); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/749467-1.html b/layout/reftests/canvas/749467-1.html new file mode 100644 index 000000000..8b2bbaa2d --- /dev/null +++ b/layout/reftests/canvas/749467-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> +<p><canvas width="500" height="200" id="c"></canvas></p> +<script type="text/javascript">
+
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
+
+ ctx.beginPath();
+
+ ctx.lineWidth = 20;
+ ctx.strokeStyle = 'rgb(0,0,0)';
+
+ ctx.save();
+
+ ctx.moveTo(10, 30);
+ ctx.lineTo(50, 50);
+
+ ctx.stroke();
+ ctx.restore();
+
+ ctx.lineTo(80, 80);
+ ctx.stroke(); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/784573-1-ref.html b/layout/reftests/canvas/784573-1-ref.html new file mode 100644 index 000000000..d0a0939cd --- /dev/null +++ b/layout/reftests/canvas/784573-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> +<p><canvas width="100" height="100" id="c"></canvas></p> +<script type="text/javascript"> +var c = document.getElementById('c').getContext('2d'); + +c.shadowColor = '#f00'; +c.shadowBlur = 4; +c.lineWidth = 2; + +c.moveTo(80, 40); +c.lineTo(50, 70); +c.lineTo(20, 40); +c.lineTo(50, 10); +c.closePath(); +c.stroke(); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/784573-1.html b/layout/reftests/canvas/784573-1.html new file mode 100644 index 000000000..cc2534ce8 --- /dev/null +++ b/layout/reftests/canvas/784573-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + This tests that paths are stored in device space. This means that changing + the transform does not move the points already drawn. + --> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> +<p><canvas width="100" height="100" id="c"></canvas></p> +<script type="text/javascript"> +var c = document.getElementById('c').getContext('2d'); + +c.shadowColor = '#f00'; +c.shadowBlur = 4; +c.lineWidth = 2; + +c.translate(50, 40); + +var d = 30; +c.beginPath(); +c.moveTo(d, 0); +for (var n = 0; n < 3; n++) { + c.rotate(3.14159 / 2); + c.lineTo(d, 0); +} +c.closePath(); +c.stroke(); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/802658-1-ref.html b/layout/reftests/canvas/802658-1-ref.html new file mode 100644 index 000000000..c6330ce4d --- /dev/null +++ b/layout/reftests/canvas/802658-1-ref.html @@ -0,0 +1,25 @@ +<!docytpe html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<script>
+window.onload=function(){
+
+var c=document.getElementById("myCanvas").getContext("2d");
+
+c.font="35px sans-serif";
+
+c.shadowBlur=60;
+c.shadowColor="blue";
+
+c.fillText("ABCDEFG",100,100);
+
+
+
+}
+</script>
+</head>
+<body>
+<canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/802658-1.html b/layout/reftests/canvas/802658-1.html new file mode 100644 index 000000000..20aeb9b55 --- /dev/null +++ b/layout/reftests/canvas/802658-1.html @@ -0,0 +1,26 @@ +<!docytpe html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<script>
+window.onload=function(){
+
+var c=document.getElementById("myCanvas").getContext("2d");
+
+c.font="35px sans-serif";
+
+c.translate(100,100);
+c.shadowBlur=60;
+c.shadowColor="blue";
+
+c.fillText("ABCDEFG",0,0);
+
+
+
+}
+</script>
+</head>
+<body>
+<canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas>
+</body>
+</html>
\ No newline at end of file diff --git a/layout/reftests/canvas/ctm-1-ref.html b/layout/reftests/canvas/ctm-1-ref.html new file mode 100644 index 000000000..b364779e0 --- /dev/null +++ b/layout/reftests/canvas/ctm-1-ref.html @@ -0,0 +1,18 @@ +<html> +<head> + <script type="text/javascript"> +window.onload = function() { + var ctx = document.getElementById("c1").getContext("2d"); + + ctx.setTransform(10, 0, 0, 1, 0, 0); + ctx.fillRect(1, 1, 10, 10); + + ctx.setTransform(1, 0, 0, 10, 0, 0); + ctx.fillRect(150, 1, 10, 10); +} + </script> +</head> +<body style="padding: 0px; margin: 0px;"> + <div><canvas id="c1" width="300" height="300"></canvas></div> +</body> +</html> diff --git a/layout/reftests/canvas/ctm-1.html b/layout/reftests/canvas/ctm-1.html new file mode 100644 index 000000000..1802820a5 --- /dev/null +++ b/layout/reftests/canvas/ctm-1.html @@ -0,0 +1,18 @@ +<html> +<head> + <script type="text/javascript"> +window.onload = function() { + var ctx = document.getElementById("c1").getContext("2d"); + + ctx.mozCurrentTransform = [ 10, 0, 0, 1, 0, 0 ]; + ctx.fillRect(1, 1, 10, 10); + + ctx.mozCurrentTransformInverse = [ 1, 0, 0, .1, 0, 0 ]; + ctx.fillRect(150, 1, 10, 10); +} + </script> +</head> +<body style="padding: 0px; margin: 0px;"> + <div><canvas id="c1" width="300" height="300"></canvas></div> +</body> +</html> diff --git a/layout/reftests/canvas/ctm-sanity.html b/layout/reftests/canvas/ctm-sanity.html new file mode 100644 index 000000000..19990f24a --- /dev/null +++ b/layout/reftests/canvas/ctm-sanity.html @@ -0,0 +1,83 @@ +<html> +<head> + <script type="text/javascript"> + +function assert(cond, msg) { if (!cond) { throw msg; } } + +function isSameTM(m1, m2) { + // XXX this is probably the ugliest possible way to write this function, + // but it's intended to be lowest-common-denominator + if (!(m1.length === 6 && m1.length === m2.length)) { + return false; + } + for (var i = 0; i < m1.length; ++i) { + if (m1[i] !== m2[i]) { + return false; + } + } + return true; +} + +window.onload = function() { + var IM = [ 1, 0, 0, 1, 0, 0 ]; + + try { + var ctx = document.getElementById("c1").getContext("2d"); + + assert(isSameTM(IM, ctx.mozCurrentTransform), + "currentTransform is identity by default"); + assert(isSameTM(IM, ctx.mozCurrentTransformInverse), + "currentTransformInverse is identity by default"); + + var m = [ 1, 2, 3, 4, 5, 6 ]; + ctx.mozCurrentTransform = m; + assert(isSameTM(m, ctx.mozCurrentTransform), + "currentTransform successfully set"); + var badVals = [ -1, + "string", + { obj: true }, + [ "array of string" ], + [ -1 ], + [ "string", 1, 2, 3, 4, 5 ], + [ { obj: true }, 1, 2, 3, 4, 5 ], + ]; + for (var i = 0; i < badVals.length; ++i) { + var error = false; + try { ctx.mozCurrentTransform = badVals[i]; } + catch(e) { error = true; } + assert(error && isSameTM(m, ctx.mozCurrentTransform), + "Expected |currentTransform = "+ badVals[i] +"| to throw exception and not change .currentTransform"); + + error = false; + try { ctx.mozCurrentTransformInverse = badVals[i]; } + catch(e) { error = true; } + assert(error && isSameTM(m, ctx.mozCurrentTransform), + "Expected |currentTransformInverse = "+ badVals[i] +"| to throw exception and not change .currentTransform"); + } + ctx.mozCurrentTransform = IM; + + var noopVals = [ [ Number.NaN, 1, 2, 3, 4, 5 ], + [ Infinity, 1, 2, 3, 4, 5 ], + ]; + for (var i = 0; i < noopVals.length; ++i) { + ctx.mozCurrentTransform = noopVals[i]; + assert(isSameTM(ctx.mozCurrentTransform, IM), + "Illegal float values result in no-ops (sigh)"); + } + ctx.mozCurrentTransform = IM; + + ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]); + assert(isSameTM(ctx.mozCurrentTransform, m), + "setTransform() updates currentTransform"); + } catch (e) { + document.body.innerHTML = "FAIL: "+ e.toString(); + return; + } + document.body.innerHTML = "Pass"; +} + </script> +</head> +<body> + <div><canvas id="c1" width="300" height="300"></canvas></div> +</body> +</html> diff --git a/layout/reftests/canvas/ctm-singular-sanity.html b/layout/reftests/canvas/ctm-singular-sanity.html new file mode 100644 index 000000000..7080ce7c3 --- /dev/null +++ b/layout/reftests/canvas/ctm-singular-sanity.html @@ -0,0 +1,53 @@ +<html> +<head> + <script type="text/javascript"> + +function assert(cond, msg) { if (!cond) { throw msg; } } + +function isSameTM(m1, m2) { + // XXX this is probably the ugliest possible way to write this function, + // but it's intended to be lowest-common-denominator + if (!(m1.length === 6 && m1.length === m2.length)) { + return false; + } + for (var i = 0; i < m1.length; ++i) { + if (m1[i] !== m2[i]) { + return false; + } + } + return true; +} + +window.onload = function() { + var IM = [ 1, 0, 0, 1, 0, 0 ]; + + try { + var ctx = document.getElementById("c1").getContext("2d"); + + var singular = [ 0, 0, 0, 0, 0, 0 ]; + ctx.mozCurrentTransform = singular; + assert(isSameTM(singular, ctx.mozCurrentTransform), + "Expected setting CTM to a singular matrix to work"); + var inv = ctx.mozCurrentTransformInverse; + assert(!isSameTM(inv, inv), + "Expected to get back matrix of NaN's from currentTransformInverse"); + ctx.mozCurrentTransform = IM; + + var m = [ 1, 2, 3, 4, 5, 6 ]; + ctx.mozCurrentTransform = m; + ctx.mozCurrentTransformInverse = singular; + assert(isSameTM(m, ctx.mozCurrentTransform), + "Setting currentTransformInverse to a singular matrix is a no-op"); + ctx.mozCurrentTransform = IM; + } catch (e) { + document.body.innerHTML = "FAIL: "+ e.toString(); + return; + } + document.body.innerHTML = "Pass"; +} + </script> +</head> +<body> + <div><canvas id="c1" width="300" height="300"></canvas></div> +</body> +</html> diff --git a/layout/reftests/canvas/dash-1-ref.svg b/layout/reftests/canvas/dash-1-ref.svg new file mode 100644 index 000000000..b1c3b967f --- /dev/null +++ b/layout/reftests/canvas/dash-1-ref.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + width="300" height="300" viewBox="0 0 300 300" > + <style> + line { stroke: black; stroke-width: 5px; } + </style> + + <line x1="50px" y1="50px" x2="250px" y2="50px" + style="stroke-dasharray: 5px, 10px"> + </line> + + <line x1="50px" y1="100px" x2="250px" y2="100px" + style="stroke-dasharray: 5px, 10px; stroke-dashoffset: 5px;"> + </line> + <line x1="50px" y1="150px" x2="250px" y2="150px" + style="stroke-dasharray: 5px; stroke-dashoffset: 5px;"> + </line> + +</svg> diff --git a/layout/reftests/canvas/dash-1.html b/layout/reftests/canvas/dash-1.html new file mode 100644 index 000000000..28b228e93 --- /dev/null +++ b/layout/reftests/canvas/dash-1.html @@ -0,0 +1,34 @@ +<html> +<head> + <script type="text/javascript"> +window.onload = function() { + var ctx = document.getElementById("c1").getContext("2d"); + + ctx.lineWidth = 5; + + ctx.setLineDash([ 5, 10 ]); // 5 on, 10 off + ctx.moveTo(50, 50); + ctx.lineTo(250, 50); + ctx.stroke(); + ctx.beginPath(); + + ctx.lineDashOffset = 5; + ctx.moveTo(50, 100); + ctx.lineTo(250, 100); + ctx.stroke(); + ctx.beginPath(); + + ctx.lineDashOffset = 5; + ctx.setLineDash([ 5 ]); // 5 on, 5 off + ctx.moveTo(50, 150); + ctx.lineTo(250, 150); + ctx.stroke(); + ctx.beginPath(); + +} + </script> +</head> +<body style="padding: 0px; margin: 0px;"> + <div><canvas id="c1" width="300" height="300"></canvas></div> +</body> +</html> diff --git a/layout/reftests/canvas/dash-sanity.html b/layout/reftests/canvas/dash-sanity.html new file mode 100644 index 000000000..779fbdeee --- /dev/null +++ b/layout/reftests/canvas/dash-sanity.html @@ -0,0 +1,98 @@ +<html> +<head> + <script type="text/javascript"> +function assert(cond, msg) { if (!cond) { throw msg; } } +window.onload = function() { + try { + var ctx = document.getElementById("c1").getContext("2d"); + + assert(0 === ctx.getLineDash().length, + "Default dash is [ ] (none)"); + assert(0 === ctx.lineDashOffset, + "Default dashOffset is 0 (none)"); + + ctx.setLineDash([ 2 ]); + assert(2 === ctx.getLineDash().length && + 2 === ctx.getLineDash()[0] && + 2 === ctx.getLineDash()[1], + "dash = [ 2 ] works"); + ctx.setLineDash([ 2 ]); + ctx.setLineDash([ ]); + assert(0 === ctx.getLineDash().length, + "dash = [ ] works"); + ctx.setLineDash([ 2 ]); + ctx.setLineDash([ 0, 0, 0 ]); + assert(6 === ctx.getLineDash().length, + 0 === ctx.getLineDash()[0] && + 0 === ctx.getLineDash()[1] && + 0 === ctx.getLineDash()[2] && + 0 === ctx.getLineDash()[3] && + 0 === ctx.getLineDash()[4] && + 0 === ctx.getLineDash()[5], + "dash = [ 0, 0, 0 ] works"); + + ctx.setLineDash([ 2 ]); + assert(0 === ctx.lineDashOffset, "dashOffset is 0"); + ctx.lineDashOffset = 1; + assert(1 === ctx.lineDashOffset, "Setting dashOffset succeeded"); + ctx.setLineDash([ ]); + assert(1 === ctx.lineDashOffset, "Changing dash does not reset dashOffset"); + + // NB: might want to add a |.dash = number| special case, + // don't test that it fails here. Might also want to add a + // |.dash = [0]| special case for resetting, so don't test + // that either. + var badVals = [ -1, + null, + undefined, + "", + "string", + { obj: true }, + function() {} + ] + ctx.setLineDash([ 2 ]); + for (var i = 0; i < badVals.length; ++i) { + var error = false; + try { ctx.setLineDash(badVals[i]); } + catch(e) { error = true; } + assert(error && + 2 === ctx.getLineDash().length && + 2 === ctx.getLineDash()[0] && + 2 === ctx.getLineDash()[1], + "Expected setLineDash("+ badVals[i] +") to throw exception and not change dash"); + } + + var ignoredVals = [ + [ "array of string" ], + [ -1 ], + [ 2, "string" ], + ]; + ctx.setLineDash([ 2 ]); + for (var i = 0; i < ignoredVals.length; ++i) { + ctx.setLineDash(ignoredVals[i]); + assert(2 === ctx.getLineDash().length && + 2 === ctx.getLineDash()[0] && + 2 === ctx.getLineDash()[1], + "Expected |setLineDash(" + ignoredVals[i] + ") to not change dash"); + } + + ctx.setLineDash([ 2 ]); + ctx.save(); + ctx.setLineDash([ 1, 1, 1, 1 ]); + ctx.restore(); + assert(2 === ctx.getLineDash().length && + 2 === ctx.getLineDash()[0] && + 2 === ctx.getLineDash()[1], + "dash was saved then restored"); + } catch (e) { + document.body.innerHTML = "FAIL: "+ e.toString(); + return; + } + document.body.innerHTML = "Pass"; +} + </script> +</head> +<body> + <div><canvas id="c1" width="300" height="300"></canvas></div> +</body> +</html> diff --git a/layout/reftests/canvas/default-size-ref.html b/layout/reftests/canvas/default-size-ref.html new file mode 100644 index 000000000..641497401 --- /dev/null +++ b/layout/reftests/canvas/default-size-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<canvas style="border: 1px solid black;" width="300" height="150"> +</canvas> +</body> +</html> diff --git a/layout/reftests/canvas/default-size.html b/layout/reftests/canvas/default-size.html new file mode 100644 index 000000000..32c14bdcc --- /dev/null +++ b/layout/reftests/canvas/default-size.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<canvas style="border: 1px solid black;"> +</canvas> +</body> +</html> diff --git a/layout/reftests/canvas/empty-transaction-1-ref.html b/layout/reftests/canvas/empty-transaction-1-ref.html new file mode 100644 index 000000000..37eb544ef --- /dev/null +++ b/layout/reftests/canvas/empty-transaction-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:black; width:100px; height:100px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/empty-transaction-1.html b/layout/reftests/canvas/empty-transaction-1.html new file mode 100644 index 000000000..36d34ebe9 --- /dev/null +++ b/layout/reftests/canvas/empty-transaction-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<canvas style="display:block" id="c" width="100" height="100"></canvas>
+<script>
+var ctx = document.getElementById("c").getContext("2d");
+function doTest() {
+ document.documentElement.removeAttribute("class");
+ ctx.fillRect(0, 0, 100, 100);
+}
+window.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-1.html b/layout/reftests/canvas/evenodd-fill-1.html new file mode 100644 index 000000000..084ddbcb6 --- /dev/null +++ b/layout/reftests/canvas/evenodd-fill-1.html @@ -0,0 +1,15 @@ +<html>
+<head>
+ <script type="text/javascript">
+window.onload = function() {
+ var ctx = document.getElementById("c1").getContext("2d");
+ ctx.rect(50, 50, 200, 200);
+ ctx.rect(100, 100, 100, 100);
+ ctx.fill("evenodd");
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-2.html b/layout/reftests/canvas/evenodd-fill-2.html new file mode 100644 index 000000000..ccbe0dabf --- /dev/null +++ b/layout/reftests/canvas/evenodd-fill-2.html @@ -0,0 +1,19 @@ +<html>
+<head>
+ <script type="text/javascript">
+window.onload = function() {
+ var ctx = document.getElementById("c1").getContext("2d");
+ ctx.mozFillRule = "evenodd";
+ ctx.rect(50, 50, 200, 200);
+ ctx.rect(100, 100, 100, 100);
+ ctx.clip();
+
+ ctx.beginPath();
+ ctx.fillRect(0, 0, 300, 300);
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-3.html b/layout/reftests/canvas/evenodd-fill-3.html new file mode 100644 index 000000000..f07bb53c5 --- /dev/null +++ b/layout/reftests/canvas/evenodd-fill-3.html @@ -0,0 +1,26 @@ +<html>
+<head>
+ <script type="text/javascript">
+window.onload = function() {
+ var ctx = document.getElementById("c1").getContext("2d");
+
+ ctx.moveTo(50, 50);
+ ctx.lineTo(250, 50);
+ ctx.lineTo(250, 250);
+ ctx.lineTo(50, 250);
+ ctx.lineTo(50, 50);
+
+ ctx.moveTo(100, 100);
+ ctx.lineTo(100, 200);
+ ctx.lineTo(200, 200);
+ ctx.lineTo(200, 100);
+ ctx.lineTo(100, 100);
+
+ ctx.fill("evenodd");
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-ref.html b/layout/reftests/canvas/evenodd-fill-ref.html new file mode 100644 index 000000000..0a9a0f3f3 --- /dev/null +++ b/layout/reftests/canvas/evenodd-fill-ref.html @@ -0,0 +1,17 @@ +<html>
+<head>
+ <script type="text/javascript">
+window.onload = function() {
+ var ctx = document.getElementById("c1").getContext("2d");
+ ctx.rect(50, 50, 200, 50);
+ ctx.rect(50, 50, 50, 200);
+ ctx.rect(250, 250, -200, -50);
+ ctx.rect(250, 250, -50, -200);
+ ctx.fill();
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-sanity.html b/layout/reftests/canvas/evenodd-fill-sanity.html new file mode 100644 index 000000000..863a79c14 --- /dev/null +++ b/layout/reftests/canvas/evenodd-fill-sanity.html @@ -0,0 +1,43 @@ +<html>
+<head>
+ <script type="text/javascript">
+function assert(cond, msg) { if (!cond) { throw msg; } }
+window.onload = function() {
+ try {
+ var ctx = document.getElementById("c1").getContext("2d");
+
+ assert("nonzero" == ctx.mozFillRule,
+ "Default fillRule is 'nonzero'");
+
+ ctx.mozFillRule = "evenodd";
+ assert("evenodd" == ctx.mozFillRule,
+ "fillRule understands 'evenodd'");
+ ctx.mozFillRule = "nonzero";
+
+ ctx.mozFillRule = "garbageLSKJDF 29879234";
+ assert("nonzero" == ctx.mozFillRule,
+ "Garbage fillRule string has no effect");
+
+ ctx.mozFillRule = "evenodd";
+ ctx.mozFillRule = "garbageLSKJDF 29879234";
+ assert("evenodd" == ctx.mozFillRule,
+ "Garbage fillRule string has no effect");
+ ctx.mozFillRule = "nonzero";
+
+ ctx.save();
+ ctx.mozFillRule = "evenodd";
+ ctx.restore();
+ assert("nonzero" == ctx.mozFillRule,
+ "fillRule was saved then restored");
+ } catch (e) {
+ document.body.innerHTML = "FAIL: "+ e.toString();
+ return;
+ }
+ document.body.innerHTML = "Pass";
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/image-rendering-ref.html b/layout/reftests/canvas/image-rendering-ref.html new file mode 100644 index 000000000..d2b6f5b7d --- /dev/null +++ b/layout/reftests/canvas/image-rendering-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html> +<head> + <title>reference image-rendering</title> + <style> + canvas { position:absolute;left:0px;top:0px; } + </style> + <script type="text/javascript"> + function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(50,50,200,200); + ctx.fillStyle = "rgb(0,255,0)"; + ctx.fillRect(50,50,100,100); + } + </script> +</head> +<body onload="draw();"> + <canvas id="canvas" width="300" height="300"></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/image-rendering-test.html b/layout/reftests/canvas/image-rendering-test.html new file mode 100644 index 000000000..7b0861fcb --- /dev/null +++ b/layout/reftests/canvas/image-rendering-test.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html reftest-zoom="2" class="reftest-wait"> +<head> + <title>test image-rendering</title> + <style> + canvas { position:absolute;left:0px;top:0px; } + </style> + <script type="text/javascript"> + document.addEventListener("MozReftestInvalidate", draw, false); + + function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(25,25,100,100); + ctx.fillStyle = "rgb(0,255,0)"; + ctx.fillRect(25,25,50,50); + document.documentElement.removeAttribute('class'); + } + </script> +</head> +<body> + <canvas style="image-rendering: -moz-crisp-edges; " id="canvas" width="300" height="300"></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/image-shadow-ref.html b/layout/reftests/canvas/image-shadow-ref.html new file mode 100644 index 000000000..c75f33085 --- /dev/null +++ b/layout/reftests/canvas/image-shadow-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="background:lime; width:16px; height:16px;"></div> +<div style="background:black; width:16px; height:10px;"></div> +</body> +</html> diff --git a/layout/reftests/canvas/image-shadow.html b/layout/reftests/canvas/image-shadow.html new file mode 100644 index 000000000..47fe121c4 --- /dev/null +++ b/layout/reftests/canvas/image-shadow.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<body onload="doTest()"> +<canvas id="c" width="200" height="200" style="display:block"></canvas> +<img id="img" src="image_green-16x16.png" style="display:none"> +<script> +var c = document.getElementById("c"); +var img = document.getElementById("img"); +var ctx = c.getContext("2d"); +ctx.shadowColor = "black"; +ctx.shadowOffsetX = 0; +ctx.shadowOffsetY = 10; +function doTest() { + ctx.drawImage(img, 0, 0); +} +</script> +</body> +</html> diff --git a/layout/reftests/canvas/image_green-16x16.png b/layout/reftests/canvas/image_green-16x16.png Binary files differnew file mode 100644 index 000000000..e19a3ffdd --- /dev/null +++ b/layout/reftests/canvas/image_green-16x16.png diff --git a/layout/reftests/canvas/linear-gradient-1-ref.html b/layout/reftests/canvas/linear-gradient-1-ref.html new file mode 100644 index 000000000..1e18b9d61 --- /dev/null +++ b/layout/reftests/canvas/linear-gradient-1-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<div style="width:300px; height: 150px; background: #0000ff"></div> +<div style="width:300px; height: 150px; background: #ff0000"></div> diff --git a/layout/reftests/canvas/linear-gradient-1a.html b/layout/reftests/canvas/linear-gradient-1a.html new file mode 100644 index 000000000..817711cc3 --- /dev/null +++ b/layout/reftests/canvas/linear-gradient-1a.html @@ -0,0 +1,14 @@ +<!doctype html> +<body> +<canvas id="canvas" width="300" height="300"> +<script> +var ctx = document.getElementById('canvas').getContext('2d'); + +var grad = ctx.createLinearGradient(0,150,0,450); +grad.addColorStop(0, '#0000ff'); +grad.addColorStop(0, '#ff0000'); + +ctx.fillStyle = grad; +ctx.fillRect(0,0,300,300); +</script> +</body> diff --git a/layout/reftests/canvas/linear-gradient-1b.html b/layout/reftests/canvas/linear-gradient-1b.html new file mode 100644 index 000000000..1e08ec741 --- /dev/null +++ b/layout/reftests/canvas/linear-gradient-1b.html @@ -0,0 +1,14 @@ +<!doctype html> +<body> +<canvas id="canvas" width="300" height="300"> +<script> +var ctx = document.getElementById('canvas').getContext('2d'); + +var grad = ctx.createLinearGradient(0,-150,0,150); +grad.addColorStop(1, '#0000ff'); +grad.addColorStop(1, '#ff0000'); + +ctx.fillStyle = grad; +ctx.fillRect(0,0,300,300); +</script> +</body> diff --git a/layout/reftests/canvas/nonzero-fill-1.html b/layout/reftests/canvas/nonzero-fill-1.html new file mode 100644 index 000000000..936d0ce29 --- /dev/null +++ b/layout/reftests/canvas/nonzero-fill-1.html @@ -0,0 +1,15 @@ +<html>
+<head>
+ <script type="text/javascript">
+window.onload = function() {
+ var ctx = document.getElementById("c1").getContext("2d");
+ ctx.rect(50, 50, 200, 200);
+ ctx.rect(100, 100, 100, 100);
+ ctx.fill();
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/nonzero-fill-2.html b/layout/reftests/canvas/nonzero-fill-2.html new file mode 100644 index 000000000..890716b81 --- /dev/null +++ b/layout/reftests/canvas/nonzero-fill-2.html @@ -0,0 +1,26 @@ +<html>
+<head>
+ <script type="text/javascript">
+window.onload = function() {
+ var ctx = document.getElementById("c1").getContext("2d");
+
+ ctx.moveTo(50, 50);
+ ctx.lineTo(250, 50);
+ ctx.lineTo(250, 250);
+ ctx.lineTo(50, 250);
+ ctx.lineTo(50, 50);
+
+ ctx.moveTo(100, 100);
+ ctx.lineTo(100, 200);
+ ctx.lineTo(200, 200);
+ ctx.lineTo(200, 100);
+ ctx.lineTo(100, 100);
+
+ ctx.fill();
+}
+ </script>
+</head>
+<body>
+ <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/reftest-stylo.list b/layout/reftests/canvas/reftest-stylo.list new file mode 100644 index 000000000..221205a9b --- /dev/null +++ b/layout/reftests/canvas/reftest-stylo.list @@ -0,0 +1,122 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== default-size.html default-size.html +skip-if(B2G||Mulet) fuzzy-if(Android,8,1000) == size-1.html size-1.html +# Initial mulet triage: parity with B2G/B2G Desktop + +== empty-transaction-1.html empty-transaction-1.html + +== image-rendering-test.html image-rendering-test.html +== image-shadow.html image-shadow.html + +skip-if(B2G||Mulet) asserts-if(cocoaWidget,0-2) == size-change-1.html size-change-1.html +# Initial mulet triage: parity with B2G/B2G Desktop + +random-if(cocoaWidget) == subpixel-1.html subpixel-1.html +# see bug 1192616, re-enable once we're off the pandaboards + +== text-ltr-left.html text-ltr-left.html +== text-ltr-right.html text-ltr-right.html +== text-rtl-left.html text-rtl-left.html +== text-rtl-right.html text-rtl-right.html + +== text-ltr-start.html text-ltr-start.html +== text-ltr-end.html text-ltr-end.html +== text-ltr-left.html text-ltr-left.html +== text-rtl-start.html text-rtl-start.html +== text-rtl-end.html text-rtl-end.html +== text-rtl-left.html text-rtl-left.html + +== text-ltr-left.html text-ltr-left.html + +== text-ltr-alignment-test.html text-ltr-alignment-test.html +== text-rtl-alignment-test.html text-rtl-alignment-test.html + +fuzzy-if((B2G||Mulet)&&azureSkiaGL,1,256) == text-horzline-with-bottom.html text-horzline-with-bottom.html +# Initial mulet triage: parity with B2G/B2G Desktop +fuzzy-if((B2G||Mulet)&&azureSkiaGL,1,256) fails-if(azureSkia&&OSX>=1008) == text-horzline-with-top.html text-horzline-with-top.html +# Initial mulet triage: parity with B2G/B2G Desktop + +== text-big-stroke.html text-big-stroke.html +== text-big-stroke.html text-big-stroke.html + +== text-context-state-test.html text-context-state-test.html +== text-font-inherit.html text-font-inherit.html +== text-space-replace-test.html text-space-replace-test.html + +== text-no-frame-test.html text-no-frame-test.html +== text-no-frame-2-test.html text-no-frame-2-test.html +fuzzy-if(azureSkiaGL,10,400) == text-not-in-doc-test.html text-not-in-doc-test.html + +== text-bidi-ltr-test.html text-bidi-ltr-test.html +== text-bidi-ltr-test.html text-bidi-ltr-test.html +# for bug 698185 +== text-bidi-rtl-test.html text-bidi-rtl-test.html + +skip-if(B2G||Mulet) == text-font-lang.html text-font-lang.html +# Initial mulet triage: parity with B2G/B2G Desktop + +== text-measure.html text-measure.html +== text-small-caps-1.html text-small-caps-1.html + +random-if(!d2d) == text-subpixel-1.html text-subpixel-1.html + +== strokeText-path.html strokeText-path.html + +# check that emoji character renders as something non-blank (for Apple Color Emoji font, bug 715798) +# apparently fails on some 10.7 systems for unknown reasons, bug 804522. +## Currently fails most places due to partial backout of bug 808288, see bug 837461. +## (Marking "random" rather than "fails" because it would pass for people +## if they have an Emoji font installed when running the tests.) +## WAS: random-if(OSX==1007) == text-emoji.html text-emoji.html +# With Skia canvas on OS X (bug 932958) it fails even on 10.8 and 10.10. +random-if(cocoaWidget&&azureSkia) random-if(!cocoaWidget||OSX==1006||OSX==1007) == text-emoji.html text-emoji.html + +# azure quartz uses CGDrawLinearGradient instead of DrawShading +# so we have less control over degenerate behaviour as tested by this +# test +skip == linear-gradient-1a.html linear-gradient-1a.html + +# this passes with cairo on 10.7 and 10.8 but not with azure for reasons unknown +skip == linear-gradient-1b.html linear-gradient-1b.html + +== zero-dimensions.html zero-dimensions.html + +== evenodd-fill-sanity.html evenodd-fill-sanity.html +== evenodd-fill-1.html evenodd-fill-1.html +== evenodd-fill-1.html evenodd-fill-1.html +random-if(azureSkiaGL) == evenodd-fill-2.html evenodd-fill-2.html +== evenodd-fill-3.html evenodd-fill-3.html + +== dash-sanity.html dash-sanity.html +fuzzy-if(azureSkia||skiaContent,9,470) random-if(Android) == dash-1.html dash-1.html +# Bug 668412 (really is android-specific, not IPC-specific) + +== ctm-sanity.html ctm-sanity.html +== ctm-singular-sanity.html ctm-singular-sanity.html +== ctm-1.html ctm-1.html + +fails-if(azureQuartz&&OSX==1006) == 672646-alpha-radial-gradient.html 672646-alpha-radial-gradient.html +# Bug 673333 +== 674003-alpha-radial-gradient-superlum.html 674003-alpha-radial-gradient-superlum.html + +== 693610-1.html 693610-1.html +# bug 693610: multiple glyph runs should not be overprinted + +== 726951-shadow-clips.html 726951-shadow-clips.html + +== transformed-clip.html transformed-clip.html +fuzzy-if(azureSkia,1,15) fuzzy-if(skiaContent,1,20) == transformed-gradient.html transformed-gradient.html +== transformed-path.html transformed-path.html + +== 749467-1.html 749467-1.html + +# You get a little bit of rounding fuzz on OSX from transforming the paths between user space and device space +fuzzy-if(azureQuartz,2,128) fuzzy-if(d2d,12,21) fuzzy-if(skiaContent,12,7) fuzzy-if(d2d&&/^Windows\x20NT\x2010\.0/.test(http.oscpu),2,141) == 784573-1.html 784573-1.html + +== 802658-1.html 802658-1.html +== 1074733-1.html 1074733-1.html +fuzzy-if(Mulet,45,2) == 1107096-invisibles.html 1107096-invisibles.html +== 1151821-1.html 1151821-1.html +== 1201272-1.html 1201272-1.html +== 1224976-1.html 1224976-1.html +== 1238795-1.html 1238795-1.html diff --git a/layout/reftests/canvas/reftest.list b/layout/reftests/canvas/reftest.list new file mode 100644 index 000000000..f32ca360b --- /dev/null +++ b/layout/reftests/canvas/reftest.list @@ -0,0 +1,113 @@ +== default-size.html default-size-ref.html +fuzzy-if(Android,8,1000) == size-1.html size-1-ref.html + +== empty-transaction-1.html empty-transaction-1-ref.html + +== image-rendering-test.html image-rendering-ref.html +== image-shadow.html image-shadow-ref.html + +asserts-if(cocoaWidget,0-2) == size-change-1.html size-change-1-ref.html + +random-if(cocoaWidget) == subpixel-1.html about:blank # see bug 1192616, re-enable once we're off the pandaboards + +!= text-ltr-left.html text-blank.html +!= text-ltr-right.html text-blank.html +!= text-rtl-left.html text-blank.html +!= text-rtl-right.html text-blank.html + +== text-ltr-start.html text-ltr-left.html +== text-ltr-end.html text-ltr-right.html +!= text-ltr-left.html text-ltr-right.html +== text-rtl-start.html text-rtl-right.html +== text-rtl-end.html text-rtl-left.html +!= text-rtl-left.html text-rtl-right.html + +== text-ltr-left.html text-rtl-left.html + +== text-ltr-alignment-test.html text-ltr-alignment-ref.html +== text-rtl-alignment-test.html text-rtl-alignment-ref.html + +== text-horzline-with-bottom.html text-horzline.html +fails-if(azureSkia&&OSX>=1008) == text-horzline-with-top.html text-horzline.html + +!= text-big-stroke.html text-blank.html +!= text-big-stroke.html text-big-fill.html + +== text-context-state-test.html text-context-state-ref.html +== text-font-inherit.html text-big-fill.html +== text-space-replace-test.html text-space-replace-ref.html + +== text-no-frame-test.html text-no-frame-ref.html +== text-no-frame-2-test.html text-not-in-doc-ref.html +fuzzy-if(azureSkiaGL,10,400) == text-not-in-doc-test.html text-not-in-doc-ref.html + +== text-bidi-ltr-test.html text-bidi-ltr-ref.html +!= text-bidi-ltr-test.html text-bidi-ltr-notref.html # for bug 698185 +== text-bidi-rtl-test.html text-bidi-rtl-ref.html + +!= text-font-lang.html text-font-lang-notref.html + +== text-measure.html text-measure-ref.html +== text-small-caps-1.html text-small-caps-1-ref.html + +random-if(!d2d) != text-subpixel-1.html text-subpixel-1-ref.html + +== strokeText-path.html strokeText-path-ref.html + +# check that emoji character renders as something non-blank (for Apple Color Emoji font, bug 715798) +# apparently fails on some 10.7 systems for unknown reasons, bug 804522. +## Currently fails most places due to partial backout of bug 808288, see bug 837461. +## (Marking "random" rather than "fails" because it would pass for people +## if they have an Emoji font installed when running the tests.) +## WAS: random-if(OSX==1007) != text-emoji.html text-emoji-notref.html +# With Skia canvas on OS X (bug 932958) it fails even on 10.8 and 10.10. +random-if(cocoaWidget&&azureSkia) random-if(!cocoaWidget||OSX==1006||OSX==1007) != text-emoji.html text-emoji-notref.html + +# azure quartz uses CGDrawLinearGradient instead of DrawShading +# so we have less control over degenerate behaviour as tested by this +# test +fails-if((azureSkia&&!azureSkiaGL)||azureQuartz||(azureSkiaGL&&Android)) == linear-gradient-1a.html linear-gradient-1-ref.html + +# this passes with cairo on 10.7 and 10.8 but not with azure for reasons unknown +fails-if((azureSkia&&!azureSkiaGL)||azureQuartz||(azureSkiaGL&&Android)) == linear-gradient-1b.html linear-gradient-1-ref.html + +== zero-dimensions.html zero-dimensions-ref.html + +!= evenodd-fill-1.html nonzero-fill-1.html +== evenodd-fill-1.html evenodd-fill-ref.html + +== dash-sanity.html data:text/html,<body>Pass +fuzzy-if(azureSkia||skiaContent,9,470) random-if(Android) == dash-1.html dash-1-ref.svg # Bug 668412 (really is android-specific, not IPC-specific) + +== ctm-sanity.html data:text/html,<body>Pass +== ctm-singular-sanity.html data:text/html,<body>Pass +== ctm-1.html ctm-1-ref.html + +fails-if(azureQuartz&&OSX==1006) == 672646-alpha-radial-gradient.html 672646-alpha-radial-gradient-ref.html # Bug 673333 +== 674003-alpha-radial-gradient-superlum.html 674003-alpha-radial-gradient-superlum-ref.html + +!= 693610-1.html 693610-1-notref.html # bug 693610: multiple glyph runs should not be overprinted + +== 726951-shadow-clips.html 726951-shadow-clips-ref.html + +== transformed-clip.html transformed-clip-ref.html +fuzzy-if(azureSkia,1,15) fuzzy-if(skiaContent,1,20) == transformed-gradient.html transformed-gradient-ref.html +== transformed-path.html transformed-path.html + +== 749467-1.html 749467-1-ref.html + +# You get a little bit of rounding fuzz on OSX from transforming the paths between user space and device space +fuzzy-if(azureQuartz,2,128) fuzzy-if(d2d,12,21) fuzzy-if(skiaContent,12,7) fuzzy-if(d2d&&/^Windows\x20NT\x2010\.0/.test(http.oscpu),2,141) == 784573-1.html 784573-1-ref.html + +== 802658-1.html 802658-1-ref.html +== 1074733-1.html 1074733-1-ref.html +== 1107096-invisibles.html 1107096-invisibles-ref.html +== 1151821-1.html 1151821-1-ref.html +== 1201272-1.html 1201272-1-ref.html +== 1224976-1.html 1224976-1-ref.html +== 1238795-1.html 1238795-1-ref.html +== 1303534-1.html 1303534-1-ref.html + +== 1304353-text-global-alpha-1.html 1304353-text-global-alpha-1-ref.html +fuzzy-if(winWidget,1,14) == 1304353-text-global-alpha-2.html 1304353-text-global-alpha-2-ref.html +fuzzy-if(winWidget,94,1575) fuzzy-if(cocoaWidget,1,24) == 1304353-text-global-composite-op-1.html 1304353-text-global-composite-op-1-ref.html diff --git a/layout/reftests/canvas/size-1-ref.html b/layout/reftests/canvas/size-1-ref.html new file mode 100644 index 000000000..1212b8892 --- /dev/null +++ b/layout/reftests/canvas/size-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="background:lime; width:100px; height:30000px;"></div> +<script> +window.scrollTo(0, 100000); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/size-1.html b/layout/reftests/canvas/size-1.html new file mode 100644 index 000000000..afca44ea6 --- /dev/null +++ b/layout/reftests/canvas/size-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> +<canvas style="display:block" id="c" width="100" height="30000"></canvas> +<script> +var ctx = document.getElementById("c").getContext("2d"); +ctx.fillStyle = "lime"; +ctx.fillRect(0, 0, 100, 30000); +window.scrollTo(0, 100000); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/size-change-1-ref.html b/layout/reftests/canvas/size-change-1-ref.html new file mode 100644 index 000000000..31c5893fe --- /dev/null +++ b/layout/reftests/canvas/size-change-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<body> +<div style="width:200px; height:200px; background:lime"></div> +</body> +</html> diff --git a/layout/reftests/canvas/size-change-1.html b/layout/reftests/canvas/size-change-1.html new file mode 100644 index 000000000..134d769ac --- /dev/null +++ b/layout/reftests/canvas/size-change-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<body> +<canvas width="100" height="100" id="c"></canvas> +<script> +var c = document.getElementById("c"); +var ctx = c.getContext("2d"); +ctx.fillStyle = "red"; +ctx.fillRect(0,0,100,100); + +function finishTest() { + c.width = 200; + c.height = 200; + ctx.fillStyle = "lime"; + ctx.fillRect(0,0,200,200); + + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", finishTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/strokeText-path-ref.html b/layout/reftests/canvas/strokeText-path-ref.html new file mode 100644 index 000000000..475e0d60a --- /dev/null +++ b/layout/reftests/canvas/strokeText-path-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <script type="text/javascript"><!-- +window.onload = function () { + var canvas = document.getElementById('testCanvas'), + context = canvas.getContext('2d'); + + // draw some text + context.font = 'bold 40px sans-serif'; + context.strokeText("Hello world!", 10, 50); +}; + // --></script> + </head> + <body> + <p>You should see only see "Hello world!" below, without any additional + line. JavaScript is required.</p> + + <p><canvas id="testCanvas" width="400" height="300">You need Canvas + support.</canvas></p> + + </body> +</html> diff --git a/layout/reftests/canvas/strokeText-path.html b/layout/reftests/canvas/strokeText-path.html new file mode 100644 index 000000000..c90ea70f8 --- /dev/null +++ b/layout/reftests/canvas/strokeText-path.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <script type="text/javascript"><!-- +window.onload = function () { + var canvas = document.getElementById('testCanvas'), + context = canvas.getContext('2d'); + + // draw a path + context.beginPath(); + context.moveTo(10, 10); + context.lineTo(200, 10); + context.lineTo(200, 200); + context.stroke(); + context.closePath(); + + context.clearRect(0, 0, canvas.width, canvas.height); + + // draw some text + context.font = 'bold 40px sans-serif'; + context.strokeText("Hello world!", 10, 50); +}; + // --></script> + </head> + <body> + <p>You should see only see "Hello world!" below, without any additional + line. JavaScript is required.</p> + + <p><canvas id="testCanvas" width="400" height="300">You need Canvas + support.</canvas></p> + + </body> +</html> diff --git a/layout/reftests/canvas/subpixel-1.html b/layout/reftests/canvas/subpixel-1.html new file mode 100644 index 000000000..398912e47 --- /dev/null +++ b/layout/reftests/canvas/subpixel-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas"></canvas> +<script> +var c = canvas.getContext('2d'); +c.font = "8pt sans-serif"; +c.textAlign = "center"; +c.textBaseline = "middle"; +c.fillStyle = "white"; +c.fillText("Test Text", canvas.width / 2, canvas.height / 2); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-bidi-ltr-notref.html b/layout/reftests/canvas/text-bidi-ltr-notref.html new file mode 100644 index 000000000..075f83c63 --- /dev/null +++ b/layout/reftests/canvas/text-bidi-ltr-notref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure bidi is resolved correctly</title> +</head> +<body> +<canvas id="c" width="256" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + // Bug 698185 caused the RTL and trailing LTR runs to be lost + // var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye"; + var str = "hello"; + + ctx.fillStyle = 'black'; + ctx.font = '10px sans-serif'; + ctx.fillText(str, 128, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-bidi-ltr-ref.html b/layout/reftests/canvas/text-bidi-ltr-ref.html new file mode 100644 index 000000000..524be1edd --- /dev/null +++ b/layout/reftests/canvas/text-bidi-ltr-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure bidi is resolved correctly</title> +</head> +<body> +<canvas id="c" width="256" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = "hello\u202D\u05DD\u05D5\u05DC\u05E9\u202Cgoodbye"; + + ctx.fillStyle = 'black'; + ctx.font = '10px sans-serif'; + ctx.fillText(str, 128, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-bidi-ltr-test.html b/layout/reftests/canvas/text-bidi-ltr-test.html new file mode 100644 index 000000000..9e263b9d0 --- /dev/null +++ b/layout/reftests/canvas/text-bidi-ltr-test.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure bidi is resolved correctly</title> +</head> +<body> +<canvas id="c" width="256" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye"; + + ctx.fillStyle = 'black'; + ctx.font = '10px sans-serif'; + ctx.fillText(str, 128, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-bidi-rtl-ref.html b/layout/reftests/canvas/text-bidi-rtl-ref.html new file mode 100644 index 000000000..c264e7104 --- /dev/null +++ b/layout/reftests/canvas/text-bidi-rtl-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure bidi is resolved correctly</title> +</head> +<body> +<canvas id="c" width="256" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = "goodbye\u202D\u05DD\u05D5\u05DC\u05E9\u202Chello"; + + ctx.fillStyle = 'black'; + ctx.font = '10px sans-serif'; + ctx.fillText(str, 128, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-bidi-rtl-test.html b/layout/reftests/canvas/text-bidi-rtl-test.html new file mode 100644 index 000000000..a444aca32 --- /dev/null +++ b/layout/reftests/canvas/text-bidi-rtl-test.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure bidi is resolved correctly</title> +</head> +<body> +<canvas id="c" width="256" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye"; + + ctx.fillStyle = 'black'; + ctx.font = '10px sans-serif'; + ctx.fillText(str, 128, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-big-fill.html b/layout/reftests/canvas/text-big-fill.html new file mode 100644 index 000000000..28755a273 --- /dev/null +++ b/layout/reftests/canvas/text-big-fill.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure fillText and strokeText look different</title> +</head> +<body> +<canvas id="c" width="128" height="64"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.strokeStyle = 'black'; + ctx.font = 'bold 64px sans-serif'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(str, 0, 0); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-big-stroke.html b/layout/reftests/canvas/text-big-stroke.html new file mode 100644 index 000000000..74cca8480 --- /dev/null +++ b/layout/reftests/canvas/text-big-stroke.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure fillText and strokeText look different</title> +</head> +<body> +<canvas id="c" width="128" height="64"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.strokeStyle = 'black'; + ctx.font = 'bold 64px sans-serif'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.strokeText(str, 0, 0); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-blank.html b/layout/reftests/canvas/text-blank.html new file mode 100644 index 000000000..2d2ad4087 --- /dev/null +++ b/layout/reftests/canvas/text-blank.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Blank Canvas</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-context-state-ref.html b/layout/reftests/canvas/text-context-state-ref.html new file mode 100644 index 000000000..c267fcf5f --- /dev/null +++ b/layout/reftests/canvas/text-context-state-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>text to ensure text attributes are saved in the context state</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.font = '16px sans-serif'; + + ctx.fillText('yet another thing', 0, 0); + + ctx.textAlign = 'right'; + ctx.textBaseline = 'alphabetic'; + ctx.font = '24px serif'; + + ctx.fillText('other thing', 128, 40); + + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; + ctx.font = '10px sans-serif'; + + ctx.fillText('something', 80, 60); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-context-state-test.html b/layout/reftests/canvas/text-context-state-test.html new file mode 100644 index 000000000..71abf7ca6 --- /dev/null +++ b/layout/reftests/canvas/text-context-state-test.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>text to ensure text attributes are saved in the context state</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.font = '16px sans-serif'; + + ctx.save(); + + ctx.textAlign = 'right'; + ctx.textBaseline = 'alphabetic'; + ctx.font = '24px serif'; + + ctx.save(); + + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; + ctx.font = '10px sans-serif'; + + ctx.fillText('something', 80, 60); + + ctx.restore(); + + ctx.fillText('other thing', 128, 40); + + ctx.restore(); + + ctx.fillText('yet another thing', 0, 0); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-emoji-notref.html b/layout/reftests/canvas/text-emoji-notref.html new file mode 100644 index 000000000..493bd1d26 --- /dev/null +++ b/layout/reftests/canvas/text-emoji-notref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test for Unicode emoji in canvas</title> +<script type="text/javascript"> +function test(canvasID) { + var canvas = document.getElementById(canvasID); + var ctx = canvas.getContext('2d'); + var str = 'Hello'; + ctx.font = '2em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(str, 10, 10); +}; +</script> +</head> +<body> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c1" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c1"); +</script> +</div> + +</body> +</html> diff --git a/layout/reftests/canvas/text-emoji.html b/layout/reftests/canvas/text-emoji.html new file mode 100644 index 000000000..21ce9a708 --- /dev/null +++ b/layout/reftests/canvas/text-emoji.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test for Unicode emoji in canvas</title> +<script type="text/javascript"> +function test(canvasID) { + var canvas = document.getElementById(canvasID); + var ctx = canvas.getContext('2d'); + var str = 'Hello \uD83D\uDE0E'; // U+1F60E + ctx.font = '2em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(str, 10, 10); +}; +</script> +</head> +<body> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c1" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c1"); +</script> +</div> + +</body> +</html> diff --git a/layout/reftests/canvas/text-font-inherit.html b/layout/reftests/canvas/text-font-inherit.html new file mode 100644 index 000000000..379b111f8 --- /dev/null +++ b/layout/reftests/canvas/text-font-inherit.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure font inherits CSS values</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="font:32px sans-serif;"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.font = 'bold 2em sans-serif'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(str, 0, 0); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-font-lang-notref.html b/layout/reftests/canvas/text-font-lang-notref.html new file mode 100644 index 000000000..64f5cb519 --- /dev/null +++ b/layout/reftests/canvas/text-font-lang-notref.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test for language-sensitive font prefs on canvas</title> +<script type="text/javascript"> +function test(canvasID) { + var canvas = document.getElementById(canvasID); + var ctx = canvas.getContext('2d'); + + var str = 'Hello world! \u4F60\u597D\u5417\uFF1F'; + ctx.font = '2em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(str, 10, 10); +}; +</script> +</head> +<body> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c1" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c1"); +</script> +</div> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c2" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c2"); +</script> +</div> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c3" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c3"); +</script> +</div> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c4" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c4"); +</script> +</div> + +</body> +</html> diff --git a/layout/reftests/canvas/text-font-lang.html b/layout/reftests/canvas/text-font-lang.html new file mode 100644 index 000000000..370f21aa8 --- /dev/null +++ b/layout/reftests/canvas/text-font-lang.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test for language-sensitive font prefs on canvas</title> +<script type="text/javascript"> +function test(canvasID) { + var canvas = document.getElementById(canvasID); + var ctx = canvas.getContext('2d'); + + var str = 'Hello world! \u4F60\u597D\u5417\uFF1F'; + ctx.font = '2em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(str, 10, 10); +}; +</script> +</head> +<body> + +<!-- + In the reference, all divs are tagged with lang="en". + The expectation is that at least some of them will resolve + "sans-serif" to different fonts according to language. +--> + +<div lang="ar" style="margin:20px; height:100px;"> +<canvas id="c1" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c1"); +</script> +</div> + +<div lang="ja" style="margin:20px; height:100px;"> +<canvas id="c2" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c2"); +</script> +</div> + +<div lang="zh-TW" style="margin:20px; height:100px;"> +<canvas id="c3" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c3"); +</script> +</div> + +<div lang="en" style="margin:20px; height:100px;"> +<canvas id="c4" width="400" height="50"></canvas> +<script type="text/javascript"> + test("c4"); +</script> +</div> + +</body> +</html> diff --git a/layout/reftests/canvas/text-horzline-with-bottom.html b/layout/reftests/canvas/text-horzline-with-bottom.html new file mode 100644 index 000000000..2d7a23363 --- /dev/null +++ b/layout/reftests/canvas/text-horzline-with-bottom.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure bottom basline-anchored text doesn't intersect horz line</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height) + + ctx.strokeStyle = 'black'; + ctx.beginPath(); + ctx.moveTo(0,32); + ctx.lineTo(128,32); + ctx.stroke(); + + ctx.font = '20px sans-serif'; + ctx.textBaseline = 'bottom'; + ctx.fillText('TEXT', 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-horzline-with-top.html b/layout/reftests/canvas/text-horzline-with-top.html new file mode 100644 index 000000000..d0aead288 --- /dev/null +++ b/layout/reftests/canvas/text-horzline-with-top.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure top basline-anchored text doesn't intersect horz line</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height) + + ctx.strokeStyle = 'black'; + ctx.beginPath(); + ctx.moveTo(0,32); + ctx.lineTo(128,32); + ctx.stroke(); + + ctx.font = '30px sans-serif'; + ctx.textBaseline = 'top'; + ctx.fillText('TEXT', 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-horzline.html b/layout/reftests/canvas/text-horzline.html new file mode 100644 index 000000000..46c427f22 --- /dev/null +++ b/layout/reftests/canvas/text-horzline.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Horizontal Line</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + ctx.strokeStyle = 'black'; + ctx.beginPath(); + ctx.moveTo(0,32); + ctx.lineTo(128,32); + ctx.stroke(); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-ltr-alignment-ref.html b/layout/reftests/canvas/text-ltr-alignment-ref.html new file mode 100644 index 000000000..c6f634dae --- /dev/null +++ b/layout/reftests/canvas/text-ltr-alignment-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure left/right and start/end are offset by text width for ltr text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + + ctx.fillStyle = 'black'; + ctx.font = '20px sans-serif'; + ctx.textBaseline = 'top'; + + var str = 'TEXT'; + var wid = ctx.measureText(str).width; + + ctx.textAlign = 'left'; + ctx.fillText(str, 64, 0); + ctx.textAlign = 'start'; + ctx.fillText(str, 64, 20); + ctx.textAlign = 'center'; + ctx.fillText(str, 64, 40); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-ltr-alignment-test.html b/layout/reftests/canvas/text-ltr-alignment-test.html new file mode 100644 index 000000000..5a4200c8d --- /dev/null +++ b/layout/reftests/canvas/text-ltr-alignment-test.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure left/right and start/end are offset by text width for ltr text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + + ctx.fillStyle = 'black'; + ctx.font = '20px sans-serif'; + ctx.textBaseline = 'top'; + + var str = 'TEXT'; + var wid = ctx.measureText(str).width; + + ctx.textAlign = 'right'; + ctx.fillText(str, 64+wid, 0); + ctx.textAlign = 'end'; + ctx.fillText(str, 64+wid, 20); + ctx.textAlign = 'left'; + ctx.fillText(str, 64-wid/2, 40); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-ltr-end.html b/layout/reftests/canvas/text-ltr-end.html new file mode 100644 index 000000000..d0bb58152 --- /dev/null +++ b/layout/reftests/canvas/text-ltr-end.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>end-aligned ltr text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'end'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-ltr-left.html b/layout/reftests/canvas/text-ltr-left.html new file mode 100644 index 000000000..43bb6f5b1 --- /dev/null +++ b/layout/reftests/canvas/text-ltr-left.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>left-aligned ltr text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-ltr-right.html b/layout/reftests/canvas/text-ltr-right.html new file mode 100644 index 000000000..4b8426d1c --- /dev/null +++ b/layout/reftests/canvas/text-ltr-right.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>right-aligned ltr text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'right'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-ltr-start.html b/layout/reftests/canvas/text-ltr-start.html new file mode 100644 index 000000000..ad3662782 --- /dev/null +++ b/layout/reftests/canvas/text-ltr-start.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>start-aligned ltr text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'start'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-measure-ref.html b/layout/reftests/canvas/text-measure-ref.html new file mode 100644 index 000000000..ae72e4071 --- /dev/null +++ b/layout/reftests/canvas/text-measure-ref.html @@ -0,0 +1,15 @@ +<html> +<script> +function load() { + var ctx = document.getElementById("canvas").getContext("2d"); + + ctx.font = "bold 12px sans-serif"; + ctx.scale(4, 4); + var str = "HeHeHeHe"; + ctx.fillText(str, 0, 15); +} +</script> +<body onload="load();"> +<canvas id="canvas" width="400" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/text-measure.html b/layout/reftests/canvas/text-measure.html new file mode 100644 index 000000000..3fd08aefc --- /dev/null +++ b/layout/reftests/canvas/text-measure.html @@ -0,0 +1,19 @@ +<html> +<script> +function load() { + var ctx = document.getElementById("canvas").getContext("2d"); + + ctx.font = "bold 12px sans-serif"; + ctx.scale(4, 4); + var str = "HeHeHeHe"; + var x = 0; + for (var i = 0; i < str.length; ++i) { + ctx.fillText(str[i], x, 15); + x += ctx.measureText(str[i]).width; + } +} +</script> +<body onload="load();"> +<canvas id="canvas" width="400" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/text-no-frame-2-test.html b/layout/reftests/canvas/text-no-frame-2-test.html new file mode 100644 index 000000000..8c38b96d1 --- /dev/null +++ b/layout/reftests/canvas/text-no-frame-2-test.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure non-framed canvas inherits properties</title> +</head> +<body> +<div style="font: 20px sans-serif;"> +<div style="display: none;"> +<canvas id="c" width="512" height="256"></canvas> +</div> +<canvas id="d" width="512" height="256"></canvas> +</div> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'BLEARGH!'; + ctx.font = '1em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(str, 256, 128); + + var canvas2 = document.getElementById('d'); + var ctx = canvas2.getContext('2d'); + + ctx.drawImage(canvas, 0, 0); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-no-frame-ref.html b/layout/reftests/canvas/text-no-frame-ref.html new file mode 100644 index 000000000..91f724aa2 --- /dev/null +++ b/layout/reftests/canvas/text-no-frame-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure non-framed canvas inherits properties</title> +</head> +<body> +<div style="font: 40px sans-serif"> +<canvas id="c" width="512" height="256" style="direction: rtl;"></canvas> +</div> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'BLEARGH!'; + ctx.font = '1em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(str, 256, 128); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-no-frame-test.html b/layout/reftests/canvas/text-no-frame-test.html new file mode 100644 index 000000000..6fff8166d --- /dev/null +++ b/layout/reftests/canvas/text-no-frame-test.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure non-framed canvas inherits properties</title> +</head> +<body> +<div style="font: 40px sans-serif; direction: rtl;"> +<canvas id="c" width="512" height="256" style="display: none;"></canvas> +</div> +<canvas id="d" width="512" height="256"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'BLEARGH!'; + ctx.font = '1em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(str, 256, 128); + + var canvas2 = document.getElementById('d'); + var ctx = canvas2.getContext('2d'); + + ctx.drawImage(canvas, 0, 0); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-not-in-doc-ref.html b/layout/reftests/canvas/text-not-in-doc-ref.html new file mode 100644 index 000000000..26330ac52 --- /dev/null +++ b/layout/reftests/canvas/text-not-in-doc-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure canvas not in doc gets default properties</title> +</head> +<body> +<div style="font: 10px sans-serif; direction: ltr"> +<canvas id="c" width="512" height="256"></canvas> +</div> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'BLEARGH!'; + ctx.font = '2em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(str, 256, 128); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-not-in-doc-test.html b/layout/reftests/canvas/text-not-in-doc-test.html new file mode 100644 index 000000000..3575e9233 --- /dev/null +++ b/layout/reftests/canvas/text-not-in-doc-test.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure canvas not in doc gets default properties</title> +</head> +<body> +<canvas id="d" width="512" height="256"></canvas> +<script type="text/javascript"> + var canvas = document.createElement('canvas'); + canvas.width = 512; + canvas.height = 526; + var ctx = canvas.getContext('2d'); + + var str = 'BLEARGH!'; + ctx.font = '2em sans-serif'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(str, 256, 128); + + var canvas2 = document.getElementById('d'); + var ctx = canvas2.getContext('2d'); + + ctx.drawImage(canvas, 0, 0); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-rtl-alignment-ref.html b/layout/reftests/canvas/text-rtl-alignment-ref.html new file mode 100644 index 000000000..649a2df00 --- /dev/null +++ b/layout/reftests/canvas/text-rtl-alignment-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure left/right and start/end are offset by text width for rtl text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + + ctx.fillStyle = 'black'; + ctx.font = '20px sans-serif'; + ctx.textBaseline = 'top'; + + var str = 'TEXT'; + var wid = ctx.measureText(str).width; + + ctx.textAlign = 'left'; + ctx.fillText(str, 64, 0); + ctx.textAlign = 'start'; + ctx.fillText(str, 64, 20); + ctx.textAlign = 'center'; + ctx.fillText(str, 64, 40); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-rtl-alignment-test.html b/layout/reftests/canvas/text-rtl-alignment-test.html new file mode 100644 index 000000000..a5218519b --- /dev/null +++ b/layout/reftests/canvas/text-rtl-alignment-test.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure left/right and start/end are offset by text width for rtl text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + + ctx.fillStyle = 'black'; + ctx.font = '20px sans-serif'; + ctx.textBaseline = 'top'; + + var str = 'TEXT'; + var wid = ctx.measureText(str).width; + + ctx.textAlign = 'right'; + ctx.fillText(str, 64+wid, 0); + ctx.textAlign = 'end'; + ctx.fillText(str, 64-wid, 20); + ctx.textAlign = 'left'; + ctx.fillText(str, 64-wid/2, 40); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-rtl-end.html b/layout/reftests/canvas/text-rtl-end.html new file mode 100644 index 000000000..0becdfcfb --- /dev/null +++ b/layout/reftests/canvas/text-rtl-end.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>end-aligned rtl text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'end'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-rtl-left.html b/layout/reftests/canvas/text-rtl-left.html new file mode 100644 index 000000000..ce0f13f53 --- /dev/null +++ b/layout/reftests/canvas/text-rtl-left.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>left-aligned rtl text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'left'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-rtl-right.html b/layout/reftests/canvas/text-rtl-right.html new file mode 100644 index 000000000..007a3ee97 --- /dev/null +++ b/layout/reftests/canvas/text-rtl-right.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>right-aligned rtl text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'right'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-rtl-start.html b/layout/reftests/canvas/text-rtl-start.html new file mode 100644 index 000000000..d8ff76c82 --- /dev/null +++ b/layout/reftests/canvas/text-rtl-start.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>start-aligned rtl text</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:rtl"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'text'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'start'; + ctx.fillText(str, 64, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-small-caps-1-ref.html b/layout/reftests/canvas/text-small-caps-1-ref.html new file mode 100644 index 000000000..0d5b0793e --- /dev/null +++ b/layout/reftests/canvas/text-small-caps-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +</style> +</head> +<body> +<canvas id="canvas1" width="400" height="400"></canvas> +<script type="text/javascript"> +var ctx = document.getElementById('canvas1').getContext('2d'); +ctx.font = "40px monospace"; +ctx.fillText("lowercase", 50, 50); +ctx.font = "32px monospace"; +ctx.fillText("SMALLCAPS", 50, 100); +ctx.font = "40px monospace"; +ctx.fillText("CAPITALS", 50, 150); +</script> +</body> diff --git a/layout/reftests/canvas/text-small-caps-1.html b/layout/reftests/canvas/text-small-caps-1.html new file mode 100644 index 000000000..9312a4e86 --- /dev/null +++ b/layout/reftests/canvas/text-small-caps-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +</style> +</head> +<body> +<canvas id="canvas1" width="400" height="400"></canvas> +<script type="text/javascript"> +var ctx = document.getElementById('canvas1').getContext('2d'); +ctx.font = "40px monospace"; +ctx.fillText("lowercase", 50, 50); +ctx.font = "small-caps 40px monospace"; +ctx.fillText("smallcaps", 50, 100); +ctx.font = "small-caps 40px monospace"; +ctx.fillText("CAPITALS", 50, 150); +</script> +</body> diff --git a/layout/reftests/canvas/text-space-replace-ref.html b/layout/reftests/canvas/text-space-replace-ref.html new file mode 100644 index 000000000..851e23953 --- /dev/null +++ b/layout/reftests/canvas/text-space-replace-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure whitespace characters are replaced with the space character</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'a b c d e f'; + ctx.fillStyle = 'black'; + ctx.font = '20px sans-serif'; + ctx.fillText(str, 0, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-space-replace-test.html b/layout/reftests/canvas/text-space-replace-test.html new file mode 100644 index 000000000..c4345d0e6 --- /dev/null +++ b/layout/reftests/canvas/text-space-replace-test.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Test to ensure whitespace characters are replaced with the space character</title> +</head> +<body> +<canvas id="c" width="128" height="64" style="direction:ltr"></canvas> +<script type="text/javascript"> + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + var str = 'a\x09b\x0Ac\x0Bd\x0Ce\x0Df'; + ctx.fillStyle = 'black'; + ctx.font = '20px sans-serif'; + ctx.fillText(str, 0, 32); + +</script> +</body> +</html> diff --git a/layout/reftests/canvas/text-subpixel-1-ref.html b/layout/reftests/canvas/text-subpixel-1-ref.html new file mode 100644 index 000000000..1dbfc8ab4 --- /dev/null +++ b/layout/reftests/canvas/text-subpixel-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML>
+<html>
+<body style="background:white">
+<canvas id="c" width="500" height="500"></canvas>
+<script>
+var ctx = c.getContext('2d');
+ctx.fillStyle = "black";
+ctx.font = "50px sans-serif";
+ctx.fillText("Hello", 200, 200);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-subpixel-1.html b/layout/reftests/canvas/text-subpixel-1.html new file mode 100644 index 000000000..b93d5a011 --- /dev/null +++ b/layout/reftests/canvas/text-subpixel-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML>
+<html>
+<body>
+<canvas moz-opaque id="c" width="500" height="500"></canvas>
+<script>
+var ctx = c.getContext('2d');
+ctx.fillStyle = "white";
+ctx.fillRect(0, 0, 500, 500);
+ctx.fillStyle = "black";
+ctx.font = "50px sans-serif";
+ctx.fillText("Hello", 200, 200);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-clip-ref.html b/layout/reftests/canvas/transformed-clip-ref.html new file mode 100644 index 000000000..c2efdfe10 --- /dev/null +++ b/layout/reftests/canvas/transformed-clip-ref.html @@ -0,0 +1,15 @@ +<html> +<body> + <canvas width="500" height="500"></canvas> +<script> + var canvas = document.getElementsByTagName('canvas')[0]; + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = "red"; + ctx.beginPath(); + ctx.rect(250, 250, 50, 50); + ctx.clip(); + ctx.fillRect(0,0,500,500); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/transformed-clip.html b/layout/reftests/canvas/transformed-clip.html new file mode 100644 index 000000000..c466b4740 --- /dev/null +++ b/layout/reftests/canvas/transformed-clip.html @@ -0,0 +1,16 @@ +<html> +<body> + <canvas width="500" height="500"></canvas> +<script> + var canvas = document.getElementsByTagName('canvas')[0]; + var ctx = canvas.getContext('2d'); + + ctx.translate(500, 500); + ctx.fillStyle = "red"; + ctx.beginPath(); + ctx.rect(-250, -250, 50, 50); + ctx.clip(); + ctx.fillRect(-500,-500,500,500); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/transformed-gradient-ref.html b/layout/reftests/canvas/transformed-gradient-ref.html new file mode 100644 index 000000000..20e91c556 --- /dev/null +++ b/layout/reftests/canvas/transformed-gradient-ref.html @@ -0,0 +1,17 @@ +<html> +<body> + <canvas width="500" height="500"></canvas> +<script> + var canvas = document.getElementsByTagName('canvas')[0]; + var ctx = canvas.getContext('2d'); + + var lineargradient = ctx.createLinearGradient(000,000,500,500); + lineargradient.addColorStop(0,'red'); + lineargradient.addColorStop(1,'black'); + ctx.fillStyle = lineargradient; + ctx.beginPath(); + ctx.rect(00, 00, 250, 250); + ctx.fill(); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/transformed-gradient.html b/layout/reftests/canvas/transformed-gradient.html new file mode 100644 index 000000000..223cd2899 --- /dev/null +++ b/layout/reftests/canvas/transformed-gradient.html @@ -0,0 +1,18 @@ +<html> +<body> + <canvas width="500" height="500"></canvas> +<script> + var canvas = document.getElementsByTagName('canvas')[0]; + var ctx = canvas.getContext('2d'); + + ctx.translate(500, 500); + var lineargradient = ctx.createLinearGradient(-500,-500,0,0); + lineargradient.addColorStop(0,'red'); + lineargradient.addColorStop(1,'black'); + ctx.fillStyle = lineargradient; + ctx.beginPath(); + ctx.rect(-500, -500, 250, 250); + ctx.fill(); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/transformed-path-ref.html b/layout/reftests/canvas/transformed-path-ref.html new file mode 100644 index 000000000..69134f20f --- /dev/null +++ b/layout/reftests/canvas/transformed-path-ref.html @@ -0,0 +1,19 @@ +<html> +<body> + <canvas width="500" height="500"></canvas> +<script> + var canvas = document.getElementsByTagName('canvas')[0]; + var ctx = canvas.getContext('2d'); + ctx.scale(0.5, 0.5); + + ctx.translate(41, 41.); + ctx.rect(0, 0, 100, 100); + ctx.moveTo(100,0); + ctx.quadraticCurveTo(200, 100, 300,0); + ctx.moveTo(300,0); + ctx.bezierCurveTo(400, 100, 500, -100, 600,0); + + ctx.stroke(); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/transformed-path.html b/layout/reftests/canvas/transformed-path.html new file mode 100644 index 000000000..8f6d4aed9 --- /dev/null +++ b/layout/reftests/canvas/transformed-path.html @@ -0,0 +1,21 @@ +<html> +<body> + <canvas width="500" height="500"></canvas> +<script> + var canvas = document.getElementsByTagName('canvas')[0]; + var ctx = canvas.getContext('2d'); + ctx.scale(0.5, 0.5); + + ctx.translate(41, 41.); + ctx.rect(0, 0, 100, 100); + ctx.translate(100, 0); + ctx.moveTo(0,0); + ctx.quadraticCurveTo(100, 100, 200,0); + ctx.translate(200, 0); + ctx.moveTo(0,0); + ctx.bezierCurveTo(100, 100, 200, -100, 300,0); + + ctx.stroke(); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/zero-dimensions-ref.html b/layout/reftests/canvas/zero-dimensions-ref.html new file mode 100644 index 000000000..d1003d6f0 --- /dev/null +++ b/layout/reftests/canvas/zero-dimensions-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<head> +<title>Empty Canvas</title> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/canvas/zero-dimensions.html b/layout/reftests/canvas/zero-dimensions.html new file mode 100644 index 000000000..e4b83d94c --- /dev/null +++ b/layout/reftests/canvas/zero-dimensions.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Empty Canvas</title> +</head> +<body> +<canvas style="border-width: 2px solid black" width="0" height="0"></canvas> +</body> +</html> |
