diff options
Diffstat (limited to 'layout/reftests/canvas')
144 files changed, 3281 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 0000000000..89b87374de --- /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 0000000000..6a13bd1b9f --- /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 0000000000..4c6698d282 --- /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 0000000000..78f3b98562 --- /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 0000000000..993fd790a3 --- /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 0000000000..f34cdadedf --- /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 0000000000..75c992fc93 --- /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 0000000000..e9a7a28342 --- /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 0000000000..24b18fad30 --- /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 0000000000..63badf019d --- /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 0000000000..b49a086407 --- /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 0000000000..8431d8e01b --- /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 0000000000..d7ee6c7560 --- /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 0000000000..e937c6fcf2 --- /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 0000000000..d9ed082d19 --- /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 0000000000..bb38c01800 --- /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 0000000000..66c4d80624 --- /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 0000000000..1957fda7cb --- /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 0000000000..0123c37064 --- /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 0000000000..cb7e00ae7a --- /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/1347147-1-ref.html b/layout/reftests/canvas/1347147-1-ref.html new file mode 100644 index 0000000000..ddce7ec578 --- /dev/null +++ b/layout/reftests/canvas/1347147-1-ref.html @@ -0,0 +1,23 @@ +<!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, 100, 50); + + c.fillStyle = 'red'; + c.fillRect(40, 0, 30, 50); + + c.fillStyle = 'blue'; + c.fillRect(70, 0, 30, 50); + } + </script> + </head> + <body onload="draw();"> + <canvas id='c' width='100' height='50'></canvas> + </body> +</html> diff --git a/layout/reftests/canvas/1347147-1.html b/layout/reftests/canvas/1347147-1.html new file mode 100644 index 0000000000..013edfd053 --- /dev/null +++ b/layout/reftests/canvas/1347147-1.html @@ -0,0 +1,33 @@ +<!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, 100, 50); + + var imgdata = c.createImageData(60, 50); + for (var i = 0; i < imgdata.data.length; i += 4 * 60) { + for (var x = i; x < i + 4 * 30; x += 4) { + imgdata.data[x] = 255; + imgdata.data[x+3] = 255; + } + for (var x = i + 4 * 30; x < i + 4 * 60; x += 4) { + imgdata.data[x+2] = 255; + imgdata.data[x+3] = 255; + } + } + + // Verify that putImageData is not affected by the current transform. + c.translate(20, 0); + c.putImageData(imgdata, 40, 0); + } + </script> + </head> + <body onload="draw();"> + <canvas id='c' width='100' height='50'></canvas> + </body> +</html> diff --git a/layout/reftests/canvas/1353000-1-ref.html b/layout/reftests/canvas/1353000-1-ref.html new file mode 100644 index 0000000000..e8b68f7cb8 --- /dev/null +++ b/layout/reftests/canvas/1353000-1-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<script> +function draw(id, r, c) { + var txt = "TryToTaLLY-" + id + "__________" + r; + var ctx = document.getElementById(id).getContext('2d'); + ctx.font = '15px Arial'; + ctx.fillStyle = c; + if (r) { + ctx.save(); + ctx.rotate(Math.PI / 4); + ctx.fillText(txt, 200, 0); + ctx.restore(); + } + ctx.fillText(txt, 10, 20); +} +</script> +<style> +canvas { border: 1px solid silver; margin: 10px; } +</style> +</head> +<body> +<div style="float:left; transform: translate(300px, 150px) scale(3)"> + <canvas id="c1" width="120" height="50"></canvas> +</div> +<script> +draw("c1", false, "red"); +draw("c1", false, "green"); +</script> +</body> diff --git a/layout/reftests/canvas/1353000-1.html b/layout/reftests/canvas/1353000-1.html new file mode 100644 index 0000000000..8202631ec3 --- /dev/null +++ b/layout/reftests/canvas/1353000-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<script> +function draw(id, r, c) { + var txt = "TryToTaLLY-" + id + "__________" + r; + var ctx = document.getElementById(id).getContext('2d'); + ctx.font = '15px Arial'; + ctx.fillStyle = c; + if (r) { + ctx.save(); + ctx.rotate(Math.PI / 4); + ctx.fillText(txt, 200, 0); + ctx.restore(); + } + ctx.fillText(txt, 10, 20); +} +</script> +<style> +canvas { border: 1px solid silver; margin: 10px; } +</style> +</head> +<body> +<div style="float:left; transform: translate(300px, 150px) scale(3)"> + <canvas id="c1" width="120" height="50"></canvas> +</div> +<script> +draw("c1", true, "red"); +draw("c1", false, "green"); +</script> +</body> diff --git a/layout/reftests/canvas/1447035-1-ref.html b/layout/reftests/canvas/1447035-1-ref.html new file mode 100644 index 0000000000..508804e240 --- /dev/null +++ b/layout/reftests/canvas/1447035-1-ref.html @@ -0,0 +1,8 @@ +<html> +<body> +<canvas id="whiteCanvas" width="200" height="100" style="background-color: white;"></canvas> +<br> +<canvas id="purpleCanvas" width="200" height="100" style="background-color: purple;"></canvas> +</body> +</html> + diff --git a/layout/reftests/canvas/1447035-1.html b/layout/reftests/canvas/1447035-1.html new file mode 100644 index 0000000000..1b1b24bca4 --- /dev/null +++ b/layout/reftests/canvas/1447035-1.html @@ -0,0 +1,21 @@ +<html> +<body onload="fillCanvas('white'); fillCanvas('purple');"> +<script> +function fillCanvas(gradColor) { + var c = document.getElementById(gradColor + 'Canvas'); + var ctx = c.getContext("2d"); + // Create solid-color gradient, with all stops same color + var grd = ctx.createRadialGradient(75,50,5,90,60,100); + grd.addColorStop(0,gradColor); + grd.addColorStop(1,gradColor); + // Fill with gradient, but effectively a solid fill + ctx.fillStyle = grd; + ctx.fillRect(0,0,200,100); +} +</script> +<canvas id="whiteCanvas" width="200" height="100"></canvas> +<br> +<canvas id="purpleCanvas" width="200" height="100"></canvas> +</body> +</html> + diff --git a/layout/reftests/canvas/1817455-1-ref.html b/layout/reftests/canvas/1817455-1-ref.html new file mode 100644 index 0000000000..6955c99c12 --- /dev/null +++ b/layout/reftests/canvas/1817455-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<canvas id="c" width="200" height="100"></canvas> +<script> +var canvas = document.getElementById('c'); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = 'green'; +ctx.rect(-275, 0, 331, 12); +ctx.fill(); +</script> diff --git a/layout/reftests/canvas/1817455-1.html b/layout/reftests/canvas/1817455-1.html new file mode 100644 index 0000000000..6c2208566a --- /dev/null +++ b/layout/reftests/canvas/1817455-1.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<canvas id="c" width="200" height="100"></canvas> +<script> +var canvas = document.getElementById('c'); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = 'green'; +ctx.rect(-807188275, 0, 807188331, 12); +ctx.fill(); +</script> diff --git a/layout/reftests/canvas/1817873-1-ref.html b/layout/reftests/canvas/1817873-1-ref.html new file mode 100644 index 0000000000..299c4857a3 --- /dev/null +++ b/layout/reftests/canvas/1817873-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<canvas id="c" width="200" height="100"></canvas> +<script> +var canvas = document.getElementById('c'); +var ctx = canvas.getContext('2d'); +ctx.strokeStyle = 'green'; +ctx.lineWidth = '10'; +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(20, 30); +ctx.closePath(); +ctx.stroke(); +</script> diff --git a/layout/reftests/canvas/1817873-1.html b/layout/reftests/canvas/1817873-1.html new file mode 100644 index 0000000000..61b0189183 --- /dev/null +++ b/layout/reftests/canvas/1817873-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<canvas id="c" width="200" height="100"></canvas> +<script> +var canvas = document.getElementById('c'); +var ctx = canvas.getContext('2d'); +ctx.strokeStyle = 'green'; +ctx.lineWidth = '10'; +ctx.lineJoin = 'round'; +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(20, 30); +ctx.closePath(); +ctx.stroke(); +</script> diff --git a/layout/reftests/canvas/1846079-1-ref.html b/layout/reftests/canvas/1846079-1-ref.html new file mode 100644 index 0000000000..ffe7b851a1 --- /dev/null +++ b/layout/reftests/canvas/1846079-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="c" width="50" height="50"></canvas> +</body> +</html> + + diff --git a/layout/reftests/canvas/1846079-1.html b/layout/reftests/canvas/1846079-1.html new file mode 100644 index 0000000000..0df732c78f --- /dev/null +++ b/layout/reftests/canvas/1846079-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="c" width="50" height="50"></canvas> + +<script> +const c = document.getElementById("c"); +const ctx = c.getContext("2d"); + +ctx.translate(20, 20); + +ctx.beginPath(); +ctx.lineTo(0, 0); +ctx.lineTo(0, 20); +ctx.stroke(); + +</script> + +</body> +</html> + + diff --git a/layout/reftests/canvas/1850284-1-ref.html b/layout/reftests/canvas/1850284-1-ref.html new file mode 100644 index 0000000000..7fa47fa9f8 --- /dev/null +++ b/layout/reftests/canvas/1850284-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="c" width="50" height="50"></canvas> +<script> +const c = document.getElementById("c"); +const ctx = c.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(30, 20); +ctx.stroke(); + +</script> +</body> +<html> diff --git a/layout/reftests/canvas/1850284-1.html b/layout/reftests/canvas/1850284-1.html new file mode 100644 index 0000000000..b54dfb1cfb --- /dev/null +++ b/layout/reftests/canvas/1850284-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="c" width="50" height="50"></canvas> +<script> +const c = document.getElementById("c"); +const ctx = c.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.arc(20, 20, 10, 0, 0); +ctx.stroke(); + +</script> +</body> +<html> diff --git a/layout/reftests/canvas/1850727-1-ref.html b/layout/reftests/canvas/1850727-1-ref.html new file mode 100644 index 0000000000..53d04bb977 --- /dev/null +++ b/layout/reftests/canvas/1850727-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="c" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/canvas/1850727-1.html b/layout/reftests/canvas/1850727-1.html new file mode 100644 index 0000000000..683c87bc85 --- /dev/null +++ b/layout/reftests/canvas/1850727-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="c" width="200" height="200"></canvas> + +<script> +const c = document.getElementById("c"); +const ctx = c.getContext("2d"); + +ctx.translate(20, 20); + +ctx.beginPath(); +ctx.arc(0, 0, 15, 0, 2 * Math.PI); +ctx.clip(); + +ctx.beginPath(); +ctx.arc(0, 0, 10, 0, 2 * Math.PI); +ctx.lineWidth = 2; +ctx.globalAlpha = 0.5; +ctx.strokeStyle = '#00ff00'; +ctx.stroke(); + +</script> + +</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 0000000000..90dcdff63c --- /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 0000000000..4969a3250b --- /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 0000000000..f90e61da87 --- /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 0000000000..7d2ba0aa32 --- /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 0000000000..6f2642da1e --- /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 0000000000..77745ae5f5 --- /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 0000000000..b7be1ec0c7 --- /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 0000000000..b14e0c307d --- /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 0000000000..fe3aa32d67 --- /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 0000000000..8b2bbaa2df --- /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 0000000000..d0a0939cd3 --- /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 0000000000..cc2534ce84 --- /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 0000000000..c6330ce4d2 --- /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 0000000000..20aeb9b554 --- /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/copy-clip-ref.html b/layout/reftests/canvas/copy-clip-ref.html new file mode 100644 index 0000000000..c5cc14fac0 --- /dev/null +++ b/layout/reftests/canvas/copy-clip-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> +<body> +<div style="width: 100px; height:100px; background: red"></div> +</body> + +</html> diff --git a/layout/reftests/canvas/copy-clip.html b/layout/reftests/canvas/copy-clip.html new file mode 100644 index 0000000000..aa2761c559 --- /dev/null +++ b/layout/reftests/canvas/copy-clip.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<body> +<script> +function test() { + let canvas = document.createElement('canvas'); + canvas.width = canvas.height = 200; + let ctx = canvas.getContext('2d'); + ctx.globalCompositeOperation = 'copy'; + ctx.translate(0, 0); + ctx.rect(0, 0, 100, 100); + ctx.clip(); + ctx.fillStyle = '#f00'; + ctx.resetTransform(); + ctx.fillRect(0, 0, canvas.width, canvas.height); + return canvas; +} + +document.body.appendChild(test(0)); +</script> +</body> +</html> diff --git a/layout/reftests/canvas/ctm-sanity.html b/layout/reftests/canvas/ctm-sanity.html new file mode 100644 index 0000000000..c0ff466a33 --- /dev/null +++ b/layout/reftests/canvas/ctm-sanity.html @@ -0,0 +1,85 @@ +<html> +<head> + <script type="text/javascript"> +function assert(cond, msg) { + if (!cond) { + throw msg; + } +} + +assert.equal = function(m1, m2, msg) { + assert( + m1.is2D && + m2.is2D && + m1.a === m2.a && + m1.b === m2.b && + m1.c === m2.c && + m1.d === m2.d && + m1.e === m2.e && + m1.f === m2.f, + msg + ); +}; + +window.onload = function() { + var IM = new DOMMatrix([1, 0, 0, 1, 0, 0]); + + try { + var ctx = document.getElementById("c1").getContext("2d"); + + assert.equal(ctx.getTransform(), IM, "Transform is identity by default"); + assert.equal( + ctx.getTransform().invertSelf(), + IM, + "Inverse transform is identity by default" + ); + + var m = new DOMMatrix([1, 2, 3, 4, 5, 6]); + ctx.setTransform(m); + assert.equal(ctx.getTransform(), m, "Transform successfully set"); + + var badVals = [ + ["string"], + [-1], + ["string", 1, 2, 3, 4, 5], + [{ obj: true }, 1, 2, 3, 4, 5], + ]; + for (var i = 0; i < badVals.length; ++i) { + try { + ctx.setTransform(...badVals[i]); + } catch {} + assert.equal( + ctx.getTransform(), + m, + "Expected |setTransform(" + badVals[i] + ")| to not change transform" + ); + } + + ctx.setTransform(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.setTransform(...noopVals[i]); + assert.equal( + ctx.getTransform(), + IM, + "Illegal float values result in a no-op" + ); + } + + ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f); + assert.equal(ctx.getTransform(), m, "setTransform() updates transform"); + } 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 0000000000..48617d7628 --- /dev/null +++ b/layout/reftests/canvas/ctm-singular-sanity.html @@ -0,0 +1,60 @@ +<html> +<head> + <script type="text/javascript"> +function assert(cond, msg) { + if (!cond) { + throw msg; + } +} + +assert.equal = function(m1, m2, msg) { + assert( + m1.is2D && + m2.is2D && + m1.a === m2.a && + m1.b === m2.b && + m1.c === m2.c && + m1.d === m2.d && + m1.e === m2.e && + m1.f === m2.f, + msg + ); +}; + +window.onload = function() { + try { + var ctx = document.getElementById("c1").getContext("2d"); + + var singular = new DOMMatrix([0, 0, 0, 0, 0, 0]); + ctx.setTransform(singular); + assert.equal( + ctx.getTransform(), + singular, + "Expected setting transform to a singular matrix to work" + ); + var inv = ctx.getTransform().invertSelf(); + assert( + isNaN(inv.a) && isNaN(inv.b) && isNaN(inv.c) && isNaN(inv.d), + "Expected to get back matrix of NaN's from inverse transform" + ); + + var m = new DOMMatrix([1, 2, 3, 4, 5, 6]); + ctx.setTransform(m); + ctx.setTransform(singular.invertSelf()); + assert.equal( + ctx.getTransform(), + m, + "Setting transform to an inverse singular matrix is a no-op" + ); + } 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 0000000000..b1c3b967f9 --- /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 0000000000..28b228e938 --- /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 0000000000..779fbdeeef --- /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 0000000000..641497401d --- /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 0000000000..32c14bdcca --- /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 0000000000..37eb544efb --- /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 0000000000..34736b1d3b --- /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);
+</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 0000000000..084ddbcb67 --- /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 0000000000..ccbe0dabf2 --- /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 0000000000..f07bb53c5b --- /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 0000000000..0a9a0f3f3e --- /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 0000000000..863a79c148 --- /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-auto.html b/layout/reftests/canvas/image-rendering-auto.html new file mode 100644 index 0000000000..a46510ba0e --- /dev/null +++ b/layout/reftests/canvas/image-rendering-auto.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html reftest-zoom="2" class="reftest-wait">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>test image-rendering auto</title>
+ <style>
+ canvas { position:absolute;left:0px;top:0px; }
+ </style>
+ <script type="text/javascript">
+ document.addEventListener("MozReftestInvalidate", draw);
+
+ 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: auto;" id="canvas" width="300" height="300"></canvas>
+ </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 0000000000..d2b6f5b7de --- /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-script.html b/layout/reftests/canvas/image-rendering-script.html new file mode 100644 index 0000000000..2f6fc64085 --- /dev/null +++ b/layout/reftests/canvas/image-rendering-script.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html reftest-zoom="2" class="reftest-wait">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>test image-rendering script change</title>
+ <style>
+ canvas { position:absolute;left:0px;top:0px; }
+ </style>
+ <script type="text/javascript">
+ document.addEventListener("MozReftestInvalidate", updateImageRendering);
+
+ function updateImageRendering() {
+ var canvas = document.getElementById("canvas");
+ canvas.style.imageRendering = '-moz-crisp-edges';
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+ </head>
+
+ <body>
+ <canvas style="image-rendering: auto;" id="canvas" width="300" height="300">
+ </canvas>
+
+ <script type="text/javascript">
+ 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);
+ </script>
+ </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 0000000000..218d6d72f5 --- /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); + + 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 0000000000..c75f330852 --- /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 0000000000..47fe121c4f --- /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 0000000000..e19a3ffddd --- /dev/null +++ b/layout/reftests/canvas/image_green-16x16.png diff --git a/layout/reftests/canvas/large-canvas-ref.html b/layout/reftests/canvas/large-canvas-ref.html new file mode 100644 index 0000000000..a04633a46c --- /dev/null +++ b/layout/reftests/canvas/large-canvas-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<html> +<body style="background:lime; margin: 0px;"> +</body> +</html> diff --git a/layout/reftests/canvas/large-canvas.html b/layout/reftests/canvas/large-canvas.html new file mode 100644 index 0000000000..c55c7442ce --- /dev/null +++ b/layout/reftests/canvas/large-canvas.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body style="margin:0px; overflow:hidden"> +<canvas style="display:block" id="c" width="1024" height="1024"></canvas> +<script> +var ctx = document.getElementById("c").getContext("2d"); +ctx.fillStyle = "lime"; +ctx.fillRect(0, 0, 1024, 1024); +</script> +</body> +</html> 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 0000000000..1e18b9d610 --- /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 0000000000..817711cc34 --- /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 0000000000..1e08ec7419 --- /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 0000000000..936d0ce29a --- /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 0000000000..890716b81f --- /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.list b/layout/reftests/canvas/reftest.list new file mode 100644 index 0000000000..a95705d633 --- /dev/null +++ b/layout/reftests/canvas/reftest.list @@ -0,0 +1,129 @@ +== default-size.html default-size-ref.html +fuzzy-if(Android,0-8,0-1000) == size-1.html size-1-ref.html + +== empty-transaction-1.html empty-transaction-1-ref.html + +fails-if(useDrawSnapshot) == image-rendering-test.html image-rendering-ref.html +fails-if(useDrawSnapshot) == image-rendering-script.html image-rendering-ref.html +fails-if(useDrawSnapshot) != image-rendering-auto.html image-rendering-script.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 + +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-256) == text-horzline-with-bottom.html text-horzline.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-256) fails-if(azureSkia&&OSX) == 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,0-10,0-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) +## 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.) +random != text-emoji.html text-emoji-notref.html + +== linear-gradient-1a.html linear-gradient-1-ref.html + +== 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(0-9,0-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 + +== 672646-alpha-radial-gradient.html 672646-alpha-radial-gradient-ref.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-45) == 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(0-1,0-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(0-16,0-84) fuzzy-if(d2d&&/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-2,0-153) == 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 +fuzzy(0-1,0-43) == 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 + +fuzzy-if(cocoaWidget,0-1,0-1410) == 1304353-text-global-alpha-1.html 1304353-text-global-alpha-1-ref.html +fuzzy(0-1,0-1302) == 1304353-text-global-alpha-2.html 1304353-text-global-alpha-2-ref.html +fuzzy-if(winWidget,0-94,0-1575) fuzzy-if(cocoaWidget,0-1,0-34) == 1304353-text-global-composite-op-1.html 1304353-text-global-composite-op-1-ref.html + +== text-indent-1a.html text-indent-1-ref.html +== text-indent-1b.html text-indent-1-ref.html + +== 1347147-1.html 1347147-1-ref.html +== 1353000-1.html 1353000-1-ref.html +== 1447035-1.html 1447035-1-ref.html + +== large-canvas.html large-canvas-ref.html +== copy-clip.html copy-clip-ref.html + +== 1817455-1.html 1817455-1-ref.html +!= 1817873-1.html 1817873-1-ref.html + +!= 1846079-1.html 1846079-1-ref.html + +== 1850284-1.html 1850284-1-ref.html + +!= 1850727-1.html 1850727-1-ref.html + +== transformed-line-stroke.html transformed-line-stroke-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 0000000000..1212b88927 --- /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 0000000000..afca44ea63 --- /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 0000000000..31c5893feb --- /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 0000000000..afe22d856b --- /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); +</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 0000000000..475e0d60a5 --- /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 0000000000..c90ea70f80 --- /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 0000000000..398912e471 --- /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 0000000000..075f83c631 --- /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 0000000000..524be1edd4 --- /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 0000000000..9e263b9d0c --- /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 0000000000..c264e7104e --- /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 0000000000..a444aca322 --- /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 0000000000..28755a273e --- /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 0000000000..74cca8480e --- /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 0000000000..2d2ad4087b --- /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 0000000000..c267fcf5f8 --- /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 0000000000..71abf7ca67 --- /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 0000000000..493bd1d269 --- /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 0000000000..21ce9a7086 --- /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 0000000000..379b111f86 --- /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 0000000000..64f5cb5192 --- /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 0000000000..370f21aa86 --- /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 0000000000..2d7a233634 --- /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 0000000000..d0aead2882 --- /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 0000000000..46c427f22b --- /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-indent-1-ref.html b/layout/reftests/canvas/text-indent-1-ref.html new file mode 100644 index 0000000000..444d232187 --- /dev/null +++ b/layout/reftests/canvas/text-indent-1-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<iframe sandbox + style="width: 400px" + srcdoc="<div style='text-indent: 50vw'>Text</div>"></iframe> diff --git a/layout/reftests/canvas/text-indent-1a.html b/layout/reftests/canvas/text-indent-1a.html new file mode 100644 index 0000000000..84c0c16c8f --- /dev/null +++ b/layout/reftests/canvas/text-indent-1a.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<iframe sandbox + style="width: 400px" + srcdoc="<canvas style='text-indent: 50vw; display: block'>Text</canvas>"></iframe> diff --git a/layout/reftests/canvas/text-indent-1b.html b/layout/reftests/canvas/text-indent-1b.html new file mode 100644 index 0000000000..79e34623f7 --- /dev/null +++ b/layout/reftests/canvas/text-indent-1b.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <iframe sandbox + style="width: 200px" + srcdoc="<canvas style='text-indent: 50vw; display: block'>Text</canvas>"></iframe> + <script> + onload = function() { + var i = document.querySelector("iframe"); + window.w = i.offsetWidth; + i.style.width = "400px"; + document.documentElement.className = ""; + } + </script> +</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 0000000000..c6f634daed --- /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 0000000000..5a4200c8de --- /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 0000000000..d0bb581523 --- /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 0000000000..43bb6f5b18 --- /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 0000000000..4b8426d1c7 --- /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 0000000000..ad36627824 --- /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 0000000000..ae72e4071b --- /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 0000000000..3fd08aefc1 --- /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 0000000000..8c38b96d16 --- /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 0000000000..91f724aa2d --- /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 0000000000..6fff8166d8 --- /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 0000000000..26330ac52a --- /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 0000000000..3575e9233b --- /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 0000000000..649a2df006 --- /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 0000000000..a5218519b9 --- /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 0000000000..0becdfcfbe --- /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 0000000000..ce0f13f53c --- /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 0000000000..007a3ee978 --- /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 0000000000..d8ff76c826 --- /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 0000000000..0d5b0793ed --- /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 0000000000..9312a4e867 --- /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 0000000000..851e239531 --- /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 0000000000..c4345d0e6d --- /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 0000000000..1dbfc8ab4d --- /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 0000000000..b93d5a0119 --- /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 0000000000..c2efdfe101 --- /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 0000000000..c466b47401 --- /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 0000000000..20e91c5566 --- /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 0000000000..223cd2899b --- /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-line-stroke-ref.html b/layout/reftests/canvas/transformed-line-stroke-ref.html new file mode 100644 index 0000000000..f8860e6cce --- /dev/null +++ b/layout/reftests/canvas/transformed-line-stroke-ref.html @@ -0,0 +1,15 @@ +<canvas id=c></canvas> +<script> +const canvas = document.getElementById("c"); +const ctx = canvas.getContext("2d"); + +canvas.width = 600; +canvas.height = 300; + + +ctx.strokeStyle = "rgba(0, 0, 0, 1)"; +ctx.beginPath(); +ctx.moveTo(88, 137.5); +ctx.lineTo(736, 137.5); +ctx.stroke(); +</script> diff --git a/layout/reftests/canvas/transformed-line-stroke.html b/layout/reftests/canvas/transformed-line-stroke.html new file mode 100644 index 0000000000..75dcb4332e --- /dev/null +++ b/layout/reftests/canvas/transformed-line-stroke.html @@ -0,0 +1,16 @@ +<canvas id=c></canvas> +<script> +const canvas = document.getElementById("c"); +const ctx = canvas.getContext("2d"); + +canvas.width = 600; +canvas.height = 300; + +ctx.translate(-5, 0); + +ctx.strokeStyle = "rgba(0, 0, 0, 1)"; +ctx.beginPath(); +ctx.moveTo(93, 137.5); +ctx.lineTo(741, 137.5); +ctx.stroke(); +</script> diff --git a/layout/reftests/canvas/transformed-path-ref.html b/layout/reftests/canvas/transformed-path-ref.html new file mode 100644 index 0000000000..69134f20fe --- /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 0000000000..8f6d4aed91 --- /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 0000000000..d1003d6f06 --- /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 0000000000..e4b83d94cd --- /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> |
