summaryrefslogtreecommitdiffstats
path: root/layout/reftests/canvas
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/canvas')
-rw-r--r--layout/reftests/canvas/1074733-1-ref.html23
-rw-r--r--layout/reftests/canvas/1074733-1.html23
-rw-r--r--layout/reftests/canvas/1107096-invisibles-ref.html23
-rw-r--r--layout/reftests/canvas/1107096-invisibles.html23
-rw-r--r--layout/reftests/canvas/1151821-1-ref.html20
-rw-r--r--layout/reftests/canvas/1151821-1.html26
-rw-r--r--layout/reftests/canvas/1201272-1-ref.html33
-rw-r--r--layout/reftests/canvas/1201272-1.html36
-rw-r--r--layout/reftests/canvas/1224976-1-ref.html2
-rw-r--r--layout/reftests/canvas/1224976-1.html10
-rw-r--r--layout/reftests/canvas/1238795-1-ref.html20
-rw-r--r--layout/reftests/canvas/1238795-1.html24
-rw-r--r--layout/reftests/canvas/1303534-1-ref.html17
-rw-r--r--layout/reftests/canvas/1303534-1.html25
-rw-r--r--layout/reftests/canvas/1304353-text-global-alpha-1-ref.html39
-rw-r--r--layout/reftests/canvas/1304353-text-global-alpha-1.html38
-rw-r--r--layout/reftests/canvas/1304353-text-global-alpha-2-ref.html39
-rw-r--r--layout/reftests/canvas/1304353-text-global-alpha-2.html38
-rw-r--r--layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html21
-rw-r--r--layout/reftests/canvas/1304353-text-global-composite-op-1.html24
-rw-r--r--layout/reftests/canvas/1347147-1-ref.html23
-rw-r--r--layout/reftests/canvas/1347147-1.html33
-rw-r--r--layout/reftests/canvas/1353000-1-ref.html31
-rw-r--r--layout/reftests/canvas/1353000-1.html31
-rw-r--r--layout/reftests/canvas/1447035-1-ref.html8
-rw-r--r--layout/reftests/canvas/1447035-1.html21
-rw-r--r--layout/reftests/canvas/1817455-1-ref.html9
-rw-r--r--layout/reftests/canvas/1817455-1.html9
-rw-r--r--layout/reftests/canvas/1817873-1-ref.html13
-rw-r--r--layout/reftests/canvas/1817873-1.html14
-rw-r--r--layout/reftests/canvas/672646-alpha-radial-gradient-ref.html19
-rw-r--r--layout/reftests/canvas/672646-alpha-radial-gradient.html24
-rw-r--r--layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html11
-rw-r--r--layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html36
-rw-r--r--layout/reftests/canvas/693610-1-notref.html18
-rw-r--r--layout/reftests/canvas/693610-1.html16
-rw-r--r--layout/reftests/canvas/726951-shadow-clips-ref.html18
-rw-r--r--layout/reftests/canvas/726951-shadow-clips.html18
-rw-r--r--layout/reftests/canvas/749467-1-ref.html28
-rw-r--r--layout/reftests/canvas/749467-1.html31
-rw-r--r--layout/reftests/canvas/784573-1-ref.html28
-rw-r--r--layout/reftests/canvas/784573-1.html36
-rw-r--r--layout/reftests/canvas/802658-1-ref.html25
-rw-r--r--layout/reftests/canvas/802658-1.html26
-rw-r--r--layout/reftests/canvas/copy-clip-ref.html7
-rw-r--r--layout/reftests/canvas/copy-clip.html22
-rw-r--r--layout/reftests/canvas/ctm-sanity.html85
-rw-r--r--layout/reftests/canvas/ctm-singular-sanity.html60
-rw-r--r--layout/reftests/canvas/dash-1-ref.svg18
-rw-r--r--layout/reftests/canvas/dash-1.html34
-rw-r--r--layout/reftests/canvas/dash-sanity.html98
-rw-r--r--layout/reftests/canvas/default-size-ref.html7
-rw-r--r--layout/reftests/canvas/default-size.html7
-rw-r--r--layout/reftests/canvas/empty-transaction-1-ref.html6
-rw-r--r--layout/reftests/canvas/empty-transaction-1.html14
-rw-r--r--layout/reftests/canvas/evenodd-fill-1.html15
-rw-r--r--layout/reftests/canvas/evenodd-fill-2.html19
-rw-r--r--layout/reftests/canvas/evenodd-fill-3.html26
-rw-r--r--layout/reftests/canvas/evenodd-fill-ref.html17
-rw-r--r--layout/reftests/canvas/evenodd-fill-sanity.html43
-rw-r--r--layout/reftests/canvas/image-rendering-auto.html32
-rw-r--r--layout/reftests/canvas/image-rendering-ref.html26
-rw-r--r--layout/reftests/canvas/image-rendering-script.html38
-rw-r--r--layout/reftests/canvas/image-rendering-test.html29
-rw-r--r--layout/reftests/canvas/image-shadow-ref.html7
-rw-r--r--layout/reftests/canvas/image-shadow.html18
-rw-r--r--layout/reftests/canvas/image_green-16x16.pngbin0 -> 92 bytes
-rw-r--r--layout/reftests/canvas/large-canvas-ref.html5
-rw-r--r--layout/reftests/canvas/large-canvas.html11
-rw-r--r--layout/reftests/canvas/linear-gradient-1-ref.html3
-rw-r--r--layout/reftests/canvas/linear-gradient-1a.html14
-rw-r--r--layout/reftests/canvas/linear-gradient-1b.html14
-rw-r--r--layout/reftests/canvas/nonzero-fill-1.html15
-rw-r--r--layout/reftests/canvas/nonzero-fill-2.html26
-rw-r--r--layout/reftests/canvas/reftest.list121
-rw-r--r--layout/reftests/canvas/size-1-ref.html9
-rw-r--r--layout/reftests/canvas/size-1.html12
-rw-r--r--layout/reftests/canvas/size-change-1-ref.html6
-rw-r--r--layout/reftests/canvas/size-change-1.html22
-rw-r--r--layout/reftests/canvas/strokeText-path-ref.html23
-rw-r--r--layout/reftests/canvas/strokeText-path.html33
-rw-r--r--layout/reftests/canvas/subpixel-1.html14
-rw-r--r--layout/reftests/canvas/text-bidi-ltr-notref.html22
-rw-r--r--layout/reftests/canvas/text-bidi-ltr-ref.html20
-rw-r--r--layout/reftests/canvas/text-bidi-ltr-test.html20
-rw-r--r--layout/reftests/canvas/text-bidi-rtl-ref.html20
-rw-r--r--layout/reftests/canvas/text-bidi-rtl-test.html20
-rw-r--r--layout/reftests/canvas/text-big-fill.html22
-rw-r--r--layout/reftests/canvas/text-big-stroke.html22
-rw-r--r--layout/reftests/canvas/text-blank.html14
-rw-r--r--layout/reftests/canvas/text-context-state-ref.html32
-rw-r--r--layout/reftests/canvas/text-context-state-test.html40
-rw-r--r--layout/reftests/canvas/text-emoji-notref.html28
-rw-r--r--layout/reftests/canvas/text-emoji.html28
-rw-r--r--layout/reftests/canvas/text-font-inherit.html21
-rw-r--r--layout/reftests/canvas/text-font-lang-notref.html50
-rw-r--r--layout/reftests/canvas/text-font-lang.html56
-rw-r--r--layout/reftests/canvas/text-horzline-with-bottom.html27
-rw-r--r--layout/reftests/canvas/text-horzline-with-top.html27
-rw-r--r--layout/reftests/canvas/text-horzline.html20
-rw-r--r--layout/reftests/canvas/text-indent-1-ref.html4
-rw-r--r--layout/reftests/canvas/text-indent-1a.html4
-rw-r--r--layout/reftests/canvas/text-indent-1b.html14
-rw-r--r--layout/reftests/canvas/text-ltr-alignment-ref.html29
-rw-r--r--layout/reftests/canvas/text-ltr-alignment-test.html29
-rw-r--r--layout/reftests/canvas/text-ltr-end.html19
-rw-r--r--layout/reftests/canvas/text-ltr-left.html19
-rw-r--r--layout/reftests/canvas/text-ltr-right.html19
-rw-r--r--layout/reftests/canvas/text-ltr-start.html19
-rw-r--r--layout/reftests/canvas/text-measure-ref.html15
-rw-r--r--layout/reftests/canvas/text-measure.html19
-rw-r--r--layout/reftests/canvas/text-no-frame-2-test.html29
-rw-r--r--layout/reftests/canvas/text-no-frame-ref.html21
-rw-r--r--layout/reftests/canvas/text-no-frame-test.html27
-rw-r--r--layout/reftests/canvas/text-not-in-doc-ref.html21
-rw-r--r--layout/reftests/canvas/text-not-in-doc-test.html26
-rw-r--r--layout/reftests/canvas/text-rtl-alignment-ref.html29
-rw-r--r--layout/reftests/canvas/text-rtl-alignment-test.html29
-rw-r--r--layout/reftests/canvas/text-rtl-end.html19
-rw-r--r--layout/reftests/canvas/text-rtl-left.html19
-rw-r--r--layout/reftests/canvas/text-rtl-right.html19
-rw-r--r--layout/reftests/canvas/text-rtl-start.html19
-rw-r--r--layout/reftests/canvas/text-small-caps-1-ref.html19
-rw-r--r--layout/reftests/canvas/text-small-caps-1.html19
-rw-r--r--layout/reftests/canvas/text-space-replace-ref.html19
-rw-r--r--layout/reftests/canvas/text-space-replace-test.html19
-rw-r--r--layout/reftests/canvas/text-subpixel-1-ref.html12
-rw-r--r--layout/reftests/canvas/text-subpixel-1.html14
-rw-r--r--layout/reftests/canvas/transformed-clip-ref.html15
-rw-r--r--layout/reftests/canvas/transformed-clip.html16
-rw-r--r--layout/reftests/canvas/transformed-gradient-ref.html17
-rw-r--r--layout/reftests/canvas/transformed-gradient.html18
-rw-r--r--layout/reftests/canvas/transformed-path-ref.html19
-rw-r--r--layout/reftests/canvas/transformed-path.html21
-rw-r--r--layout/reftests/canvas/zero-dimensions-ref.html8
-rw-r--r--layout/reftests/canvas/zero-dimensions.html9
136 files changed, 3148 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/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
new file mode 100644
index 0000000000..e19a3ffddd
--- /dev/null
+++ b/layout/reftests/canvas/image_green-16x16.png
Binary files differ
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..65a37d12e2
--- /dev/null
+++ b/layout/reftests/canvas/reftest.list
@@ -0,0 +1,121 @@
+== 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-if(cocoaWidget,0-1,0-1302) fuzzy-if(winWidget,0-1,0-578) == 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
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-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>