Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/svg/as-image
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
243 files changed, 4098 insertions, 0 deletions
diff --git a/layout/reftests/svg/as-image/background-display-none-1.html b/layout/reftests/svg/as-image/background-display-none-1.html
new file mode 100644
index 0000000000..9c638134e2
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-display-none-1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Test for a CSS background pointing to an SVG image that has "display:none"
+     on the root node. -->
+<html>
+<body>
+  <div style="width: 100px; height: 100px;
+              background-image: url('display-none.svg')">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-image-rect-1png.html b/layout/reftests/svg/as-image/background-image-rect-1png.html
new file mode 100644
index 0000000000..42813d6694
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-image-rect-1png.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: -moz-image-rect(url('limeInRed100x100.png'),
+                                                25,75,75,25)">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-image-rect-1svg.html b/layout/reftests/svg/as-image/background-image-rect-1svg.html
new file mode 100644
index 0000000000..728c780acc
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-image-rect-1svg.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: -moz-image-rect(url('limeInRed100x100.svg'),
+                                                25,75,75,25)">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-image-rect-2.html b/layout/reftests/svg/as-image/background-image-rect-2.html
new file mode 100644
index 0000000000..15f861d40f
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-image-rect-2.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: -moz-image-rect(url('lime100x100.svg'),
+                                                0,100,100,0)">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-1.html b/layout/reftests/svg/as-image/background-resize-1.html
new file mode 100644
index 0000000000..72111ceaf3
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-1.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+<head>
+<script>
+    function doTest() {
+      document.getElementById("myDiv").style.width = "100px";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+  <div id="myDiv"
+       style="width: 10px;
+              height: 100px;
+              background-image: url('lime100x100.svg')">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-2.html b/layout/reftests/svg/as-image/background-resize-2.html
new file mode 100644
index 0000000000..86df50c02b
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-2.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+<head>
+<script>
+    function doTest() {
+      document.getElementById("myDiv").style.width = "100px";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+  <div id="myDiv"
+       style="width: 10px;
+              height: 100px;
+              background-image: url('lime100x100-noSVGDimensions.svg')">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-3.html b/layout/reftests/svg/as-image/background-resize-3.html
new file mode 100644
index 0000000000..e87c148e74
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-3.html
@@ -0,0 +1,19 @@
+<!-- Test for bug 600574 -->
+<html class="reftest-wait">
+<head>
+<script>
+    function doTest() {
+      document.getElementById("myDiv").style.width = "100px";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+  <div id="myDiv"
+       style="width: 10px;
+              height: 100px;
+              background-image: url('limeInRed-noSVGDimensions-viewBox.svg')">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-4.html b/layout/reftests/svg/as-image/background-resize-4.html
new file mode 100644
index 0000000000..ed4ea4f085
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-4.html
@@ -0,0 +1,20 @@
+<!-- Test for bug 600574 -->
+<html class="reftest-wait">
+<head>
+<script>
+    function doTest() {
+      document.getElementById("myDiv").style.width = "100px";
+      document.documentElement.removeAttribute("class");
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+  <div id="myDiv"
+       style="width: 10px;
+              height: 100px;
+              background-image:
+                url('limeInRed-noSVGDimensions-animViewBox.svg')">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html
new file mode 100644
index 0000000000..e9ee74d29b
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      background-color: white;
+      width: 12px;
+      height: 60px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html
new file mode 100644
index 0000000000..e8ea278bb6
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+  <style>
+    div {
+      background-color: yellow;
+      background-image: url("white-rect-no-viewbox.svg");
+      width: 6px;
+      height: 30px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html
new file mode 100644
index 0000000000..e9ee74d29b
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      background-color: white;
+      width: 12px;
+      height: 60px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html
new file mode 100644
index 0000000000..295aedf520
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+  <style>
+    div {
+      background-color: yellow;
+      background-image: url("white-rect-with-viewbox.svg");
+      width: 6px;
+      height: 30px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-simple-1.html b/layout/reftests/svg/as-image/background-simple-1.html
new file mode 100644
index 0000000000..d368b58318
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-simple-1.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: url('lime100x100.svg')">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-simple-2.html b/layout/reftests/svg/as-image/background-simple-2.html
new file mode 100644
index 0000000000..1b4cbba245
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-simple-2.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: url('limeInRed100x100-viewBox.svg')">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-stretch-1-ref.html b/layout/reftests/svg/as-image/background-stretch-1-ref.html
new file mode 100644
index 0000000000..3b017fbdf7
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-stretch-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      background-color: yellow;
+      height: 30px;
+    }
+    .container {
+      width: 100px;
+    }
+    .should-not-stretch {
+      width: 6px;
+      background-color: white;
+      display: inline-block;
+    }
+    .left-spacer {
+      width: 47px;
+      float: left;
+    }
+    .right-spacer {
+      width: 47px;
+      float: right;
+    }
+    body {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="left-spacer"></div>
+    <div class="should-not-stretch"></div>
+    <div class="right-spacer"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-stretch-1.html b/layout/reftests/svg/as-image/background-stretch-1.html
new file mode 100644
index 0000000000..0931cf3ccc
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-stretch-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      height: 30px;
+      width: 100px;
+      background-image: url("white-rect-with-viewbox.svg");
+      background-repeat: no-repeat;
+      background-position: 30px;
+      background-size: 40px 30px;
+      background-color: yellow;
+    }
+    body {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-viewBox-1.html b/layout/reftests/svg/as-image/background-viewBox-1.html
new file mode 100644
index 0000000000..077dedfeb7
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-viewBox-1.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: url('limeInRed100x100-viewBox.svg')">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/black100x100-ref.html b/layout/reftests/svg/as-image/black100x100-ref.html
new file mode 100644
index 0000000000..0d0121ccb8
--- /dev/null
+++ b/layout/reftests/svg/as-image/black100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: black"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg
new file mode 100644
index 0000000000..33a08a0bca
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/>
+<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/blue-square-in-square.svg b/layout/reftests/svg/as-image/blue-square-in-square.svg
new file mode 100644
index 0000000000..d43a27951d
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue-square-in-square.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/>
+<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/blue100x100-border-ref.html b/layout/reftests/svg/as-image/blue100x100-border-ref.html
new file mode 100644
index 0000000000..1bd865856c
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue100x100-border-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; border: 10px solid blue; box-sizing: border-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/blue100x100-ref.html b/layout/reftests/svg/as-image/blue100x100-ref.html
new file mode 100644
index 0000000000..307fbd6bd3
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: blue"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/blue100x100.svg b/layout/reftests/svg/as-image/blue100x100.svg
new file mode 100644
index 0000000000..a9c8eba794
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue100x100.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="100">
+  <rect width="100%" height="100%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/border-image-simple-1.html b/layout/reftests/svg/as-image/border-image-simple-1.html
new file mode 100644
index 0000000000..e6b696e1d2
--- /dev/null
+++ b/layout/reftests/svg/as-image/border-image-simple-1.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              border-image: url('lime100x100.png') 0 fill;"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/border-image-simple-2.html b/layout/reftests/svg/as-image/border-image-simple-2.html
new file mode 100644
index 0000000000..4eba8cee53
--- /dev/null
+++ b/layout/reftests/svg/as-image/border-image-simple-2.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              border-image: url('lime100x100-noSVGDimensions.svg') 0 fill;"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html
new file mode 100644
index 0000000000..b2be295acb
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: orange; position:absolute"></div>
+  <div style="width: 100px; height: 100px; background: lime; opacity: .25; position:absolute"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html
new file mode 100644
index 0000000000..ca6a362c34
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        var image = document.getElementById("image");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        ctx.globalAlpha = 0.25;
+        ctx.drawImage(image, 0, 0);
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+    <img id="image" src="lime100x100.svg" style="display: none">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html
new file mode 100644
index 0000000000..563e60bb91
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <embed style="width: 200px; height: 200px;"
+         src="squaredCircle-transparent.svg"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html
new file mode 100644
index 0000000000..ca56934f6b
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        var image = document.getElementById("image");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 200, 200);
+
+        ctx.globalAlpha = 0.75;
+        ctx.drawImage(image, 0, 0, 200, 200);
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+    <img id="image" src="squaredCircle-viewBox-100x100.svg" style="display: none">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html
new file mode 100644
index 0000000000..c363bad581
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html
@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        var image = document.getElementById("image");
+
+        // Draw the SVG image
+        ctx.drawImage(image, 0, 0);
+
+        try {
+          canvas.toDataURL();
+        } catch (ex) {
+          document.body.textContent = ex;
+        }
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+    <img id="image" src="lime100x100.svg" style="display: none">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html
new file mode 100644
index 0000000000..da382386f4
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html
@@ -0,0 +1,27 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          // Note that our canvas is 100x100, so our scaled 200x200 image will
+          // get cropped to 100x100.
+          ctx.drawImage(image, 0, 0, 200, 200);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="lime100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html
new file mode 100644
index 0000000000..94154d480e
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html
@@ -0,0 +1,28 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          // Note that our canvas is 100x100, so our scaled 200x200 image will
+          // get cropped to 100x100.
+          ctx.scale(2, 2);  // Scale our image-drawing by 2
+          ctx.drawImage(image, 0, 0);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="lime100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html
new file mode 100644
index 0000000000..92eed4e101
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          ctx.scale(2, 2);  // Scale our image-drawing by 2
+          ctx.drawImage(image, 0, 0);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="lime50x50.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html
new file mode 100644
index 0000000000..bd4585eaa9
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <embed style="width: 200px; height: 200px"
+         src="squaredCircle-viewBox-noSize.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html
new file mode 100644
index 0000000000..0e8cf233ff
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 200, 200);
+
+        // Instantiate an image. Draw it at a larger size, & take snapshot
+        // once it has loaded.
+        var image = new Image();
+        image.onload = function() {
+          ctx.drawImage(image, 0, 0, 200, 200);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="squaredCircle-viewBox-100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html
new file mode 100644
index 0000000000..f3ca821230
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 200, 200);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          ctx.scale(2, 2);
+          ctx.drawImage(image, 0, 0);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="squaredCircle-viewBox-100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html
new file mode 100644
index 0000000000..b40d5fc39a
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+        var image = document.getElementById("image");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Draw the SVG image on top of our red
+        ctx.drawImage(image, 0, 0);
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+    <img id="image" src="lime100x100.svg" style="display: none">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html
new file mode 100644
index 0000000000..f3348b1e16
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          ctx.drawImage(image, 0, 0);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="lime100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html
new file mode 100644
index 0000000000..6f173b7d6b
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html
@@ -0,0 +1,28 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          // This version of the test is "easier", in that the sampled region
+          // is offset from the red by 1px on all sides. This lets us avoid
+          // any pixel-rounding errors.
+          ctx.drawImage(image, 26, 26, 48, 48, 0, 0, 100, 100);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="limeInRed100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html
new file mode 100644
index 0000000000..6b56ce1e60
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Draw some orange
+        ctx.fillStyle = "orange";
+        ctx.fillRect(0, 0, 100, 100);
+
+        // Instantiate an image. Once it has loaded, draw it & take snapshot.
+        var image = new Image();
+        image.onload = function() {
+          ctx.drawImage(image, 25, 25, 50, 50, 0, 0, 100, 100);
+          document.documentElement.removeAttribute("class");
+        }
+        image.src ="limeInRed100x100.svg";
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html
new file mode 100644
index 0000000000..5105f71921
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        ctx.setTransform(2, 0, 0, 2, 0, 0);
+
+        ctx.fillStyle = "blue";
+        ctx.fillRect(20, 20, 50, 50);
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html
new file mode 100644
index 0000000000..2d7ec38588
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html
@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <title>Test that drawImage() calls don't reset the canvas' transform</title>
+    <script type="text/javascript">
+      function go() {
+        var canvas = document.getElementById("canvas");
+        var ctx = canvas.getContext("2d");
+
+        ctx.setTransform(2, 0, 0, 2, 0, 0);
+
+        // SVG image that draws nothing
+        ctx.drawImage(document.getElementById("image"), 0, 0);
+
+        // Check that ctx's transform wasn't reset by the drawImage call
+        ctx.fillStyle = "blue";
+        ctx.fillRect(20, 20, 50, 50);
+      }
+    </script>
+  </head>
+  <body onload="go()">
+    <canvas id="canvas" width="200" height="200"></canvas>
+    <img id="image" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>" style="display: none">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg b/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg
new file mode 100644
index 0000000000..ff5ff17fb9
--- /dev/null
+++ b/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     viewBox="0 0 100 100"
+     preserveAspectRatio="xMinYMin meet">
+  <rect width="100" height="100" fill="lime"/>
+
+  <!-- Rect to the right of viewBox -->
+  <rect x="300" width="100" height="100" fill="blue"/>
+
+  <!-- Rect below viewBox -->
+  <rect y="300" width="100" height="100" fill="purple"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-fill-01.html b/layout/reftests/svg/as-image/context-fill-01.html
new file mode 100644
index 0000000000..b25eac4c45
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-fill test</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+  fill: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill blue'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-02.html b/layout/reftests/svg/as-image/context-fill-02.html
new file mode 100644
index 0000000000..e476d1e04a
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-02.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-fill test (without a fallback color)</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+  fill: lime;
+  border: 1px solid black;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill none'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-03.html b/layout/reftests/svg/as-image/context-fill-03.html
new file mode 100644
index 0000000000..066d5a7925
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-03.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill where fill is semi-transparent</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+  fill: rgb(0% 100% 0% / 50%);
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-04.html b/layout/reftests/svg/as-image/context-fill-04.html
new file mode 100644
index 0000000000..4b8b9d84c1
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-04.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill with fill-opacity</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+  fill: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red' fill-opacity='0.5'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-05.html b/layout/reftests/svg/as-image/context-fill-05.html
new file mode 100644
index 0000000000..14c169642f
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-05.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill with different fill values (test image caching correctness)</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+}
+
+#img1 {
+  fill: blue;
+}
+
+#img2 {
+  fill: yellow;
+}
+
+    </style>
+  </head>
+  <body>
+    <img id="img1" src="context-fill-05.svg">
+    <img id="img2" src="context-fill-05.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-05.svg b/layout/reftests/svg/as-image/context-fill-05.svg
new file mode 100644
index 0000000000..c2865ca10e
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-05.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+  <rect width='100%' height='100%' fill='context-fill red'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-fill-06.html b/layout/reftests/svg/as-image/context-fill-06.html
new file mode 100644
index 0000000000..7ea9c6bf95
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-06.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill works as a stroke value</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+  fill: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-fill red'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-07-ref.html b/layout/reftests/svg/as-image/context-fill-07-ref.html
new file mode 100644
index 0000000000..9e52bb402e
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-07-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  width: 100px;
+  height: 100px;
+  background-color: black;
+  display: inline-block;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-07.html b/layout/reftests/svg/as-image/context-fill-07.html
new file mode 100644
index 0000000000..c4e9ab3305
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-07.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill when no context fill value is provided</title>
+    <style>
+
+img {
+  -moz-context-properties: fill;
+  width: 100px;
+  height: 100px;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill'/></svg>">
+    <!-- The initial value for 'fill' is black, so we expect that to be the
+         context-fill that the following rect uses (the fallback color should
+         not be used). -->
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-08.html b/layout/reftests/svg/as-image/context-fill-08.html
new file mode 100644
index 0000000000..77f7aca144
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-08.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill when only "-moz-context-properties: stroke" is specified</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+  fill: red;
+  stroke: red;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill blue'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-bg-image-01.html b/layout/reftests/svg/as-image/context-fill-bg-image-01.html
new file mode 100644
index 0000000000..2c5d0ff362
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-bg-image-01.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-fill in background-image test</title>
+    <style>
+
+div {
+  width: 100px;
+  height: 100px;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>");
+  -moz-context-properties: fill;
+  fill: blue;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-01.html b/layout/reftests/svg/as-image/context-fill-opacity-01.html
new file mode 100644
index 0000000000..1ba306a054
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-fill-opacity test</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill-opacity;
+  fill-opacity: 0.5;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-02.html b/layout/reftests/svg/as-image/context-fill-opacity-02.html
new file mode 100644
index 0000000000..8420d0105d
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-02.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill-opacity with different fill-opacity values (test image caching correctness)</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill-opacity;
+}
+
+#img1 {
+  fill-opacity: 0.3;
+}
+
+#img2 {
+  fill-opacity: 0.7;
+}
+
+    </style>
+  </head>
+  <body>
+    <img id="img1" src="context-fill-opacity-02.svg">
+    <img id="img2" src="context-fill-opacity-02.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-02.svg b/layout/reftests/svg/as-image/context-fill-opacity-02.svg
new file mode 100644
index 0000000000..bbc1270271
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-02.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+  <rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-03.html b/layout/reftests/svg/as-image/context-fill-opacity-03.html
new file mode 100644
index 0000000000..33d4684c2b
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-03.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill-opacity works with context-fill</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: blue;
+  fill-opacity: 0.5;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill' fill-opacity='context-fill-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-04.html b/layout/reftests/svg/as-image/context-fill-opacity-04.html
new file mode 100644
index 0000000000..e8b1b343cd
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-04.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>No context-fill-opacity value is provided</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill-opacity;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-05.html b/layout/reftests/svg/as-image/context-fill-opacity-05.html
new file mode 100644
index 0000000000..ca34db6d51
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-05.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-fill-opacity when only '-moz-context-properties: stroke-opacity' is specified</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke-opacity;
+  fill: 0.5;
+  stroke: 0.5;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html
new file mode 100644
index 0000000000..369d36bb93
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+
+div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+}
+
+  </style>
+</head>
+<body>
+  <div style="background: blue"></div>
+  <div style="background: yellow"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html
new file mode 100644
index 0000000000..87b98a894d
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: rgba(0, 0, 255, 0.5)"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html
new file mode 100644
index 0000000000..f16b49ff40
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+
+div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+}
+
+  </style>
+</head>
+<body>
+  <div style="background: rgba(0, 0, 255, 0.3); "></div>
+  <div style="background: rgba(0, 0, 255, 0.7); "></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html
new file mode 100644
index 0000000000..87b98a894d
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: rgba(0, 0, 255, 0.5)"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-01.html b/layout/reftests/svg/as-image/context-stroke-01.html
new file mode 100644
index 0000000000..853f72ac5a
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-stroke test</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+  stroke: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke blue'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-02.html b/layout/reftests/svg/as-image/context-stroke-02.html
new file mode 100644
index 0000000000..00d39aff4e
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-02.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-stroke test (without a fallback color)</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+  stroke: lime;
+  border: 1px solid black;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-03.html b/layout/reftests/svg/as-image/context-stroke-03.html
new file mode 100644
index 0000000000..2bb341f6d4
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-03.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke where stroke is semi-transparent</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+  stroke: rgb(0% 100% 0% / 50%);
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-04.html b/layout/reftests/svg/as-image/context-stroke-04.html
new file mode 100644
index 0000000000..170f8c4970
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-04.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke with stroke-opacity</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+  stroke: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red' stroke-opacity='0.5'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-05.html b/layout/reftests/svg/as-image/context-stroke-05.html
new file mode 100644
index 0000000000..ebd3f6b8e9
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-05.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke with different stroke values (test image caching correctness)</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+}
+
+#img1 {
+  stroke: blue;
+}
+
+#img2 {
+  stroke: yellow;
+}
+
+    </style>
+  </head>
+  <body>
+    <img id="img1" src="context-stroke-05.svg">
+    <img id="img2" src="context-stroke-05.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-05.svg b/layout/reftests/svg/as-image/context-stroke-05.svg
new file mode 100644
index 0000000000..01e25682b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-05.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+  <line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-stroke-06.html b/layout/reftests/svg/as-image/context-stroke-06.html
new file mode 100644
index 0000000000..fb84671d67
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-06.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke works as a fill value</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke;
+  stroke: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-stroke red'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-07-ref.html b/layout/reftests/svg/as-image/context-stroke-07-ref.html
new file mode 100644
index 0000000000..503e1bfba5
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-07-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <div style="background-color: lime;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-07.html b/layout/reftests/svg/as-image/context-stroke-07.html
new file mode 100644
index 0000000000..885ee221dd
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-07.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke when no context stroke value is provided</title>
+    <style>
+
+img {
+  -moz-context-properties: fill;
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke'/></svg>">
+    <!-- The following image currently results in the 'lime' fallback color
+         being used, but it probably shouldn't. See bug 1351243. -->
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke lime'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-08.html b/layout/reftests/svg/as-image/context-stroke-08.html
new file mode 100644
index 0000000000..8420fba152
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-08.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke when only "-moz-context-properties: fill" is specified</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill;
+  fill: red;
+  stroke: red;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='90' height='90' fill='none' stroke='context-stroke blue' stroke-width='10'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-bg-image-01.html b/layout/reftests/svg/as-image/context-stroke-bg-image-01.html
new file mode 100644
index 0000000000..57897c93e5
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-bg-image-01.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-stroke in background-image test</title>
+    <style>
+
+div {
+  width: 100px;
+  height: 100px;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='90' height='90' fill='none' stroke='context-stroke red' stroke-width='10'/></svg>");
+  -moz-context-properties: stroke;
+  stroke: blue;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-01.html b/layout/reftests/svg/as-image/context-stroke-opacity-01.html
new file mode 100644
index 0000000000..6c3e9b386b
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic context-stroke-opacity test</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke-opacity;
+  stroke-opacity: 0.5;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-02.html b/layout/reftests/svg/as-image/context-stroke-opacity-02.html
new file mode 100644
index 0000000000..4445cc7b93
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-02.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke-opacity with different stroke-opacity values (test image caching correctness)</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke-opacity;
+}
+
+#img1 {
+  stroke-opacity: 0.3;
+}
+
+#img2 {
+  stroke-opacity: 0.7;
+}
+
+    </style>
+  </head>
+  <body>
+    <img id="img1" src="context-stroke-opacity-02.svg">
+    <img id="img2" src="context-stroke-opacity-02.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-02.svg b/layout/reftests/svg/as-image/context-stroke-opacity-02.svg
new file mode 100644
index 0000000000..d00c3a0e59
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-02.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+    <line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-03.html b/layout/reftests/svg/as-image/context-stroke-opacity-03.html
new file mode 100644
index 0000000000..cc0f5685a7
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-03.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke-opacity works with context-stroke</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke, stroke-opacity;
+  stroke: blue;
+  stroke-opacity: 0.5;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke' stroke-opacity='context-stroke-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-04.html b/layout/reftests/svg/as-image/context-stroke-opacity-04.html
new file mode 100644
index 0000000000..cc329b463a
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-04.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>No context-stroke-opacity value is provided</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: stroke-opacity;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-05.html b/layout/reftests/svg/as-image/context-stroke-opacity-05.html
new file mode 100644
index 0000000000..f31b42d062
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-05.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test context-stroke-opacity when only '-moz-context-properties: fill-opacity' is specified</title>
+    <style>
+
+img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill-opacity;
+  stroke-opacity: 0.5;
+}
+
+    </style>
+  </head>
+  <body>
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg
new file mode 100644
index 0000000000..a2c4c7a558
--- /dev/null
+++ b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+     viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax">
+
+  <rect width="100" height="100" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg b/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg
new file mode 100644
index 0000000000..2b49baf71e
--- /dev/null
+++ b/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <rect width="100" height="100" fill="blue"/>
+  <image xlink:href="defer-unsupported-1-helper.svg" width="200" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/defer-unsupported-1.svg b/layout/reftests/svg/as-image/defer-unsupported-1.svg
new file mode 100644
index 0000000000..4a9d84955e
--- /dev/null
+++ b/layout/reftests/svg/as-image/defer-unsupported-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <rect width="100" height="100" fill="blue"/>
+  <image xlink:href="defer-unsupported-1-helper.svg" width="200" height="100"
+         preserveAspectRatio="defer xMinYMin"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/display-none.svg b/layout/reftests/svg/as-image/display-none.svg
new file mode 100644
index 0000000000..402d37b491
--- /dev/null
+++ b/layout/reftests/svg/as-image/display-none.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="100" style="display: none">
+  <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/image-orientation-ref.html b/layout/reftests/svg/as-image/image-orientation-ref.html
new file mode 100644
index 0000000000..518f899fda
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    table {
+      border-spacing: 0px;
+    }
+    div {
+      width: 100px; height: 200px;
+    }
+    td {
+      width: 50px; height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <table>
+      <tr>
+        <td style="background-color: rgb(0, 191, 0)"></td>
+        <td style="background-color: rgb(0, 255, 1)"></td>
+      </tr>
+      <tr>
+        <td style="background-color: rgb(254, 0, 122)"></td>
+        <td style="background-color: rgb(254, 0, 122)"></td>
+      </tr>
+    </table>
+  </div>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
new file mode 100644
index 0000000000..e531d70cf3
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
@@ -0,0 +1,19 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+  </style>
+</head>
+<body>
+  <img src="image-orientation-viewbox-and-size.svg">
+  <script>
+    let fromImage = location.search == "from-image";
+    if (fromImage) {
+      document.querySelector("img").style.imageOrientation = "from-image";
+    }
+  </script>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg
new file mode 100644
index 0000000000..148b021e5c
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="200"
+     viewBox="25 25 100 200">
+  <rect x="25" y="25"  width="50" height="100" fill="rgb(0, 191, 0)"/>
+  <rect x="75" y="25"  width="50" height="100" fill="rgb(0, 255, 1)"/>
+  <rect x="75" y="125" width="50" height="100" fill="rgb(254, 0, 122)"/>
+  <rect x="25" y="125" width="50" height="100" fill="rgb(191, 0, 93)"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
new file mode 100644
index 0000000000..7875aeea22
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
@@ -0,0 +1,22 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      image-orientation: from-image;
+    }
+  </style>
+</head>
+<body>
+  <img src="image-orientation-viewbox-no-size.svg">
+  <script>
+    let fromImage = location.search == "from-image";
+    if (fromImage) {
+      document.querySelector("img").style.imageOrientation = "from-image";
+    }
+  </script>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg
new file mode 100644
index 0000000000..5733488010
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     viewBox="25 25 100 200">
+  <rect x="25" y="25"  width="50" height="100" fill="rgb(0, 191, 0)"/>
+  <rect x="75" y="25"  width="50" height="100" fill="rgb(0, 255, 1)"/>
+  <rect x="75" y="125" width="50" height="100" fill="rgb(254, 0, 122)"/>
+  <rect x="25" y="125" width="50" height="100" fill="rgb(191, 0, 93)"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg
new file mode 100644
index 0000000000..254a873933
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="20"
+     viewBox="0 0 100 20">
+  <!-- animated value for preserveAspectRatio: -->
+  <set attributeName="preserveAspectRatio" to="xMaxYMax slice"/>
+  <rect x="2" y="2" width="96" height="16"
+        style="stroke-width: 4; fill:lime; stroke: teal"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg
new file mode 100644
index 0000000000..6aada7f0f7
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="20"
+     viewBox="0 0 100 20"
+     preserveAspectRatio="xMaxYMax slice"> <!-- static pAR value -->
+  <rect x="2" y="2" width="96" height="16"
+        style="stroke-width: 4; fill:lime; stroke: teal"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg
new file mode 100644
index 0000000000..73fe0cb119
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200">
+  <!-- FIRST COLUMN: image "a" (has animated preserveAspectRatio val) -->
+  <g>
+    <g>
+      <image xlink:href="img-and-image-1-helper-a.svg" width="100" height="40"
+             preserveAspectRatio="xMinYMin slice"/>
+    </g>
+    <g transform="translate(0,50)">
+      <image xlink:href="img-and-image-1-helper-a.svg" width="100" height="40"
+             preserveAspectRatio="none"/>
+    </g>
+    <g transform="translate(0,100)">
+      <image xlink:href="img-and-image-1-helper-a.svg" width="80" height="40"
+             preserveAspectRatio="xMaxYMax meet"/>
+    </g>
+    <g transform="translate(0,150)">
+      <image xlink:href="img-and-image-1-helper-a.svg" width="80" height="40"
+             preserveAspectRatio="defer xMinYMin meet"/>
+    </g>
+  </g>
+  <!-- SECOND COLUMN: image "b" (has static preserveAspectRatio val) -->
+  <g transform="translate(150,0)">
+    <g>
+      <image xlink:href="img-and-image-1-helper-b.svg" width="100" height="40"
+             preserveAspectRatio="xMinYMin slice"/>
+    </g>
+    <g transform="translate(0,50)">
+      <image xlink:href="img-and-image-1-helper-b.svg" width="100" height="40"
+             preserveAspectRatio="none"/>
+    </g>
+    <g transform="translate(0,100)">
+      <image xlink:href="img-and-image-1-helper-b.svg" width="80" height="40"
+             preserveAspectRatio="xMaxYMax meet"/>
+    </g>
+    <g transform="translate(0,150)">
+      <image xlink:href="img-and-image-1-helper-b.svg" width="80" height="40"
+             preserveAspectRatio="defer xMinYMin meet"/>
+    </g>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-ref.svg b/layout/reftests/svg/as-image/img-and-image-1-ref.svg
new file mode 100644
index 0000000000..07e977f0e5
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <!-- The rect that's used everywhere -->
+    <rect id="rect" x="2" y="2" width="96" height="16"
+          style="stroke-width: 4; fill:lime; stroke: teal"/>
+
+    <!-- Symbols with the testcases' preserveAspectRatio values applied -->
+    <symbol id="pAR_xMinYMin_slice"
+            viewBox="0 0 100 20" preserveAspectRatio="xMinYMin slice">
+      <use xlink:href="#rect"/>
+    </symbol>
+    <symbol id="pAR_none"
+            viewBox="0 0 100 20" preserveAspectRatio="none">
+      <use xlink:href="#rect"/>
+    </symbol>
+    <symbol id="pAR_xMaxYMax_meet"
+            viewBox="0 0 100 20" preserveAspectRatio="xMaxYMax meet">
+      <use xlink:href="#rect"/>
+    </symbol>
+    <symbol id="pAR_xMaxYMax_slice"
+            viewBox="0 0 100 20" preserveAspectRatio="xMaxYMax slice">
+      <!-- this one corresponds to 'defer' in the image used in the testcase,
+           as well as to the HTML <img> elements (which don't bring their own
+           preserveAspectRatio value) -->
+      <use xlink:href="#rect"/>
+    </symbol>
+
+    <!-- Single column from the testcase -->
+    <g id="column">
+      <use y="0"   xlink:href="#pAR_xMaxYMax_slice" width="60"  height="20"/>
+      <use y="50"  xlink:href="#pAR_xMinYMin_slice" width="100" height="40"/>
+      <use y="100" xlink:href="#pAR_none"           width="100" height="40"/>
+      <use y="150" xlink:href="#pAR_xMaxYMax_meet"  width="80"  height="40"/>
+      <use y="200" xlink:href="#pAR_xMaxYMax_slice" width="80"  height="40"/>
+      <use y="250" xlink:href="#pAR_xMaxYMax_slice" width="30"  height="50"/>
+    </g>
+  </defs>
+
+  <!-- Rendered output: 2 instances of our column (defined above) -->
+  <use xlink:href="#column"/>
+  <use x="150" xlink:href="#column"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1.html b/layout/reftests/svg/as-image/img-and-image-1.html
new file mode 100644
index 0000000000..f60e4e2a62
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+  <style>
+    img { position: absolute; }
+  </style>
+</head>
+<body style="margin: 0">
+  <!-- Use the base images "a" and "b" first -->
+  <img src="img-and-image-1-helper-a.svg"
+       style="left: 0;      top: 0;      width: 60px;  height: 20px">
+  <img src="img-and-image-1-helper-b.svg"
+       style="left: 150px;  top: 0;      width: 60px;  height: 20px">
+
+  <!-- Now, use an SVG image "c", which itself uses both base images. -->
+  <img src="img-and-image-1-helper-c.svg"
+       style="left: 0;      top: 50px;   width: 300px; height: 200px">
+
+  <!-- And finally, use "a" and "b" again, but now with a different size. -->
+  <img src="img-and-image-1-helper-a.svg"
+       style="left: 0;     top: 250px;   width: 30px;  height: 50px">
+  <img src="img-and-image-1-helper-b.svg"
+       style="left: 150px; top: 250px;   width: 30px;  height: 50px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-blobURI-1.html b/layout/reftests/svg/as-image/img-blobURI-1.html
new file mode 100644
index 0000000000..127689e78d
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-blobURI-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- This test checks to be sure we can render SVG-as-an-image
+     from a 'blob' URI. -->
+<html class="reftest-wait">
+<head>
+  <script>
+    function go() {
+      // Generate a blob URL encoding of an SVG document
+      var blobURL = generateBlobURL();
+
+      // Tell our img element to render the URL
+      var img = document.getElementsByTagName("img")[0]
+      img.src = blobURL;
+
+      // Once our img loads, take reftest snapshot.
+      img.addEventListener("load", function() {
+        document.documentElement.removeAttribute("class");
+      });
+    }
+
+    // Helper function -- returns a blob URL representing a
+    // 100x100 fully-lime SVG document.
+    function generateBlobURL() {
+      var svg =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' +
+          '<rect height="100%" width="100%" fill="lime"/>' +
+        '</svg>';
+      return self.URL.createObjectURL(new Blob([svg], {type: "image/svg+xml"}));
+    }
+  </script>
+</head>
+<body onload="go()">
+  <img src="">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-blobURI-2.html b/layout/reftests/svg/as-image/img-blobURI-2.html
new file mode 100644
index 0000000000..073ec80620
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-blobURI-2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- This test checks to be sure we allow
+     'blob' URIs *inside of* SVG-as-an-image. -->
+<html class="reftest-wait">
+<head>
+  <script>
+    function go() {
+      // Generate a blob URL encoding of an SVG document
+      var blobURL = generateBlobURL();
+
+      // Now generate a data URI, containing our blob URI
+      var outerSVG =
+        '<svg xmlns="http://www.w3.org/2000/svg" ' +
+             'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
+             'width="100" height="100">' +
+          '<image height="100" width="100" ' +
+             'xlink:href="' + blobURL + '"/>' +
+        '</svg>';
+
+      // Tell our img element to render the URL
+      var img = document.getElementsByTagName("img")[0]
+      img.src = "data:image/svg+xml," + outerSVG;
+
+      // Once our img loads, take reftest snapshot.
+      img.addEventListener("load", function() {
+        document.documentElement.removeAttribute("class");
+      });
+    }
+
+    // Helper function -- returns a blob URL representing a
+    // 100x100 fully-lime SVG document.
+    function generateBlobURL() {
+      var svg =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' +
+          '<rect height="100%" width="100%" fill="lime"/>' +
+        '</svg>';
+      return self.URL.createObjectURL(new Blob([svg], {type: "image/svg+xml"}));
+    }
+  </script>
+</head>
+<body onload="go()">
+  <img src="">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html b/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html
new file mode 100644
index 0000000000..abee91c514
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+  <style>
+    div.rect { width: 10px; height: 10px; display: inline-block }
+  </style>
+<body>
+  <div style="width: 100px; border: 1px solid blue">
+    <div class="rect" style="background: lime"></div
+    ><div class="rect" style="background: blue; margin-left: 20px"></div>
+  </div>
+  <div style="width: 10px; height: 100px; border: 1px solid purple">
+    <div class="rect" style="background: lime"></div>
+    <div class="rect" style="background: purple; margin-top: 20px"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html b/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html
new file mode 100644
index 0000000000..3aad7adfa3
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html
@@ -0,0 +1,14 @@
+<html>
+<!-- Simple test to make sure we can display content outside of an SVG viewbox,
+     if appropriate given the SVG image & our <img> dimensions.  In this case,
+     we have a perfect-square viewBox, but our img elements are long
+     rectangles, so they should end up sampling some content off of one side or
+     the other of the viewBox.  -->
+<body>
+  <img src="content-outside-viewBox-1-helper.svg" height="10" width="100"
+       style="border: 1px solid blue">
+  <br/>
+  <img src="content-outside-viewBox-1-helper.svg" height="100" width="10"
+       style="border: 1px solid purple ">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-display-none-1.html b/layout/reftests/svg/as-image/img-display-none-1.html
new file mode 100644
index 0000000000..2ce155c9bf
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-display-none-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Test for an <img> tag pointing to an SVG image that has "display:none"
+     on the root node. -->
+<html>
+<body>
+  <img src="display-none.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-dyn-1-ref.html b/layout/reftests/svg/as-image/img-dyn-1-ref.html
new file mode 100644
index 0000000000..cb9f2635bd
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-dyn-1-ref.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+  <div style="width: 200px; height: 200px; border: 2px dashed green">
+    <img src="squaredCircle-viewBox-noSize.svg">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-dyn-1.html b/layout/reftests/svg/as-image/img-dyn-1.html
new file mode 100644
index 0000000000..9be86ff57b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-dyn-1.html
@@ -0,0 +1,18 @@
+<!-- This test makes sure that we resize SVG content correctly after the
+     container width is dynamically modified. -->
+<html class="reftest-wait">
+<head>
+  <script>
+    function go() {
+      document.getElementById("wrapper").style.width = "200px";
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="go()">
+  <div id="wrapper"
+       style="width: 100px; height: 200px; border: 2px dashed green">
+    <img src="squaredCircle-viewBox-noSize.svg">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg
new file mode 100644
index 0000000000..3b1b6a67b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml"
+         style="background:lime; width:100%; height:100%;"/>
+  </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-1.html b/layout/reftests/svg/as-image/img-foreignObject-1.html
new file mode 100644
index 0000000000..de4671ad7e
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="img-foreignObject-1-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg
new file mode 100644
index 0000000000..e7f93d241c
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <foreignObject x="0" y="0" width="100px" height="100px">
+
+    <!-- lime background -->
+    <div xmlns="http://www.w3.org/1999/xhtml"
+         style="background:lime; width:100%; height:100%;">
+      <!-- Use an unrecognized media type, so that if we're honoring plugins,
+           the "download plugin" placeholder will be shown. -->
+      <embed xmlns="http://www.w3.org/1999/xhtml"
+             src="data:audio/hahaThisIsntReallyAFormat,"
+             width="100px" height="50px"/>
+      <!-- Also try a possibly-recognized media format, for completeness. -->
+      <embed xmlns="http://www.w3.org/1999/xhtml"
+             src="data:audio/wav,"
+             width="100px" height="50px"/>
+    </div>
+  </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-embed-1.html b/layout/reftests/svg/as-image/img-foreignObject-embed-1.html
new file mode 100644
index 0000000000..25d5e3eeec
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-embed-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="img-foreignObject-embed-1-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg
new file mode 100644
index 0000000000..e60fa172ae
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <foreignObject x="0" y="0" width="100px" height="100px">
+    <!-- lime background -->
+    <div xmlns="http://www.w3.org/1999/xhtml"
+         style="background:lime; width:100%; height:100%;">
+
+      <!-- embedded iframe, whose contents shouldn't be shown and whose
+           scripts shouldn't be run, when we're being viewed as an image -->
+      <iframe xmlns="http://www.w3.org/1999/xhtml"
+              style="width:80px; height:80px; border: 0"
+              src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background-color%3A%20red%22%3Eiframe%20contents%3Cscript%3Ealert(%22script%20shouldn't%20be%20running!!%22)%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E"/>
+    </div>
+  </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html
new file mode 100644
index 0000000000..2840a1b227
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="img-foreignObject-iframe-1a-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg
new file mode 100644
index 0000000000..5bc57390d7
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <foreignObject x="0" y="0" width="100px" height="100px">
+    <!-- lime background -->
+    <div xmlns="http://www.w3.org/1999/xhtml"
+         style="background:lime; width:100%; height:100%;">
+
+      <!-- embedded iframe, whose contents shouldn't be shown, when we're
+           being viewed as an image -->
+      <iframe xmlns="http://www.w3.org/1999/xhtml"
+              style="width:80px; height:80px; border: 0"
+              src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background-color%3A%20red%22%3Eiframe%20contents%3C%2Fbody%3E%3C%2Fhtml%3E"/>
+    </div>
+  </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html
new file mode 100644
index 0000000000..3ee04d4a72
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="img-foreignObject-iframe-1b-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1-ref.html b/layout/reftests/svg/as-image/img-fragment-1-ref.html
new file mode 100644
index 0000000000..babf7b38a6
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox: [0, 0, 20, 20],
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1a.html b/layout/reftests/svg/as-image/img-fragment-1a.html
new file mode 100644
index 0000000000..31ac73d18b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        view: {
+          viewBox: [0, 0, 20, 20],
+          meetOrSlice: "meet"
+        },
+        fragmentIdentifier: "view"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1b.html b/layout/reftests/svg/as-image/img-fragment-1b.html
new file mode 100644
index 0000000000..0835a9d9cd
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1b.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox: [0, 0, 20, 20],
+        meetOrSlice: "meet",
+        fragmentIdentifier: "view"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1c.html b/layout/reftests/svg/as-image/img-fragment-1c.html
new file mode 100644
index 0000000000..717a64fdf4
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        view: {
+          viewBox: [0, 0, 20, 20],
+          meetOrSlice: "meet"
+        },
+        viewBox: [0, 0, 40, 40],
+        meetOrSlice: "slice",
+        fragmentIdentifier: "view"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2-ref.html b/layout/reftests/svg/as-image/img-fragment-2-ref.html
new file mode 100644
index 0000000000..c05d94372b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox: [0, 0, 20, 20],
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2a.html b/layout/reftests/svg/as-image/img-fragment-2a.html
new file mode 100644
index 0000000000..953906c004
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        view: {
+          viewBox: [0, 0, 20, 20],
+          meetOrSlice: "slice"
+        },
+        fragmentIdentifier: "view"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2b.html b/layout/reftests/svg/as-image/img-fragment-2b.html
new file mode 100644
index 0000000000..681867e479
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2b.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox: [0, 0, 20, 20],
+        meetOrSlice: "slice",
+        fragmentIdentifier: "view"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2c.html b/layout/reftests/svg/as-image/img-fragment-2c.html
new file mode 100644
index 0000000000..02cd1abf8c
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        view: {
+          viewBox: [0, 0, 20, 20],
+          meetOrSlice: "slice"
+        },
+        viewBox: [0, 0, 40, 40],
+        meetOrSlice: "meet",
+        fragmentIdentifier: "view"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-1-ref.html b/layout/reftests/svg/as-image/img-height-meet-1-ref.html
new file mode 100644
index 0000000000..2a12d87f2b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-1.html b/layout/reftests/svg/as-image/img-height-meet-1.html
new file mode 100644
index 0000000000..c1cf238540
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-2-ref.html b/layout/reftests/svg/as-image/img-height-meet-2-ref.html
new file mode 100644
index 0000000000..efaee25c74
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-2.html b/layout/reftests/svg/as-image/img-height-meet-2.html
new file mode 100644
index 0000000000..98fca1d366
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-1-ref.html b/layout/reftests/svg/as-image/img-height-slice-1-ref.html
new file mode 100644
index 0000000000..5724f8e0cb
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-1.html b/layout/reftests/svg/as-image/img-height-slice-1.html
new file mode 100644
index 0000000000..1997f37c5b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-2-ref.html b/layout/reftests/svg/as-image/img-height-slice-2-ref.html
new file mode 100644
index 0000000000..e9b809e6cd
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-2.html b/layout/reftests/svg/as-image/img-height-slice-2.html
new file mode 100644
index 0000000000..faab57f736
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
new file mode 100644
index 0000000000..999ce5aa63
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body style="width: 600px"><!-- width for pct vals to resolve against -->
+  <script>
+      var svgParams = {
+        viewBox:  null,   // This gets set on a case-by-case basis below.
+        width  :  "10%",
+        height :  "30px",
+        meetOrSlice: null // This means "use pAR=none"
+      };
+
+      // Descriptions below describe the behavior of the rows of <img> elements
+      // in the corresponding test cases, which we mimic with specially-crafted
+      // <embed> elements.
+
+      // * FIRST TWO ROWS: <img> has width=auto height=auto
+      //  - Each <img> renders w/ width = 300px (default)
+      //  - Synthesized viewBox has width = 10% * viewport_width = .1*300 = 30
+      //  - <img> & viewBox both get height=30px, from <svg> height attr
+      svgParams.viewBox = [0, 0, 30, 30],
+      appendSVGSubArrayWithParams(svgParams, "embed", "300px", "30px");
+
+      // * SECOND TWO ROWS: <img> has width=auto, height=20px
+      // Calculations are as above, except <img> now imposes height="20px".
+      appendSVGSubArrayWithParams(svgParams, "embed", "300px", "20px");
+
+      // * THIRD TWO ROWS: <img> has width=30px height=auto
+      //  - <img> now renders w/ width = 30px (imposed by <img> width attr)
+      //  - Synthesized viewBox has width = 10% * viewport_width = .1*30 = 3
+      //  - <img> & viewBox both get height=30px, from <svg> height attr
+      svgParams.viewBox =  [0, 0, 3, 30];
+      appendSVGSubArrayWithParams(svgParams, "embed", "30px", "30px");
+
+      // * FOURTH TWO ROWS: <img> has width=30px height=20px
+      // Calculations are as above, except <img> now imposes height="20px".
+      appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
+
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-height-meet-1.html b/layout/reftests/svg/as-image/img-novb-height-meet-1.html
new file mode 100644
index 0000000000..ab19b2948f
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-height-meet-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body style="width: 600px"><!-- width for pct vals to resolve against -->
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        width  :  "10%",
+        height :  "30px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-height-slice-1.html b/layout/reftests/svg/as-image/img-novb-height-slice-1.html
new file mode 100644
index 0000000000..725277a680
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-height-slice-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body style="width: 600px"><!-- width for pct vals to resolve against -->
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        width  :  "10%",
+        height :  "30px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
new file mode 100644
index 0000000000..9d99b4da67
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body style="height: 600px"><!-- height for pct vals to resolve against -->
+  <script>
+      var svgParams = {
+        viewBox:  null,   // This gets set on a case-by-case basis below.
+        width  :  "20px",
+        height :  "20%",
+        meetOrSlice: null // This means "use pAR=none"
+      };
+
+      // Descriptions below describe the behavior of the rows of <img> elements
+      // in the corresponding test cases, which we mimic with specially-crafted
+      // <embed> elements.
+
+      // * FIRST TWO ROWS: <img> has width=auto height=auto
+      //  - Each <img> renders w/ height = 150px (default)
+      //  - Synthesized viewBox has height = 20% * viewport_height = .2*150 = 30
+      //  - <img> & viewBox both get width=20px, from <svg> width attr
+      svgParams.viewBox = [0, 0, 20, 30],
+      appendSVGSubArrayWithParams(svgParams, "embed", "20px", "150px");
+
+      // * SECOND TWO ROWS: <img> has width=auto, height=20px
+      //  - <img> now renders w/ height = 20px (imposed by <img> height attr)
+      //  - Synthesized viewBox has height = 20% * viewport_width = .2*20 = 4
+      //  - <img> & viewBox both get width=20px, from <svg> width attr
+      svgParams.viewBox = [0, 0, 20, 4],
+      appendSVGSubArrayWithParams(svgParams, "embed", "20px", "20px");
+
+      // * THIRD TWO ROWS: <img> has width=30px height=auto
+      // Calculations are as with "FIRST TWO ROWS", except <img> now imposes
+      // width="30px".
+      svgParams.viewBox = [0, 0, 20, 30],
+      appendSVGSubArrayWithParams(svgParams, "embed", "30px", "150px");
+
+      // * FOURTH TWO ROWS: <img> has width=30px height=20px
+      // Calculations are as with "SECOND TWO ROWS", except <img> now imposes
+      // width="30px".
+      svgParams.viewBox = [0, 0, 20, 4],
+      appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
+
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-width-meet-1.html b/layout/reftests/svg/as-image/img-novb-width-meet-1.html
new file mode 100644
index 0000000000..86ff8afe23
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-width-meet-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body style="height: 600px"><!-- height for pct vals to resolve against -->
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        width  :  "20px",
+        height :  "20%",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-width-slice-1.html b/layout/reftests/svg/as-image/img-novb-width-slice-1.html
new file mode 100644
index 0000000000..abbc21e729
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-width-slice-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body style="height: 600px"><!-- height for pct vals to resolve against -->
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        width  :  "20px",
+        height :  "20%",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html
new file mode 100644
index 0000000000..8839c0fa5c
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 20],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: null // this means "always just use pAR='none'"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html
new file mode 100644
index 0000000000..eccc7c5e17
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        height :  "2em", // 20px
+        width :   "2em", // 20px
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html
new file mode 100644
index 0000000000..ed58e83193
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html
new file mode 100644
index 0000000000..7986e3ec2e
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        height :  "2em", // 20px
+        width :   "2em", // 20px
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html
new file mode 100644
index 0000000000..a50f10e659
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  null,
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-1.html b/layout/reftests/svg/as-image/img-simple-1.html
new file mode 100644
index 0000000000..1592cbc069
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime100x100.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-2.html b/layout/reftests/svg/as-image/img-simple-2.html
new file mode 100644
index 0000000000..049b2a3e45
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-2.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="limeInRed100x100-viewBox.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-3-ref.html b/layout/reftests/svg/as-image/img-simple-3-ref.html
new file mode 100644
index 0000000000..f77ea89e11
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-3-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <svg style="width: 600px; height: 600px"
+       viewBox="0 0 100 100" shape-rendering="crispEdges">
+    <rect x="2" y="2" height="96" width="96"
+          stroke-width="4" stroke="black" fill="yellow"/>
+    <circle cx="50" cy="50" r="46" style="fill: blue"/>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-3.html b/layout/reftests/svg/as-image/img-simple-3.html
new file mode 100644
index 0000000000..f20c2877ea
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-3.html
@@ -0,0 +1,9 @@
+<html>
+<body>
+  <!-- This image scales uniformly, preserving its aspect ratio, to be
+       600x600.  Though the SVG content doesn't have a viewBox, we behave as if
+       it did when it's used as an image, since it has non-percent-valued
+       height and width attributes on the root svg node. -->
+  <img src="squaredCircle-100x100.svg" width="600px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-4.html b/layout/reftests/svg/as-image/img-simple-4.html
new file mode 100644
index 0000000000..af0f40e31b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-4.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime100x100.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-5-ref.html b/layout/reftests/svg/as-image/img-simple-5-ref.html
new file mode 100644
index 0000000000..f08c94488a
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-5-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <svg style="width: 200px; height: 600px"
+       viewBox="0 0 100 100" preserveAspectRatio="none"
+       shape-rendering="crispEdges">
+    <rect x="2" y="2" height="96" width="96"
+          stroke-width="4" stroke="black" fill="yellow"/>
+    <circle cx="50" cy="50" r="46" style="fill: blue"/>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-5.html b/layout/reftests/svg/as-image/img-simple-5.html
new file mode 100644
index 0000000000..a686a0a1cf
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-5.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <!-- Like img-simple-3, but with height != width on the img element. -->
+  <img src="squaredCircle-100x100.svg" width="200px" height="600px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-6.html b/layout/reftests/svg/as-image/img-simple-6.html
new file mode 100644
index 0000000000..69ab8ebf03
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-6.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime200x200.svg" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-7-ref.html b/layout/reftests/svg/as-image/img-simple-7-ref.html
new file mode 100644
index 0000000000..76f575b447
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-7-ref.html
@@ -0,0 +1,11 @@
+<html>
+<body>
+  <svg style="width: 200px; height: 200px"
+       viewBox="0 0 100 50" preserveAspectRatio="none"
+       shape-rendering="crispEdges">
+    <rect x="2" y="2" height="96" width="96"
+          stroke-width="4" stroke="black" fill="yellow"/>
+    <circle cx="50" cy="50" r="46" style="fill: blue"/>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-7.html b/layout/reftests/svg/as-image/img-simple-7.html
new file mode 100644
index 0000000000..3e0138f202
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-7.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <!-- Like img-simple-3, but with height != width on the root SVG node. -->
+  <img src="squaredCircle-100x50.svg" width="200px" height="200px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-1-ref.html b/layout/reftests/svg/as-image/img-width-meet-1-ref.html
new file mode 100644
index 0000000000..0793368963
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-1.html b/layout/reftests/svg/as-image/img-width-meet-1.html
new file mode 100644
index 0000000000..489b4f7ccc
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-2-ref.html b/layout/reftests/svg/as-image/img-width-meet-2-ref.html
new file mode 100644
index 0000000000..ecf8776e47
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-2.html b/layout/reftests/svg/as-image/img-width-meet-2.html
new file mode 100644
index 0000000000..039aaf1f1b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-1-ref.html b/layout/reftests/svg/as-image/img-width-slice-1-ref.html
new file mode 100644
index 0000000000..e306d673c7
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-1.html b/layout/reftests/svg/as-image/img-width-slice-1.html
new file mode 100644
index 0000000000..78af6f8b1a
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-2-ref.html b/layout/reftests/svg/as-image/img-width-slice-2-ref.html
new file mode 100644
index 0000000000..66161ec71d
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-2.html b/layout/reftests/svg/as-image/img-width-slice-2.html
new file mode 100644
index 0000000000..21740cf708
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html
new file mode 100644
index 0000000000..0c9c44ba15
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html
new file mode 100644
index 0000000000..f5453f91d0
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html
new file mode 100644
index 0000000000..93dfa47b6e
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html
new file mode 100644
index 0000000000..367f52b28d
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html
new file mode 100644
index 0000000000..671aa1ecd8
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html
new file mode 100644
index 0000000000..b95b7d4ff6
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html
new file mode 100644
index 0000000000..ed94f8811b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html
new file mode 100644
index 0000000000..2f89c8b4d8
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+</head>
+<body>
+  <script>
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+  </script>
+  <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100-50pct-ref.html b/layout/reftests/svg/as-image/lime100x100-50pct-ref.html
new file mode 100644
index 0000000000..46dde81ae6
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-50pct-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: rgb(0% 100% 0% / 50%)"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg
new file mode 100644
index 0000000000..74e4df78aa
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect width="100" height="100" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime100x100-ref.html b/layout/reftests/svg/as-image/lime100x100-ref.html
new file mode 100644
index 0000000000..daedf45c8d
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: lime"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100-w-border-ref.html b/layout/reftests/svg/as-image/lime100x100-w-border-ref.html
new file mode 100644
index 0000000000..42f4d03368
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-w-border-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: lime; border: 1px solid black"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100.png b/layout/reftests/svg/as-image/lime100x100.png
new file mode 100644
index 0000000000..c9bb375943
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100.png
diff --git a/layout/reftests/svg/as-image/lime100x100.svg b/layout/reftests/svg/as-image/lime100x100.svg
new file mode 100644
index 0000000000..8bdec62c1f
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="100">
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime200x100.svg b/layout/reftests/svg/as-image/lime200x100.svg
new file mode 100644
index 0000000000..75aadf6402
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime200x100.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="200" height="100">
+  <rect width="200px" height="100px" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime200x200.svg b/layout/reftests/svg/as-image/lime200x200.svg
new file mode 100644
index 0000000000..d746c2848c
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime200x200.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="200" height="200">
+  <rect width="200px" height="200px" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime50x25.svg b/layout/reftests/svg/as-image/lime50x25.svg
new file mode 100644
index 0000000000..9afc0af362
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime50x25.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="50" height="25">
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime50x50.svg b/layout/reftests/svg/as-image/lime50x50.svg
new file mode 100644
index 0000000000..7f9d530380
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime50x50.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="50" height="50">
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg
new file mode 100644
index 0000000000..151ec3077f
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <set attributeName="viewBox" to="25 25 50 50" begin="0" dur="indefinite"/>
+  <rect width="100" height="100" fill="red"/>
+  <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg
new file mode 100644
index 0000000000..baa944a81d
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     viewBox="25 25 50 50">
+  <rect width="100" height="100" fill="red"/>
+  <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg b/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg
new file mode 100644
index 0000000000..b97337d0c3
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="100" viewBox="25 25 50 50">
+  <rect width="100" height="100" fill="red"/>
+  <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed100x100.png b/layout/reftests/svg/as-image/limeInRed100x100.png
new file mode 100644
index 0000000000..d65c62635c
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100.png
diff --git a/layout/reftests/svg/as-image/limeInRed100x100.svg b/layout/reftests/svg/as-image/limeInRed100x100.svg
new file mode 100644
index 0000000000..45d9396b98
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="100">
+  <rect width="100%" height="100%" fill="red"/>
+  <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/list-simple-1-ref.html b/layout/reftests/svg/as-image/list-simple-1-ref.html
new file mode 100644
index 0000000000..b603886ba5
--- /dev/null
+++ b/layout/reftests/svg/as-image/list-simple-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin-left: 100px">
+  <ul style="list-style-image: url('lime100x100.png')">
+    <li>abc
+    <li>def
+  </ul>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/list-simple-1.html b/layout/reftests/svg/as-image/list-simple-1.html
new file mode 100644
index 0000000000..2e638943fb
--- /dev/null
+++ b/layout/reftests/svg/as-image/list-simple-1.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin-left: 100px">
+  <ul style="list-style-image: url('lime100x100.svg')">
+    <li>abc
+    <li>def
+  </ul>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/nonuniform-scale-2d.html b/layout/reftests/svg/as-image/nonuniform-scale-2d.html
new file mode 100644
index 0000000000..b14ff82efa
--- /dev/null
+++ b/layout/reftests/svg/as-image/nonuniform-scale-2d.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      width: 100px;
+      height: 100px;
+      transform-origin: 0 0 0;
+    }
+  </style>
+</head>
+<body>
+  <img src="blue-square-in-square.svg">
+
+  <script>
+    var scales = location.search.substring(1).split("&");
+    var xScale = scales[0];
+    var yScale = scales[1];
+
+    // Create a style representing a 2d transform.
+    var style = 'transform: matrix(' + xScale + ', 0,' +
+                                  '0, ' + yScale + ',' +
+                                  '0, 0);';
+
+    // Apply the style to the image.
+    var img = document.getElementsByTagName("img")[0];
+    img.style = style;
+  </script>
+</body>
diff --git a/layout/reftests/svg/as-image/nonuniform-scale-3d.html b/layout/reftests/svg/as-image/nonuniform-scale-3d.html
new file mode 100644
index 0000000000..8da4672989
--- /dev/null
+++ b/layout/reftests/svg/as-image/nonuniform-scale-3d.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      width: 100px;
+      height: 100px;
+      transform-origin: 0 0 0;
+    }
+  </style>
+</head>
+<body>
+  <img src="blue-square-in-square.svg">
+
+  <script>
+    var scales = location.search.substring(1).split("&");
+    var xScale = scales[0];
+    var yScale = scales[1];
+    var zScale = scales[2];
+
+    // Create a style representing a 3d transform.
+    var style = 'transform: matrix3d(' + xScale + ', 0, 0, 0,' +
+                                     '0, ' + yScale + ', 0, 0,' +
+                                     '0, 0, ' + zScale + ', 0,' +
+                                     '0, 0, 0, 1);';
+
+    // Apply the style to the image.
+    var img = document.getElementsByTagName("img")[0];
+    img.style = style;
+  </script>
+</body>
diff --git a/layout/reftests/svg/as-image/nonuniform-scale-ref.html b/layout/reftests/svg/as-image/nonuniform-scale-ref.html
new file mode 100644
index 0000000000..9644d44e54
--- /dev/null
+++ b/layout/reftests/svg/as-image/nonuniform-scale-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+  </style>
+</head>
+<body>
+  <img src="blue-square-in-square-par-none.svg">
+
+  <script>
+    var sizes = location.search.substring(1).split("&");
+
+    // Apply the size to the image.
+    var img = document.getElementsByTagName("img")[0];
+    img.width = sizes[0];
+    img.height = sizes[1];
+  </script>
+</body>
diff --git a/layout/reftests/svg/as-image/reftest.list b/layout/reftests/svg/as-image/reftest.list
new file mode 100644
index 0000000000..840ac1d9cb
--- /dev/null
+++ b/layout/reftests/svg/as-image/reftest.list
@@ -0,0 +1,222 @@
+# Tests related to SVG being used as an image
+
+# zoom/
+include zoom/reftest.list
+
+# Background-image tests
+== background-display-none-1.html  about:blank
+== background-simple-1.html  lime100x100-ref.html
+== background-simple-2.html  lime100x100-ref.html
+
+# Sightly trickier background-image test
+== background-viewBox-1.html  lime100x100-ref.html
+
+# background tests with the background area getting resized
+== background-resize-1.html  lime100x100-ref.html
+== background-resize-2.html  lime100x100-ref.html
+== background-resize-3.html  lime100x100-ref.html
+== background-resize-4.html  lime100x100-ref.html
+
+# Test for stretching background images by different amounts in each dimension
+== background-stretch-1.html background-stretch-1-ref.html
+
+# Tests for scaling background images
+fails-if(useDrawSnapshot) == background-scale-no-viewbox-1.html   background-scale-no-viewbox-1-ref.html
+fails-if(useDrawSnapshot) == background-scale-with-viewbox-1.html background-scale-with-viewbox-1-ref.html
+
+# Tests with -moz-image-rect()
+== background-image-rect-1svg.html  lime100x100-ref.html
+== background-image-rect-1png.html  lime100x100-ref.html
+== background-image-rect-2.html     lime100x100-ref.html
+
+# Test for border-image
+== border-image-simple-1.html       lime100x100-ref.html
+== border-image-simple-2.html       lime100x100-ref.html
+
+# Test for canvas "drawImage" method
+== canvas-drawImage-simple-1a.html lime100x100-ref.html
+== canvas-drawImage-simple-1b.html lime100x100-ref.html
+
+== canvas-drawImage-scale-1a.html lime100x100-ref.html
+== canvas-drawImage-scale-1b.html lime100x100-ref.html
+== canvas-drawImage-scale-1c.html lime100x100-ref.html
+
+fuzzy(0-1,0-2) fuzzy-if(!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas,0-97,0-745) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html
+fuzzy(0-1,0-2) fuzzy-if(!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas,0-97,0-745) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2-ref.html
+
+fuzzy-if(winWidget,0-1,0-10000) fuzzy-if(azureSkia,0-1,0-10000) fuzzy-if(Android,0-1,0-10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1-ref.html
+#Same as scale-2a but with globalAlpha:
+fuzzy(0-1,0-2) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-40000) fuzzy-if(azureSkia,0-1,0-40000) fuzzy-if(winWidget&&!remoteCanvas,0-1,0-39900) fuzzy-if(remoteCanvas&&!swgl,1-73,600-40000) == canvas-drawImage-alpha-2.html canvas-drawImage-alpha-2-ref.html
+
+== canvas-drawImage-slice-1a.html lime100x100-ref.html
+== canvas-drawImage-slice-1b.html lime100x100-ref.html
+
+== canvas-drawImage-origin-clean-1.html lime100x100-ref.html
+== canvas-drawImage-transform-restored.html canvas-drawImage-transform-restored-ref.html
+
+# Context paint tests (this feature is currently not part of any spec.)
+# context-fill:
+== context-fill-01.html blue100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-01.html lime100x100-ref.html
+== context-fill-02.html transparent100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-02.html lime100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-03.html lime100x100-50pct-ref.html
+# fuzz because on win8 the r & b components are off by one
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-04.html lime100x100-50pct-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-05.html context-fill-or-stroke-05-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-06.html lime100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-07.html context-fill-07-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-08.html blue100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-bg-image-01.html blue100x100-ref.html
+# context-stroke:
+== context-stroke-01.html blue100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-01.html lime100x100-ref.html
+== context-stroke-02.html transparent100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-02.html lime100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-03.html lime100x100-50pct-ref.html
+# fuzz because on win8 the r & b components are off by one
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-04.html lime100x100-50pct-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-05.html context-fill-or-stroke-05-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-06.html lime100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-07.html context-stroke-07-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-08.html blue100x100-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-bg-image-01.html blue100x100-border-ref.html
+# context-fill-opacity:
+== context-fill-opacity-01.html blue100x100-ref.html
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-01.html context-fill-or-stroke-opacity-01-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-20000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-02.html context-fill-or-stroke-opacity-02-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-03.html context-fill-or-stroke-opacity-03-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-04.html blue100x100-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-05.html blue100x100-ref.html # Bug 1377327
+# context-stroke-opacity:
+== context-stroke-opacity-01.html blue100x100-ref.html
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-01.html context-fill-or-stroke-opacity-01-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-20000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-02.html context-fill-or-stroke-opacity-02-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-03.html context-fill-or-stroke-opacity-03-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-04.html blue100x100-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-05.html blue100x100-ref.html # Bug 1377327
+
+# Simple <img> tests
+== img-simple-1.html  lime100x100-ref.html
+== img-simple-2.html  lime100x100-ref.html
+fuzzy(0-255,0-350) fuzzy-if(geckoview,0-255,0-4063) == img-simple-3.html img-simple-3-ref.html #Bug 1564891, bug 1574154
+== img-simple-4.html  lime100x100-ref.html
+fuzzy(0-255,0-90) fuzzy-if(geckoview,0-255,0-1268) == img-simple-5.html img-simple-5-ref.html
+== img-simple-6.html  lime100x100-ref.html
+fuzzy(0-255,0-27) == img-simple-7.html img-simple-7-ref.html
+
+# Test with mix of <html:img> and <svg:image> referring to the same images,
+# with a variety of preserveAspectRatio values in play.
+random == img-and-image-1.html img-and-image-1-ref.svg # bug 645267
+
+# More complex <img> tests
+== img-blobURI-1.html lime100x100-ref.html
+skip == img-blobURI-2.html lime100x100-ref.html
+fuzzy-if(d2d,0-16,0-10) == img-content-outside-viewBox-1.html img-content-outside-viewBox-1-ref.html # d2d is bug 1074161
+== img-display-none-1.html about:blank
+== img-dyn-1.html img-dyn-1-ref.html
+== img-foreignObject-1.html lime100x100-ref.html
+
+# The following tests check that content embedded via <iframe> and <embed>
+# doesn't load (or execute scripts) in SVG-as-an-image.
+# The "!=" lines are to test that the SVG content, when viewed directly (not as
+# an image), does actually render its external content (making it look
+# different from the reference case).  We don't do that check for
+# img-foreignObject-iframe-1a.html, though, because its SVG image tries to
+# alert(), and that'd trigger a reftest timeout if we loaded that file directly.
+== img-foreignObject-embed-1.html         lime100x100-ref.html
+skip != img-foreignObject-embed-1-helper.svg   lime100x100.svg    # Bug 1708599    
+== img-foreignObject-iframe-1a.html       lime100x100-ref.html
+== img-foreignObject-iframe-1b.html       lime100x100-ref.html
+!= img-foreignObject-iframe-1b-helper.svg lime100x100.svg
+
+== img-widthAndHeight-meet-1.html  img-widthAndHeight-meet-1-ref.html
+== img-widthAndHeight-meet-2.html  img-widthAndHeight-meet-2-ref.html
+fuzzy-if(!useDrawSnapshot,255-255,9-9) random-if(geckoview) == img-widthAndHeight-slice-1.html img-widthAndHeight-slice-1-ref.html
+== img-widthAndHeight-slice-2.html img-widthAndHeight-slice-2-ref.html
+
+== img-height-meet-1.html   img-height-meet-1-ref.html
+== img-height-meet-2.html   img-height-meet-2-ref.html
+fuzzy-if(!useDrawSnapshot,255-255,9-9) random-if(geckoview) == img-height-slice-1.html img-height-slice-1-ref.html
+== img-height-slice-2.html  img-height-slice-2-ref.html
+
+== img-width-meet-1.html   img-width-meet-1-ref.html
+== img-width-meet-2.html   img-width-meet-2-ref.html
+fuzzy-if(!useDrawSnapshot,255-255,3-9) random-if(geckoview) == img-width-slice-1.html img-width-slice-1-ref.html
+== img-width-slice-2.html  img-width-slice-2-ref.html
+
+# Alternate version of "width & height both non-%-valued" tests, but now
+# with no explicit viewBox, to trigger "synthesize-viewBox" behavior
+== img-novb-widthAndHeight-meet-1-em.html  img-novb-widthAndHeight-all-1-ref.html
+== img-novb-widthAndHeight-meet-1-px.html  img-novb-widthAndHeight-all-1-ref.html
+== img-novb-widthAndHeight-slice-1-em.html img-novb-widthAndHeight-all-1-ref.html
+== img-novb-widthAndHeight-slice-1-px.html img-novb-widthAndHeight-all-1-ref.html
+
+# Alternate versions of "only one dimension is non-%-valued" tests, but now
+# with no explicit viewBox, to trigger "synthesize-viewBox" behavior
+== img-novb-height-meet-1.html    img-novb-height-all-1-ref.html
+== img-novb-height-slice-1.html   img-novb-height-all-1-ref.html
+fuzzy(0-255,0-10) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html
+fuzzy(0-255,0-10) == img-novb-width-slice-1.html img-novb-width-all-1-ref.html
+
+# with with a fragmentIdentifier viewBox
+== img-fragment-1a.html  img-fragment-1-ref.html
+== img-fragment-1b.html  img-fragment-1-ref.html
+== img-fragment-1c.html  img-fragment-1-ref.html
+== img-fragment-2a.html  img-fragment-2-ref.html
+== img-fragment-2b.html  img-fragment-2-ref.html
+== img-fragment-2c.html  img-fragment-2-ref.html
+
+fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-8,0-1) == list-simple-1.html list-simple-1-ref.html
+
+== svg-image-simple-1.svg lime100x100.svg
+== svg-image-simple-2.svg lime100x100.svg
+== svg-image-simple-3.svg lime100x100.svg
+
+# tests for <svg> files that include themselves as an <image>
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1a.svg  svg-image-recursive-1-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1b.svg  svg-image-recursive-1-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2a.svg  svg-image-recursive-2-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2b.html svg-image-recursive-2-ref.svg
+
+# tests for external resources vs. data URIs in SVG as an image
+== svg-image-datauri-1.html            lime100x100.svg
+HTTP == svg-image-datauri-1.html       lime100x100.svg
+== svg-image-external-1.html           blue100x100.svg
+HTTP == svg-image-external-1.html      blue100x100.svg
+== svg-stylesheet-datauri-1.html       lime100x100.svg
+HTTP == svg-stylesheet-datauri-1.html  lime100x100.svg
+== svg-stylesheet-external-1.html      blue100x100.svg
+HTTP == svg-stylesheet-external-1.html blue100x100.svg
+
+# tests for SVG <image> that should have a synthetic viewBox
+== svg-image-synthetic-viewBox-01.svg svg-image-synthetic-viewBox-01-ref.svg
+
+# Test for painting problems with SVGs used in border images.
+# XXXseth: The underlying problems also apply to media fragments,
+# but the test case would be much simpler. This should be switched
+# over to use media fragments once bug 790640 lands.
+fuzzy(0-2,0-1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html
+
+# Test that 'image-orientation: from-image' has no effect, since SVGs don't have EXIF data.
+== image-orientation-viewbox-and-size.html?from-image  image-orientation-viewbox-and-size.html?none
+== image-orientation-viewbox-no-size.html?from-image   image-orientation-viewbox-no-size.html?none
+
+# Tests that nonuniform scales work with SVG-as-image.
+== nonuniform-scale-2d.html?0.5&1.0  nonuniform-scale-ref.html?50&100
+== nonuniform-scale-2d.html?1.0&0.5  nonuniform-scale-ref.html?100&50
+== nonuniform-scale-3d.html?0.5&1.0&0.5  nonuniform-scale-ref.html?50&100
+== nonuniform-scale-3d.html?1.0&0.5&0.5  nonuniform-scale-ref.html?100&50
+
+# Sanity checks that nonuniform scales don't devolve to uniform scales.
+!= nonuniform-scale-2d.html?0.3&1.0  nonuniform-scale-2d.html?0.3&0.3
+!= nonuniform-scale-2d.html?0.3&1.0  nonuniform-scale-2d.html?1.0&1.0
+!= nonuniform-scale-2d.html?1.0&0.3  nonuniform-scale-2d.html?0.3&0.3
+!= nonuniform-scale-2d.html?1.0&0.3  nonuniform-scale-2d.html?1.0&1.0
+!= nonuniform-scale-3d.html?0.3&1.0&0.3  nonuniform-scale-3d.html?0.3&0.3&0.3
+!= nonuniform-scale-3d.html?0.3&1.0&0.3  nonuniform-scale-3d.html?1.0&1.0&1.0
+!= nonuniform-scale-3d.html?1.0&0.3&0.3  nonuniform-scale-3d.html?0.3&0.3&0.3
+!= nonuniform-scale-3d.html?1.0&0.3&0.3  nonuniform-scale-3d.html?1.0&1.0&1.0
+
+# Test for preserveAspectRatio with no-longer-supported "defer" keyword
+== defer-unsupported-1.svg  defer-unsupported-1-ref.svg
diff --git a/layout/reftests/svg/as-image/squaredCircle-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-100x100.svg
new file mode 100644
index 0000000000..892cc0e8c6
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-100x100.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="100"
+     shape-rendering="crispEdges">
+  <rect x="2" y="2" height="96" width="96"
+        stroke-width="4" stroke="black" fill="yellow"/>
+  <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-100x50.svg b/layout/reftests/svg/as-image/squaredCircle-100x50.svg
new file mode 100644
index 0000000000..57b5169581
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-100x50.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100" height="50"
+     shape-rendering="crispEdges">
+  <rect x="2" y="2" height="96" width="96"
+        stroke-width="4" stroke="black" fill="yellow"/>
+  <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-transparent.svg b/layout/reftests/svg/as-image/squaredCircle-transparent.svg
new file mode 100644
index 0000000000..32bd67b634
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-transparent.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" >
+  <rect x="0" y="0" height="100" width="100" fill="orange"/>
+  <g style="opacity:.75">
+      <rect x="2" y="2" height="96" width="96"
+            stroke-width="4" stroke="black" fill="yellow"/>
+      <circle cx="50" cy="50" r="46" style="fill: blue"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg
new file mode 100644
index 0000000000..4912c656d0
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"
+     height="100" width="100" >
+  <rect x="2" y="2" height="96" width="96"
+        stroke-width="4" stroke="black" fill="yellow"/>
+  <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg
new file mode 100644
index 0000000000..c0665d15d6
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect x="2" y="2" height="96" width="96"
+        stroke-width="4" stroke="black" fill="yellow"/>
+  <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html
new file mode 100644
index 0000000000..bb11b225b6
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=809181
+-->
+<html>
+  <head></head>
+  <body>
+    <iframe src="svg-border-image-repaint-iframe.html"></iframe>
+  </body>
+</html>
+
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html
new file mode 100644
index 0000000000..2f33345873
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=809181
+-->
+<html class="reftest-wait">
+  <head>
+    <script>
+      document.addEventListener('MozReftestInvalidate', function() {
+        document.getElementById('test').style.opacity = '1.0';
+        document.documentElement.removeAttribute('class');
+      });
+    </script>
+  </head>
+  <body>
+    <iframe id="test" src="svg-border-image-repaint-iframe.html" style="opacity: 0.5"></iframe>
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg
new file mode 100644
index 0000000000..ccc7824465
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg viewBox="0 0 40 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#000000" d=" M 0.00 0.00 L 20.00 0.00 C 20.00 6.67 20.00 13.33 20.00 20.00 C 13.33 20.00 6.67 20.00 0.00 20.00 L 0.00 0.00 Z" />
+<path fill="#ff0000" d=" M 20.00 0.00 L 40.00 0.00 C 40.00 6.67 40.00 13.33 40.00 20.00 C 33.33 20.00 26.67 20.00 20.00 20.00 C 20.00 13.33 20.00 6.67 20.00 0.00 Z" />
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html
new file mode 100644
index 0000000000..f0281228ed
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=809181
+-->
+<html>
+  <head>
+    <style>
+      div {
+        background-color: green;
+        border-image: url("svg-border-image-repaint-helper.svg") 20 repeat;
+        border-image-width: 20px 20px 20px 20px;
+        width: 200px;
+        height: 200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-datauri-1.html b/layout/reftests/svg/as-image/svg-image-datauri-1.html
new file mode 100644
index 0000000000..3d7d171b55
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-datauri-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+  <img src="svg-image-datauri.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-datauri.svg b/layout/reftests/svg/as-image/svg-image-datauri.svg
new file mode 100644
index 0000000000..114a772325
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-datauri.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <!-- This blue rect should always be covered up by the <image>: -->
+  <circle cx="50" cy="50" r="50" fill="blue"/>
+  <image width="100" height="100"
+         xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-external-1.html b/layout/reftests/svg/as-image/svg-image-external-1.html
new file mode 100644
index 0000000000..3a13e55164
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-external-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+  <img src="svg-image-external.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-external.svg b/layout/reftests/svg/as-image/svg-image-external.svg
new file mode 100644
index 0000000000..721d4fe13c
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-external.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <!-- This blue rect should be covered up by the <image> when this SVG is
+       loaded as an image by a local document, but not when the document is
+       served over HTTP: -->
+  <rect width="100" height="100" fill="blue"/>
+  <image width="100" height="100"
+         xlink:href="lime100x100.png"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg
new file mode 100644
index 0000000000..b884f4e5bb
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <circle cx="10" cy="10" r="10" fill="blue"/>
+  <circle cx="30" cy="30" r="10" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1a.svg b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg
new file mode 100644
index 0000000000..2587877c6a
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg
@@ -0,0 +1,13 @@
+<!-- This SVG file uses itself as an image.  Currently, we don't paint
+     recursively-referenced images beyond the first level.  When this testcase
+     is viewed directly, it gets treated as a document (not an image), so its
+     <image> element is painted.  However, the <image>'s own *internal* <image>
+     element does *not* get painted.  So we end up painting two blue circles:
+     one for the <circle> and one for the <image>'s <circle> (and no more). -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <circle cx="10" cy="10" r="10" fill="blue"/>
+  <image x="20" y="20" width="100" height="100"
+         xlink:href="svg-image-recursive-1a.svg"/> <!-- my own filename -->
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1b.svg b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg
new file mode 100644
index 0000000000..3e5c9befe9
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg
@@ -0,0 +1,15 @@
+<!-- This SVG file uses itself as an image.  Currently, we don't paint
+     recursively-referenced images beyond the first level.  When this testcase
+     is viewed directly, it gets treated as a document (not an image), so its
+     <image> element is painted.  However, the <image>'s own *internal* <image>
+     element does *not* get painted.  So we end up painting two blue circles:
+     one for the <circle> and one for the <image>'s <circle> (and no more). -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <circle cx="10" cy="10" r="10" fill="blue"/>
+  <image x="20" y="20" width="100" height="100"
+         xlink:href="#foo"/>
+  <!-- When used as a URL, #foo evaluates to ${my_url}#foo, which (when treated
+       as an image URL) just turns into ${my_url}. -->
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg
new file mode 100644
index 0000000000..e548c53f47
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <circle cx="10" cy="10" r="10" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2a.svg b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg
new file mode 100644
index 0000000000..651c29e85e
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg
@@ -0,0 +1,10 @@
+<!-- The SVG file referenced in our <image> tag uses itself as an <image>.
+     Currently, we don't paint recursively-referenced images beyond the first
+     level.  So, the <image> element inside our helper document doesn't get
+     painted, and we end up only showing one blue circle. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <image width="100" height="100"
+         xlink:href="svg-image-recursive-1a.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2b.html b/layout/reftests/svg/as-image/svg-image-recursive-2b.html
new file mode 100644
index 0000000000..2e0708c1d9
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-2b.html
@@ -0,0 +1,9 @@
+<!-- The SVG file referenced in our <img> tag uses itself as an <image>.
+     Currently, we don't paint recursively-referenced images beyond the first
+     level.  So, the <image> element inside our helper document doesn't get
+     painted, and we end up only showing one blue circle. -->
+<html>
+<body style="margin: 0">
+  <img src="svg-image-recursive-1a.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-simple-1.svg b/layout/reftests/svg/as-image/svg-image-simple-1.svg
new file mode 100644
index 0000000000..ad657ce2ab
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-simple-1.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <rect  width="100%" height="100%" fill="red"/>
+  <image width="100%" height="100%" xlink:href="lime100x100.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-simple-2.svg b/layout/reftests/svg/as-image/svg-image-simple-2.svg
new file mode 100644
index 0000000000..34cc2277d5
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-simple-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <rect  width="100%" height="100%" fill="red"/>
+  <image width="100%" height="100%"
+         xlink:href="lime100x100-noSVGDimensions.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-simple-3.svg b/layout/reftests/svg/as-image/svg-image-simple-3.svg
new file mode 100644
index 0000000000..31d064a0a8
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-simple-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <rect  width="100%" height="100%" fill="red"/>
+  <image width="100%" height="100%"
+         xlink:href="limeInRed-noSVGDimensions-viewBox.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg
new file mode 100644
index 0000000000..9a185877a6
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <circle cx="100" cy="100" r="100" fill="blue"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg
new file mode 100644
index 0000000000..83f49b787f
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <circle cx="50" cy="50" r="50" fill="blue"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg
new file mode 100644
index 0000000000..c93d68fc30
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-2.svg"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg
new file mode 100644
index 0000000000..449c61862e
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-1.svg"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-util.css b/layout/reftests/svg/as-image/svg-image-util.css
new file mode 100644
index 0000000000..3d5a9338f6
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-util.css
@@ -0,0 +1,3 @@
+body   { margin: 0px;        line-height: 10px;   }
+img    { background: purple; vertical-align: top; }
+embed  { background: purple; vertical-align: top; }
diff --git a/layout/reftests/svg/as-image/svg-image-util.js b/layout/reftests/svg/as-image/svg-image-util.js
new file mode 100644
index 0000000000..ea84259238
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-util.js
@@ -0,0 +1,173 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Standard values to use for <img>/<embed> height & width, if requested.
+var HOST_NODE_HEIGHT = "20";
+var HOST_NODE_WIDTH =  "30";
+
+// All the possible values of "align"
+const ALIGN_VALS = ["none",
+                    "xMinYMin", "xMinYMid", "xMinYMax",
+                    "xMidYMin", "xMidYMid", "xMidYMax",
+                    "xMaxYMin", "xMaxYMid", "xMaxYMax"];
+
+// All the possible values of "meetOrSlice"
+const MEETORSLICE_VALS = [ "meet", "slice" ];
+
+/**
+ * Generates full data URI for an SVG document, with the given parameters
+ * on the SVG element.
+ *
+ * @param aViewboxArr         An array of four numbers, representing the
+ *                            viewBox attribute, or null for no viewBox.
+ * @param aWidth              The width attribute, or null for no width.
+ * @param aHeight             The height attribute, or null for no height.
+ * @param aAlign              The 'align' component of the
+ *                            preserveAspectRatio attribute, or null for none.
+ * @param aMeetOrSlice        The 'meetOrSlice' component of the
+ *                            preserveAspectRatio attribute, or null for
+ *                            none. (If non-null, implies non-null value for
+ *                            aAlign.)
+ * @param aViewParams         Parameters to use for the view element.
+ * @param aFragmentIdentifier The SVG fragment identifier.
+ */
+function generateSVGDataURI(aViewboxArr, aWidth, aHeight,
+                            aAlign, aMeetOrSlice,
+                            aViewParams, aFragmentIdentifier) {
+  // prefix
+  var datauri = "data:image/svg+xml,"
+  // Begin the SVG tag
+  datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22crispEdges%22";
+
+  // Append the custom chunk from our params
+  // If we're working with views, the align customisation is applied there instead
+  datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+                                       aViewParams ? null : aAlign,
+                                       aMeetOrSlice);
+
+  // Add 'font-size' just in case the client wants to use ems
+  datauri += "%20font-size%3D%22" + "10px" + "%22";
+
+  // Put closing right bracket on SVG tag
+  datauri += "%3E";
+
+  if (aViewParams) {
+    // Give the view the id of the fragment identifier
+    datauri += "%3Cview%20id%3D%22" + aFragmentIdentifier + "%22";
+
+    // Append the custom chunk from our view params
+    datauri += generateSVGAttrsForParams(aViewParams.viewBox, null, null,
+                                         aAlign, aViewParams.meetOrSlice);
+
+    datauri += "%2F%3E";
+  }
+
+  // Add the rest of the SVG document
+  datauri += "%3Crect%20x%3D%221%22%20y%3D%221%22%20height%3D%2218%22%20width%3D%2218%22%20stroke-width%3D%222%22%20stroke%3D%22black%22%20fill%3D%22yellow%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20style%3D%22fill%3A%20blue%22%2F%3E%3C%2Fsvg%3E";
+
+  return datauri;
+}
+
+// Generates just the chunk of a data URI that's relevant to
+// the given params.
+function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+                                   aAlign, aMeetOrSlice) {
+  var str = "";
+  if (aViewboxArr) {
+    str += "%20viewBox%3D%22";
+    for (var i in aViewboxArr) {
+        str += aViewboxArr[i];
+        if (i != aViewboxArr.length - 1) {
+          str += "%20";
+        }
+    }
+    str += "%22";
+  }
+  if (aWidth) {
+    str += "%20width%3D%22"  + aWidth  + "%22";
+  }
+  if (aHeight) {
+    str += "%20height%3D%22" + aHeight + "%22";
+  }
+  if (aAlign) {
+    str += "%20preserveAspectRatio%3D%22" + aAlign;
+    if (aMeetOrSlice) {
+      str += "%20" + aMeetOrSlice;
+    }
+    str += "%22";
+  }
+
+  return str;
+}
+
+// Returns a newly-generated element with the given tagname, the given URI
+// for its |src| attribute, and the given width & height values.
+function generateHostNode(aHostNodeTagName, aUri,
+                          aHostNodeWidth, aHostNodeHeight) {
+  var elem = document.createElement(aHostNodeTagName);
+  elem.setAttribute("src", aUri);
+
+  if (aHostNodeWidth) {
+    elem.setAttribute("width", aHostNodeWidth);
+  }
+  if (aHostNodeHeight) {
+    elem.setAttribute("height", aHostNodeHeight);
+  }
+
+  return elem;
+}
+
+// THIS IS THE CHIEF HELPER FUNCTION TO BE CALLED BY CLIENTS
+function appendSVGArrayWithParams(aSVGParams, aHostNodeTagName) {
+  // These are width & height vals that will be used for the *host node*.
+  // (i.e. the <img> or <embed> node -- not the <svg> node)
+  var hostNodeWidthVals  = [ null, HOST_NODE_WIDTH  ];
+  var hostNodeHeightVals = [ null, HOST_NODE_HEIGHT ];
+
+  for (var i = 0; i < hostNodeWidthVals.length; i++) {
+    var hostNodeWidth = hostNodeWidthVals[i];
+    for (var j = 0; j < hostNodeHeightVals.length; j++) {
+      var hostNodeHeight = hostNodeHeightVals[j];
+      appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
+                                  hostNodeWidth, hostNodeHeight);
+    }
+  }
+}
+
+// Helper function for above, for a fixed [host-node-width][host-node-height]
+function appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
+                                     aHostNodeWidth, aHostNodeHeight) {
+  var rootNode = document.getElementsByTagName("body")[0];
+  for (var k = 0; k < ALIGN_VALS.length; k++) {
+    var alignVal = ALIGN_VALS[k];
+    if (!aSVGParams.meetOrSlice) {
+      alignVal = "none";
+    }
+
+    // Generate the Data URI
+    var uri = generateSVGDataURI(aSVGParams.viewBox,
+                                 aSVGParams.width, aSVGParams.height,
+                                 alignVal,
+                                 aSVGParams.meetOrSlice,
+                                 aSVGParams.view,
+                                 aSVGParams.fragmentIdentifier);
+
+    if (aSVGParams.fragmentIdentifier) {
+      uri += "#" + aSVGParams.fragmentIdentifier;
+    }
+
+    // Generate & append the host node element
+    var hostNode = generateHostNode(aHostNodeTagName, uri,
+                                    aHostNodeWidth, aHostNodeHeight);
+    rootNode.appendChild(hostNode);
+
+    // Cosmetic: Add a newline when we get halfway through the ALIGN_VALS
+    // and then again when we reach the end
+    if (k + 1 == ALIGN_VALS.length / 2 ||
+        k + 1 == ALIGN_VALS.length) {
+      rootNode.appendChild(document.createElement("br"));
+    }
+  }
+}
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1-ref.html b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html
new file mode 100644
index 0000000000..7539a7ec98
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <title>Reference for bug 641731</title>
+    <style>
+      .imgRef, .embedRef {
+        height: 100px;
+        width: 100px;
+        border: 1px solid black;
+        display: inline-block;
+      }
+      .imgRef { background: lime }
+      .embedRef { background: purple }
+    </style>
+  </head>
+  <body>
+    <div class="imgRef"></div>
+    <div class="embedRef"></div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg
new file mode 100644
index 0000000000..9843e85f59
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg
@@ -0,0 +1,34 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     height="100" width="100">
+  <style>
+  <![CDATA[
+      a:link {/* Note: an a:link block was needed to trigger bug 641731. */ }
+      a:link    > rect  { fill: lime; }
+      a:visited > rect  { fill: purple;  }
+  ]]>
+  </style>
+
+  <!-- Note: the <a> element below links to a visited page, so it'll
+       normally be treated as visited. However, in an image context, we want to
+       ignore visitedness. -->
+  <a xlink:href="visited-page.html" id="foo">
+    <rect x="0" y="0"  width="100" height="100" fill="orange"/>
+  </a>
+
+  <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+       imagelib's SurfaceCache optimization.  Specifically, we want to bypass
+       the SurfaceCache so that we can ensure that repaints of this file (as an
+       image) will *actually repaint the SVG content*, rather than painting a
+       previously-rasterized snapshot (which may've been rasterized before we
+       had any chance to consider :visited styles). -->
+  <rect x="0" y="0"  width="100" height="100" fill="teal">
+    <set attributeName="fill" to="transparent"
+         begin="0s" duration="indefinite"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a.html b/layout/reftests/svg/as-image/svg-image-visited-1a.html
new file mode 100644
index 0000000000..53aff74c9b
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <title>Test for bug 641731</title>
+    <style>
+      img, embed {
+        height: 100px;
+        width: 100px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- This shouldn't show visited link coloring: -->
+    <img src="svg-image-visited-1a-helper.svg">
+    <!-- This should show visited link coloring: -->
+    <embed src="svg-image-visited-1a-helper.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg
new file mode 100644
index 0000000000..2a47f02d58
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     height="100" width="100">
+  <style>
+  <![CDATA[
+      a:link    > rect  { fill: lime; }
+      a:visited > rect  { fill: purple;  }
+  ]]>
+  </style>
+
+  <!-- Note: the <a> element below links to a visited page, so it'll
+       normally be treated as visited. However, in an image context, we want to
+       ignore visitedness. -->
+  <a xlink:href="visited-page.html" id="foo">
+    <rect x="0" y="0"  width="100" height="100" fill="orange"/>
+  </a>
+
+  <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+       imagelib's SurfaceCache optimization.  Specifically, we want to bypass
+       the SurfaceCache so that we can ensure that repaints of this file (as an
+       image) will *actually repaint the SVG content*, rather than painting a
+       previously-rasterized snapshot (which may've been rasterized before we
+       had any chance to consider :visited styles). -->
+  <rect x="0" y="0"  width="100" height="100" fill="teal">
+    <set attributeName="fill" to="transparent"
+         begin="0s" duration="indefinite"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b.html b/layout/reftests/svg/as-image/svg-image-visited-1b.html
new file mode 100644
index 0000000000..05227cc85d
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <title>Test for bug 641731</title>
+    <style>
+      img, embed {
+        height: 100px;
+        width: 100px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- This shouldn't show visited link coloring: -->
+    <img src="svg-image-visited-1b-helper.svg">
+    <!-- This should show visited link coloring: -->
+    <embed src="svg-image-visited-1b-helper.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg
new file mode 100644
index 0000000000..ca688a2b55
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     height="100" width="100">
+  <style>
+  <![CDATA[
+      a:link {/* Note: an a:link block was needed to trigger bug 641731. */ }
+      a:link    > rect  { fill: lime; }
+      a:visited > rect  { fill: purple;  }
+  ]]>
+  </style>
+
+  <!-- Note: our mochitest runner visits "visited-page.html" early on.
+       Nonetheless, as an image, we should ignore visitedness. -->
+  <a xlink:href="visited-page.html" id="foo">
+    <rect x="0" y="0"  width="100" height="100" fill="orange"/>
+  </a>
+
+  <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+       imagelib's SurfaceCache optimization.  Specifically, we want to bypass
+       the SurfaceCache so that we can ensure that repaints of this file (as an
+       image) will *actually repaint the SVG content*, rather than painting a
+       previously-rasterized snapshot (which may've been rasterized before we
+       had any chance to consider :visited styles). -->
+  <rect x="0" y="0"  width="100" height="100" fill="teal">
+    <set attributeName="fill" to="transparent"
+         begin="0s" duration="indefinite"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c.html b/layout/reftests/svg/as-image/svg-image-visited-1c.html
new file mode 100644
index 0000000000..f016d5cebe
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <title>Test for bug 641731</title>
+    <style>
+      img, embed {
+        height: 100px;
+        width: 100px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- This shouldn't show visited link coloring: -->
+    <img src="svg-image-visited-1c-helper.svg">
+    <!-- This should show visited link coloring: -->
+    <embed src="svg-image-visited-1c-helper.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg
new file mode 100644
index 0000000000..cc62c3a27c
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg
@@ -0,0 +1,32 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     height="100" width="100">
+  <style>
+  <![CDATA[
+      a:link    > rect  { fill: lime; }
+      a:visited > rect  { fill: purple;  }
+  ]]>
+  </style>
+
+  <!-- Note: our mochitest runner visits "visited-page.html" early on.
+       Nonetheless, as an image, we should ignore visitedness. -->
+  <a xlink:href="visited-page.html" id="foo">
+    <rect x="0" y="0"  width="100" height="100" fill="orange"/>
+  </a>
+
+  <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+       imagelib's SurfaceCache optimization.  Specifically, we want to bypass
+       the SurfaceCache so that we can ensure that repaints of this file (as an
+       image) will *actually repaint the SVG content*, rather than painting a
+       previously-rasterized snapshot (which may've been rasterized before we
+       had any chance to consider :visited styles). -->
+  <rect x="0" y="0"  width="100" height="100" fill="teal">
+    <set attributeName="fill" to="transparent"
+         begin="0s" duration="indefinite"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d.html b/layout/reftests/svg/as-image/svg-image-visited-1d.html
new file mode 100644
index 0000000000..39005b39d3
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1d.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <title>Test for bug 641731</title>
+    <style>
+      img, embed {
+        height: 100px;
+        width: 100px;
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- This shouldn't show visited link coloring: -->
+    <img src="svg-image-visited-1d-helper.svg">
+    <!-- This should show visited link coloring: -->
+    <embed src="svg-image-visited-1d-helper.svg">
+  </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html
new file mode 100644
index 0000000000..9b99258f00
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+  <img src="svg-stylesheet-datauri.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg
new file mode 100644
index 0000000000..003e150179
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg
@@ -0,0 +1,8 @@
+<?xml-stylesheet href="data:text/css,rect%20%7B%20fill%3A%20lime%20%7D%0A"
+                 type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <!-- This blue rect should always be styled as lime by the stylesheet: -->
+  <rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external-1.html b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html
new file mode 100644
index 0000000000..c6815579b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+  <img src="svg-stylesheet-external.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.css b/layout/reftests/svg/as-image/svg-stylesheet-external.css
new file mode 100644
index 0000000000..70025dd20a
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-external.css
@@ -0,0 +1 @@
+rect { fill: lime }
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.svg b/layout/reftests/svg/as-image/svg-stylesheet-external.svg
new file mode 100644
index 0000000000..2b288e4268
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-external.svg
@@ -0,0 +1,9 @@
+<?xml-stylesheet href="svg-stylesheet-external.css" type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="100" height="100">
+  <!-- This blue rect should be styled as lime by the stylesheet when this SVG
+       is loaded as an image by a local document, but not when the document is
+       served over HTTP: -->
+  <rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html
new file mode 100644
index 0000000000..f0727820c9
--- /dev/null
+++ b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; border: 1px solid black"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/white-rect-no-viewbox.svg b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg
new file mode 100644
index 0000000000..76a7efd3dc
--- /dev/null
+++ b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+	   
+  <rect width="6" height="30" style="fill:white;" />
+</svg>
diff --git a/layout/reftests/svg/as-image/white-rect-with-viewbox.svg b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg
new file mode 100644
index 0000000000..6bb59d19a4
--- /dev/null
+++ b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="6px"
+     height="30px"
+     viewBox="0 0 6 30">
+	   
+  <rect width="6" height="30" style="fill:white;" />
+</svg>
diff --git a/layout/reftests/svg/as-image/zoom/circle-large.svg b/layout/reftests/svg/as-image/zoom/circle-large.svg
new file mode 100644
index 0000000000..a097f3c666
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/circle-large.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80">
+  <circle cx="40" cy="40" r="40" style="fill: green"/>
+</svg> 
diff --git a/layout/reftests/svg/as-image/zoom/circle-small.svg b/layout/reftests/svg/as-image/zoom/circle-small.svg
new file mode 100644
index 0000000000..b0cba24a65
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/circle-small.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
+  <circle cx="10" cy="10" r="10" style="fill: green"/>
+</svg> 
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html
new file mode 100644
index 0000000000..b4eadba92e
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <style>
+    body {
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+    div {
+      background: url('circle-small.svg');
+      background-size: 40px 40px;
+      background-repeat: repeat;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+      width:  80px;
+      height: 80px;
+      transform: scale(2.0);
+      transform-origin: 0 0;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html
new file mode 100644
index 0000000000..db0e6c06b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <style>
+    body {
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+    div {
+      background: url('circle-large.svg');
+      background-size: 40px 40px;
+      background-repeat: repeat;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+      width:  80px;
+      height: 80px;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html
new file mode 100644
index 0000000000..81e6011e62
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <style>
+    body {
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+    div {
+      background: url('circle-large.svg');
+      background-size: 80px 80px;
+      background-repeat: repeat;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+      width:  160px;
+      height: 160px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html
new file mode 100644
index 0000000000..de39990b95
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-zoom="2.0">
+<head>
+  <style>
+    body {
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+    div {
+      background: url('circle-small.svg');
+      background-size: 40px 40px;
+      background-repeat: repeat;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+      width:  80px;
+      height: 80px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html
new file mode 100644
index 0000000000..48f2d05ff7
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <style>
+    body {
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+    div {
+      background: url('circle-small.svg');
+      background-size: 20px 20px;
+      background-repeat: repeat;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+      width:  40px;
+      height: 40px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html
new file mode 100644
index 0000000000..75cd1d61af
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-zoom="0.5">
+<head>
+  <style>
+    body {
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+    div {
+      background: url('circle-large.svg');
+      background-size: 40px 40px;
+      background-repeat: repeat;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+      width:  80px;
+      height: 80px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html
new file mode 100644
index 0000000000..cc31a933ed
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="1.5">
+<body>
+  <img src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html
new file mode 100644
index 0000000000..5133acb8b4
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="0.5">
+<body>
+  <img src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/reftest.list b/layout/reftests/svg/as-image/zoom/reftest.list
new file mode 100644
index 0000000000..13df22ead6
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/reftest.list
@@ -0,0 +1,11 @@
+# Tests related to SVG being used as an image, with zooming
+
+# Simple <img> tests
+fuzzy(0-1,0-408) == img-zoomIn-1.html squaredCircle-150x150-ref.html
+fuzzy(0-1,0-74) == img-zoomOut-1.html squaredCircle-50x50-ref.html
+
+# Ensure that scaled SVG images aren't fuzzy when tiled.
+fails-if(useDrawSnapshot) == img-fuzzy-zoomOut-1.html           img-fuzzy-zoomOut-1-ref.html
+fails-if(useDrawSnapshot) == img-fuzzy-zoomIn-1.html            img-fuzzy-zoomIn-1-ref.html
+== img-fuzzy-transform-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html
+== img-fuzzy-transform-zoomIn-1.html  img-fuzzy-zoomIn-1-ref.html
diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html b/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html
new file mode 100644
index 0000000000..7f3b524e8e
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="1.5">
+<body>
+  <embed src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html b/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html
new file mode 100644
index 0000000000..41686f5bc1
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="0.5">
+<body>
+  <embed src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle.svg b/layout/reftests/svg/as-image/zoom/squaredCircle.svg
new file mode 100644
index 0000000000..266c9e776c
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/squaredCircle.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100px" height="100px">
+  <rect x="2" y="2" height="96" width="96"
+        stroke-width="4" stroke="black" fill="yellow"/>
+  <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/svg/as-image
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip