summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/as-image
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/svg/as-image')
-rw-r--r--layout/reftests/svg/as-image/background-display-none-1.html13
-rw-r--r--layout/reftests/svg/as-image/background-image-rect-1png.html8
-rw-r--r--layout/reftests/svg/as-image/background-image-rect-1svg.html8
-rw-r--r--layout/reftests/svg/as-image/background-image-rect-2.html8
-rw-r--r--layout/reftests/svg/as-image/background-resize-1.html18
-rw-r--r--layout/reftests/svg/as-image/background-resize-2.html18
-rw-r--r--layout/reftests/svg/as-image/background-resize-3.html19
-rw-r--r--layout/reftests/svg/as-image/background-resize-4.html20
-rw-r--r--layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html21
-rw-r--r--layout/reftests/svg/as-image/background-scale-no-viewbox-1.html22
-rw-r--r--layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html21
-rw-r--r--layout/reftests/svg/as-image/background-scale-with-viewbox-1.html22
-rw-r--r--layout/reftests/svg/as-image/background-simple-1.html6
-rw-r--r--layout/reftests/svg/as-image/background-simple-2.html6
-rw-r--r--layout/reftests/svg/as-image/background-stretch-1-ref.html37
-rw-r--r--layout/reftests/svg/as-image/background-stretch-1.html22
-rw-r--r--layout/reftests/svg/as-image/background-viewBox-1.html7
-rw-r--r--layout/reftests/svg/as-image/blue-square-in-square-par-none.svg7
-rw-r--r--layout/reftests/svg/as-image/blue-square-in-square.svg7
-rw-r--r--layout/reftests/svg/as-image/blue100x100.svg4
-rw-r--r--layout/reftests/svg/as-image/border-image-simple-1.html6
-rw-r--r--layout/reftests/svg/as-image/border-image-simple-2.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html22
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html22
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html24
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html27
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html28
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html26
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html26
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html26
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html22
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html25
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html28
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html25
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html18
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html24
-rw-r--r--layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg11
-rw-r--r--layout/reftests/svg/as-image/defer-unsupported-1-helper.svg5
-rw-r--r--layout/reftests/svg/as-image/defer-unsupported-1-ref.svg6
-rw-r--r--layout/reftests/svg/as-image/defer-unsupported-1.svg7
-rw-r--r--layout/reftests/svg/as-image/display-none.svg8
-rw-r--r--layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html35
-rw-r--r--layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg7
-rw-r--r--layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html54
-rw-r--r--layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg6
-rw-r--r--layout/reftests/svg/as-image/image-orientation-ref.html75
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html35
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg8
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html50
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg7
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-helper-a.svg8
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-helper-b.svg7
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-helper-c.svg42
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-ref.svg43
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1.html24
-rw-r--r--layout/reftests/svg/as-image/img-blobURI-1.html35
-rw-r--r--layout/reftests/svg/as-image/img-blobURI-2.html44
-rw-r--r--layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html15
-rw-r--r--layout/reftests/svg/as-image/img-content-outside-viewBox-1.html14
-rw-r--r--layout/reftests/svg/as-image/img-display-none-1.html12
-rw-r--r--layout/reftests/svg/as-image/img-dyn-1-ref.html7
-rw-r--r--layout/reftests/svg/as-image/img-dyn-1.html18
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-1-helper.svg6
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-1.html5
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg18
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-embed-1.html5
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg14
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html5
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg14
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html5
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1-ref.html18
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1a.html21
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1b.html19
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1c.html23
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2-ref.html18
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2a.html21
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2b.html19
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2c.html23
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-novb-height-all-1-ref.html45
-rw-r--r--layout/reftests/svg/as-image/img-novb-height-meet-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-height-slice-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-width-all-1-ref.html49
-rw-r--r--layout/reftests/svg/as-image/img-novb-width-meet-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-width-slice-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html20
-rw-r--r--layout/reftests/svg/as-image/img-simple-1.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-2.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-3-ref.html11
-rw-r--r--layout/reftests/svg/as-image/img-simple-3.html9
-rw-r--r--layout/reftests/svg/as-image/img-simple-4.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-5-ref.html12
-rw-r--r--layout/reftests/svg/as-image/img-simple-5.html6
-rw-r--r--layout/reftests/svg/as-image/img-simple-6.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-7-ref.html11
-rw-r--r--layout/reftests/svg/as-image/img-simple-7.html6
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html20
-rw-r--r--layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg3
-rw-r--r--layout/reftests/svg/as-image/lime100x100-ref.html5
-rw-r--r--layout/reftests/svg/as-image/lime100x100.pngbin0 -> 232 bytes
-rw-r--r--layout/reftests/svg/as-image/lime100x100.svg4
-rw-r--r--layout/reftests/svg/as-image/lime200x100.svg4
-rw-r--r--layout/reftests/svg/as-image/lime200x200.svg4
-rw-r--r--layout/reftests/svg/as-image/lime50x25.svg4
-rw-r--r--layout/reftests/svg/as-image/lime50x50.svg4
-rw-r--r--layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg5
-rw-r--r--layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg5
-rw-r--r--layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg5
-rw-r--r--layout/reftests/svg/as-image/limeInRed100x100.pngbin0 -> 292 bytes
-rw-r--r--layout/reftests/svg/as-image/limeInRed100x100.svg5
-rw-r--r--layout/reftests/svg/as-image/list-simple-1-ref.html8
-rw-r--r--layout/reftests/svg/as-image/list-simple-1.html8
-rw-r--r--layout/reftests/svg/as-image/nonuniform-scale-2d.html35
-rw-r--r--layout/reftests/svg/as-image/nonuniform-scale-3d.html37
-rw-r--r--layout/reftests/svg/as-image/nonuniform-scale-ref.html24
-rw-r--r--layout/reftests/svg/as-image/reftest-stylo.list275
-rw-r--r--layout/reftests/svg/as-image/reftest.list241
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-100x100.svg7
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-100x50.svg7
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-transparent.svg8
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg6
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg5
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html14
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-1.html20
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg9
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html23
-rw-r--r--layout/reftests/svg/as-image/svg-image-datauri-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-image-datauri.svg8
-rw-r--r--layout/reftests/svg/as-image/svg-image-external-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-image-external.svg10
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg6
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-1a.svg13
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-1b.svg15
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg5
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-2a.svg10
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-2b.html9
-rw-r--r--layout/reftests/svg/as-image/svg-image-simple-1.svg6
-rw-r--r--layout/reftests/svg/as-image/svg-image-simple-2.svg7
-rw-r--r--layout/reftests/svg/as-image/svg-image-simple-3.svg7
-rw-r--r--layout/reftests/svg/as-image/svg-image-util.css3
-rw-r--r--layout/reftests/svg/as-image/svg-image-util.js173
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1-helper.svg23
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1.html23
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-2-helper.svg22
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-2.html23
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-datauri.svg8
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-external-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-external.css1
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-external.svg9
-rw-r--r--layout/reftests/svg/as-image/white-rect-no-viewbox.svg8
-rw-r--r--layout/reftests/svg/as-image/white-rect-with-viewbox.svg11
-rw-r--r--layout/reftests/svg/as-image/zoom/circle-large.svg3
-rw-r--r--layout/reftests/svg/as-image/zoom/circle-small.svg3
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html29
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html29
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-zoomIn-1.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/img-zoomOut-1.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/reftest-stylo.list12
-rw-r--r--layout/reftests/svg/as-image/zoom/reftest.list11
-rw-r--r--layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/squaredCircle.svg6
196 files changed, 3713 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 000000000..9c638134e
--- /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 000000000..42813d669
--- /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 000000000..728c780ac
--- /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 000000000..15f861d40
--- /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 000000000..cb39dc83a
--- /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, false);
+</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 000000000..b2adaa3f7
--- /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, false);
+</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 000000000..ab25d3716
--- /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, false);
+</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 000000000..9ec689b47
--- /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, false);
+</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 000000000..e9ee74d29
--- /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 000000000..e8ea278bb
--- /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 000000000..e9ee74d29
--- /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 000000000..295aedf52
--- /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 000000000..d368b5831
--- /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 000000000..1b4cbba24
--- /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 000000000..f84768e27
--- /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;
+ }
+ .stretch {
+ width: 40px;
+ background-color: white;
+ display: inline-block;
+ }
+ .left-spacer {
+ width: 30px;
+ float: left;
+ }
+ .right-spacer {
+ width: 30px;
+ float: right;
+ }
+ body {
+ background-color: black;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="left-spacer"></div>
+ <div class="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 000000000..0931cf3cc
--- /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 000000000..077dedfeb
--- /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/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 000000000..33a08a0bc
--- /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 000000000..d43a27951
--- /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.svg b/layout/reftests/svg/as-image/blue100x100.svg
new file mode 100644
index 000000000..a9c8eba79
--- /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 000000000..e6b696e1d
--- /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 000000000..4eba8cee5
--- /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 000000000..b2be295ac
--- /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 000000000..ca6a362c3
--- /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 000000000..563e60bb9
--- /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 000000000..ca56934f6
--- /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 000000000..c363bad58
--- /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 000000000..da382386f
--- /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 000000000..94154d480
--- /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 000000000..92eed4e10
--- /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 000000000..bd4585eaa
--- /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 000000000..0e8cf233f
--- /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 000000000..f3ca82123
--- /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 000000000..b40d5fc39
--- /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 000000000..f3348b1e1
--- /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 000000000..6f173b7d6
--- /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 000000000..6b56ce1e6
--- /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 000000000..226a6dd57
--- /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.mozCurrentTransform = [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 000000000..aedd6b38d
--- /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.mozCurrentTransform = [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 000000000..ff5ff17fb
--- /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/defer-unsupported-1-helper.svg b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg
new file mode 100644
index 000000000..a2c4c7a55
--- /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 000000000..2b49baf71
--- /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 000000000..4a9d84955
--- /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 000000000..402d37b49
--- /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-no-viewbox-and-size.html b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html
new file mode 100644
index 000000000..9e1a8835b
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html
@@ -0,0 +1,35 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ </style>
+</head>
+<body>
+ <img src="image-orientation-no-viewbox-and-size.svg">
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var style;
+ if (angle == "from-image") {
+ style = "img { image-orientation: from-image; }\n";
+ } else {
+ style = "img { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg
new file mode 100644
index 000000000..3bea51877
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="200">
+ <rect x="0" y="0" width="50" height="100" fill="rgb(0, 191, 0)"/>
+ <rect x="50" y="0" width="50" height="100" fill="rgb(0, 255, 1)"/>
+ <rect x="50" y="100" width="50" height="100" fill="rgb(254, 0, 122)"/>
+ <rect x="0" y="100" width="50" height="100" fill="rgb(191, 0, 93)"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html
new file mode 100644
index 000000000..f6457f926
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html
@@ -0,0 +1,54 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ width: 100px;
+ height: 200px;
+ }
+ </style>
+</head>
+<body>
+ <img src="image-orientation-no-viewbox-no-size.svg">
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var orientationStyle;
+ if (angle == "from-image") {
+ orientationStyle = "image-orientation: from-image;";
+ } else {
+ orientationStyle = "image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + ";";
+ }
+
+ // Since the SVG image has no intrinsic size, we need to apply an
+ // appropriate size to the <img> element to match the reference.
+ var boxStyle;
+ if (angle == "90" || angle == "270") {
+ boxStyle = "width: 200px; height: 100px;";
+ } else {
+ boxStyle = "width: 100px; height: 200px;";
+ }
+
+ var style = "img { "
+ + orientationStyle
+ + " "
+ + boxStyle
+ + " }\n";
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg
new file mode 100644
index 000000000..029549c1f
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <rect x="0" y="0" width="50" height="100" fill="rgb(0, 191, 0)"/>
+ <rect x="50" y="0" width="50" height="100" fill="rgb(0, 255, 1)"/>
+ <rect x="50" y="100" width="50" height="100" fill="rgb(254, 0, 122)"/>
+ <rect x="0" y="100" width="50" height="100" fill="rgb(191, 0, 93)"/>
+</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 000000000..bb65deae6
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ table {
+ border-spacing: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <table>
+ <tr>
+ <td id="ul"></td>
+ <td id="ur"></td>
+ </tr>
+ <tr>
+ <td id="ll"></td>
+ <td id="lr"></td>
+ </tr>
+ </table>
+ </div>
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = parseInt(orientationInfo[0]);
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Each id corresponds to a color.
+ var ids = ["ul", "ur", "lr", "ll"];
+ var colors = [
+ "rgb(0, 191, 0)",
+ "rgb(0, 255, 1)",
+ "rgb(254, 0, 122)",
+ "rgb(191, 0, 93)",
+ ];
+
+ // 'Rotate' the colors according to the angle.
+ colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length));
+
+ // 'Flip' the colors if requested.
+ if (flip) {
+ var tmp = colors[0];
+ colors[0] = colors[1];
+ colors[1] = tmp;
+ tmp = colors[2];
+ colors[2] = colors[3];
+ colors[3] = tmp;
+ }
+
+ // Construct a style.
+ var style = "";
+
+ if (angle == 90 || angle == 270) {
+ style += "div { width: 200px; height: 100px; }\n";
+ style += "td { width: 100px; height: 50px; }\n";
+ } else {
+ style += "div { width: 100px; height: 200px; }\n";
+ style += "td { width: 50px; height: 100px; }\n";
+ }
+
+ for (var i = 0 ; i < 4 ; ++i) {
+ style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</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 000000000..5c3ec4f8a
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
@@ -0,0 +1,35 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ </style>
+</head>
+<body>
+ <img src="image-orientation-viewbox-and-size.svg">
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var style;
+ if (angle == "from-image") {
+ style = "img { image-orientation: from-image; }\n";
+ } else {
+ style = "img { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </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 000000000..148b021e5
--- /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 000000000..6c8329188
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
@@ -0,0 +1,50 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ </style>
+</head>
+<body>
+ <img src="image-orientation-viewbox-no-size.svg">
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var orientationStyle;
+ if (angle == "from-image") {
+ orientationStyle = "image-orientation: from-image;";
+ } else {
+ orientationStyle = "image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + ";";
+ }
+
+ // Since the SVG image has no intrinsic size, we need to apply an
+ // appropriate size to the <img> element to match the reference.
+ var boxStyle;
+ if (angle == "90" || angle == "270") {
+ boxStyle = "width: 200px; height: 100px;";
+ } else {
+ boxStyle = "width: 100px; height: 200px;";
+ }
+
+ var style = "img { "
+ + orientationStyle
+ + " "
+ + boxStyle
+ + " }\n";
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </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 000000000..573348801
--- /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 000000000..254a87393
--- /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 000000000..6aada7f0f
--- /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 000000000..73fe0cb11
--- /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 000000000..07e977f0e
--- /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 000000000..f60e4e2a6
--- /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 000000000..127689e78
--- /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 000000000..073ec8062
--- /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 000000000..abee91c51
--- /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 000000000..3aad7adfa
--- /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 000000000..2ce155c9b
--- /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 000000000..cb9f2635b
--- /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 000000000..9be86ff57
--- /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 000000000..3b1b6a67b
--- /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 000000000..de4671ad7
--- /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 000000000..e7f93d241
--- /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 000000000..25d5e3eee
--- /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 000000000..e60fa172a
--- /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 000000000..2840a1b22
--- /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 000000000..5bc57390d
--- /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 000000000..3ee04d4a7
--- /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 000000000..babf7b38a
--- /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 000000000..31ac73d18
--- /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 000000000..0835a9d9c
--- /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 000000000..717a64fdf
--- /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 000000000..c05d94372
--- /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 000000000..953906c00
--- /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 000000000..681867e47
--- /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 000000000..02cd1abf8
--- /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 000000000..2a12d87f2
--- /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 000000000..c1cf23854
--- /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 000000000..efaee25c7
--- /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 000000000..98fca1d36
--- /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 000000000..5724f8e0c
--- /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 000000000..1997f37c5
--- /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 000000000..e9b809e6c
--- /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 000000000..faab57f73
--- /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 000000000..999ce5aa6
--- /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 000000000..ab19b2948
--- /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 000000000..725277a68
--- /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 000000000..9d99b4da6
--- /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 000000000..86ff8afe2
--- /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 000000000..abbc21e72
--- /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 000000000..8839c0fa5
--- /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 000000000..eccc7c5e1
--- /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 000000000..ed58e8319
--- /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 000000000..7986e3ec2
--- /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 000000000..a50f10e65
--- /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 000000000..1592cbc06
--- /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 000000000..049b2a3e4
--- /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 000000000..f77ea89e1
--- /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 000000000..f20c2877e
--- /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 000000000..af0f40e31
--- /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 000000000..f08c94488
--- /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 000000000..a686a0a1c
--- /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 000000000..69ab8ebf0
--- /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 000000000..76f575b44
--- /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 000000000..3e0138f20
--- /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 000000000..079336896
--- /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 000000000..489b4f7cc
--- /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 000000000..ecf8776e4
--- /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 000000000..039aaf1f1
--- /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 000000000..e306d673c
--- /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 000000000..78af6f8b1
--- /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 000000000..66161ec71
--- /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 000000000..21740cf70
--- /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 000000000..0c9c44ba1
--- /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 000000000..f5453f91d
--- /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 000000000..93dfa47b6
--- /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 000000000..367f52b28
--- /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 000000000..671aa1ecd
--- /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 000000000..b95b7d4ff
--- /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 000000000..ed94f8811
--- /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 000000000..2f89c8b4d
--- /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-noSVGDimensions.svg b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg
new file mode 100644
index 000000000..74e4df78a
--- /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 000000000..daedf45c8
--- /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.png b/layout/reftests/svg/as-image/lime100x100.png
new file mode 100644
index 000000000..c9bb37594
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100.png
Binary files differ
diff --git a/layout/reftests/svg/as-image/lime100x100.svg b/layout/reftests/svg/as-image/lime100x100.svg
new file mode 100644
index 000000000..8bdec62c1
--- /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 000000000..75aadf640
--- /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 000000000..d746c2848
--- /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 000000000..9afc0af36
--- /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 000000000..7f9d53038
--- /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 000000000..151ec3077
--- /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 000000000..baa944a81
--- /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 000000000..b97337d0c
--- /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 000000000..d65c62635
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100.png
Binary files differ
diff --git a/layout/reftests/svg/as-image/limeInRed100x100.svg b/layout/reftests/svg/as-image/limeInRed100x100.svg
new file mode 100644
index 000000000..45d9396b9
--- /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 000000000..b603886ba
--- /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 000000000..2e638943f
--- /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 000000000..b14ff82ef
--- /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 000000000..8da467298
--- /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 000000000..9644d44e5
--- /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-stylo.list b/layout/reftests/svg/as-image/reftest-stylo.list
new file mode 100644
index 000000000..da8acdfff
--- /dev/null
+++ b/layout/reftests/svg/as-image/reftest-stylo.list
@@ -0,0 +1,275 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests related to SVG being used as an image
+
+# zoom/
+include zoom/reftest-stylo.list
+
+# Background-image tests
+skip-if(Mulet) == background-display-none-1.html background-display-none-1.html
+# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables
+skip-if(B2G||Mulet) == background-simple-1.html background-simple-1.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== background-simple-2.html background-simple-2.html
+
+# Sightly trickier background-image test
+== background-viewBox-1.html background-viewBox-1.html
+
+# background tests with the background area getting resized
+== background-resize-1.html background-resize-1.html
+== background-resize-2.html background-resize-2.html
+== background-resize-3.html background-resize-3.html
+== background-resize-4.html background-resize-4.html
+
+# Test for stretching background images by different amounts in each dimension
+== background-stretch-1.html background-stretch-1.html
+
+# Tests for scaling background images
+== background-scale-no-viewbox-1.html background-scale-no-viewbox-1.html
+== background-scale-with-viewbox-1.html background-scale-with-viewbox-1.html
+
+# Tests with -moz-image-rect()
+random == background-image-rect-1svg.html background-image-rect-1svg.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== background-image-rect-1png.html background-image-rect-1png.html
+== background-image-rect-2.html background-image-rect-2.html
+
+# Test for border-image
+== border-image-simple-1.html border-image-simple-1.html
+== border-image-simple-2.html border-image-simple-2.html
+
+# Test for canvas "drawImage" method
+== canvas-drawImage-simple-1a.html canvas-drawImage-simple-1a.html
+== canvas-drawImage-simple-1b.html canvas-drawImage-simple-1b.html
+
+skip-if(B2G||Mulet) == canvas-drawImage-scale-1a.html canvas-drawImage-scale-1a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == canvas-drawImage-scale-1b.html canvas-drawImage-scale-1b.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == canvas-drawImage-scale-1c.html canvas-drawImage-scale-1c.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2a.html
+fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2b.html
+
+fuzzy-if(winWidget&&!d2d,1,10000) fuzzy-if(azureSkia,1,10000) fuzzy-if(Android||B2G,1,10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1.html
+#Same as scale-2a but with globalAlpha:
+fuzzy-if(azureSkia,1,40000) == canvas-drawImage-alpha-2.html canvas-drawImage-alpha-2.html
+
+skip-if(B2G||Mulet) == canvas-drawImage-slice-1a.html canvas-drawImage-slice-1a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== canvas-drawImage-slice-1b.html canvas-drawImage-slice-1b.html
+
+== canvas-drawImage-origin-clean-1.html canvas-drawImage-origin-clean-1.html
+== canvas-drawImage-transform-restored.html canvas-drawImage-transform-restored.html
+
+# Simple <img> tests
+== img-simple-1.html img-simple-1.html
+== img-simple-2.html img-simple-2.html
+fuzzy-if(skiaContent,255,350) == img-simple-3.html img-simple-3.html
+== img-simple-4.html img-simple-4.html
+fails fuzzy-if(skiaContent,255,90) == img-simple-5.html img-simple-5.html
+skip-if(B2G||Mulet) == img-simple-6.html img-simple-6.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails fuzzy-if(skiaContent,255,27) == img-simple-7.html img-simple-7.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.html
+# bug 645267
+
+# More complex <img> tests
+== img-blobURI-1.html img-blobURI-1.html
+skip random == img-blobURI-2.html img-blobURI-2.html
+fuzzy-if(d2d,16,10) == img-content-outside-viewBox-1.html img-content-outside-viewBox-1.html
+# d2d is bug 1074161
+skip-if(Mulet) == img-display-none-1.html img-display-none-1.html
+# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables
+== img-dyn-1.html img-dyn-1.html
+== img-foreignObject-1.html img-foreignObject-1.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 img-foreignObject-embed-1.html
+== img-foreignObject-embed-1-helper.svg img-foreignObject-embed-1-helper.svg
+== img-foreignObject-iframe-1a.html img-foreignObject-iframe-1a.html
+== img-foreignObject-iframe-1b.html img-foreignObject-iframe-1b.html
+== img-foreignObject-iframe-1b-helper.svg img-foreignObject-iframe-1b-helper.svg
+
+== img-widthAndHeight-meet-1.html img-widthAndHeight-meet-1.html
+skip == img-widthAndHeight-meet-2.html img-widthAndHeight-meet-2.html
+== img-widthAndHeight-slice-1.html img-widthAndHeight-slice-1.html
+== img-widthAndHeight-slice-2.html img-widthAndHeight-slice-2.html
+
+== img-height-meet-1.html img-height-meet-1.html
+== img-height-meet-2.html img-height-meet-2.html
+== img-height-slice-1.html img-height-slice-1.html
+== img-height-slice-2.html img-height-slice-2.html
+
+== img-width-meet-1.html img-width-meet-1.html
+== img-width-meet-2.html img-width-meet-2.html
+== img-width-slice-1.html img-width-slice-1.html
+== img-width-slice-2.html img-width-slice-2.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-meet-1-em.html
+== img-novb-widthAndHeight-meet-1-px.html img-novb-widthAndHeight-meet-1-px.html
+== img-novb-widthAndHeight-slice-1-em.html img-novb-widthAndHeight-slice-1-em.html
+== img-novb-widthAndHeight-slice-1-px.html img-novb-widthAndHeight-slice-1-px.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-meet-1.html
+== img-novb-height-slice-1.html img-novb-height-slice-1.html
+fuzzy-if(skiaContent,255,10) == img-novb-width-meet-1.html img-novb-width-meet-1.html
+fuzzy-if(skiaContent,255,10) == img-novb-width-slice-1.html img-novb-width-slice-1.html
+
+# with with a fragmentIdentifier viewBox
+skip-if(B2G||Mulet) == img-fragment-1a.html img-fragment-1a.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == img-fragment-1b.html img-fragment-1b.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == img-fragment-1c.html img-fragment-1c.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == img-fragment-2a.html img-fragment-2a.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == img-fragment-2b.html img-fragment-2b.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == img-fragment-2c.html img-fragment-2c.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+fuzzy-if(B2G,68,4) == list-simple-1.html list-simple-1.html
+
+== svg-image-simple-1.svg svg-image-simple-1.svg
+== svg-image-simple-2.svg svg-image-simple-2.svg
+== svg-image-simple-3.svg svg-image-simple-3.svg
+
+# tests for <svg> files that include themselves as an <image>
+== svg-image-recursive-1a.svg svg-image-recursive-1a.svg
+== svg-image-recursive-1b.svg svg-image-recursive-1b.svg
+== svg-image-recursive-2a.svg svg-image-recursive-2a.svg
+== svg-image-recursive-2b.html svg-image-recursive-2b.html
+
+# test that scripting feature is not supported in images or referenced documents
+skip skip-if(B2G||Mulet) == svg-image-script-1.svg svg-image-script-1.svg
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip == svg-image-script-2.svg svg-image-script-2.svg
+
+# tests for external resources vs. data URIs in SVG as an image
+== svg-image-datauri-1.html svg-image-datauri-1.html
+HTTP == svg-image-datauri-1.html svg-image-datauri-1.html
+== svg-image-external-1.html svg-image-external-1.html
+HTTP == svg-image-external-1.html svg-image-external-1.html
+== svg-stylesheet-datauri-1.html svg-stylesheet-datauri-1.html
+HTTP == svg-stylesheet-datauri-1.html svg-stylesheet-datauri-1.html
+== svg-stylesheet-external-1.html svg-stylesheet-external-1.html
+HTTP == svg-stylesheet-external-1.html svg-stylesheet-external-1.html
+
+# test that :visited status is ignored in image documents
+# We load the images directly first, to be sure history is populated.
+# It's also good to verify that the helper images don't match lime100x100.svg
+# in non-image contexts, but for that to work, we have to reliably count on
+# :visited styles loading (asynchronously), so we test that in
+# layout/style/test/test_visited_reftests.html instead of the reftest harness.
+== svg-image-visited-1-helper.svg svg-image-visited-1-helper.svg
+== svg-image-visited-1.html svg-image-visited-1.html
+== svg-image-visited-2-helper.svg svg-image-visited-2-helper.svg
+skip == svg-image-visited-2.html svg-image-visited-2.html
+
+# 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.
+skip-if(B2G||Mulet) fuzzy(2,1) == svg-border-image-repaint-1.html svg-border-image-repaint-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# Tests for image-orientation with a viewbox and an intrinsic size:
+== image-orientation-viewbox-and-size.html?0 image-orientation-viewbox-and-size.html?0
+== image-orientation-viewbox-and-size.html?90 image-orientation-viewbox-and-size.html?90
+== image-orientation-viewbox-and-size.html?180 image-orientation-viewbox-and-size.html?180
+== image-orientation-viewbox-and-size.html?270 image-orientation-viewbox-and-size.html?270
+== image-orientation-viewbox-and-size.html?0&flip image-orientation-viewbox-and-size.html?0&flip
+== image-orientation-viewbox-and-size.html?90&flip image-orientation-viewbox-and-size.html?90&flip
+== image-orientation-viewbox-and-size.html?180&flip image-orientation-viewbox-and-size.html?180&flip
+== image-orientation-viewbox-and-size.html?270&flip image-orientation-viewbox-and-size.html?270&flip
+
+# Tests for image-orientation with a viewbox and no intrinsic size:
+== image-orientation-viewbox-no-size.html?0 image-orientation-viewbox-no-size.html?0
+== image-orientation-viewbox-no-size.html?90 image-orientation-viewbox-no-size.html?90
+== image-orientation-viewbox-no-size.html?180 image-orientation-viewbox-no-size.html?180
+== image-orientation-viewbox-no-size.html?270 image-orientation-viewbox-no-size.html?270
+== image-orientation-viewbox-no-size.html?0&flip image-orientation-viewbox-no-size.html?0&flip
+== image-orientation-viewbox-no-size.html?90&flip image-orientation-viewbox-no-size.html?90&flip
+== image-orientation-viewbox-no-size.html?180&flip image-orientation-viewbox-no-size.html?180&flip
+== image-orientation-viewbox-no-size.html?270&flip image-orientation-viewbox-no-size.html?270&flip
+
+# Tests for image-orientation with no viewbox and an intrinsic size:
+== image-orientation-no-viewbox-and-size.html?0 image-orientation-no-viewbox-and-size.html?0
+== image-orientation-no-viewbox-and-size.html?90 image-orientation-no-viewbox-and-size.html?90
+== image-orientation-no-viewbox-and-size.html?180 image-orientation-no-viewbox-and-size.html?180
+== image-orientation-no-viewbox-and-size.html?270 image-orientation-no-viewbox-and-size.html?270
+skip == image-orientation-no-viewbox-and-size.html?0&flip image-orientation-no-viewbox-and-size.html?0&flip
+== image-orientation-no-viewbox-and-size.html?90&flip image-orientation-no-viewbox-and-size.html?90&flip
+== image-orientation-no-viewbox-and-size.html?180&flip image-orientation-no-viewbox-and-size.html?180&flip
+skip == image-orientation-no-viewbox-and-size.html?270&flip image-orientation-no-viewbox-and-size.html?270&flip
+
+# Tests for image-orientation with no viewbox and no intrinsic size:
+== image-orientation-no-viewbox-no-size.html?0 image-orientation-no-viewbox-no-size.html?0
+== image-orientation-no-viewbox-no-size.html?90 image-orientation-no-viewbox-no-size.html?90
+== image-orientation-no-viewbox-no-size.html?180 image-orientation-no-viewbox-no-size.html?180
+== image-orientation-no-viewbox-no-size.html?270 image-orientation-no-viewbox-no-size.html?270
+== image-orientation-no-viewbox-no-size.html?0&flip image-orientation-no-viewbox-no-size.html?0&flip
+== image-orientation-no-viewbox-no-size.html?90&flip image-orientation-no-viewbox-no-size.html?90&flip
+== image-orientation-no-viewbox-no-size.html?180&flip image-orientation-no-viewbox-no-size.html?180&flip
+== image-orientation-no-viewbox-no-size.html?270&flip image-orientation-no-viewbox-no-size.html?270&flip
+
+# 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?from-image
+== image-orientation-viewbox-no-size.html?from-image image-orientation-viewbox-no-size.html?from-image
+
+# Sanity checks for the image-orientation tests. Ensures that the various
+# combinations of rotations and flips actually look different from each other.
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?90 image-orientation-ref.html?90
+== image-orientation-ref.html?90 image-orientation-ref.html?90
+== image-orientation-ref.html?180 image-orientation-ref.html?180
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?90 image-orientation-ref.html?90
+== image-orientation-ref.html?180 image-orientation-ref.html?180
+== image-orientation-ref.html?270 image-orientation-ref.html?270
+
+# Tests that nonuniform scales work with SVG-as-image.
+== nonuniform-scale-2d.html?0.5&1.0 nonuniform-scale-2d.html?0.5&1.0
+== nonuniform-scale-2d.html?1.0&0.5 nonuniform-scale-2d.html?1.0&0.5
+== nonuniform-scale-3d.html?0.5&1.0&0.5 nonuniform-scale-3d.html?0.5&1.0&0.5
+== nonuniform-scale-3d.html?1.0&0.5&0.5 nonuniform-scale-3d.html?1.0&0.5&0.5
+
+# 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&1.0
+== nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?0.3&1.0
+== nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&0.3
+== nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&0.3
+== nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&1.0&0.3
+== nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&1.0&0.3
+== nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&0.3&0.3
+== nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&0.3&0.3
+
+# Test for preserveAspectRatio with no-longer-supported "defer" keyword
+== defer-unsupported-1.svg defer-unsupported-1.svg
diff --git a/layout/reftests/svg/as-image/reftest.list b/layout/reftests/svg/as-image/reftest.list
new file mode 100644
index 000000000..75c149646
--- /dev/null
+++ b/layout/reftests/svg/as-image/reftest.list
@@ -0,0 +1,241 @@
+# 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
+== background-scale-no-viewbox-1.html background-scale-no-viewbox-1-ref.html
+== 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(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html
+fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2-ref.html
+
+fuzzy-if(winWidget&&!d2d,1,10000) fuzzy-if(azureSkia,1,10000) fuzzy-if(Android,1,10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1-ref.html
+#Same as scale-2a but with globalAlpha:
+fuzzy(1,2) fuzzy-if(azureSkia,1,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
+
+# Simple <img> tests
+== img-simple-1.html lime100x100-ref.html
+== img-simple-2.html lime100x100-ref.html
+fuzzy-if(skiaContent,255,350) == img-simple-3.html img-simple-3-ref.html
+== img-simple-4.html lime100x100-ref.html
+fuzzy-if(skiaContent,255,90) == img-simple-5.html img-simple-5-ref.html
+== img-simple-6.html lime100x100-ref.html
+fuzzy-if(skiaContent,255,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
+random == img-blobURI-2.html lime100x100-ref.html
+fuzzy-if(d2d,16,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
+!= img-foreignObject-embed-1-helper.svg lime100x100-ref.html
+== img-foreignObject-iframe-1a.html lime100x100-ref.html
+== img-foreignObject-iframe-1b.html lime100x100-ref.html
+!= img-foreignObject-iframe-1b-helper.svg lime100x100-ref.html
+
+== img-widthAndHeight-meet-1.html img-widthAndHeight-meet-1-ref.html
+== img-widthAndHeight-meet-2.html img-widthAndHeight-meet-2-ref.html
+== 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
+== 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
+== 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-if(skiaContent,255,10) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html
+fuzzy-if(skiaContent,255,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
+
+== 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>
+== svg-image-recursive-1a.svg svg-image-recursive-1-ref.svg
+== svg-image-recursive-1b.svg svg-image-recursive-1-ref.svg
+== svg-image-recursive-2a.svg svg-image-recursive-2-ref.svg
+== 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
+
+# test that :visited status is ignored in image documents
+# We load the images directly first, to be sure history is populated.
+# It's also good to verify that the helper images don't match lime100x100.svg
+# in non-image contexts, but for that to work, we have to reliably count on
+# :visited styles loading (asynchronously), so we test that in
+# layout/style/test/test_visited_reftests.html instead of the reftest harness.
+!= svg-image-visited-1-helper.svg about:blank
+== svg-image-visited-1.html lime100x100.svg
+!= svg-image-visited-2-helper.svg about:blank
+== svg-image-visited-2.html lime100x100.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(2,1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html
+
+# Tests for image-orientation with a viewbox and an intrinsic size:
+== image-orientation-viewbox-and-size.html?0 image-orientation-ref.html?0
+== image-orientation-viewbox-and-size.html?90 image-orientation-ref.html?90
+== image-orientation-viewbox-and-size.html?180 image-orientation-ref.html?180
+== image-orientation-viewbox-and-size.html?270 image-orientation-ref.html?270
+== image-orientation-viewbox-and-size.html?0&flip image-orientation-ref.html?0&flip
+== image-orientation-viewbox-and-size.html?90&flip image-orientation-ref.html?90&flip
+== image-orientation-viewbox-and-size.html?180&flip image-orientation-ref.html?180&flip
+== image-orientation-viewbox-and-size.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation with a viewbox and no intrinsic size:
+== image-orientation-viewbox-no-size.html?0 image-orientation-ref.html?0
+== image-orientation-viewbox-no-size.html?90 image-orientation-ref.html?90
+== image-orientation-viewbox-no-size.html?180 image-orientation-ref.html?180
+== image-orientation-viewbox-no-size.html?270 image-orientation-ref.html?270
+== image-orientation-viewbox-no-size.html?0&flip image-orientation-ref.html?0&flip
+== image-orientation-viewbox-no-size.html?90&flip image-orientation-ref.html?90&flip
+== image-orientation-viewbox-no-size.html?180&flip image-orientation-ref.html?180&flip
+== image-orientation-viewbox-no-size.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation with no viewbox and an intrinsic size:
+== image-orientation-no-viewbox-and-size.html?0 image-orientation-ref.html?0
+== image-orientation-no-viewbox-and-size.html?90 image-orientation-ref.html?90
+== image-orientation-no-viewbox-and-size.html?180 image-orientation-ref.html?180
+== image-orientation-no-viewbox-and-size.html?270 image-orientation-ref.html?270
+== image-orientation-no-viewbox-and-size.html?0&flip image-orientation-ref.html?0&flip
+== image-orientation-no-viewbox-and-size.html?90&flip image-orientation-ref.html?90&flip
+== image-orientation-no-viewbox-and-size.html?180&flip image-orientation-ref.html?180&flip
+== image-orientation-no-viewbox-and-size.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation with no viewbox and no intrinsic size:
+== image-orientation-no-viewbox-no-size.html?0 image-orientation-ref.html?0
+== image-orientation-no-viewbox-no-size.html?90 image-orientation-ref.html?90
+== image-orientation-no-viewbox-no-size.html?180 image-orientation-ref.html?180
+== image-orientation-no-viewbox-no-size.html?270 image-orientation-ref.html?270
+== image-orientation-no-viewbox-no-size.html?0&flip image-orientation-ref.html?0&flip
+== image-orientation-no-viewbox-no-size.html?90&flip image-orientation-ref.html?90&flip
+== image-orientation-no-viewbox-no-size.html?180&flip image-orientation-ref.html?180&flip
+== image-orientation-no-viewbox-no-size.html?270&flip image-orientation-ref.html?270&flip
+
+# 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-ref.html?0
+== image-orientation-viewbox-no-size.html?from-image image-orientation-ref.html?0
+
+# Sanity checks for the image-orientation tests. Ensures that the various
+# combinations of rotations and flips actually look different from each other.
+!= image-orientation-ref.html?0 image-orientation-ref.html?90
+!= image-orientation-ref.html?0 image-orientation-ref.html?180
+!= image-orientation-ref.html?0 image-orientation-ref.html?270
+!= image-orientation-ref.html?90 image-orientation-ref.html?180
+!= image-orientation-ref.html?90 image-orientation-ref.html?270
+!= image-orientation-ref.html?180 image-orientation-ref.html?270
+!= image-orientation-ref.html?0 image-orientation-ref.html?0&flip
+!= image-orientation-ref.html?90 image-orientation-ref.html?90&flip
+!= image-orientation-ref.html?180 image-orientation-ref.html?180&flip
+!= image-orientation-ref.html?270 image-orientation-ref.html?270&flip
+
+# 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 000000000..892cc0e8c
--- /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 000000000..57b516958
--- /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 000000000..32bd67b63
--- /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 000000000..4912c656d
--- /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 000000000..c0665d15d
--- /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 000000000..bb11b225b
--- /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 000000000..bb26bc035
--- /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');
+ }, false);
+ </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 000000000..ccc782446
--- /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 000000000..f0281228e
--- /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 000000000..3d7d171b5
--- /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 000000000..114a77232
--- /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 000000000..3a13e5516
--- /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 000000000..721d4fe13
--- /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 000000000..b884f4e5b
--- /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 000000000..2587877c6
--- /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 000000000..3e5c9befe
--- /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 000000000..e548c53f4
--- /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 000000000..651c29e85
--- /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 000000000..2e0708c1d
--- /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 000000000..ad657ce2a
--- /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 000000000..34cc2277d
--- /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 000000000..31d064a0a
--- /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-util.css b/layout/reftests/svg/as-image/svg-image-util.css
new file mode 100644
index 000000000..3d5a9338f
--- /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 000000000..ea8425923
--- /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-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1-helper.svg
new file mode 100644
index 000000000..02b524dc0
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1-helper.svg
@@ -0,0 +1,23 @@
+<!--
+ 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: red; }
+ ]]>
+ </style>
+
+ <!-- Note: the <a> element below links to _this document_, so it'll
+ normally be treated as visited. However, in an image context, we want to
+ ignore visitedness. -->
+ <a xlink:href="" id="foo">
+ <rect x="0" y="0" width="100" height="100" fill="orange"/>
+ </a>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1.html b/layout/reftests/svg/as-image/svg-image-visited-1.html
new file mode 100644
index 000000000..d0a6d1f35
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+ <head>
+ <title>Test for bug 641731</title>
+ <script>
+ function snapshot() {
+ document.documentElement.removeAttribute("class");
+ }
+ function delay_snapshot() {
+ setTimeout(snapshot, 100); // delay snapshot to allow time for
+ // :visited style inside the image to
+ // resolve (which it hopefully won't)
+ }
+ document.addEventListener("MozReftestInvalidate", delay_snapshot, false);
+ </script>
+ </head>
+ <body style="margin: 0">
+ <img src="svg-image-visited-1-helper.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-2-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-2-helper.svg
new file mode 100644
index 000000000..af1bdec50
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-2-helper.svg
@@ -0,0 +1,22 @@
+<!--
+ 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: red; }
+ ]]>
+ </style>
+
+ <!-- Note: the <a> element below links to _this document_, so it'll
+ normally be treated as visited. However, in an image context, we want to
+ ignore visitedness. -->
+ <a xlink:href="" id="foo">
+ <rect x="0" y="0" width="100" height="100" fill="orange"/>
+ </a>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-2.html b/layout/reftests/svg/as-image/svg-image-visited-2.html
new file mode 100644
index 000000000..e1c66698c
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-2.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+ <head>
+ <title>Test for bug 641731</title>
+ <script>
+ function snapshot() {
+ document.documentElement.removeAttribute("class");
+ }
+ function delay_snapshot() {
+ setTimeout(snapshot, 100); // delay snapshot to allow time for
+ // :visited style inside the image to
+ // resolve (which it hopefully won't)
+ }
+ document.addEventListener("MozReftestInvalidate", delay_snapshot, false);
+ </script>
+ </head>
+ <body style="margin: 0">
+ <img src="svg-image-visited-2-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 000000000..9b99258f0
--- /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 000000000..003e15017
--- /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 000000000..c6815579b
--- /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 000000000..70025dd20
--- /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 000000000..2b288e426
--- /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/white-rect-no-viewbox.svg b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg
new file mode 100644
index 000000000..76a7efd3d
--- /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 000000000..6bb59d19a
--- /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 000000000..a097f3c66
--- /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 000000000..b0cba24a6
--- /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 000000000..b4eadba92
--- /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 000000000..db0e6c06b
--- /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 000000000..81e6011e6
--- /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 000000000..de39990b9
--- /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 000000000..48f2d05ff
--- /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 000000000..75cd1d61a
--- /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 000000000..cc31a933e
--- /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 000000000..5133acb8b
--- /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-stylo.list b/layout/reftests/svg/as-image/zoom/reftest-stylo.list
new file mode 100644
index 000000000..fe8a9bd67
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/reftest-stylo.list
@@ -0,0 +1,12 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests related to SVG being used as an image, with zooming
+
+# Simple <img> tests
+fuzzy-if(skiaContent,1,408) == img-zoomIn-1.html img-zoomIn-1.html
+fuzzy-if(skiaContent,1,74) == img-zoomOut-1.html img-zoomOut-1.html
+
+# Ensure that scaled SVG images aren't fuzzy when tiled.
+== img-fuzzy-zoomOut-1.html img-fuzzy-zoomOut-1.html
+== img-fuzzy-zoomIn-1.html img-fuzzy-zoomIn-1.html
+== img-fuzzy-transform-zoomOut-1.html img-fuzzy-transform-zoomOut-1.html
+== img-fuzzy-transform-zoomIn-1.html img-fuzzy-transform-zoomIn-1.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 000000000..73eb41709
--- /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-if(skiaContent,1,408) == img-zoomIn-1.html squaredCircle-150x150-ref.html
+fuzzy-if(skiaContent,1,74) == img-zoomOut-1.html squaredCircle-50x50-ref.html
+
+# Ensure that scaled SVG images aren't fuzzy when tiled.
+== img-fuzzy-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html
+== 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 000000000..7f3b524e8
--- /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 000000000..41686f5bc
--- /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 000000000..266c9e776
--- /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>