144 files changed, 3281 insertions, 0 deletions
diff --git a/layout/reftests/canvas/1074733-1-ref.html b/layout/reftests/canvas/1074733-1-ref.html
new file mode 100644
index 0000000000..89b87374de
--- /dev/null
+++ b/layout/reftests/canvas/1074733-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script type="text/javascript">
+      function bodyonload() {
+        var canvas=document.getElementById('test');
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = 'green';
+        ctx.fillRect(-1, 50, 151, 50); // left at -1
+        ctx.fillStyle = 'red';
+        ctx.rect(-1, 100, 151, 50); // left at -1
+        ctx.fill();
+        ctx.fillStyle = 'blue';
+        ctx.fillRect(0, 150, 150, 50); // left at 0
+      }
+    </script>
+  </head>
+  <body onload="bodyonload();">
+    <canvas id="test" width="200" height="200"></canvas>
+  </body>
+</html>
+
diff --git a/layout/reftests/canvas/1074733-1.html b/layout/reftests/canvas/1074733-1.html
new file mode 100644
index 0000000000..6a13bd1b9f
--- /dev/null
+++ b/layout/reftests/canvas/1074733-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script type="text/javascript">
+      function bodyonload() {
+        var canvas=document.getElementById('test');
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = 'green';
+        ctx.fillRect(150, 50, -151, 50); // left at -1
+        ctx.fillStyle = 'red';
+        ctx.rect(150, 100, -151, 50); // left at -1
+        ctx.fill();
+        ctx.fillStyle = 'blue';
+        ctx.fillRect(150, 150, -150, 50); // left at 0
+      }
+    </script>
+  </head>
+  <body onload="bodyonload();">
+    <canvas id="test" width="200" height="200"></canvas>
+  </body>
+</html>
+
diff --git a/layout/reftests/canvas/1107096-invisibles-ref.html b/layout/reftests/canvas/1107096-invisibles-ref.html
new file mode 100644
index 0000000000..4c6698d282
--- /dev/null
+++ b/layout/reftests/canvas/1107096-invisibles-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script>
+function draw() {
+	var c = document.getElementById('cc');
+	var g = c.getContext('2d');
+	g.fillStyle = 'red';
+	g.fillRect(0, 0, 200, 200);
+	g.font = '24px arial, sans-serif';
+	g.fillStyle = '#fff';
+	g.fillText('__', 10, 30);
+	g.fillText('__', 10, 60);
+	g.fillText('__', 10, 90);
+	g.fillText('__', 10, 120);
+}
+</script>
+</head>
+<body onload='draw()'>
+<canvas id='cc' width='200' height='200'></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1107096-invisibles.html b/layout/reftests/canvas/1107096-invisibles.html
new file mode 100644
index 0000000000..78f3b98562
--- /dev/null
+++ b/layout/reftests/canvas/1107096-invisibles.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script>
+function draw() {
+	var c = document.getElementById('cc');
+	var g = c.getContext('2d');
+	g.fillStyle = 'red';
+	g.fillRect(0, 0, 200, 200);
+	g.font = '24px arial, sans-serif';
+	g.fillStyle = '#fff';
+	g.fillText('_\u00AD_', 10, 30);	// soft hyphen
+	g.fillText('_\u200B_', 10, 60);	// ZWSP
+	g.fillText('_\u200C_', 10, 90);	// ZWNJ
+	g.fillText('_\u200D_', 10, 120);// ZWJ
+}
+</script>
+</head>
+<body onload='draw()'>
+<canvas id='cc' width='200' height='200'></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1151821-1-ref.html b/layout/reftests/canvas/1151821-1-ref.html
new file mode 100644
index 0000000000..993fd790a3
--- /dev/null
+++ b/layout/reftests/canvas/1151821-1-ref.html
@@ -0,0 +1,20 @@
+<!docytpe html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<script>
+window.onload=function(){
+
+var c=document.getElementById("myCanvas").getContext("2d");
+
+c.fillStyle="green";
+
+c.fillRect(0, 0,100,100);
+
+}
+</script>
+</head>
+<body>
+<canvas id="myCanvas" height=50 width=100></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1151821-1.html b/layout/reftests/canvas/1151821-1.html
new file mode 100644
index 0000000000..f34cdadedf
--- /dev/null
+++ b/layout/reftests/canvas/1151821-1.html
@@ -0,0 +1,26 @@
+<!docytpe html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<script>
+window.onload=function(){
+
+var c=document.getElementById("myCanvas").getContext("2d");
+
+c.fillStyle = "green";
+
+c.fillRect(0, 0,100,100);
+
+c.fillStyle = "red";
+c.globalCompositeOperation = "destination-over";
+c.rect(0, 0, 100, 100);
+c.clip();
+c.fillRect(0, 0, 100, 100);
+
+}
+</script>
+</head>
+<body>
+<canvas id="myCanvas" height=50 width=100></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1201272-1-ref.html b/layout/reftests/canvas/1201272-1-ref.html
new file mode 100644
index 0000000000..75c992fc93
--- /dev/null
+++ b/layout/reftests/canvas/1201272-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script>
+function draw() {
+var ctx = document.getElementById('c').getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 74, 0, 2 * Math.PI);
+ctx.closePath();
+ctx.fill();
+
+ctx.globalCompositeOperation = 'destination-out';
+ctx.beginPath();
+ctx.arc(75, 75, 40, 0, 2 * Math.PI);
+ctx.closePath();
+ctx.fill();
+
+ctx.globalCompositeOperation = 'source-over';
+ctx.lineWidth = 10;
+ctx.strokeStyle = 'green';
+ctx.beginPath();
+ctx.arc(75, 75, 40, 0, 2 * Math.PI);
+ctx.closePath();
+ctx.stroke();
+}
+</script>
+</head>
+<body onload='draw()' style='background: white;'>
+<canvas id='c' width='200' height='200'></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1201272-1.html b/layout/reftests/canvas/1201272-1.html
new file mode 100644
index 0000000000..e9a7a28342
--- /dev/null
+++ b/layout/reftests/canvas/1201272-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<script>
+function draw() {
+var ctx = document.getElementById('c').getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 74, 0, 2 * Math.PI);
+ctx.closePath();
+ctx.fill();
+
+ctx.globalCompositeOperation = 'destination-out';
+ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
+ctx.shadowBlur = 3;
+ctx.beginPath();
+ctx.arc(75, 75, 40, 0, 2 * Math.PI);
+ctx.closePath();
+ctx.fill();
+ctx.shadowBlur = 0;
+
+ctx.globalCompositeOperation = 'source-over';
+ctx.lineWidth = 10;
+ctx.strokeStyle = 'green';
+ctx.beginPath();
+ctx.arc(75, 75, 40, 0, 2 * Math.PI);
+ctx.closePath();
+ctx.stroke();
+}
+</script>
+</head>
+<body onload='draw()' style='background: white;'>
+<canvas id='c' width='200' height='200'></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1224976-1-ref.html b/layout/reftests/canvas/1224976-1-ref.html
new file mode 100644
index 0000000000..24b18fad30
--- /dev/null
+++ b/layout/reftests/canvas/1224976-1-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="background:black; width:10px; height:10px"></div>
diff --git a/layout/reftests/canvas/1224976-1.html b/layout/reftests/canvas/1224976-1.html
new file mode 100644
index 0000000000..63badf019d
--- /dev/null
+++ b/layout/reftests/canvas/1224976-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<canvas id="c"></canvas>
+<script>
+var ctx = c.getContext('2d');
+ctx.scale(0,1);
+ctx.fillStyle = "black";
+ctx.fillRect(0, 0, 10, 10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 10, 10);
+</script>
diff --git a/layout/reftests/canvas/1238795-1-ref.html b/layout/reftests/canvas/1238795-1-ref.html
new file mode 100644
index 0000000000..b49a086407
--- /dev/null
+++ b/layout/reftests/canvas/1238795-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function draw() {
+        var c = document.getElementById('c').getContext('2d');
+
+        c.fillStyle = 'red';
+        c.fillRect(0, 0, 200, 200);
+
+        c.fillStyle = 'lime';
+        c.fillRect(0, 0, 100, 100);
+      }
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id='c' width='200' height='200'></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/canvas/1238795-1.html b/layout/reftests/canvas/1238795-1.html
new file mode 100644
index 0000000000..8431d8e01b
--- /dev/null
+++ b/layout/reftests/canvas/1238795-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function draw() {
+        var c = document.getElementById('c').getContext('2d');
+        var img = document.getElementById("img");
+
+        c.fillStyle = 'red';
+        c.fillRect(0, 0, 200, 200);
+
+        c.rect(0, 0, 100, 100);
+        c.clip();
+
+        c.drawImage(img, 0, 0, 200, 200);
+      }
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id='c' width='200' height='200'></canvas>
+    <img id="img" src="image_green-16x16.png" style="display:none">
+  </body>
+</html>
diff --git a/layout/reftests/canvas/1303534-1-ref.html b/layout/reftests/canvas/1303534-1-ref.html
new file mode 100644
index 0000000000..d7ee6c7560
--- /dev/null
+++ b/layout/reftests/canvas/1303534-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function draw() {
+        var c = document.getElementById('c').getContext('2d');
+
+        c.fillStyle = 'lime';
+        c.fillRect(0, 0, 200, 100);
+      }
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id='c' width='200' height='100'></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/canvas/1303534-1.html b/layout/reftests/canvas/1303534-1.html
new file mode 100644
index 0000000000..e937c6fcf2
--- /dev/null
+++ b/layout/reftests/canvas/1303534-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function draw() {
+        var c = document.getElementById('c').getContext('2d');
+        var img = document.getElementById("img");
+
+        c.fillStyle = 'lime';
+        c.fillRect(0, 0, 200, 100);
+
+        c.rect(0, 0, 200, 100);
+        c.clip();
+        
+        c.globalCompositeOperation = "multiply";
+        c.fillStyle = 'rgb(255, 255, 255)';
+        c.fillRect(0, 0, 200, 100);
+      }
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id='c' width='200' height='100'></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/canvas/1304353-text-global-alpha-1-ref.html b/layout/reftests/canvas/1304353-text-global-alpha-1-ref.html
new file mode 100644
index 0000000000..d9ed082d19
--- /dev/null
+++ b/layout/reftests/canvas/1304353-text-global-alpha-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script>
+function do_test() {
+    var canvas = document.getElementById("test");
+    var ctx = canvas.getContext("2d");
+
+    var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    g.addColorStop(0, "red");
+    g.addColorStop(1, "green");
+
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = "white";
+    ctx.font = "bold 24px sans-serif";
+
+    ctx.fillText('globalAlpha = 1.0', 20, 40);
+
+    // for reference, use a fill color with alpha instead of global alpha
+    ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
+    ctx.fillText('globalAlpha = 0.5', 20, 80);
+
+    ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
+    ctx.fillText('globalAlpha = 0.2', 20, 120);
+};
+</script>
+
+</head>
+
+<body onload="do_test()">
+
+<canvas id="test"></canvas>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/1304353-text-global-alpha-1.html b/layout/reftests/canvas/1304353-text-global-alpha-1.html
new file mode 100644
index 0000000000..bb38c01800
--- /dev/null
+++ b/layout/reftests/canvas/1304353-text-global-alpha-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script>
+function do_test() {
+    var canvas = document.getElementById("test");
+    var ctx = canvas.getContext("2d");
+
+    var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    g.addColorStop(0, "red");
+    g.addColorStop(1, "green");
+
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = "white";
+    ctx.font = "bold 24px sans-serif";
+
+    ctx.fillText('globalAlpha = 1.0', 20, 40);
+
+    ctx.globalAlpha = 0.5;
+    ctx.fillText('globalAlpha = 0.5', 20, 80);
+
+    ctx.globalAlpha = 0.2;
+    ctx.fillText('globalAlpha = 0.2', 20, 120);
+};
+</script>
+
+</head>
+
+<body onload="do_test()">
+
+<canvas id="test"></canvas>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/1304353-text-global-alpha-2-ref.html b/layout/reftests/canvas/1304353-text-global-alpha-2-ref.html
new file mode 100644
index 0000000000..66c4d80624
--- /dev/null
+++ b/layout/reftests/canvas/1304353-text-global-alpha-2-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script>
+function do_test() {
+    var canvas = document.getElementById("test");
+    var ctx = canvas.getContext("2d");
+
+    var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    g.addColorStop(0, "red");
+    g.addColorStop(1, "green");
+
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.strokeStyle = "white";
+    ctx.font = "bold 24px sans-serif";
+
+    ctx.strokeText('globalAlpha = 1.0', 20, 40);
+
+    // for reference, use a stroke color with alpha instead of global alpha
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
+    ctx.strokeText('globalAlpha = 0.5', 20, 80);
+
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
+    ctx.strokeText('globalAlpha = 0.2', 20, 120);
+};
+</script>
+
+</head>
+
+<body onload="do_test()">
+
+<canvas id="test"></canvas>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/1304353-text-global-alpha-2.html b/layout/reftests/canvas/1304353-text-global-alpha-2.html
new file mode 100644
index 0000000000..1957fda7cb
--- /dev/null
+++ b/layout/reftests/canvas/1304353-text-global-alpha-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<script>
+function do_test() {
+    var canvas = document.getElementById("test");
+    var ctx = canvas.getContext("2d");
+
+    var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    g.addColorStop(0, "red");
+    g.addColorStop(1, "green");
+
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.strokeStyle = "white";
+    ctx.font = "bold 24px sans-serif";
+
+    ctx.strokeText('globalAlpha = 1.0', 20, 40);
+
+    ctx.globalAlpha = 0.5;
+    ctx.strokeText('globalAlpha = 0.5', 20, 80);
+
+    ctx.globalAlpha = 0.2;
+    ctx.strokeText('globalAlpha = 0.2', 20, 120);
+};
+</script>
+
+</head>
+
+<body onload="do_test()">
+
+<canvas id="test"></canvas>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html b/layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html
new file mode 100644
index 0000000000..0123c37064
--- /dev/null
+++ b/layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+function test() {
+  var c = document.getElementById("c");
+  var ctx = c.getContext("2d");
+  ctx.fillStyle = "green";
+  ctx.fillRect(0, 0, 300, 75);
+  ctx.font = "36px sans-serif";
+  ctx.fillStyle = "white";
+  ctx.fillText("HELLO", 50, 50);
+  ctx.fillStyle = "green";
+  ctx.fillText("WORLD", 50, 120);
+}
+</script>
+</head>
+<body onload="test()">
+<canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas>
+</body>
+</html
diff --git a/layout/reftests/canvas/1304353-text-global-composite-op-1.html b/layout/reftests/canvas/1304353-text-global-composite-op-1.html
new file mode 100644
index 0000000000..cb7e00ae7a
--- /dev/null
+++ b/layout/reftests/canvas/1304353-text-global-composite-op-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+function test() {
+  var c = document.getElementById("c");
+  var ctx = c.getContext("2d");
+  ctx.fillStyle = "green";
+  ctx.fillRect(0, 0, 300, 150);
+  ctx.fillStyle = "red";
+  ctx.font = "36px sans-serif";
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.fillText("HELLO", 50, 50);
+  ctx.rect(0, 75, 300, 75);
+  ctx.clip();
+  ctx.globalCompositeOperation = "destination-atop";
+  ctx.fillText("WORLD", 50, 120);
+}
+</script>
+</head>
+<body onload="test()">
+<canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas>
+</body>
+</html
diff --git a/layout/reftests/canvas/1347147-1-ref.html b/layout/reftests/canvas/1347147-1-ref.html
new file mode 100644
index 0000000000..ddce7ec578
--- /dev/null
+++ b/layout/reftests/canvas/1347147-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function draw() {
+        var c = document.getElementById('c').getContext('2d');
+
+        c.fillStyle = 'lime';
+        c.fillRect(0, 0, 100, 50);
+
+        c.fillStyle = 'red';
+        c.fillRect(40, 0, 30, 50);
+
+        c.fillStyle = 'blue';
+        c.fillRect(70, 0, 30, 50);
+      }
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id='c' width='100' height='50'></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/canvas/1347147-1.html b/layout/reftests/canvas/1347147-1.html
new file mode 100644
index 0000000000..013edfd053
--- /dev/null
+++ b/layout/reftests/canvas/1347147-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function draw() {
+        var c = document.getElementById('c').getContext('2d');
+
+        c.fillStyle = 'lime';
+        c.fillRect(0, 0, 100, 50);
+
+        var imgdata = c.createImageData(60, 50);
+        for (var i = 0; i < imgdata.data.length; i += 4 * 60) {
+            for (var x = i; x < i + 4 * 30; x += 4) {
+                imgdata.data[x] = 255;
+                imgdata.data[x+3] = 255;
+            }
+            for (var x = i + 4 * 30; x < i + 4 * 60; x += 4) {
+                imgdata.data[x+2] = 255;
+                imgdata.data[x+3] = 255;
+            }
+        }
+
+        // Verify that putImageData is not affected by the current transform.
+        c.translate(20, 0);
+        c.putImageData(imgdata, 40, 0);
+      }
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id='c' width='100' height='50'></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/canvas/1353000-1-ref.html b/layout/reftests/canvas/1353000-1-ref.html
new file mode 100644
index 0000000000..e8b68f7cb8
--- /dev/null
+++ b/layout/reftests/canvas/1353000-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+function draw(id, r, c) {
+  var txt = "TryToTaLLY-" + id + "__________" + r;
+  var ctx = document.getElementById(id).getContext('2d');
+  ctx.font = '15px Arial';
+  ctx.fillStyle = c;
+  if (r) {
+      ctx.save();
+      ctx.rotate(Math.PI / 4);
+      ctx.fillText(txt, 200, 0);
+      ctx.restore();
+  }
+  ctx.fillText(txt, 10, 20);
+}
+</script>
+<style>
+canvas { border: 1px solid silver; margin: 10px; }
+</style>
+</head>
+<body>
+<div style="float:left; transform: translate(300px, 150px) scale(3)">
+    <canvas id="c1" width="120" height="50"></canvas>
+</div>
+<script>
+draw("c1", false, "red");
+draw("c1", false, "green");
+</script>
+</body>
diff --git a/layout/reftests/canvas/1353000-1.html b/layout/reftests/canvas/1353000-1.html
new file mode 100644
index 0000000000..8202631ec3
--- /dev/null
+++ b/layout/reftests/canvas/1353000-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+function draw(id, r, c) {
+  var txt = "TryToTaLLY-" + id + "__________" + r;
+  var ctx = document.getElementById(id).getContext('2d');
+  ctx.font = '15px Arial';
+  ctx.fillStyle = c;
+  if (r) {
+      ctx.save();
+      ctx.rotate(Math.PI / 4);
+      ctx.fillText(txt, 200, 0);
+      ctx.restore();
+  }
+  ctx.fillText(txt, 10, 20);
+}
+</script>
+<style>
+canvas { border: 1px solid silver; margin: 10px; }
+</style>
+</head>
+<body>
+<div style="float:left; transform: translate(300px, 150px) scale(3)">
+    <canvas id="c1" width="120" height="50"></canvas>
+</div>
+<script>
+draw("c1", true, "red");
+draw("c1", false, "green");
+</script>
+</body>
diff --git a/layout/reftests/canvas/1447035-1-ref.html b/layout/reftests/canvas/1447035-1-ref.html
new file mode 100644
index 0000000000..508804e240
--- /dev/null
+++ b/layout/reftests/canvas/1447035-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+<canvas id="whiteCanvas" width="200" height="100" style="background-color: white;"></canvas>
+<br>
+<canvas id="purpleCanvas" width="200" height="100" style="background-color: purple;"></canvas>
+</body>
+</html>
+
diff --git a/layout/reftests/canvas/1447035-1.html b/layout/reftests/canvas/1447035-1.html
new file mode 100644
index 0000000000..1b1b24bca4
--- /dev/null
+++ b/layout/reftests/canvas/1447035-1.html
@@ -0,0 +1,21 @@
+<html>
+<body onload="fillCanvas('white'); fillCanvas('purple');">
+<script>
+function fillCanvas(gradColor) {
+    var c = document.getElementById(gradColor + 'Canvas');
+    var ctx = c.getContext("2d");
+    // Create solid-color gradient, with all stops same color
+    var grd = ctx.createRadialGradient(75,50,5,90,60,100);
+    grd.addColorStop(0,gradColor);
+    grd.addColorStop(1,gradColor);
+    // Fill with gradient, but effectively a solid fill
+    ctx.fillStyle = grd;
+    ctx.fillRect(0,0,200,100);
+}
+</script>
+<canvas id="whiteCanvas" width="200" height="100"></canvas>
+<br>
+<canvas id="purpleCanvas" width="200" height="100"></canvas>
+</body>
+</html>
+
diff --git a/layout/reftests/canvas/1817455-1-ref.html b/layout/reftests/canvas/1817455-1-ref.html
new file mode 100644
index 0000000000..6955c99c12
--- /dev/null
+++ b/layout/reftests/canvas/1817455-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<canvas id="c" width="200" height="100"></canvas>
+<script>
+var canvas = document.getElementById('c');
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = 'green';
+ctx.rect(-275, 0, 331, 12);
+ctx.fill();
+</script>
diff --git a/layout/reftests/canvas/1817455-1.html b/layout/reftests/canvas/1817455-1.html
new file mode 100644
index 0000000000..6c2208566a
--- /dev/null
+++ b/layout/reftests/canvas/1817455-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<canvas id="c" width="200" height="100"></canvas>
+<script>
+var canvas = document.getElementById('c');
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = 'green';
+ctx.rect(-807188275, 0, 807188331, 12);
+ctx.fill();
+</script>
diff --git a/layout/reftests/canvas/1817873-1-ref.html b/layout/reftests/canvas/1817873-1-ref.html
new file mode 100644
index 0000000000..299c4857a3
--- /dev/null
+++ b/layout/reftests/canvas/1817873-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<canvas id="c" width="200" height="100"></canvas>
+<script>
+var canvas = document.getElementById('c');
+var ctx = canvas.getContext('2d');
+ctx.strokeStyle = 'green';
+ctx.lineWidth = '10';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(20, 30);
+ctx.closePath();
+ctx.stroke();
+</script>
diff --git a/layout/reftests/canvas/1817873-1.html b/layout/reftests/canvas/1817873-1.html
new file mode 100644
index 0000000000..61b0189183
--- /dev/null
+++ b/layout/reftests/canvas/1817873-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<canvas id="c" width="200" height="100"></canvas>
+<script>
+var canvas = document.getElementById('c');
+var ctx = canvas.getContext('2d');
+ctx.strokeStyle = 'green';
+ctx.lineWidth = '10';
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(20, 30);
+ctx.closePath();
+ctx.stroke();
+</script>
diff --git a/layout/reftests/canvas/1846079-1-ref.html b/layout/reftests/canvas/1846079-1-ref.html
new file mode 100644
index 0000000000..ffe7b851a1
--- /dev/null
+++ b/layout/reftests/canvas/1846079-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="c" width="50" height="50"></canvas>
+</body>
+</html>
+
+
diff --git a/layout/reftests/canvas/1846079-1.html b/layout/reftests/canvas/1846079-1.html
new file mode 100644
index 0000000000..0df732c78f
--- /dev/null
+++ b/layout/reftests/canvas/1846079-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="c" width="50" height="50"></canvas>
+
+<script>
+const c = document.getElementById("c");
+const ctx = c.getContext("2d");
+
+ctx.translate(20, 20);
+
+ctx.beginPath();
+ctx.lineTo(0, 0);
+ctx.lineTo(0, 20);
+ctx.stroke();
+
+</script>
+
+</body>
+</html>
+
+
diff --git a/layout/reftests/canvas/1850284-1-ref.html b/layout/reftests/canvas/1850284-1-ref.html
new file mode 100644
index 0000000000..7fa47fa9f8
--- /dev/null
+++ b/layout/reftests/canvas/1850284-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="c" width="50" height="50"></canvas>
+<script>
+const c = document.getElementById("c");
+const ctx = c.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(30, 20);
+ctx.stroke();
+
+</script>
+</body>
+<html>
diff --git a/layout/reftests/canvas/1850284-1.html b/layout/reftests/canvas/1850284-1.html
new file mode 100644
index 0000000000..b54dfb1cfb
--- /dev/null
+++ b/layout/reftests/canvas/1850284-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="c" width="50" height="50"></canvas>
+<script>
+const c = document.getElementById("c");
+const ctx = c.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.arc(20, 20, 10, 0, 0);
+ctx.stroke();
+
+</script>
+</body>
+<html>
diff --git a/layout/reftests/canvas/1850727-1-ref.html b/layout/reftests/canvas/1850727-1-ref.html
new file mode 100644
index 0000000000..53d04bb977
--- /dev/null
+++ b/layout/reftests/canvas/1850727-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="c" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/1850727-1.html b/layout/reftests/canvas/1850727-1.html
new file mode 100644
index 0000000000..683c87bc85
--- /dev/null
+++ b/layout/reftests/canvas/1850727-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="c" width="200" height="200"></canvas>
+
+<script>
+const c = document.getElementById("c");
+const ctx = c.getContext("2d");
+
+ctx.translate(20, 20);
+
+ctx.beginPath();
+ctx.arc(0, 0, 15, 0, 2 * Math.PI);
+ctx.clip();
+
+ctx.beginPath();
+ctx.arc(0, 0, 10, 0, 2 * Math.PI);
+ctx.lineWidth = 2;
+ctx.globalAlpha = 0.5;
+ctx.strokeStyle = '#00ff00';
+ctx.stroke();
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/672646-alpha-radial-gradient-ref.html b/layout/reftests/canvas/672646-alpha-radial-gradient-ref.html
new file mode 100644
index 0000000000..90dcdff63c
--- /dev/null
+++ b/layout/reftests/canvas/672646-alpha-radial-gradient-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<head>
+  <style>
+  body {
+    background-color: blue;
+  }
+  </style>
+
+<body>
+  <canvas id="mycanvas" width="200" height="200"></canvas>
+
+  <script type="text/javascript">
+  var cx = document.getElementById('mycanvas').getContext('2d');
+  cx.beginPath();
+  cx.arc(100, 100, 80, 0, Math.PI*2, true); 
+  cx.closePath();
+  cx.fillStyle = "white";
+  cx.fill();
+  </script>
diff --git a/layout/reftests/canvas/672646-alpha-radial-gradient.html b/layout/reftests/canvas/672646-alpha-radial-gradient.html
new file mode 100644
index 0000000000..4969a3250b
--- /dev/null
+++ b/layout/reftests/canvas/672646-alpha-radial-gradient.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<head>
+  <style>
+  body {
+    background-color: blue;
+  }
+  </style>
+
+<body>
+  <canvas id="mycanvas" width="200" height="200"></canvas>
+
+  <script type="text/javascript">
+  var cx = document.getElementById('mycanvas').getContext('2d');
+  var g = cx.createRadialGradient(100, 100, 50, 100, 100, 75);
+  g.addColorStop(0, 'rgba(100%, 100%, 0%, 0.5)');
+  g.addColorStop(1, 'rgba(100%, 100%, 0%, 0)');
+  cx.fillStyle = g;
+  cx.fillRect(0, 0, 200, 200);
+  cx.beginPath();
+  cx.arc(100, 100, 80, 0, Math.PI*2, true); 
+  cx.closePath();
+  cx.fillStyle = "white";
+  cx.fill();
+  </script>
diff --git a/layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html
new file mode 100644
index 0000000000..f90e61da87
--- /dev/null
+++ b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html
@@ -0,0 +1,11 @@
+<body bgcolor="orange">
+    <canvas width="300" height="300" id="testcase-canvas-dest"></canvas>
+  <script>
+    const kTransparent = "rgba(0%, 100%, 100%, 0.5)";
+
+    cx2 = document.getElementById('testcase-canvas-dest').getContext('2d');
+    cx2.fillStyle = kTransparent;
+    cx2.fillRect(0,0,100,20);
+  </script>
+
+</window>
diff --git a/layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html
new file mode 100644
index 0000000000..7d2ba0aa32
--- /dev/null
+++ b/layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html
@@ -0,0 +1,36 @@
+<body bgcolor="orange">
+    <canvas width="300" height="300" id="testcase-canvas" style="display:none"></canvas>
+    <canvas width="300" height="300" id="testcase-canvas-dest"></canvas>
+  <script>
+    const kShadow = "rgba(00%, 0%, 0%, 1)";
+    const kTransparent = "rgba(0%, 100%, 100%, 0.5)";
+
+    var cx, g;
+
+    cx = document.getElementById('testcase-canvas').getContext('2d');
+    
+    cx.fillStyle = kShadow;
+    cx.fillRect(100, 50, 150, 50);
+
+    g = cx.createLinearGradient(0, 50, 0, 0);
+    g.addColorStop(0, kShadow);
+    g.addColorStop(0.2, kTransparent);
+    g.addColorStop(1, kTransparent);
+    cx.fillStyle = g;
+    cx.fillRect(100, 0, 150, 50);
+
+    g = cx.createRadialGradient(100, 100, 50, 100, 100, 100);
+    g.addColorStop(0, kShadow);
+    g.addColorStop(0.2, kTransparent);
+    g.addColorStop(1, kTransparent);
+    cx.fillStyle = g;
+    cx.beginPath();
+    cx.arc(100, 100, 100, Math.PI * 0.5, Math.PI * 1.5);
+    cx.fill();
+    
+    cx2 = document.getElementById('testcase-canvas-dest').getContext('2d');
+    // draw a chunk of the gradients from above onto testcase-canvas-dest
+    cx2.drawImage(document.getElementById('testcase-canvas'),45,20, 100,20 ,0,0, 100,20);
+  </script>
+
+</window>
diff --git a/layout/reftests/canvas/693610-1-notref.html b/layout/reftests/canvas/693610-1-notref.html
new file mode 100644
index 0000000000..6f2642da1e
--- /dev/null
+++ b/layout/reftests/canvas/693610-1-notref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+<p><canvas width="500" height="200" id="c"></canvas></p>
+<script type="text/javascript">
+const t1 = '你好';
+const t2 = 'Hello';
+var c = document.getElementById('c').getContext('2d');
+c.font = 'serif';
+c.fontSize = '15';
+c.fillText(t1, 10, 100);
+c.fillText(t2, 10, 100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/693610-1.html b/layout/reftests/canvas/693610-1.html
new file mode 100644
index 0000000000..77745ae5f5
--- /dev/null
+++ b/layout/reftests/canvas/693610-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+<p><canvas width="500" height="200" id="c"></canvas></p>
+<script type="text/javascript">
+const t = '你好Hello';
+var c = document.getElementById('c').getContext('2d');
+c.font = 'serif';
+c.fontSize = '15';
+c.fillText(t, 10, 100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/726951-shadow-clips-ref.html b/layout/reftests/canvas/726951-shadow-clips-ref.html
new file mode 100644
index 0000000000..b7be1ec0c7
--- /dev/null
+++ b/layout/reftests/canvas/726951-shadow-clips-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<head>
+  
+<body>
+  <canvas id="mycanvas" width="200" height="200"></canvas>
+
+  <script type="text/javascript">
+  var cx = document.getElementById('mycanvas').getContext('2d');
+  cx.beginPath();
+  cx.rect(10, 10, 50, 50);
+  cx.clip();
+  cx.beginPath();
+  cx.rect(0, 0, 50, 50);
+  cx.shadowColor = "black";
+  cx.shadowOffsetX = 10;
+  cx.shadowOffsetY = 10;
+  cx.fill();
+  </script>
diff --git a/layout/reftests/canvas/726951-shadow-clips.html b/layout/reftests/canvas/726951-shadow-clips.html
new file mode 100644
index 0000000000..b14e0c307d
--- /dev/null
+++ b/layout/reftests/canvas/726951-shadow-clips.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<head>
+  
+<body>
+  <canvas id="mycanvas" width="200" height="600"></canvas>
+
+  <script type="text/javascript">
+  var cx = document.getElementById('mycanvas').getContext('2d');
+  cx.beginPath();
+  cx.rect(10, 10, 50, 50);
+  cx.clip();
+  cx.beginPath();
+  cx.rect(0, 0, 50, 50);
+  cx.shadowColor = "black";
+  cx.shadowOffsetX = 10;
+  cx.shadowOffsetY = 10;
+  cx.fill();
+  </script>
diff --git a/layout/reftests/canvas/749467-1-ref.html b/layout/reftests/canvas/749467-1-ref.html
new file mode 100644
index 0000000000..fe3aa32d67
--- /dev/null
+++ b/layout/reftests/canvas/749467-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+<p><canvas width="500" height="200" id="c"></canvas></p>
+<script type="text/javascript">
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+
+  ctx.lineWidth = 20;
+  ctx.strokeStyle = 'rgb(0,0,0)';
+
+  ctx.moveTo(10, 30);
+  ctx.lineTo(50, 50);
+
+  ctx.stroke();
+
+  ctx.lineTo(80, 80);
+  ctx.stroke();
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/749467-1.html b/layout/reftests/canvas/749467-1.html
new file mode 100644
index 0000000000..8b2bbaa2df
--- /dev/null
+++ b/layout/reftests/canvas/749467-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+<p><canvas width="500" height="200" id="c"></canvas></p>
+<script type="text/javascript">
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+
+  ctx.lineWidth = 20;
+  ctx.strokeStyle = 'rgb(0,0,0)';
+
+  ctx.save();
+
+  ctx.moveTo(10, 30);
+  ctx.lineTo(50, 50);
+
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.lineTo(80, 80);
+  ctx.stroke();
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/784573-1-ref.html b/layout/reftests/canvas/784573-1-ref.html
new file mode 100644
index 0000000000..d0a0939cd3
--- /dev/null
+++ b/layout/reftests/canvas/784573-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+<p><canvas width="100" height="100" id="c"></canvas></p>
+<script type="text/javascript">
+var c = document.getElementById('c').getContext('2d');
+
+c.shadowColor = '#f00';
+c.shadowBlur = 4;
+c.lineWidth = 2;
+
+c.moveTo(80, 40);
+c.lineTo(50, 70);
+c.lineTo(20, 40);
+c.lineTo(50, 10);
+c.closePath();
+c.stroke();
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/784573-1.html b/layout/reftests/canvas/784573-1.html
new file mode 100644
index 0000000000..cc2534ce84
--- /dev/null
+++ b/layout/reftests/canvas/784573-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    This tests that paths are stored in device space. This means that changing
+    the transform does not move the points already drawn.
+  -->
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+<p><canvas width="100" height="100" id="c"></canvas></p>
+<script type="text/javascript">
+var c = document.getElementById('c').getContext('2d');
+
+c.shadowColor = '#f00';
+c.shadowBlur = 4;
+c.lineWidth = 2;
+
+c.translate(50, 40);
+
+var d = 30;
+c.beginPath();
+c.moveTo(d, 0);
+for (var n = 0; n < 3; n++) {
+  c.rotate(3.14159 / 2);
+  c.lineTo(d, 0);
+}
+c.closePath();
+c.stroke();
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/802658-1-ref.html b/layout/reftests/canvas/802658-1-ref.html
new file mode 100644
index 0000000000..c6330ce4d2
--- /dev/null
+++ b/layout/reftests/canvas/802658-1-ref.html
@@ -0,0 +1,25 @@
+<!docytpe html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<script>
+window.onload=function(){
+
+var c=document.getElementById("myCanvas").getContext("2d");
+
+c.font="35px sans-serif";
+
+c.shadowBlur=60;
+c.shadowColor="blue";
+
+c.fillText("ABCDEFG",100,100);
+
+
+
+}
+</script>
+</head>
+<body>
+<canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/802658-1.html b/layout/reftests/canvas/802658-1.html
new file mode 100644
index 0000000000..20aeb9b554
--- /dev/null
+++ b/layout/reftests/canvas/802658-1.html
@@ -0,0 +1,26 @@
+<!docytpe html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<script>
+window.onload=function(){
+
+var c=document.getElementById("myCanvas").getContext("2d");
+
+c.font="35px sans-serif";
+
+c.translate(100,100);
+c.shadowBlur=60;
+c.shadowColor="blue";
+
+c.fillText("ABCDEFG",0,0);
+
+
+
+}
+</script>
+</head>
+<body>
+<canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas>
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/canvas/copy-clip-ref.html b/layout/reftests/canvas/copy-clip-ref.html
new file mode 100644
index 0000000000..c5cc14fac0
--- /dev/null
+++ b/layout/reftests/canvas/copy-clip-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="width: 100px; height:100px; background: red"></div>
+</body>
+
+</html>
diff --git a/layout/reftests/canvas/copy-clip.html b/layout/reftests/canvas/copy-clip.html
new file mode 100644
index 0000000000..aa2761c559
--- /dev/null
+++ b/layout/reftests/canvas/copy-clip.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script>
+function test() {
+	let canvas = document.createElement('canvas');
+	canvas.width = canvas.height = 200;
+	let ctx = canvas.getContext('2d');
+	ctx.globalCompositeOperation = 'copy';
+	ctx.translate(0, 0);
+	ctx.rect(0, 0, 100, 100);
+	ctx.clip();
+	ctx.fillStyle = '#f00';
+	ctx.resetTransform();
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	return canvas;
+}
+
+document.body.appendChild(test(0));
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/ctm-sanity.html b/layout/reftests/canvas/ctm-sanity.html
new file mode 100644
index 0000000000..c0ff466a33
--- /dev/null
+++ b/layout/reftests/canvas/ctm-sanity.html
@@ -0,0 +1,85 @@
+<html>
+<head>
+  <script type="text/javascript">
+function assert(cond, msg) {
+  if (!cond) {
+    throw msg;
+  }
+}
+
+assert.equal = function(m1, m2, msg) {
+  assert(
+    m1.is2D &&
+      m2.is2D &&
+      m1.a === m2.a &&
+      m1.b === m2.b &&
+      m1.c === m2.c &&
+      m1.d === m2.d &&
+      m1.e === m2.e &&
+      m1.f === m2.f,
+    msg
+  );
+};
+
+window.onload = function() {
+  var IM = new DOMMatrix([1, 0, 0, 1, 0, 0]);
+
+  try {
+    var ctx = document.getElementById("c1").getContext("2d");
+
+    assert.equal(ctx.getTransform(), IM, "Transform is identity by default");
+    assert.equal(
+      ctx.getTransform().invertSelf(),
+      IM,
+      "Inverse transform is identity by default"
+    );
+
+    var m = new DOMMatrix([1, 2, 3, 4, 5, 6]);
+    ctx.setTransform(m);
+    assert.equal(ctx.getTransform(), m, "Transform successfully set");
+
+    var badVals = [
+      ["string"],
+      [-1],
+      ["string", 1, 2, 3, 4, 5],
+      [{ obj: true }, 1, 2, 3, 4, 5],
+    ];
+    for (var i = 0; i < badVals.length; ++i) {
+      try {
+        ctx.setTransform(...badVals[i]);
+      } catch {}
+      assert.equal(
+        ctx.getTransform(),
+        m,
+        "Expected |setTransform(" + badVals[i] + ")| to not change transform"
+      );
+    }
+
+    ctx.setTransform(IM);
+    var noopVals = [
+      [Number.NaN, 1, 2, 3, 4, 5],
+      [Infinity, 1, 2, 3, 4, 5],
+    ];
+    for (var i = 0; i < noopVals.length; ++i) {
+      ctx.setTransform(...noopVals[i]);
+      assert.equal(
+        ctx.getTransform(),
+        IM,
+        "Illegal float values result in a no-op"
+      );
+    }
+
+    ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
+    assert.equal(ctx.getTransform(), m, "setTransform() updates transform");
+  } catch (e) {
+    document.body.innerHTML = "FAIL: " + e.toString();
+    return;
+  }
+  document.body.innerHTML = "Pass";
+};
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/ctm-singular-sanity.html b/layout/reftests/canvas/ctm-singular-sanity.html
new file mode 100644
index 0000000000..48617d7628
--- /dev/null
+++ b/layout/reftests/canvas/ctm-singular-sanity.html
@@ -0,0 +1,60 @@
+<html>
+<head>
+  <script type="text/javascript">
+function assert(cond, msg) {
+  if (!cond) {
+    throw msg;
+  }
+}
+
+assert.equal = function(m1, m2, msg) {
+  assert(
+    m1.is2D &&
+      m2.is2D &&
+      m1.a === m2.a &&
+      m1.b === m2.b &&
+      m1.c === m2.c &&
+      m1.d === m2.d &&
+      m1.e === m2.e &&
+      m1.f === m2.f,
+    msg
+  );
+};
+
+window.onload = function() {
+  try {
+    var ctx = document.getElementById("c1").getContext("2d");
+
+    var singular = new DOMMatrix([0, 0, 0, 0, 0, 0]);
+    ctx.setTransform(singular);
+    assert.equal(
+      ctx.getTransform(),
+      singular,
+      "Expected setting transform to a singular matrix to work"
+    );
+    var inv = ctx.getTransform().invertSelf();
+    assert(
+      isNaN(inv.a) && isNaN(inv.b) && isNaN(inv.c) && isNaN(inv.d),
+      "Expected to get back matrix of NaN's from inverse transform"
+    );
+
+    var m = new DOMMatrix([1, 2, 3, 4, 5, 6]);
+    ctx.setTransform(m);
+    ctx.setTransform(singular.invertSelf());
+    assert.equal(
+      ctx.getTransform(),
+      m,
+      "Setting transform to an inverse singular matrix is a no-op"
+    );
+  } catch (e) {
+    document.body.innerHTML = "FAIL: " + e.toString();
+    return;
+  }
+  document.body.innerHTML = "Pass";
+};
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/dash-1-ref.svg b/layout/reftests/canvas/dash-1-ref.svg
new file mode 100644
index 0000000000..b1c3b967f9
--- /dev/null
+++ b/layout/reftests/canvas/dash-1-ref.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="300" height="300" viewBox="0 0 300 300" >
+  <style>
+    line { stroke: black; stroke-width: 5px; }
+  </style>
+
+  <line x1="50px" y1="50px" x2="250px" y2="50px"
+        style="stroke-dasharray: 5px, 10px">
+  </line>
+
+  <line x1="50px" y1="100px" x2="250px" y2="100px"
+        style="stroke-dasharray: 5px, 10px; stroke-dashoffset: 5px;">
+  </line>
+  <line x1="50px" y1="150px" x2="250px" y2="150px"
+        style="stroke-dasharray: 5px; stroke-dashoffset: 5px;">
+  </line>
+
+</svg>
diff --git a/layout/reftests/canvas/dash-1.html b/layout/reftests/canvas/dash-1.html
new file mode 100644
index 0000000000..28b228e938
--- /dev/null
+++ b/layout/reftests/canvas/dash-1.html
@@ -0,0 +1,34 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+
+    ctx.lineWidth = 5;
+
+    ctx.setLineDash([ 5, 10 ]);  // 5 on, 10 off
+    ctx.moveTo(50, 50);
+    ctx.lineTo(250, 50);
+    ctx.stroke();
+    ctx.beginPath();
+
+    ctx.lineDashOffset = 5;
+    ctx.moveTo(50, 100);
+    ctx.lineTo(250, 100);
+    ctx.stroke();
+    ctx.beginPath();
+
+    ctx.lineDashOffset = 5;
+    ctx.setLineDash([ 5 ]);  // 5 on, 5 off
+    ctx.moveTo(50, 150);
+    ctx.lineTo(250, 150);
+    ctx.stroke();
+    ctx.beginPath();
+
+}
+  </script>
+</head>
+<body style="padding: 0px; margin: 0px;">
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/dash-sanity.html b/layout/reftests/canvas/dash-sanity.html
new file mode 100644
index 0000000000..779fbdeeef
--- /dev/null
+++ b/layout/reftests/canvas/dash-sanity.html
@@ -0,0 +1,98 @@
+<html>
+<head>
+  <script type="text/javascript">
+function assert(cond, msg) { if (!cond) { throw msg; } }
+window.onload = function() {
+    try {
+        var ctx = document.getElementById("c1").getContext("2d");
+
+        assert(0 === ctx.getLineDash().length,
+               "Default dash is [ ] (none)");
+        assert(0 === ctx.lineDashOffset,
+               "Default dashOffset is 0 (none)");
+
+        ctx.setLineDash([ 2 ]);
+        assert(2 === ctx.getLineDash().length &&
+               2 === ctx.getLineDash()[0] &&
+               2 === ctx.getLineDash()[1],
+               "dash = [ 2 ] works");
+        ctx.setLineDash([ 2 ]);
+        ctx.setLineDash([ ]);
+        assert(0 === ctx.getLineDash().length,
+               "dash = [ ] works");
+        ctx.setLineDash([ 2 ]);
+        ctx.setLineDash([ 0, 0, 0 ]);
+        assert(6 === ctx.getLineDash().length,
+               0 === ctx.getLineDash()[0] &&
+               0 === ctx.getLineDash()[1] &&
+               0 === ctx.getLineDash()[2] &&
+               0 === ctx.getLineDash()[3] &&
+               0 === ctx.getLineDash()[4] &&
+               0 === ctx.getLineDash()[5],
+               "dash = [ 0, 0, 0 ] works");
+
+        ctx.setLineDash([ 2 ]);
+        assert(0 === ctx.lineDashOffset, "dashOffset is 0");
+        ctx.lineDashOffset = 1;
+        assert(1 === ctx.lineDashOffset, "Setting dashOffset succeeded");
+        ctx.setLineDash([ ]);
+        assert(1 === ctx.lineDashOffset, "Changing dash does not reset dashOffset");
+
+        // NB: might want to add a |.dash = number| special case,
+        // don't test that it fails here.  Might also want to add a
+        // |.dash = [0]| special case for resetting, so don't test
+        // that either.
+        var badVals = [ -1,
+                        null,
+                        undefined,
+                        "",
+                        "string",
+                        { obj: true },
+                        function() {}
+        ]
+        ctx.setLineDash([ 2 ]);
+        for (var i = 0; i < badVals.length; ++i) {
+            var error = false;
+            try { ctx.setLineDash(badVals[i]); }
+            catch(e) { error = true; }
+            assert(error &&
+                   2 === ctx.getLineDash().length &&
+                   2 === ctx.getLineDash()[0] &&
+                   2 === ctx.getLineDash()[1],
+                   "Expected setLineDash("+ badVals[i] +") to throw exception and not change dash");
+        }
+
+        var ignoredVals = [
+                        [ "array of string" ],
+                        [ -1 ],
+                        [ 2, "string" ],
+        ];
+        ctx.setLineDash([ 2 ]);
+        for (var i = 0; i < ignoredVals.length; ++i) {
+            ctx.setLineDash(ignoredVals[i]);
+            assert(2 === ctx.getLineDash().length &&
+                   2 === ctx.getLineDash()[0] &&
+                   2 === ctx.getLineDash()[1],
+                   "Expected |setLineDash(" + ignoredVals[i] + ") to not change dash");
+        }
+
+        ctx.setLineDash([ 2 ]);
+        ctx.save();
+        ctx.setLineDash([ 1, 1, 1, 1 ]);
+        ctx.restore();
+        assert(2 === ctx.getLineDash().length &&
+               2 === ctx.getLineDash()[0] &&
+               2 === ctx.getLineDash()[1],
+               "dash was saved then restored");
+    } catch (e) {
+        document.body.innerHTML = "FAIL: "+ e.toString();
+        return;
+    }
+    document.body.innerHTML = "Pass";
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/default-size-ref.html b/layout/reftests/canvas/default-size-ref.html
new file mode 100644
index 0000000000..641497401d
--- /dev/null
+++ b/layout/reftests/canvas/default-size-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<canvas style="border: 1px solid black;" width="300" height="150">
+</canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/default-size.html b/layout/reftests/canvas/default-size.html
new file mode 100644
index 0000000000..32c14bdcca
--- /dev/null
+++ b/layout/reftests/canvas/default-size.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<canvas style="border: 1px solid black;">
+</canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/empty-transaction-1-ref.html b/layout/reftests/canvas/empty-transaction-1-ref.html
new file mode 100644
index 0000000000..37eb544efb
--- /dev/null
+++ b/layout/reftests/canvas/empty-transaction-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:black; width:100px; height:100px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/empty-transaction-1.html b/layout/reftests/canvas/empty-transaction-1.html
new file mode 100644
index 0000000000..34736b1d3b
--- /dev/null
+++ b/layout/reftests/canvas/empty-transaction-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<canvas style="display:block" id="c" width="100" height="100"></canvas>
+<script>
+var ctx = document.getElementById("c").getContext("2d");
+function doTest() {
+  document.documentElement.removeAttribute("class");
+  ctx.fillRect(0, 0, 100, 100);
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-1.html b/layout/reftests/canvas/evenodd-fill-1.html
new file mode 100644
index 0000000000..084ddbcb67
--- /dev/null
+++ b/layout/reftests/canvas/evenodd-fill-1.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+    ctx.rect(50, 50, 200, 200);
+    ctx.rect(100, 100, 100, 100);
+    ctx.fill("evenodd");
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-2.html b/layout/reftests/canvas/evenodd-fill-2.html
new file mode 100644
index 0000000000..ccbe0dabf2
--- /dev/null
+++ b/layout/reftests/canvas/evenodd-fill-2.html
@@ -0,0 +1,19 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+    ctx.mozFillRule = "evenodd";
+    ctx.rect(50, 50, 200, 200);
+    ctx.rect(100, 100, 100, 100);
+    ctx.clip();
+
+    ctx.beginPath();
+    ctx.fillRect(0, 0, 300, 300);
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-3.html b/layout/reftests/canvas/evenodd-fill-3.html
new file mode 100644
index 0000000000..f07bb53c5b
--- /dev/null
+++ b/layout/reftests/canvas/evenodd-fill-3.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(250, 50);
+    ctx.lineTo(250, 250);
+    ctx.lineTo(50, 250);
+    ctx.lineTo(50, 50);
+
+    ctx.moveTo(100, 100);
+    ctx.lineTo(100, 200);
+    ctx.lineTo(200, 200);
+    ctx.lineTo(200, 100);
+    ctx.lineTo(100, 100);
+
+    ctx.fill("evenodd");
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-ref.html b/layout/reftests/canvas/evenodd-fill-ref.html
new file mode 100644
index 0000000000..0a9a0f3f3e
--- /dev/null
+++ b/layout/reftests/canvas/evenodd-fill-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+    ctx.rect(50, 50, 200, 50);
+    ctx.rect(50, 50, 50, 200);
+    ctx.rect(250, 250, -200, -50);
+    ctx.rect(250, 250, -50, -200);
+    ctx.fill();
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/evenodd-fill-sanity.html b/layout/reftests/canvas/evenodd-fill-sanity.html
new file mode 100644
index 0000000000..863a79c148
--- /dev/null
+++ b/layout/reftests/canvas/evenodd-fill-sanity.html
@@ -0,0 +1,43 @@
+<html>
+<head>
+  <script type="text/javascript">
+function assert(cond, msg) { if (!cond) { throw msg; } }
+window.onload = function() {
+    try {
+        var ctx = document.getElementById("c1").getContext("2d");
+
+        assert("nonzero" == ctx.mozFillRule,
+               "Default fillRule is 'nonzero'");
+
+        ctx.mozFillRule = "evenodd";
+        assert("evenodd" == ctx.mozFillRule,
+               "fillRule understands 'evenodd'");
+        ctx.mozFillRule = "nonzero";
+
+        ctx.mozFillRule = "garbageLSKJDF 29879234";
+        assert("nonzero" == ctx.mozFillRule,
+               "Garbage fillRule string has no effect");
+
+        ctx.mozFillRule = "evenodd";
+        ctx.mozFillRule = "garbageLSKJDF 29879234";
+        assert("evenodd" == ctx.mozFillRule,
+               "Garbage fillRule string has no effect");
+        ctx.mozFillRule = "nonzero";
+
+        ctx.save();
+        ctx.mozFillRule = "evenodd";
+        ctx.restore();
+        assert("nonzero" == ctx.mozFillRule,
+               "fillRule was saved then restored");
+    } catch (e) {
+        document.body.innerHTML = "FAIL: "+ e.toString();
+        return;
+    }
+    document.body.innerHTML = "Pass";
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/image-rendering-auto.html b/layout/reftests/canvas/image-rendering-auto.html
new file mode 100644
index 0000000000..a46510ba0e
--- /dev/null
+++ b/layout/reftests/canvas/image-rendering-auto.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html reftest-zoom="2" class="reftest-wait">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>test image-rendering auto</title>
+    <style>
+      canvas { position:absolute;left:0px;top:0px; }
+    </style>
+    <script type="text/javascript">
+      document.addEventListener("MozReftestInvalidate", draw);
+
+      function draw() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = "rgb(255,0,0)";
+        ctx.fillRect(25,25,100,100);
+        ctx.fillStyle = "rgb(0,255,0)";
+        ctx.fillRect(25,25,50,50);
+        document.documentElement.removeAttribute('class');
+      }
+    </script>
+  </head>
+
+  <body>
+    <canvas style="image-rendering: auto;" id="canvas" width="300" height="300"></canvas>
+  </body>
+
+</html>
diff --git a/layout/reftests/canvas/image-rendering-ref.html b/layout/reftests/canvas/image-rendering-ref.html
new file mode 100644
index 0000000000..d2b6f5b7de
--- /dev/null
+++ b/layout/reftests/canvas/image-rendering-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html>
+<head>
+  <title>reference image-rendering</title>
+  <style>
+    canvas { position:absolute;left:0px;top:0px; }
+  </style>
+  <script type="text/javascript">
+    function draw() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = "rgb(255,0,0)";
+        ctx.fillRect(50,50,200,200);
+        ctx.fillStyle = "rgb(0,255,0)";
+        ctx.fillRect(50,50,100,100);
+    }
+  </script>
+</head>
+<body onload="draw();">
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/image-rendering-script.html b/layout/reftests/canvas/image-rendering-script.html
new file mode 100644
index 0000000000..2f6fc64085
--- /dev/null
+++ b/layout/reftests/canvas/image-rendering-script.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html reftest-zoom="2" class="reftest-wait">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>test image-rendering script change</title>
+    <style>
+      canvas { position:absolute;left:0px;top:0px; }
+    </style>
+    <script type="text/javascript">
+      document.addEventListener("MozReftestInvalidate", updateImageRendering);
+
+      function updateImageRendering() {
+        var canvas = document.getElementById("canvas");
+        canvas.style.imageRendering = '-moz-crisp-edges';
+        document.documentElement.removeAttribute('class');
+      }
+    </script>
+  </head>
+
+  <body>
+    <canvas style="image-rendering: auto;" id="canvas" width="300" height="300">
+    </canvas>
+
+    <script type="text/javascript">
+      var canvas = document.getElementById("canvas");
+      var ctx = canvas.getContext("2d");
+      ctx.fillStyle = "rgb(255,0,0)";
+      ctx.fillRect(25,25,100,100);
+      ctx.fillStyle = "rgb(0,255,0)";
+      ctx.fillRect(25,25,50,50);
+    </script>
+  </body>
+
+</html>
diff --git a/layout/reftests/canvas/image-rendering-test.html b/layout/reftests/canvas/image-rendering-test.html
new file mode 100644
index 0000000000..218d6d72f5
--- /dev/null
+++ b/layout/reftests/canvas/image-rendering-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+  <title>test image-rendering</title>
+  <style>
+    canvas { position:absolute;left:0px;top:0px; }
+  </style>
+  <script type="text/javascript">
+    document.addEventListener("MozReftestInvalidate", draw);
+    
+    function draw() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = "rgb(255,0,0)";
+        ctx.fillRect(25,25,100,100);
+        ctx.fillStyle = "rgb(0,255,0)";
+        ctx.fillRect(25,25,50,50);
+        document.documentElement.removeAttribute('class');
+    }
+  </script>
+</head>
+<body>
+  <canvas style="image-rendering: -moz-crisp-edges; " id="canvas" width="300" height="300"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/image-shadow-ref.html b/layout/reftests/canvas/image-shadow-ref.html
new file mode 100644
index 0000000000..c75f330852
--- /dev/null
+++ b/layout/reftests/canvas/image-shadow-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:lime; width:16px; height:16px;"></div>
+<div style="background:black; width:16px; height:10px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/image-shadow.html b/layout/reftests/canvas/image-shadow.html
new file mode 100644
index 0000000000..47fe121c4f
--- /dev/null
+++ b/layout/reftests/canvas/image-shadow.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<body onload="doTest()">
+<canvas id="c" width="200" height="200" style="display:block"></canvas>
+<img id="img" src="image_green-16x16.png" style="display:none">
+<script>
+var c = document.getElementById("c");
+var img = document.getElementById("img");
+var ctx = c.getContext("2d");
+ctx.shadowColor = "black";
+ctx.shadowOffsetX = 0;
+ctx.shadowOffsetY = 10;
+function doTest() {
+  ctx.drawImage(img, 0, 0);
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/image_green-16x16.png b/layout/reftests/canvas/image_green-16x16.png
new file mode 100644
index 0000000000..e19a3ffddd
--- /dev/null
+++ b/layout/reftests/canvas/image_green-16x16.png
diff --git a/layout/reftests/canvas/large-canvas-ref.html b/layout/reftests/canvas/large-canvas-ref.html
new file mode 100644
index 0000000000..a04633a46c
--- /dev/null
+++ b/layout/reftests/canvas/large-canvas-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:lime; margin: 0px;">
+</body>
+</html>
diff --git a/layout/reftests/canvas/large-canvas.html b/layout/reftests/canvas/large-canvas.html
new file mode 100644
index 0000000000..c55c7442ce
--- /dev/null
+++ b/layout/reftests/canvas/large-canvas.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body style="margin:0px; overflow:hidden">
+<canvas style="display:block" id="c" width="1024" height="1024"></canvas>
+<script>
+var ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = "lime";
+ctx.fillRect(0, 0, 1024, 1024);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/linear-gradient-1-ref.html b/layout/reftests/canvas/linear-gradient-1-ref.html
new file mode 100644
index 0000000000..1e18b9d610
--- /dev/null
+++ b/layout/reftests/canvas/linear-gradient-1-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<div style="width:300px; height: 150px; background: #0000ff"></div>
+<div style="width:300px; height: 150px; background: #ff0000"></div>
diff --git a/layout/reftests/canvas/linear-gradient-1a.html b/layout/reftests/canvas/linear-gradient-1a.html
new file mode 100644
index 0000000000..817711cc34
--- /dev/null
+++ b/layout/reftests/canvas/linear-gradient-1a.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<body>
+<canvas id="canvas" width="300" height="300">
+<script>
+var ctx = document.getElementById('canvas').getContext('2d');
+
+var grad = ctx.createLinearGradient(0,150,0,450);
+grad.addColorStop(0, '#0000ff');
+grad.addColorStop(0, '#ff0000');
+
+ctx.fillStyle = grad;
+ctx.fillRect(0,0,300,300);
+</script>
+</body>
diff --git a/layout/reftests/canvas/linear-gradient-1b.html b/layout/reftests/canvas/linear-gradient-1b.html
new file mode 100644
index 0000000000..1e08ec7419
--- /dev/null
+++ b/layout/reftests/canvas/linear-gradient-1b.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<body>
+<canvas id="canvas" width="300" height="300">
+<script>
+var ctx = document.getElementById('canvas').getContext('2d');
+
+var grad = ctx.createLinearGradient(0,-150,0,150);
+grad.addColorStop(1, '#0000ff');
+grad.addColorStop(1, '#ff0000');
+
+ctx.fillStyle = grad;
+ctx.fillRect(0,0,300,300);
+</script>
+</body>
diff --git a/layout/reftests/canvas/nonzero-fill-1.html b/layout/reftests/canvas/nonzero-fill-1.html
new file mode 100644
index 0000000000..936d0ce29a
--- /dev/null
+++ b/layout/reftests/canvas/nonzero-fill-1.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+    ctx.rect(50, 50, 200, 200);
+    ctx.rect(100, 100, 100, 100);
+    ctx.fill();
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/nonzero-fill-2.html b/layout/reftests/canvas/nonzero-fill-2.html
new file mode 100644
index 0000000000..890716b81f
--- /dev/null
+++ b/layout/reftests/canvas/nonzero-fill-2.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+  <script type="text/javascript">
+window.onload = function() {
+    var ctx = document.getElementById("c1").getContext("2d");
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(250, 50);
+    ctx.lineTo(250, 250);
+    ctx.lineTo(50, 250);
+    ctx.lineTo(50, 50);
+
+    ctx.moveTo(100, 100);
+    ctx.lineTo(100, 200);
+    ctx.lineTo(200, 200);
+    ctx.lineTo(200, 100);
+    ctx.lineTo(100, 100);
+
+    ctx.fill();
+}
+  </script>
+</head>
+<body>
+  <div><canvas id="c1" width="300" height="300"></canvas></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/reftest.list b/layout/reftests/canvas/reftest.list
new file mode 100644
index 0000000000..a95705d633
--- /dev/null
+++ b/layout/reftests/canvas/reftest.list
@@ -0,0 +1,129 @@
+== default-size.html default-size-ref.html
+fuzzy-if(Android,0-8,0-1000) == size-1.html size-1-ref.html
+
+== empty-transaction-1.html empty-transaction-1-ref.html
+
+fails-if(useDrawSnapshot) == image-rendering-test.html image-rendering-ref.html
+fails-if(useDrawSnapshot) == image-rendering-script.html image-rendering-ref.html
+fails-if(useDrawSnapshot) != image-rendering-auto.html image-rendering-script.html
+
+== image-shadow.html image-shadow-ref.html
+
+asserts-if(cocoaWidget,0-2) == size-change-1.html size-change-1-ref.html
+
+random-if(cocoaWidget) == subpixel-1.html about:blank # see bug 1192616, re-enable once we're off the pandaboards
+
+!= text-ltr-left.html text-blank.html
+!= text-ltr-right.html text-blank.html
+!= text-rtl-left.html text-blank.html
+!= text-rtl-right.html text-blank.html
+
+== text-ltr-start.html text-ltr-left.html
+== text-ltr-end.html text-ltr-right.html
+!= text-ltr-left.html text-ltr-right.html
+== text-rtl-start.html text-rtl-right.html
+== text-rtl-end.html text-rtl-left.html
+!= text-rtl-left.html text-rtl-right.html
+
+== text-ltr-left.html text-rtl-left.html
+
+== text-ltr-alignment-test.html text-ltr-alignment-ref.html
+== text-rtl-alignment-test.html text-rtl-alignment-ref.html
+
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-256) == text-horzline-with-bottom.html text-horzline.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-256) fails-if(azureSkia&&OSX) == text-horzline-with-top.html text-horzline.html
+
+!= text-big-stroke.html text-blank.html
+!= text-big-stroke.html text-big-fill.html
+
+== text-context-state-test.html text-context-state-ref.html
+== text-font-inherit.html text-big-fill.html
+== text-space-replace-test.html text-space-replace-ref.html
+
+== text-no-frame-test.html text-no-frame-ref.html
+== text-no-frame-2-test.html text-not-in-doc-ref.html
+fuzzy-if(azureSkiaGL,0-10,0-400) == text-not-in-doc-test.html text-not-in-doc-ref.html
+
+== text-bidi-ltr-test.html text-bidi-ltr-ref.html
+!= text-bidi-ltr-test.html text-bidi-ltr-notref.html # for bug 698185
+== text-bidi-rtl-test.html text-bidi-rtl-ref.html
+
+!= text-font-lang.html text-font-lang-notref.html
+
+== text-measure.html text-measure-ref.html
+== text-small-caps-1.html text-small-caps-1-ref.html
+
+random-if(!d2d) != text-subpixel-1.html text-subpixel-1-ref.html
+
+== strokeText-path.html strokeText-path-ref.html
+
+# check that emoji character renders as something non-blank (for Apple Color Emoji font, bug 715798)
+## Currently fails most places due to partial backout of bug 808288, see bug 837461.
+## (Marking "random" rather than "fails" because it would pass for people
+## if they have an Emoji font installed when running the tests.)
+random != text-emoji.html text-emoji-notref.html
+
+== linear-gradient-1a.html linear-gradient-1-ref.html
+
+== linear-gradient-1b.html linear-gradient-1-ref.html
+
+== zero-dimensions.html zero-dimensions-ref.html
+
+!= evenodd-fill-1.html nonzero-fill-1.html
+== evenodd-fill-1.html evenodd-fill-ref.html
+
+== dash-sanity.html data:text/html,<body>Pass
+fuzzy(0-9,0-470) random-if(Android) == dash-1.html dash-1-ref.svg # Bug 668412 (really is android-specific, not IPC-specific)
+
+== ctm-sanity.html data:text/html,<body>Pass
+== ctm-singular-sanity.html data:text/html,<body>Pass
+
+== 672646-alpha-radial-gradient.html 672646-alpha-radial-gradient-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-45) == 674003-alpha-radial-gradient-superlum.html 674003-alpha-radial-gradient-superlum-ref.html
+
+!= 693610-1.html 693610-1-notref.html # bug 693610: multiple glyph runs should not be overprinted
+
+== 726951-shadow-clips.html 726951-shadow-clips-ref.html
+
+== transformed-clip.html transformed-clip-ref.html
+fuzzy(0-1,0-20) == transformed-gradient.html transformed-gradient-ref.html
+== transformed-path.html transformed-path.html
+
+== 749467-1.html 749467-1-ref.html
+
+# You get a little bit of rounding fuzz on OSX from transforming the paths between user space and device space
+fuzzy(0-16,0-84) fuzzy-if(d2d&&/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-2,0-153) == 784573-1.html 784573-1-ref.html
+
+== 802658-1.html 802658-1-ref.html
+== 1074733-1.html 1074733-1-ref.html
+== 1107096-invisibles.html 1107096-invisibles-ref.html
+== 1151821-1.html 1151821-1-ref.html
+fuzzy(0-1,0-43) == 1201272-1.html 1201272-1-ref.html
+== 1224976-1.html 1224976-1-ref.html
+== 1238795-1.html 1238795-1-ref.html
+== 1303534-1.html 1303534-1-ref.html
+
+fuzzy-if(cocoaWidget,0-1,0-1410) == 1304353-text-global-alpha-1.html 1304353-text-global-alpha-1-ref.html
+fuzzy(0-1,0-1302) == 1304353-text-global-alpha-2.html 1304353-text-global-alpha-2-ref.html
+fuzzy-if(winWidget,0-94,0-1575) fuzzy-if(cocoaWidget,0-1,0-34) == 1304353-text-global-composite-op-1.html 1304353-text-global-composite-op-1-ref.html
+
+== text-indent-1a.html text-indent-1-ref.html
+== text-indent-1b.html text-indent-1-ref.html
+
+== 1347147-1.html 1347147-1-ref.html
+== 1353000-1.html 1353000-1-ref.html
+== 1447035-1.html 1447035-1-ref.html
+
+== large-canvas.html large-canvas-ref.html
+== copy-clip.html copy-clip-ref.html
+
+== 1817455-1.html 1817455-1-ref.html
+!= 1817873-1.html 1817873-1-ref.html
+
+!= 1846079-1.html 1846079-1-ref.html
+
+== 1850284-1.html 1850284-1-ref.html
+
+!= 1850727-1.html 1850727-1-ref.html
+
+== transformed-line-stroke.html transformed-line-stroke-ref.html
diff --git a/layout/reftests/canvas/size-1-ref.html b/layout/reftests/canvas/size-1-ref.html
new file mode 100644
index 0000000000..1212b88927
--- /dev/null
+++ b/layout/reftests/canvas/size-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:lime; width:100px; height:30000px;"></div>
+<script>
+window.scrollTo(0, 100000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/size-1.html b/layout/reftests/canvas/size-1.html
new file mode 100644
index 0000000000..afca44ea63
--- /dev/null
+++ b/layout/reftests/canvas/size-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<canvas style="display:block" id="c" width="100" height="30000"></canvas>
+<script>
+var ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = "lime";
+ctx.fillRect(0, 0, 100, 30000);
+window.scrollTo(0, 100000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/size-change-1-ref.html b/layout/reftests/canvas/size-change-1-ref.html
new file mode 100644
index 0000000000..31c5893feb
--- /dev/null
+++ b/layout/reftests/canvas/size-change-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="width:200px; height:200px; background:lime"></div>
+</body>
+</html>
diff --git a/layout/reftests/canvas/size-change-1.html b/layout/reftests/canvas/size-change-1.html
new file mode 100644
index 0000000000..afe22d856b
--- /dev/null
+++ b/layout/reftests/canvas/size-change-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<body>
+<canvas width="100" height="100" id="c"></canvas>
+<script>
+var c = document.getElementById("c");
+var ctx = c.getContext("2d");
+ctx.fillStyle = "red";
+ctx.fillRect(0,0,100,100);
+
+function finishTest() {
+  c.width = 200;
+  c.height = 200;
+  ctx.fillStyle = "lime";
+  ctx.fillRect(0,0,200,200);
+
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", finishTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/strokeText-path-ref.html b/layout/reftests/canvas/strokeText-path-ref.html
new file mode 100644
index 0000000000..475e0d60a5
--- /dev/null
+++ b/layout/reftests/canvas/strokeText-path-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript"><!--
+window.onload = function () {
+  var canvas = document.getElementById('testCanvas'),
+      context = canvas.getContext('2d');
+
+  // draw some text
+  context.font = 'bold 40px sans-serif';
+  context.strokeText("Hello world!", 10, 50);
+};
+      // --></script>
+  </head>
+  <body>
+    <p>You should see only see "Hello world!" below, without any additional 
+    line. JavaScript is required.</p>
+
+    <p><canvas id="testCanvas" width="400" height="300">You need Canvas 
+    support.</canvas></p>
+
+  </body>
+</html>
diff --git a/layout/reftests/canvas/strokeText-path.html b/layout/reftests/canvas/strokeText-path.html
new file mode 100644
index 0000000000..c90ea70f80
--- /dev/null
+++ b/layout/reftests/canvas/strokeText-path.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript"><!--
+window.onload = function () {
+  var canvas = document.getElementById('testCanvas'),
+      context = canvas.getContext('2d');
+
+  // draw a path
+  context.beginPath();
+  context.moveTo(10, 10);
+  context.lineTo(200, 10);
+  context.lineTo(200, 200);
+  context.stroke();
+  context.closePath();
+
+  context.clearRect(0, 0, canvas.width, canvas.height);
+
+  // draw some text
+  context.font = 'bold 40px sans-serif';
+  context.strokeText("Hello world!", 10, 50);
+};
+      // --></script>
+  </head>
+  <body>
+    <p>You should see only see "Hello world!" below, without any additional 
+    line. JavaScript is required.</p>
+
+    <p><canvas id="testCanvas" width="400" height="300">You need Canvas 
+    support.</canvas></p>
+
+  </body>
+</html>
diff --git a/layout/reftests/canvas/subpixel-1.html b/layout/reftests/canvas/subpixel-1.html
new file mode 100644
index 0000000000..398912e471
--- /dev/null
+++ b/layout/reftests/canvas/subpixel-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+var c = canvas.getContext('2d');
+c.font = "8pt sans-serif";
+c.textAlign = "center";
+c.textBaseline = "middle";
+c.fillStyle = "white";
+c.fillText("Test Text", canvas.width / 2, canvas.height / 2);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-bidi-ltr-notref.html b/layout/reftests/canvas/text-bidi-ltr-notref.html
new file mode 100644
index 0000000000..075f83c631
--- /dev/null
+++ b/layout/reftests/canvas/text-bidi-ltr-notref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure bidi is resolved correctly</title>
+</head>
+<body>
+<canvas id="c" width="256" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  // Bug 698185 caused the RTL and trailing LTR runs to be lost
+  // var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye";
+  var str = "hello";
+
+  ctx.fillStyle = 'black';
+  ctx.font = '10px sans-serif';
+  ctx.fillText(str, 128, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-bidi-ltr-ref.html b/layout/reftests/canvas/text-bidi-ltr-ref.html
new file mode 100644
index 0000000000..524be1edd4
--- /dev/null
+++ b/layout/reftests/canvas/text-bidi-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure bidi is resolved correctly</title>
+</head>
+<body>
+<canvas id="c" width="256" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = "hello\u202D\u05DD\u05D5\u05DC\u05E9\u202Cgoodbye";
+
+  ctx.fillStyle = 'black';
+  ctx.font = '10px sans-serif';
+  ctx.fillText(str, 128, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-bidi-ltr-test.html b/layout/reftests/canvas/text-bidi-ltr-test.html
new file mode 100644
index 0000000000..9e263b9d0c
--- /dev/null
+++ b/layout/reftests/canvas/text-bidi-ltr-test.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure bidi is resolved correctly</title>
+</head>
+<body>
+<canvas id="c" width="256" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye";
+
+  ctx.fillStyle = 'black';
+  ctx.font = '10px sans-serif';
+  ctx.fillText(str, 128, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-bidi-rtl-ref.html b/layout/reftests/canvas/text-bidi-rtl-ref.html
new file mode 100644
index 0000000000..c264e7104e
--- /dev/null
+++ b/layout/reftests/canvas/text-bidi-rtl-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure bidi is resolved correctly</title>
+</head>
+<body>
+<canvas id="c" width="256" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = "goodbye\u202D\u05DD\u05D5\u05DC\u05E9\u202Chello";
+
+  ctx.fillStyle = 'black';
+  ctx.font = '10px sans-serif';
+  ctx.fillText(str, 128, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-bidi-rtl-test.html b/layout/reftests/canvas/text-bidi-rtl-test.html
new file mode 100644
index 0000000000..a444aca322
--- /dev/null
+++ b/layout/reftests/canvas/text-bidi-rtl-test.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure bidi is resolved correctly</title>
+</head>
+<body>
+<canvas id="c" width="256" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye";
+
+  ctx.fillStyle = 'black';
+  ctx.font = '10px sans-serif';
+  ctx.fillText(str, 128, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-big-fill.html b/layout/reftests/canvas/text-big-fill.html
new file mode 100644
index 0000000000..28755a273e
--- /dev/null
+++ b/layout/reftests/canvas/text-big-fill.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure fillText and strokeText look different</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.strokeStyle = 'black';
+  ctx.font = 'bold 64px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.fillText(str, 0, 0);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-big-stroke.html b/layout/reftests/canvas/text-big-stroke.html
new file mode 100644
index 0000000000..74cca8480e
--- /dev/null
+++ b/layout/reftests/canvas/text-big-stroke.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure fillText and strokeText look different</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.strokeStyle = 'black';
+  ctx.font = 'bold 64px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.strokeText(str, 0, 0);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-blank.html b/layout/reftests/canvas/text-blank.html
new file mode 100644
index 0000000000..2d2ad4087b
--- /dev/null
+++ b/layout/reftests/canvas/text-blank.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Blank Canvas</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-context-state-ref.html b/layout/reftests/canvas/text-context-state-ref.html
new file mode 100644
index 0000000000..c267fcf5f8
--- /dev/null
+++ b/layout/reftests/canvas/text-context-state-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>text to ensure text attributes are saved in the context state</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+  
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.font = '16px sans-serif';
+
+  ctx.fillText('yet another thing', 0, 0);
+
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'alphabetic';
+  ctx.font = '24px serif';
+
+  ctx.fillText('other thing', 128, 40);
+
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'bottom';
+  ctx.font = '10px sans-serif';
+
+  ctx.fillText('something', 80, 60);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-context-state-test.html b/layout/reftests/canvas/text-context-state-test.html
new file mode 100644
index 0000000000..71abf7ca67
--- /dev/null
+++ b/layout/reftests/canvas/text-context-state-test.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>text to ensure text attributes are saved in the context state</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+  
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.font = '16px sans-serif';
+
+  ctx.save();
+
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'alphabetic';
+  ctx.font = '24px serif';
+
+  ctx.save();
+
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'bottom';
+  ctx.font = '10px sans-serif';
+
+  ctx.fillText('something', 80, 60);
+
+  ctx.restore();
+
+  ctx.fillText('other thing', 128, 40);
+
+  ctx.restore();
+
+  ctx.fillText('yet another thing', 0, 0);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-emoji-notref.html b/layout/reftests/canvas/text-emoji-notref.html
new file mode 100644
index 0000000000..493bd1d269
--- /dev/null
+++ b/layout/reftests/canvas/text-emoji-notref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for Unicode emoji in canvas</title>
+<script type="text/javascript">
+function test(canvasID) {
+  var canvas = document.getElementById(canvasID);
+  var ctx = canvas.getContext('2d');
+  var str = 'Hello';
+  ctx.font = '2em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.fillText(str, 10, 10);
+};
+</script>
+</head>
+<body>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c1" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c1");
+</script>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-emoji.html b/layout/reftests/canvas/text-emoji.html
new file mode 100644
index 0000000000..21ce9a7086
--- /dev/null
+++ b/layout/reftests/canvas/text-emoji.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for Unicode emoji in canvas</title>
+<script type="text/javascript">
+function test(canvasID) {
+  var canvas = document.getElementById(canvasID);
+  var ctx = canvas.getContext('2d');
+  var str = 'Hello \uD83D\uDE0E'; // U+1F60E
+  ctx.font = '2em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.fillText(str, 10, 10);
+};
+</script>
+</head>
+<body>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c1" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c1");
+</script>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-font-inherit.html b/layout/reftests/canvas/text-font-inherit.html
new file mode 100644
index 0000000000..379b111f86
--- /dev/null
+++ b/layout/reftests/canvas/text-font-inherit.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure font inherits CSS values</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="font:32px sans-serif;"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.font = 'bold 2em sans-serif';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.fillText(str, 0, 0);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-font-lang-notref.html b/layout/reftests/canvas/text-font-lang-notref.html
new file mode 100644
index 0000000000..64f5cb5192
--- /dev/null
+++ b/layout/reftests/canvas/text-font-lang-notref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for language-sensitive font prefs on canvas</title>
+<script type="text/javascript">
+function test(canvasID) {
+  var canvas = document.getElementById(canvasID);
+  var ctx = canvas.getContext('2d');
+
+  var str = 'Hello world! \u4F60\u597D\u5417\uFF1F';
+  ctx.font = '2em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.fillText(str, 10, 10);
+};
+</script>
+</head>
+<body>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c1" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c1");
+</script>
+</div>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c2" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c2");
+</script>
+</div>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c3" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c3");
+</script>
+</div>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c4" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c4");
+</script>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-font-lang.html b/layout/reftests/canvas/text-font-lang.html
new file mode 100644
index 0000000000..370f21aa86
--- /dev/null
+++ b/layout/reftests/canvas/text-font-lang.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test for language-sensitive font prefs on canvas</title>
+<script type="text/javascript">
+function test(canvasID) {
+  var canvas = document.getElementById(canvasID);
+  var ctx = canvas.getContext('2d');
+
+  var str = 'Hello world! \u4F60\u597D\u5417\uFF1F';
+  ctx.font = '2em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.fillText(str, 10, 10);
+};
+</script>
+</head>
+<body>
+
+<!--
+  In the reference, all divs are tagged with lang="en".
+  The expectation is that at least some of them will resolve
+  "sans-serif" to different fonts according to language.
+-->
+
+<div lang="ar" style="margin:20px; height:100px;">
+<canvas id="c1" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c1");
+</script>
+</div>
+
+<div lang="ja" style="margin:20px; height:100px;">
+<canvas id="c2" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c2");
+</script>
+</div>
+
+<div lang="zh-TW" style="margin:20px; height:100px;">
+<canvas id="c3" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c3");
+</script>
+</div>
+
+<div lang="en" style="margin:20px; height:100px;">
+<canvas id="c4" width="400" height="50"></canvas>
+<script type="text/javascript">
+  test("c4");
+</script>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-horzline-with-bottom.html b/layout/reftests/canvas/text-horzline-with-bottom.html
new file mode 100644
index 0000000000..2d7a233634
--- /dev/null
+++ b/layout/reftests/canvas/text-horzline-with-bottom.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure bottom basline-anchored text doesn't intersect horz line</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'white';
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  ctx.strokeStyle = 'black';
+  ctx.beginPath();
+  ctx.moveTo(0,32);
+  ctx.lineTo(128,32);
+  ctx.stroke();
+
+  ctx.font = '20px sans-serif';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText('TEXT', 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-horzline-with-top.html b/layout/reftests/canvas/text-horzline-with-top.html
new file mode 100644
index 0000000000..d0aead2882
--- /dev/null
+++ b/layout/reftests/canvas/text-horzline-with-top.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure top basline-anchored text doesn't intersect horz line</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'white';
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  ctx.strokeStyle = 'black';
+  ctx.beginPath();
+  ctx.moveTo(0,32);
+  ctx.lineTo(128,32);
+  ctx.stroke();
+
+  ctx.font = '30px sans-serif';
+  ctx.textBaseline = 'top';
+  ctx.fillText('TEXT', 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-horzline.html b/layout/reftests/canvas/text-horzline.html
new file mode 100644
index 0000000000..46c427f22b
--- /dev/null
+++ b/layout/reftests/canvas/text-horzline.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Horizontal Line</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.strokeStyle = 'black';
+  ctx.beginPath();
+  ctx.moveTo(0,32);
+  ctx.lineTo(128,32);
+  ctx.stroke();
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-indent-1-ref.html b/layout/reftests/canvas/text-indent-1-ref.html
new file mode 100644
index 0000000000..444d232187
--- /dev/null
+++ b/layout/reftests/canvas/text-indent-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<iframe sandbox
+        style="width: 400px"
+        srcdoc="<div style='text-indent: 50vw'>Text</div>"></iframe>
diff --git a/layout/reftests/canvas/text-indent-1a.html b/layout/reftests/canvas/text-indent-1a.html
new file mode 100644
index 0000000000..84c0c16c8f
--- /dev/null
+++ b/layout/reftests/canvas/text-indent-1a.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<iframe sandbox
+        style="width: 400px"
+        srcdoc="<canvas style='text-indent: 50vw; display: block'>Text</canvas>"></iframe>
diff --git a/layout/reftests/canvas/text-indent-1b.html b/layout/reftests/canvas/text-indent-1b.html
new file mode 100644
index 0000000000..79e34623f7
--- /dev/null
+++ b/layout/reftests/canvas/text-indent-1b.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <iframe sandbox
+          style="width: 200px"
+          srcdoc="<canvas style='text-indent: 50vw; display: block'>Text</canvas>"></iframe>
+  <script>
+    onload = function() {
+      var i = document.querySelector("iframe");
+      window.w = i.offsetWidth;
+      i.style.width = "400px";
+      document.documentElement.className = "";
+    }
+  </script>
+</html>
diff --git a/layout/reftests/canvas/text-ltr-alignment-ref.html b/layout/reftests/canvas/text-ltr-alignment-ref.html
new file mode 100644
index 0000000000..c6f634daed
--- /dev/null
+++ b/layout/reftests/canvas/text-ltr-alignment-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure left/right and start/end are offset by text width for ltr text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+
+  ctx.fillStyle = 'black';
+  ctx.font = '20px sans-serif';
+  ctx.textBaseline = 'top';
+  
+  var str = 'TEXT';
+  var wid = ctx.measureText(str).width;
+
+  ctx.textAlign = 'left';
+  ctx.fillText(str, 64, 0);
+  ctx.textAlign = 'start';
+  ctx.fillText(str, 64, 20);
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 64, 40);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-ltr-alignment-test.html b/layout/reftests/canvas/text-ltr-alignment-test.html
new file mode 100644
index 0000000000..5a4200c8de
--- /dev/null
+++ b/layout/reftests/canvas/text-ltr-alignment-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure left/right and start/end are offset by text width for ltr text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+
+  ctx.fillStyle = 'black';
+  ctx.font = '20px sans-serif';
+  ctx.textBaseline = 'top';
+  
+  var str = 'TEXT';
+  var wid = ctx.measureText(str).width;
+
+  ctx.textAlign = 'right';
+  ctx.fillText(str, 64+wid, 0);
+  ctx.textAlign = 'end';
+  ctx.fillText(str, 64+wid, 20);
+  ctx.textAlign = 'left';
+  ctx.fillText(str, 64-wid/2, 40);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-ltr-end.html b/layout/reftests/canvas/text-ltr-end.html
new file mode 100644
index 0000000000..d0bb581523
--- /dev/null
+++ b/layout/reftests/canvas/text-ltr-end.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>end-aligned ltr text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'end';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-ltr-left.html b/layout/reftests/canvas/text-ltr-left.html
new file mode 100644
index 0000000000..43bb6f5b18
--- /dev/null
+++ b/layout/reftests/canvas/text-ltr-left.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>left-aligned ltr text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'left';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-ltr-right.html b/layout/reftests/canvas/text-ltr-right.html
new file mode 100644
index 0000000000..4b8426d1c7
--- /dev/null
+++ b/layout/reftests/canvas/text-ltr-right.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>right-aligned ltr text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'right';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-ltr-start.html b/layout/reftests/canvas/text-ltr-start.html
new file mode 100644
index 0000000000..ad36627824
--- /dev/null
+++ b/layout/reftests/canvas/text-ltr-start.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>start-aligned ltr text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'start';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-measure-ref.html b/layout/reftests/canvas/text-measure-ref.html
new file mode 100644
index 0000000000..ae72e4071b
--- /dev/null
+++ b/layout/reftests/canvas/text-measure-ref.html
@@ -0,0 +1,15 @@
+<html>
+<script>
+function load() {
+    var ctx = document.getElementById("canvas").getContext("2d");
+
+    ctx.font = "bold 12px sans-serif";
+    ctx.scale(4, 4);
+    var str = "HeHeHeHe";
+    ctx.fillText(str, 0, 15);
+}
+</script>
+<body onload="load();">
+<canvas id="canvas" width="400" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-measure.html b/layout/reftests/canvas/text-measure.html
new file mode 100644
index 0000000000..3fd08aefc1
--- /dev/null
+++ b/layout/reftests/canvas/text-measure.html
@@ -0,0 +1,19 @@
+<html>
+<script>
+function load() {
+    var ctx = document.getElementById("canvas").getContext("2d");
+
+    ctx.font = "bold 12px sans-serif";
+    ctx.scale(4, 4);
+    var str = "HeHeHeHe";
+    var x = 0;
+    for (var i = 0; i < str.length; ++i) {
+        ctx.fillText(str[i], x, 15);
+        x += ctx.measureText(str[i]).width;
+    }
+}
+</script>
+<body onload="load();">
+<canvas id="canvas" width="400" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-no-frame-2-test.html b/layout/reftests/canvas/text-no-frame-2-test.html
new file mode 100644
index 0000000000..8c38b96d16
--- /dev/null
+++ b/layout/reftests/canvas/text-no-frame-2-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure non-framed canvas inherits properties</title>
+</head>
+<body>
+<div style="font: 20px sans-serif;">
+<div style="display: none;">		
+<canvas id="c" width="512" height="256"></canvas>
+</div>
+<canvas id="d" width="512" height="256"></canvas>
+</div>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'BLEARGH!';
+  ctx.font = '1em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 256, 128);
+
+  var canvas2 = document.getElementById('d');
+  var ctx = canvas2.getContext('2d');
+
+  ctx.drawImage(canvas, 0, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-no-frame-ref.html b/layout/reftests/canvas/text-no-frame-ref.html
new file mode 100644
index 0000000000..91f724aa2d
--- /dev/null
+++ b/layout/reftests/canvas/text-no-frame-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure non-framed canvas inherits properties</title>
+</head>
+<body>
+<div style="font: 40px sans-serif">
+<canvas id="c" width="512" height="256" style="direction: rtl;"></canvas>
+</div>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'BLEARGH!';
+  ctx.font = '1em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 256, 128);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-no-frame-test.html b/layout/reftests/canvas/text-no-frame-test.html
new file mode 100644
index 0000000000..6fff8166d8
--- /dev/null
+++ b/layout/reftests/canvas/text-no-frame-test.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure non-framed canvas inherits properties</title>
+</head>
+<body>
+<div style="font: 40px sans-serif; direction: rtl;">
+<canvas id="c" width="512" height="256" style="display: none;"></canvas>
+</div>
+<canvas id="d" width="512" height="256"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'BLEARGH!';
+  ctx.font = '1em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 256, 128);
+
+  var canvas2 = document.getElementById('d');
+  var ctx = canvas2.getContext('2d');
+
+  ctx.drawImage(canvas, 0, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-not-in-doc-ref.html b/layout/reftests/canvas/text-not-in-doc-ref.html
new file mode 100644
index 0000000000..26330ac52a
--- /dev/null
+++ b/layout/reftests/canvas/text-not-in-doc-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure canvas not in doc gets default properties</title>
+</head>
+<body>
+<div style="font: 10px sans-serif; direction: ltr">
+<canvas id="c" width="512" height="256"></canvas>
+</div>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'BLEARGH!';
+  ctx.font = '2em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 256, 128);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-not-in-doc-test.html b/layout/reftests/canvas/text-not-in-doc-test.html
new file mode 100644
index 0000000000..3575e9233b
--- /dev/null
+++ b/layout/reftests/canvas/text-not-in-doc-test.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure canvas not in doc gets default properties</title>
+</head>
+<body>
+<canvas id="d" width="512" height="256"></canvas>
+<script type="text/javascript">
+  var canvas = document.createElement('canvas');
+  canvas.width = 512;
+  canvas.height = 526;
+  var ctx = canvas.getContext('2d');
+
+  var str = 'BLEARGH!';
+  ctx.font = '2em sans-serif';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 256, 128);
+
+  var canvas2 = document.getElementById('d');
+  var ctx = canvas2.getContext('2d');
+
+  ctx.drawImage(canvas, 0, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-rtl-alignment-ref.html b/layout/reftests/canvas/text-rtl-alignment-ref.html
new file mode 100644
index 0000000000..649a2df006
--- /dev/null
+++ b/layout/reftests/canvas/text-rtl-alignment-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure left/right and start/end are offset by text width for rtl text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+
+  ctx.fillStyle = 'black';
+  ctx.font = '20px sans-serif';
+  ctx.textBaseline = 'top';
+  
+  var str = 'TEXT';
+  var wid = ctx.measureText(str).width;
+
+  ctx.textAlign = 'left';
+  ctx.fillText(str, 64, 0);
+  ctx.textAlign = 'start';
+  ctx.fillText(str, 64, 20);
+  ctx.textAlign = 'center';
+  ctx.fillText(str, 64, 40);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-rtl-alignment-test.html b/layout/reftests/canvas/text-rtl-alignment-test.html
new file mode 100644
index 0000000000..a5218519b9
--- /dev/null
+++ b/layout/reftests/canvas/text-rtl-alignment-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure left/right and start/end are offset by text width for rtl text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+
+  ctx.fillStyle = 'black';
+  ctx.font = '20px sans-serif';
+  ctx.textBaseline = 'top';
+  
+  var str = 'TEXT';
+  var wid = ctx.measureText(str).width;
+
+  ctx.textAlign = 'right';
+  ctx.fillText(str, 64+wid, 0);
+  ctx.textAlign = 'end';
+  ctx.fillText(str, 64-wid, 20);
+  ctx.textAlign = 'left';
+  ctx.fillText(str, 64-wid/2, 40);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-rtl-end.html b/layout/reftests/canvas/text-rtl-end.html
new file mode 100644
index 0000000000..0becdfcfbe
--- /dev/null
+++ b/layout/reftests/canvas/text-rtl-end.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>end-aligned rtl text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'end';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-rtl-left.html b/layout/reftests/canvas/text-rtl-left.html
new file mode 100644
index 0000000000..ce0f13f53c
--- /dev/null
+++ b/layout/reftests/canvas/text-rtl-left.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>left-aligned rtl text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'left';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-rtl-right.html b/layout/reftests/canvas/text-rtl-right.html
new file mode 100644
index 0000000000..007a3ee978
--- /dev/null
+++ b/layout/reftests/canvas/text-rtl-right.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>right-aligned rtl text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'right';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-rtl-start.html b/layout/reftests/canvas/text-rtl-start.html
new file mode 100644
index 0000000000..d8ff76c826
--- /dev/null
+++ b/layout/reftests/canvas/text-rtl-start.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>start-aligned rtl text</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:rtl"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'text';
+  ctx.fillStyle = 'black';
+  ctx.textAlign = 'start';
+  ctx.fillText(str, 64, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-small-caps-1-ref.html b/layout/reftests/canvas/text-small-caps-1-ref.html
new file mode 100644
index 0000000000..0d5b0793ed
--- /dev/null
+++ b/layout/reftests/canvas/text-small-caps-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+</style>
+</head>
+<body>
+<canvas id="canvas1" width="400" height="400"></canvas>
+<script type="text/javascript">
+var ctx = document.getElementById('canvas1').getContext('2d');
+ctx.font = "40px monospace";
+ctx.fillText("lowercase", 50, 50);
+ctx.font = "32px monospace";
+ctx.fillText("SMALLCAPS", 50, 100);
+ctx.font = "40px monospace";
+ctx.fillText("CAPITALS", 50, 150);
+</script>
+</body>
diff --git a/layout/reftests/canvas/text-small-caps-1.html b/layout/reftests/canvas/text-small-caps-1.html
new file mode 100644
index 0000000000..9312a4e867
--- /dev/null
+++ b/layout/reftests/canvas/text-small-caps-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+</style>
+</head>
+<body>
+<canvas id="canvas1" width="400" height="400"></canvas>
+<script type="text/javascript">
+var ctx = document.getElementById('canvas1').getContext('2d');
+ctx.font = "40px monospace";
+ctx.fillText("lowercase", 50, 50);
+ctx.font = "small-caps 40px monospace";
+ctx.fillText("smallcaps", 50, 100);
+ctx.font = "small-caps 40px monospace";
+ctx.fillText("CAPITALS", 50, 150);
+</script>
+</body>
diff --git a/layout/reftests/canvas/text-space-replace-ref.html b/layout/reftests/canvas/text-space-replace-ref.html
new file mode 100644
index 0000000000..851e239531
--- /dev/null
+++ b/layout/reftests/canvas/text-space-replace-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure whitespace characters are replaced with the space character</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'a b c d e f';
+  ctx.fillStyle = 'black';
+  ctx.font = '20px sans-serif';
+  ctx.fillText(str, 0, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-space-replace-test.html b/layout/reftests/canvas/text-space-replace-test.html
new file mode 100644
index 0000000000..c4345d0e6d
--- /dev/null
+++ b/layout/reftests/canvas/text-space-replace-test.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test to ensure whitespace characters are replaced with the space character</title>
+</head>
+<body>
+<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
+<script type="text/javascript">
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  var str = 'a\x09b\x0Ac\x0Bd\x0Ce\x0Df';
+  ctx.fillStyle = 'black';
+  ctx.font = '20px sans-serif';
+  ctx.fillText(str, 0, 32);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-subpixel-1-ref.html b/layout/reftests/canvas/text-subpixel-1-ref.html
new file mode 100644
index 0000000000..1dbfc8ab4d
--- /dev/null
+++ b/layout/reftests/canvas/text-subpixel-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background:white">
+<canvas id="c" width="500" height="500"></canvas>
+<script>
+var ctx = c.getContext('2d');
+ctx.fillStyle = "black";
+ctx.font = "50px sans-serif";
+ctx.fillText("Hello", 200, 200);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/text-subpixel-1.html b/layout/reftests/canvas/text-subpixel-1.html
new file mode 100644
index 0000000000..b93d5a0119
--- /dev/null
+++ b/layout/reftests/canvas/text-subpixel-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<canvas moz-opaque id="c" width="500" height="500"></canvas>
+<script>
+var ctx = c.getContext('2d');
+ctx.fillStyle = "white";
+ctx.fillRect(0, 0, 500, 500);
+ctx.fillStyle = "black";
+ctx.font = "50px sans-serif";
+ctx.fillText("Hello", 200, 200);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-clip-ref.html b/layout/reftests/canvas/transformed-clip-ref.html
new file mode 100644
index 0000000000..c2efdfe101
--- /dev/null
+++ b/layout/reftests/canvas/transformed-clip-ref.html
@@ -0,0 +1,15 @@
+<html>
+<body>
+  <canvas width="500" height="500"></canvas>
+<script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = "red";
+  ctx.beginPath();
+  ctx.rect(250, 250, 50, 50);
+  ctx.clip();
+  ctx.fillRect(0,0,500,500);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-clip.html b/layout/reftests/canvas/transformed-clip.html
new file mode 100644
index 0000000000..c466b47401
--- /dev/null
+++ b/layout/reftests/canvas/transformed-clip.html
@@ -0,0 +1,16 @@
+<html>
+<body>
+  <canvas width="500" height="500"></canvas>
+<script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var ctx = canvas.getContext('2d');
+
+  ctx.translate(500, 500);
+  ctx.fillStyle = "red";
+  ctx.beginPath();
+  ctx.rect(-250, -250, 50, 50);
+  ctx.clip();
+  ctx.fillRect(-500,-500,500,500);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-gradient-ref.html b/layout/reftests/canvas/transformed-gradient-ref.html
new file mode 100644
index 0000000000..20e91c5566
--- /dev/null
+++ b/layout/reftests/canvas/transformed-gradient-ref.html
@@ -0,0 +1,17 @@
+<html>
+<body>
+  <canvas width="500" height="500"></canvas>
+<script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var ctx = canvas.getContext('2d');
+
+  var lineargradient = ctx.createLinearGradient(000,000,500,500);
+  lineargradient.addColorStop(0,'red');
+  lineargradient.addColorStop(1,'black');
+  ctx.fillStyle = lineargradient;
+  ctx.beginPath();
+  ctx.rect(00, 00, 250, 250);
+  ctx.fill();
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-gradient.html b/layout/reftests/canvas/transformed-gradient.html
new file mode 100644
index 0000000000..223cd2899b
--- /dev/null
+++ b/layout/reftests/canvas/transformed-gradient.html
@@ -0,0 +1,18 @@
+<html>
+<body>
+  <canvas width="500" height="500"></canvas>
+<script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var ctx = canvas.getContext('2d');
+
+  ctx.translate(500, 500);
+  var lineargradient = ctx.createLinearGradient(-500,-500,0,0);
+  lineargradient.addColorStop(0,'red');
+  lineargradient.addColorStop(1,'black');
+  ctx.fillStyle = lineargradient;
+  ctx.beginPath();
+  ctx.rect(-500, -500, 250, 250);
+  ctx.fill();
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-line-stroke-ref.html b/layout/reftests/canvas/transformed-line-stroke-ref.html
new file mode 100644
index 0000000000..f8860e6cce
--- /dev/null
+++ b/layout/reftests/canvas/transformed-line-stroke-ref.html
@@ -0,0 +1,15 @@
+<canvas id=c></canvas>
+<script>
+const canvas = document.getElementById("c");
+const ctx = canvas.getContext("2d");
+
+canvas.width = 600;
+canvas.height = 300;
+
+
+ctx.strokeStyle = "rgba(0, 0, 0, 1)";
+ctx.beginPath();
+ctx.moveTo(88, 137.5);
+ctx.lineTo(736, 137.5);
+ctx.stroke();
+</script>
diff --git a/layout/reftests/canvas/transformed-line-stroke.html b/layout/reftests/canvas/transformed-line-stroke.html
new file mode 100644
index 0000000000..75dcb4332e
--- /dev/null
+++ b/layout/reftests/canvas/transformed-line-stroke.html
@@ -0,0 +1,16 @@
+<canvas id=c></canvas>
+<script>
+const canvas = document.getElementById("c");
+const ctx = canvas.getContext("2d");
+
+canvas.width = 600;
+canvas.height = 300;
+
+ctx.translate(-5, 0);
+
+ctx.strokeStyle = "rgba(0, 0, 0, 1)";
+ctx.beginPath();
+ctx.moveTo(93, 137.5);
+ctx.lineTo(741, 137.5);
+ctx.stroke();
+</script>
diff --git a/layout/reftests/canvas/transformed-path-ref.html b/layout/reftests/canvas/transformed-path-ref.html
new file mode 100644
index 0000000000..69134f20fe
--- /dev/null
+++ b/layout/reftests/canvas/transformed-path-ref.html
@@ -0,0 +1,19 @@
+<html>
+<body>
+  <canvas width="500" height="500"></canvas>
+<script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var ctx = canvas.getContext('2d');
+  ctx.scale(0.5, 0.5);
+
+  ctx.translate(41, 41.);
+  ctx.rect(0, 0, 100, 100);
+  ctx.moveTo(100,0);
+  ctx.quadraticCurveTo(200, 100, 300,0);
+  ctx.moveTo(300,0);
+  ctx.bezierCurveTo(400, 100, 500, -100, 600,0);
+
+  ctx.stroke();
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/transformed-path.html b/layout/reftests/canvas/transformed-path.html
new file mode 100644
index 0000000000..8f6d4aed91
--- /dev/null
+++ b/layout/reftests/canvas/transformed-path.html
@@ -0,0 +1,21 @@
+<html>
+<body>
+  <canvas width="500" height="500"></canvas>
+<script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var ctx = canvas.getContext('2d');
+  ctx.scale(0.5, 0.5);
+
+  ctx.translate(41, 41.);
+  ctx.rect(0, 0, 100, 100);
+  ctx.translate(100, 0);
+  ctx.moveTo(0,0);
+  ctx.quadraticCurveTo(100, 100, 200,0);
+  ctx.translate(200, 0);
+  ctx.moveTo(0,0);
+  ctx.bezierCurveTo(100, 100, 200, -100, 300,0);
+
+  ctx.stroke();
+</script>
+</body>
+</html>
diff --git a/layout/reftests/canvas/zero-dimensions-ref.html b/layout/reftests/canvas/zero-dimensions-ref.html
new file mode 100644
index 0000000000..d1003d6f06
--- /dev/null
+++ b/layout/reftests/canvas/zero-dimensions-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Empty Canvas</title>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/canvas/zero-dimensions.html b/layout/reftests/canvas/zero-dimensions.html
new file mode 100644
index 0000000000..e4b83d94cd
--- /dev/null
+++ b/layout/reftests/canvas/zero-dimensions.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Empty Canvas</title>
+</head>
+<body>
+<canvas style="border-width: 2px solid black" width="0" height="0"></canvas>
+</body>
+</html>