Add m-esr52 at 52.6.0

65 files changed, 948 insertions, 0 deletions

diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg
new file mode 100644
index 000000000..9168e8635
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg
@@ -0,0 +1,12 @@
+<!-- Helper SVG file used by some reftests -->
+<!-- This file has an animated preserveAspectRatio value on the root node, so
+     any uses of this file via <image preserveAspectRatio="defer..."> should
+     end up using our *animated* preserveAspectRatio value. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
+     viewBox="0 0 10 10" preserveAspectRatio="xMaxYMax">
+  <set attributeName="preserveAspectRatio" to="none"/>
+
+  <rect x="0"  y="0"  width="10" height="10" fill="blue"/>
+  <rect x="1" y="1" width="8"  height="8"  fill="lightblue"/>
+  <rect x="1" y="1" width="8"  height="4"  fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox.svg b/layout/reftests/svg/image/blueRect10x10-viewBox.svg
new file mode 100644
index 000000000..d5bb444a9
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10-viewBox.svg
@@ -0,0 +1,7 @@
+<!-- Helper SVG file used by some reftests -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
+     viewBox="0 0 10 10">
+  <rect x="0"  y="0"  width="10" height="10" fill="blue"/>
+  <rect x="1" y="1" width="8"  height="8"  fill="lightblue"/>
+  <rect x="1" y="1" width="8"  height="4"  fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10.png b/layout/reftests/svg/image/blueRect10x10.png
new file mode 100644
index 000000000..722e97c1e
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10.png
diff --git a/layout/reftests/svg/image/blueRect10x10.svg b/layout/reftests/svg/image/blueRect10x10.svg
new file mode 100644
index 000000000..65e401446
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10.svg
@@ -0,0 +1,6 @@
+<!-- Helper SVG file used by some reftests -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root">
+  <rect x="0"  y="0"  width="10" height="10" fill="blue"/>
+  <rect x="1" y="1" width="8"  height="8"  fill="lightblue"/>
+  <rect x="1" y="1" width="8"  height="4"  fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-fill-01.svg b/layout/reftests/svg/image/image-fill-01.svg
new file mode 100644
index 000000000..832be6c04
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-01.svg
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <title>Testcase to ensure that fill is ignored for images</title>
+
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect width="64" height="64" fill="red"/>
+  <image fill="none" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII="/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-filter-01-ref.svg b/layout/reftests/svg/image/image-filter-01-ref.svg
new file mode 100644
index 000000000..66ad638eb
--- /dev/null
+++ b/layout/reftests/svg/image/image-filter-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="translate(2, 2)">
+    <image x="0"  y="0"  width="10" height="10" xlink:href="blueRect10x10.png"/>
+    <image x="20" y="0"  width="10" height="10" xlink:href="blueRect10x10.png"/>
+    <image x="0"  y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+    <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-filter-01.svg b/layout/reftests/svg/image/image-filter-01.svg
new file mode 100644
index 000000000..6ec5a576d
--- /dev/null
+++ b/layout/reftests/svg/image/image-filter-01.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- This test confirms that images with filters get drawn.
+       (This test uses a no-op filter, for simplicity).
+    -->
+  <style>
+    image { filter: url(#noop); }
+  </style>
+  <defs>
+    <filter id="noop" x="0%" y="0%" width="100%" height="100%">
+      <feConvolveMatrix order="1" kernelMatrix="1"/>
+    </filter>
+  </defs>
+
+  <g transform="translate(2, 2)">
+    <image x="0"  y="0"  width="10" height="10" xlink:href="blueRect10x10.png"/>
+    <image x="20" y="0"  width="10" height="10" xlink:href="blueRect10x10.png"/>
+    <image x="0"  y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+    <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-load-01.svg b/layout/reftests/svg/image/image-load-01.svg
new file mode 100644
index 000000000..1b8d4264f
--- /dev/null
+++ b/layout/reftests/svg/image/image-load-01.svg
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <title>Testcase to ensure that images load when they don't have frames</title>
+
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect width="64" height="64" fill="red"/>
+
+  <script>
+    var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    img.setAttribute("width", "64");
+    img.setAttribute("height", "64");
+    document.querySelector("svg").appendChild(img);
+    img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII=");
+  </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-01-ref.svg b/layout/reftests/svg/image/image-opacity-01-ref.svg
new file mode 100644
index 000000000..63a3f6054
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       style="opacity: 0.3"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-01.svg b/layout/reftests/svg/image/image-opacity-01.svg
new file mode 100644
index 000000000..9c589d4bf
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "opacity" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         style="opacity: 0.3"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-02-ref.svg b/layout/reftests/svg/image/image-opacity-02-ref.svg
new file mode 100644
index 000000000..548d1d54f
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-02-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g style="opacity: 0.3">
+    <use xlink:href="blueRect10x10.svg#root"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-02.svg b/layout/reftests/svg/image/image-opacity-02.svg
new file mode 100644
index 000000000..5fd8598d0
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-02.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure "opacity" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g style="opacity: 0.3">
+    <image xlink:href="blueRect10x10.png" width="10" height="10"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg
new file mode 100644
index 000000000..d702a798c
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg
@@ -0,0 +1,13 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+     <image> tag, when the width:height ratio is less than the image's
+     nativeWidth:nativeHeight  -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="image-rendering: -moz-crisp-edges">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    var grid = generateImageGrid("blueRect10x10.png", 20, 40);
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg
new file mode 100644
index 000000000..a0405b3ea
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    var grid = generateSymbolGrid("blueRect10x10.svg#root", 20, 40);
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg
new file mode 100644
index 000000000..802267165
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg
@@ -0,0 +1,12 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+     <image> tag, when the width:height ratio is less than the image's
+     nativeWidth:nativeHeight  -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    var grid = generateImageGrid("blueRect10x10-viewBox.svg", 20, 40);
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg
new file mode 100644
index 000000000..14b9ff8fa
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg
@@ -0,0 +1,13 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+     <image> tag, when the width:height ratio is greater than the image's
+     nativeWidth:nativeHeight  -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     style="image-rendering: -moz-crisp-edges">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    var grid = generateImageGrid("blueRect10x10.png", 40, 20);
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg
new file mode 100644
index 000000000..5ebaa19b0
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20);
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg
new file mode 100644
index 000000000..cbe5bc0bc
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg
@@ -0,0 +1,12 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+     <image> tag, when the width:height ratio is greater than the image's
+     nativeWidth:nativeHeight  -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20);
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg
new file mode 100644
index 000000000..101ad403b
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    // My corresponding testcase uses an image with preserveAspectRatio
+    // set to "none" via SMIL animation.  So the testcase's final bonus
+    // "defer" grid-entry will end up rendering with that "none" value.
+    var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
+                                  "none");
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg
new file mode 100644
index 000000000..7bcd0d35b
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    // This image has a preserveAspectRatio attribute (animated into
+    // existence), so the bonus image element will use that value
+    // because of the "defer" in its preserveAspectRatio.
+    var grid = generateImageGrid("blueRect10x10-viewBox-animPAR.svg", 40, 20,
+                                 "defer xMinYMin");
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg
new file mode 100644
index 000000000..66e8dcf29
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    // My corresponding testcase uses an image with no preserveAspectRatio on
+    // its root node.  So, the testcase's final bonus "defer" grid-entry will
+    // fall back on the preserveAspectRatio value that comes along with
+    // "defer" (which is "xMinYMin slice" in this case).
+    var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
+                                  "xMinYMin slice");
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg
new file mode 100644
index 000000000..58c8f2b30
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="util.js" type="text/javascript"/>
+  <script>
+    // This image has no preserveAspectRatio attribute, so in the bonus
+    // image element, we'll actually apply the value that comes along with
+    // "defer" ("xMinYMin slice").
+    var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20,
+                                 "defer xMinYMin slice");
+    grid.setAttribute("transform", "translate(10, 10)");
+    document.documentElement.appendChild(grid);
+  </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-05.svg b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg
new file mode 100644
index 000000000..11fadbcb8
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg
@@ -0,0 +1,41 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+
+  <title>Testing that dynamic changes to preserveAspectRatio cause a reflow</title>
+  <script>
+<![CDATA[
+
+function doTest() {
+  var i1 = document.getElementById("i1");
+  i1.preserveAspectRatio.baseVal.align =
+    SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
+  var i2 = document.getElementById("i2");
+  i2.preserveAspectRatio.baseVal.align =
+    SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE;
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+]]>
+  </script>
+
+   <rect width="100%" height="100%" fill="lime"/>
+
+   <!-- this image is a 1x1 red gif -->
+   <image id="i1" preserveAspectRatio="none" x="50" y="50" width="200" height="300"
+          style="image-rendering: optimizeSpeed;"
+          xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%FF%00%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"/>
+  <!-- exactly cover the image if it had preserveAspectRatio="xMidYMid" -->
+  <rect x="50" y="100" width="200" height="200" fill="lime"/>
+
+  <rect x="300" y="100" width="200" height="300" fill="red"/>
+  <!-- and this one is a 1x1 lime PNG -->
+  <!-- which would cover the red rect if it had preserveAspectRatio="none" -->
+  <image id="i2" x="300" y="100" width="200" height="300" preserveAspectRatio="xMidYMid" xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" />
+
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-01-ref.svg b/layout/reftests/svg/image/image-rotate-01-ref.svg
new file mode 100644
index 000000000..bcda45060
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       transform="rotate(90 50 50)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-01.svg b/layout/reftests/svg/image/image-rotate-01.svg
new file mode 100644
index 000000000..9a1600f9c
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "rotate" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         transform="rotate(90 50 50)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02-ref.svg b/layout/reftests/svg/image/image-rotate-02-ref.svg
new file mode 100644
index 000000000..e807ff2f4
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       transform="translate(60, 80) rotate(180 40 40)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02a.svg b/layout/reftests/svg/image/image-rotate-02a.svg
new file mode 100644
index 000000000..b04035037
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02a.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "rotate" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         transform="translate(60, 80) rotate(180 40 40)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02b.svg b/layout/reftests/svg/image/image-rotate-02b.svg
new file mode 100644
index 000000000..69bef2794
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02b.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure parent's "rotate" value is applied on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="translate(60, 80) rotate(180 40 40)">
+    <image xlink:href="blueRect10x10.png" width="10" height="10"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-01.svg b/layout/reftests/svg/image/image-scaling-01.svg
new file mode 100644
index 000000000..449101a4d
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-01.svg
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780
+
+     Test related to bug 421780; make sure that 1-pixel, single-colour images
+     are correctly scaled to the right size.
+
+     This test makes sure that images aren't sized too big; it takes a 100%
+     width lime rect, overlaid with a 183x183 width stretched red image,
+     overlaid with a 183x183 lime rect.
+
+     183 in particular is used because 183*183 > 2^16, and we can easily run
+     into double-scaling bugs that will overflow in pixman.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <title> Ensure images aren't scaled too big </title>
+
+  <rect width="100%" height="100%" fill="lime"/>
+  <image width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+  <rect width="183" height="183" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-02.svg b/layout/reftests/svg/image/image-scaling-02.svg
new file mode 100644
index 000000000..302e46c96
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-02.svg
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780
+
+     Test related to bug 421780; make sure that 1-pixel, single-colour images
+     are correctly scaled to the right size.
+
+     This test makes sure that images aren't sized too small; it takes a 100%
+     width lime rect, overlaid with a 183x183 width red rect, overlaid with a
+     183x183 stretched lime image.
+
+     183 in particular is used because 183*183 > 2^16, and we can easily run
+     into double-scaling bugs that will overflow in pixman.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <title> Ensure images aren't scaled too small </title>
+
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect width="183" height="183" fill="red"/>
+  <image style="image-rendering: -moz-crisp-edges" width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAABGdBTUEAALGPC%2FxhBQAAAAxJREFUGFdjYPjPAAACAgEA0dNGRAAAAABJRU5ErkJggg%3D%3D"/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-svg-inline-01.html b/layout/reftests/svg/image/image-svg-inline-01.html
new file mode 100644
index 000000000..8fe8aac39
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-01.html
@@ -0,0 +1,16 @@
+<html>
+  <!-- Test to make sure svg:image is painted at correct position when its
+       containing SVG is included inline in HTML at some non-(0,0) position. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 60px; margin-top: 80px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- 1x1 lime PNG, scaled to 100x100 -->
+        <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html
new file mode 100644
index 000000000..669241ab7
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin: 0">
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="15" height="30" fill="lime"/>
+    <rect x="15" y="0" width="15" height="30" fill="blue"/>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html
new file mode 100644
index 000000000..821147f9a
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="1.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage and it has a transformation
+       applied, as is often used for SVG sprites. -->
+<body style="margin: 0">
+  <svg xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink"
+       style="shape-rendering: crispEdges">
+    <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+    <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+    <g clip-path="url(#clip)">
+      <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html
new file mode 100644
index 000000000..0b68b7d88
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html
@@ -0,0 +1,15 @@
+<html reftest-zoom="1.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage and it has a transformation
+       applied, as is often used for SVG sprites. -->
+<body style="margin: 0; image-rendering: -moz-crisp-edges">
+  <svg xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink">
+    <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+    <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+    <g clip-path="url(#clip)">
+      <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html
new file mode 100644
index 000000000..1fe71d090
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin: 0">
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" width="5" height="10" fill="lime"/>
+    <rect x="5" y="0" width="5" height="10" fill="blue"/>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html
new file mode 100644
index 000000000..d1f7bc35a
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage and it has a transformation
+       applied, as is often used for SVG sprites. -->
+<body style="margin: 0">
+  <svg xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink"
+       style="shape-rendering: crispEdges">
+    <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+    <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+    <g clip-path="url(#clip)">
+      <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html
new file mode 100644
index 000000000..dcb118a7d
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html
@@ -0,0 +1,15 @@
+<html reftest-zoom="0.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage and it has a transformation
+       applied, as is often used for SVG sprites. -->
+<body style="margin: 0; image-rendering: -moz-crisp-edges">
+  <svg xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink">
+    <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+    <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+    <g clip-path="url(#clip)">
+      <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html
new file mode 100644
index 000000000..ef187a5a5
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="1.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink"
+           style="shape-rendering: crispEdges">
+        <!-- SVG with no intrinsic dimensions -->
+        <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html
new file mode 100644
index 000000000..419f3168c
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="1.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- 1x1 lime PNG, scaled to 100x100 -->
+        <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html
new file mode 100644
index 000000000..9d273c91e
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html
@@ -0,0 +1,18 @@
+<html reftest-zoom="1.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink"
+           style="shape-rendering: crispEdges">
+        <!-- SVG with an intrinsic size of 100px x 100px; percentage size on
+             image element. -->
+        <image xlink:href="lime100x100.svg" width="100%" height="100%"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html
new file mode 100644
index 000000000..921fa4ec2
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html
@@ -0,0 +1,18 @@
+<html reftest-zoom="1.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink"
+           style="shape-rendering: crispEdges">
+        <!-- SVG with an intrinsic size of 100px x 100px; explicit size on
+             image element. -->
+        <image xlink:href="lime100x100.svg" width="100px" height="100px"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html
new file mode 100644
index 000000000..6532c1576
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- SVG with no intrinsic dimensions -->
+        <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html
new file mode 100644
index 000000000..c45f01601
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- 1x1 lime PNG, scaled to 100x100 -->
+        <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html
new file mode 100644
index 000000000..5c88134c0
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="0.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- SVG with an intrinsic size of 100px x 100px; percentage size on
+             image element. -->
+        <image xlink:href="lime100x100.svg" width="100%" height="100%"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html
new file mode 100644
index 000000000..ad24ce81e
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="0.5">
+  <!-- Test to make sure svg:image is painted correctly when its containing SVG
+       is included inline in a zoomed webpage. -->
+  <body style="background: lime">
+    <!-- 100x100 red div -->
+    <div style="background: red;
+                margin-left: 30px; margin-top: 30px;
+                width: 100px; height: 100px;">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- SVG with an intrinsic size of 100px x 100px; explicit size on
+             image element. -->
+        <image xlink:href="lime100x100.svg" width="100px" height="100px"/>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/svg/image/image-translate-01-ref.svg b/layout/reftests/svg/image/image-translate-01-ref.svg
new file mode 100644
index 000000000..161aaa3f2
--- /dev/null
+++ b/layout/reftests/svg/image/image-translate-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       transform="translate(60, 80)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-translate-01.svg b/layout/reftests/svg/image/image-translate-01.svg
new file mode 100644
index 000000000..29311478b
--- /dev/null
+++ b/layout/reftests/svg/image/image-translate-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure transform value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         transform="translate(60, 80)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-x-01-ref.svg b/layout/reftests/svg/image/image-x-01-ref.svg
new file mode 100644
index 000000000..4c6967684
--- /dev/null
+++ b/layout/reftests/svg/image/image-x-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       x="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-x-01.svg b/layout/reftests/svg/image/image-x-01.svg
new file mode 100644
index 000000000..db3be2af3
--- /dev/null
+++ b/layout/reftests/svg/image/image-x-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "x" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         x="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-xy-01-ref.svg b/layout/reftests/svg/image/image-xy-01-ref.svg
new file mode 100644
index 000000000..2821f9324
--- /dev/null
+++ b/layout/reftests/svg/image/image-xy-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       x="123" y="234"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-xy-01.svg b/layout/reftests/svg/image/image-xy-01.svg
new file mode 100644
index 000000000..1afa32a60
--- /dev/null
+++ b/layout/reftests/svg/image/image-xy-01.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure "x" and "y" value are simultaneously applied correctly
+     on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         x="123" y="234"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-y-01-ref.svg b/layout/reftests/svg/image/image-y-01-ref.svg
new file mode 100644
index 000000000..9a608e8db
--- /dev/null
+++ b/layout/reftests/svg/image/image-y-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <use xlink:href="blueRect10x10.svg#root"
+       y="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-y-01.svg b/layout/reftests/svg/image/image-y-01.svg
new file mode 100644
index 000000000..2c8d04fd8
--- /dev/null
+++ b/layout/reftests/svg/image/image-y-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "y" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="blueRect10x10.png" width="10" height="10"
+         y="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-zoom-02-ref.svg b/layout/reftests/svg/image/image-zoom-02-ref.svg
new file mode 100644
index 000000000..fca1d5703
--- /dev/null
+++ b/layout/reftests/svg/image/image-zoom-02-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image width="15" height="15" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-zoom-02.svg b/layout/reftests/svg/image/image-zoom-02.svg
new file mode 100644
index 000000000..f426dfca2
--- /dev/null
+++ b/layout/reftests/svg/image/image-zoom-02.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     reftest-zoom="1.5" width="10" height="10">
+  <title>Testcase to ensure that full-page-zoom will zoom raster
+         images the right amount.</title>
+  <image width="10" height="10" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-01.svg b/layout/reftests/svg/image/imported-image-01.svg
new file mode 100644
index 000000000..b7ef5d5ac
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-01.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script>
+    <![CDATA[
+      var doc = new DOMParser().parseFromString('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="10" height="10" xlink:href="blueRect10x10.png"/></svg>', 'text/xml');
+      document.documentElement.appendChild(doc.documentElement.firstChild);
+    ]]>
+  </script>
+  
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-02.svg b/layout/reftests/svg/image/imported-image-02.svg
new file mode 100644
index 000000000..7e5102579
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-02.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script>
+    <![CDATA[
+      var doc = document.implementation.createDocument("", "", null);
+      var img = doc.createElementNS("http://www.w3.org/2000/svg", "image");
+      img.setAttribute("width", "10");
+      img.setAttribute("height", "10");
+      img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
+                         "blueRect10x10.png");
+      document.documentElement.appendChild(img);
+    ]]>
+  </script>
+  
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-ref.svg b/layout/reftests/svg/image/imported-image-ref.svg
new file mode 100644
index 000000000..4b0d1accc
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-ref.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image width="10" height="10" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/lime-no-dimensions.svg b/layout/reftests/svg/image/lime-no-dimensions.svg
new file mode 100644
index 000000000..1723cb66c
--- /dev/null
+++ b/layout/reftests/svg/image/lime-no-dimensions.svg
@@ -0,0 +1,7 @@
+<!--
+     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" style="shape-rendering: crispEdges">
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/image/lime100x100.svg b/layout/reftests/svg/image/lime100x100.svg
new file mode 100644
index 000000000..bba9d3423
--- /dev/null
+++ b/layout/reftests/svg/image/lime100x100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
+  <rect width="100px" height="100px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/svg/image/reftest-stylo.list b/layout/reftests/svg/image/reftest-stylo.list
new file mode 100644
index 000000000..3b7af994a
--- /dev/null
+++ b/layout/reftests/svg/image/reftest-stylo.list
@@ -0,0 +1,44 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests of the SVG <image> element
+
+== image-fill-01.svg image-fill-01.svg
+== image-filter-01.svg image-filter-01.svg
+== image-load-01.svg image-load-01.svg
+skip fuzzy-if(Android&&!browserIsRemote,4,32) == image-opacity-01.svg image-opacity-01.svg
+# Bug 779514 for Android
+fuzzy-if(Android,4,34) == image-opacity-02.svg image-opacity-02.svg
+# Bug 776039 for Android
+== image-rotate-01.svg image-rotate-01.svg
+== image-rotate-02a.svg image-rotate-02a.svg
+== image-rotate-02b.svg image-rotate-02b.svg
+== image-scaling-01.svg image-scaling-01.svg
+== image-scaling-02.svg image-scaling-02.svg
+== image-svg-inline-01.html image-svg-inline-01.html
+== image-svg-inline-zoom-in-01a.html image-svg-inline-zoom-in-01a.html
+== image-svg-inline-zoom-in-01b.html image-svg-inline-zoom-in-01b.html
+== image-svg-inline-zoom-in-01c.html image-svg-inline-zoom-in-01c.html
+== image-svg-inline-zoom-in-01d.html image-svg-inline-zoom-in-01d.html
+== image-svg-inline-zoom-out-01a.html image-svg-inline-zoom-out-01a.html
+== image-svg-inline-zoom-out-01b.html image-svg-inline-zoom-out-01b.html
+== image-svg-inline-zoom-out-01c.html image-svg-inline-zoom-out-01c.html
+== image-svg-inline-zoom-out-01d.html image-svg-inline-zoom-out-01d.html
+== image-svg-inline-sprite-zoom-in-01a.html image-svg-inline-sprite-zoom-in-01a.html
+== image-svg-inline-sprite-zoom-in-01b.html image-svg-inline-sprite-zoom-in-01b.html
+== image-svg-inline-sprite-zoom-out-01a.html image-svg-inline-sprite-zoom-out-01a.html
+== image-svg-inline-sprite-zoom-out-01b.html image-svg-inline-sprite-zoom-out-01b.html
+== image-translate-01.svg image-translate-01.svg
+== image-x-01.svg image-x-01.svg
+== image-xy-01.svg image-xy-01.svg
+== image-y-01.svg image-y-01.svg
+== image-zoom-02.svg image-zoom-02.svg
+== imported-image-01.svg imported-image-01.svg
+== imported-image-02.svg imported-image-02.svg
+
+# Tests for <image> with preserveAspectRatio
+== image-preserveAspectRatio-01-raster.svg image-preserveAspectRatio-01-raster.svg
+== image-preserveAspectRatio-01-svg.svg image-preserveAspectRatio-01-svg.svg
+== image-preserveAspectRatio-02-raster.svg image-preserveAspectRatio-02-raster.svg
+== image-preserveAspectRatio-02-svg.svg image-preserveAspectRatio-02-svg.svg
+== image-preserveAspectRatio-03.svg image-preserveAspectRatio-03.svg
+== image-preserveAspectRatio-04.svg image-preserveAspectRatio-04.svg
+== image-preserveAspectRatio-05.svg image-preserveAspectRatio-05.svg
diff --git a/layout/reftests/svg/image/reftest.list b/layout/reftests/svg/image/reftest.list
new file mode 100644
index 000000000..c49a2e5b1
--- /dev/null
+++ b/layout/reftests/svg/image/reftest.list
@@ -0,0 +1,41 @@
+# Tests of the SVG <image> element
+
+== image-fill-01.svg          ../pass.svg
+== image-filter-01.svg        image-filter-01-ref.svg
+== image-load-01.svg          ../pass.svg
+fuzzy-if(Android&&!browserIsRemote,4,32) == image-opacity-01.svg image-opacity-01-ref.svg # Bug 779514 for Android
+fuzzy-if(Android,4,34) == image-opacity-02.svg image-opacity-02-ref.svg # Bug 776039 for Android
+== image-rotate-01.svg                        image-rotate-01-ref.svg
+== image-rotate-02a.svg                       image-rotate-02-ref.svg
+== image-rotate-02b.svg                       image-rotate-02-ref.svg
+== image-scaling-01.svg                       ../pass.svg
+== image-scaling-02.svg                       ../pass.svg
+== image-svg-inline-01.html                   ../pass.svg
+== image-svg-inline-zoom-in-01a.html          ../pass.svg
+== image-svg-inline-zoom-in-01b.html          ../pass.svg
+== image-svg-inline-zoom-in-01c.html          ../pass.svg
+== image-svg-inline-zoom-in-01d.html          ../pass.svg
+== image-svg-inline-zoom-out-01a.html         ../pass.svg
+== image-svg-inline-zoom-out-01b.html         ../pass.svg
+== image-svg-inline-zoom-out-01c.html         ../pass.svg
+== image-svg-inline-zoom-out-01d.html         ../pass.svg
+== image-svg-inline-sprite-zoom-in-01a.html   image-svg-inline-sprite-zoom-in-01-ref.html
+== image-svg-inline-sprite-zoom-in-01b.html   image-svg-inline-sprite-zoom-in-01-ref.html
+== image-svg-inline-sprite-zoom-out-01a.html  image-svg-inline-sprite-zoom-out-01-ref.html
+== image-svg-inline-sprite-zoom-out-01b.html  image-svg-inline-sprite-zoom-out-01-ref.html
+== image-translate-01.svg                     image-translate-01-ref.svg
+== image-x-01.svg                             image-x-01-ref.svg
+== image-xy-01.svg                            image-xy-01-ref.svg
+== image-y-01.svg                             image-y-01-ref.svg
+== image-zoom-02.svg                          image-zoom-02-ref.svg
+== imported-image-01.svg                      imported-image-ref.svg
+== imported-image-02.svg                      imported-image-ref.svg
+
+# Tests for <image> with preserveAspectRatio
+== image-preserveAspectRatio-01-raster.svg image-preserveAspectRatio-01-ref.svg
+== image-preserveAspectRatio-01-svg.svg    image-preserveAspectRatio-01-ref.svg
+== image-preserveAspectRatio-02-raster.svg image-preserveAspectRatio-02-ref.svg
+== image-preserveAspectRatio-02-svg.svg    image-preserveAspectRatio-02-ref.svg
+== image-preserveAspectRatio-03.svg        image-preserveAspectRatio-03-ref.svg
+== image-preserveAspectRatio-04.svg        image-preserveAspectRatio-04-ref.svg
+== image-preserveAspectRatio-05.svg ../pass.svg
diff --git a/layout/reftests/svg/image/sprite.png b/layout/reftests/svg/image/sprite.png
new file mode 100644
index 000000000..830eb7773
--- /dev/null
+++ b/layout/reftests/svg/image/sprite.png
diff --git a/layout/reftests/svg/image/sprite.svg b/layout/reftests/svg/image/sprite.svg
new file mode 100644
index 000000000..2ec702dfb
--- /dev/null
+++ b/layout/reftests/svg/image/sprite.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" style="shape-rendering: crispEdges">
+<rect x="0" y="0" width="200" height="200" fill="red"/>
+<rect x="-1" y="99" width="11" height="22" fill="lime"/>
+<rect x="10" y="99" width="11" height="22" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/image/util.js b/layout/reftests/svg/image/util.js
new file mode 100644
index 000000000..144edd356
--- /dev/null
+++ b/layout/reftests/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/. */
+
+// The possible values of the "align" component of preserveAspectRatio.
+const ALIGN_VALS = ["none",
+                    "xMinYMin", "xMinYMid", "xMinYMax",
+                    "xMidYMin", "xMidYMid", "xMidYMax",
+                    "xMaxYMin", "xMaxYMid", "xMaxYMax"];
+
+// The possible values of the "meetOrSlice" component of preserveAspectRatio.
+const MEETORSLICE_VALS = [ "meet", "slice" ];
+
+const SVGNS   = "http://www.w3.org/2000/svg";
+const XLINKNS = "http://www.w3.org/1999/xlink";
+
+// This is the separation between the x & y values of each <image> in a
+// generated grid.
+const IMAGE_OFFSET = 50;
+
+function generateBorderRect(aX, aY, aWidth, aHeight) {
+  var rect = document.createElementNS(SVGNS, "rect");
+  rect.setAttribute("x", aX);
+  rect.setAttribute("y", aY);
+  rect.setAttribute("width", aWidth);
+  rect.setAttribute("height", aHeight);
+  rect.setAttribute("fill", "none");
+  rect.setAttribute("stroke", "black");
+  rect.setAttribute("stroke-width", "2");
+  rect.setAttribute("stroke-dasharray", "3 2");
+  return rect;
+}
+
+// Returns an SVG <image> element with the given xlink:href, width, height,
+// and preserveAspectRatio=[aAlign aMeetOrSlice] attributes
+function generateImageElementForParams(aX, aY, aWidth, aHeight,
+                                       aHref, aAlign, aMeetOrSlice) {
+  var image = document.createElementNS(SVGNS, "image");
+  image.setAttribute("x", aX);
+  image.setAttribute("y", aY);
+  image.setAttribute("width", aWidth);
+  image.setAttribute("height", aHeight);
+  image.setAttributeNS(XLINKNS, "href", aHref);
+  image.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice);
+  return image;
+}
+
+// Returns a <g> element filled with a grid of <image> elements which each
+// have the specified aWidth & aHeight and which use all possible values of
+// preserveAspectRatio.
+//
+// The final "aBonusPARVal" argument (if specified) is used as the
+// preserveAspectRatio value on a bonus <image> element, added at the end.
+function generateImageGrid(aHref, aWidth, aHeight, aBonusPARVal) {
+  var grid = document.createElementNS(SVGNS, "g");
+  var y = 0;
+  var x = 0;
+  for (var i = 0; i < ALIGN_VALS.length; i++) {
+    // Jump to next line of grid, for every other "i" value.
+    // (every fourth entry)
+    if (i && i % 2 == 0) {
+      y += IMAGE_OFFSET;
+      x = 0;
+    }
+    var alignVal = ALIGN_VALS[i];
+    for (var j = 0; j < MEETORSLICE_VALS.length; j++) {
+      var meetorsliceVal = MEETORSLICE_VALS[j];
+      var border = generateBorderRect(x, y, aWidth, aHeight);
+      var image  = generateImageElementForParams(x, y, aWidth, aHeight,
+                                                 aHref, alignVal,
+                                                 meetorsliceVal);
+      grid.appendChild(border);
+      grid.appendChild(image);
+      x += IMAGE_OFFSET;
+    }
+  }
+
+  if (aBonusPARVal) {
+    // Add one final entry with "bonus" pAR value.
+    y += IMAGE_OFFSET;
+    x = 0;
+    var border = generateBorderRect(x, y, aWidth, aHeight);
+    var image  = generateImageElementForParams(x, y, aWidth, aHeight,
+                                               aHref, aBonusPARVal, "");
+    grid.appendChild(border);
+    grid.appendChild(image);
+  }
+
+  return grid;
+}
+
+// Returns an SVG <symbol> element that...
+//  (a) has the given ID
+//  (b) contains only a <use> element to the given URI
+//  (c) has a hardcoded viewBox="0 0 10 10" attribute
+//  (d) has the given preserveAspectRatio=[aAlign aMeetOrSlice] attribute
+function generateSymbolElementForParams(aSymbolID, aHref,
+                                        aAlign, aMeetOrSlice) {
+  var use = document.createElementNS(SVGNS, "use");
+  use.setAttributeNS(XLINKNS, "href", aHref);
+
+  var symbol = document.createElementNS(SVGNS, "symbol");
+  symbol.setAttribute("id", aSymbolID);
+  symbol.setAttribute("viewBox", "0 0 10 10");
+  symbol.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice);
+
+  symbol.appendChild(use);
+  return symbol;
+}
+
+function generateUseElementForParams(aTargetURI, aX, aY, aWidth, aHeight) {
+  var use = document.createElementNS(SVGNS, "use");
+  use.setAttributeNS(XLINKNS, "href", aTargetURI);
+  use.setAttribute("x", aX);
+  use.setAttribute("y", aY);
+  use.setAttribute("width", aWidth);
+  use.setAttribute("height", aHeight);
+  return use;
+}
+
+// Returns a <g> element filled with a grid of <use> elements which each
+// have the specified aWidth & aHeight and which reference <symbol> elements
+// with all possible values of preserveAspectRatio.  Each <symbol> contains
+// a <use> that links to the given URI, aHref.
+//
+// The final "aBonusPARVal" argument (if specified) is used as the
+// preserveAspectRatio value on a bonus <symbol> element, added at the end.
+function generateSymbolGrid(aHref, aWidth, aHeight, aBonusPARVal) {
+  var grid = document.createElementNS(SVGNS, "g");
+  var y = 0;
+  var x = 0;
+  for (var i = 0; i < ALIGN_VALS.length; i++) {
+    // Jump to next line of grid, for every other "i" value.
+    // (every fourth entry)
+    if (i && i % 2 == 0) {
+      y += IMAGE_OFFSET;
+      x = 0;
+    }
+    var alignVal = ALIGN_VALS[i];
+    for (var j = 0; j < MEETORSLICE_VALS.length; j++) {
+      var meetorsliceVal = MEETORSLICE_VALS[j];
+      var border = generateBorderRect(x, y, aWidth, aHeight);
+
+      var symbolID = "symbol_" + alignVal + "_" + meetorsliceVal;
+      var symbol = generateSymbolElementForParams(symbolID, aHref,
+                                                  alignVal, meetorsliceVal);
+      var use = generateUseElementForParams("#" + symbolID,
+                                            x, y, aWidth, aHeight);
+      grid.appendChild(symbol); // This isn't painted
+      grid.appendChild(border);
+      grid.appendChild(use);
+      x += IMAGE_OFFSET;
+    }
+  }
+
+  if (aBonusPARVal) {
+    // Add one final entry with "bonus" pAR value.
+    y += IMAGE_OFFSET;
+    x = 0;
+    var border = generateBorderRect(x, y, aWidth, aHeight);
+    var symbolID = "symbol_Bonus";
+    var symbol = generateSymbolElementForParams(symbolID, aHref,
+                                                aBonusPARVal, "");
+    var use = generateUseElementForParams("#" + symbolID,
+                                          x, y, aWidth, aHeight);
+    grid.appendChild(symbol); // This isn't painted
+    grid.appendChild(border);
+    grid.appendChild(use);
+  }
+
+  return grid;
+}