Bug 276431 Patch 15: Reftests for svg-as-an-image. r=roc a=blocking
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 08 Sep 2010 13:40:40 -0700
changeset 52223 ec53c1b41f3c42b769d7a2522909c6e8fc9cbb6a
parent 52222 77a3ee888b8fdec271060e4af7b996ceaa5708ed
child 52224 b6a390cdb03c9d1e310292da8fe16b464890833f
push id15573
push userdholbert@mozilla.com
push dateWed, 08 Sep 2010 20:57:52 +0000
treeherdermozilla-central@ec53c1b41f3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc, blocking
bugs276431
milestone2.0b6pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 276431 Patch 15: Reftests for svg-as-an-image. r=roc a=blocking
layout/reftests/svg/image/background-image-rect-1png.html
layout/reftests/svg/image/background-image-rect-1svg.html
layout/reftests/svg/image/background-image-rect-2.html
layout/reftests/svg/image/background-simple-1.html
layout/reftests/svg/image/background-simple-2.html
layout/reftests/svg/image/background-viewBox-1.html
layout/reftests/svg/image/content-outside-viewBox-1-helper.svg
layout/reftests/svg/image/img-content-outside-viewBox-1-ref.html
layout/reftests/svg/image/img-content-outside-viewBox-1.html
layout/reftests/svg/image/img-height-meet-1-ref.html
layout/reftests/svg/image/img-height-meet-1.html
layout/reftests/svg/image/img-height-meet-2-ref.html
layout/reftests/svg/image/img-height-meet-2.html
layout/reftests/svg/image/img-height-slice-1-ref.html
layout/reftests/svg/image/img-height-slice-1.html
layout/reftests/svg/image/img-height-slice-2-ref.html
layout/reftests/svg/image/img-height-slice-2.html
layout/reftests/svg/image/img-simple-1.html
layout/reftests/svg/image/img-simple-2.html
layout/reftests/svg/image/img-simple-3.html
layout/reftests/svg/image/img-simple-4.html
layout/reftests/svg/image/img-simple-5.html
layout/reftests/svg/image/img-simple-6.html
layout/reftests/svg/image/img-simple-7.html
layout/reftests/svg/image/img-width-meet-1-ref.html
layout/reftests/svg/image/img-width-meet-1.html
layout/reftests/svg/image/img-width-meet-2-ref.html
layout/reftests/svg/image/img-width-meet-2.html
layout/reftests/svg/image/img-width-slice-1-ref.html
layout/reftests/svg/image/img-width-slice-1.html
layout/reftests/svg/image/img-width-slice-2-ref.html
layout/reftests/svg/image/img-width-slice-2.html
layout/reftests/svg/image/img-widthAndHeight-meet-1-ref.html
layout/reftests/svg/image/img-widthAndHeight-meet-1.html
layout/reftests/svg/image/img-widthAndHeight-meet-2-ref.html
layout/reftests/svg/image/img-widthAndHeight-meet-2.html
layout/reftests/svg/image/img-widthAndHeight-slice-1-ref.html
layout/reftests/svg/image/img-widthAndHeight-slice-1.html
layout/reftests/svg/image/img-widthAndHeight-slice-2-ref.html
layout/reftests/svg/image/img-widthAndHeight-slice-2.html
layout/reftests/svg/image/lime100x100-ref.html
layout/reftests/svg/image/lime100x100.png
layout/reftests/svg/image/lime100x100.svg
layout/reftests/svg/image/lime200x100.svg
layout/reftests/svg/image/lime200x200.svg
layout/reftests/svg/image/limeInRed100x100-viewBox.svg
layout/reftests/svg/image/limeInRed100x100.png
layout/reftests/svg/image/limeInRed100x100.svg
layout/reftests/svg/image/list-simple-1-ref.html
layout/reftests/svg/image/list-simple-1.html
layout/reftests/svg/image/reftest.list
layout/reftests/svg/image/svg-image-util.css
layout/reftests/svg/image/svg-image-util.js
layout/reftests/svg/image/zoom/img-zoomIn-1.html
layout/reftests/svg/image/zoom/img-zoomOut-1.html
layout/reftests/svg/image/zoom/reftest.list
layout/reftests/svg/image/zoom/squaredCircle-150x150-ref.html
layout/reftests/svg/image/zoom/squaredCircle-50x50-ref.html
layout/reftests/svg/image/zoom/squaredCircle.svg
layout/reftests/svg/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/background-simple-1.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div style="height: 100px; width: 100px;
+              background-image: url('lime100x100.svg')">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-meet-1-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-meet-1.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-meet-2-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-meet-2.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-slice-1-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-slice-1.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-slice-2-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-height-slice-2.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime100x100.svg">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-2.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="limeInRed100x100-viewBox.svg">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-3.html
@@ -0,0 +1,9 @@
+<html>
+<body>
+  <!-- Note: Despite the large width here, the SVG content won't scale, because
+       it hasn't provided a viewbox. It renders at a 100% zoom-level (just as
+       it would in an <embed> tag, and just as it would if we viewed it in a
+       100x600-sized browser window. -->
+  <img src="lime100x100.svg" width="600px">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-4.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime100x100.svg" height="100px" width="100px">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-5.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime100x100.svg" width="150px" height="600px">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-6.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <img src="lime200x200.svg" width="100px">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-simple-7.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+  <!-- Like img-simple-6.html, but with an explicit 'height' on the <img> -->
+  <img src="lime200x100.svg" width="100px" height="100px">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-meet-1-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-meet-1.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-meet-2-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-meet-2.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-slice-1-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-slice-1.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-slice-2-ref.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-width-slice-2.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-meet-1-ref.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-meet-1.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-meet-2-ref.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-meet-2.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "meet"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-slice-1-ref.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-slice-1.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 20, 40],
+        height :  "20px",
+        width :   "20px",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-slice-2-ref.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "embed");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/img-widthAndHeight-slice-2.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+  <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+  <script src="svg-image-util.js"></script>
+  <script>
+    function main() {
+      var svgParams = {
+        viewBox:  [0, 0, 40, 20],
+        height :  "2em",
+        width :   "2em",
+        meetOrSlice: "slice"
+      };
+
+      appendSVGArrayWithParams(svgParams, "img");
+      document.documentElement.removeAttribute("class");
+    }
+  </script>
+</head>
+<body onload="main()">
+  <!-- Body gets populated by script -->
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/lime100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background: lime"></div>
+</body>
+</html>
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c9bb37594320c6e6a094d52548cdcd4e046c2a4b
GIT binary patch
literal 232
zc%17D@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3jKx9jP7LeL$-D$|7J0fjhE&{o
zdy$csfq~=jhUWV73C$Dy4n@uMDOt9Sp`(F8P(Xo+$;F|8gPv>-0Y)f$-}cwOOvf^6
SU*!N@%i!ti=d#Wzp$P!tlsJ6=
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d65c62635cfe4136eb1c126437ae2f98b7f58933
GIT binary patch
literal 292
zc%17D@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3jKx9jP7LeL$-D$|*pj^6T^Rm@
z;DWu&Cj&(|3p^r=f!eQwFr$;k><XaZc25__kcwMx?;hl2P~c%XIOj(F>5ZHd6*lv7
zNIvp5h`qYhP*<5jNx^}IrK5pCP(XnRlf7<Ryv!v3d5=nSI<&nJl1wf{u^S{91sEA&
mre0j|=yj+xe)}5!++kEvW;<GL;V=p41qM%7KbLh*2~7YcN=erM
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/reftest.list
@@ -0,0 +1,44 @@
+# Tests related to SVG being used as an image
+
+# zoom/
+include zoom/reftest.list
+
+# Trivial background-image tests
+== 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
+
+# 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
+
+# Simple <img> tests
+== img-simple-1.html  lime100x100-ref.html
+== img-simple-2.html  lime100x100-ref.html
+== img-simple-3.html  lime100x100-ref.html
+== img-simple-4.html  lime100x100-ref.html
+== img-simple-5.html  lime100x100-ref.html
+== img-simple-6.html  lime100x100-ref.html
+== img-simple-7.html  lime100x100-ref.html
+
+== img-content-outside-viewBox-1.html img-content-outside-viewBox-1-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
+
+== list-simple-1.html list-simple-1-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/svg-image-util.css
@@ -0,0 +1,3 @@
+body   { margin: 0px; }
+img    { background: purple; border: 5px solid green}
+embed  { background: purple; border: 5px solid green}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/svg-image-util.js
@@ -0,0 +1,169 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is SVG Testing Code.
+ *
+ * The Initial Developer of the Original Code is
+ * the Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2010
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Daniel Holbert <dholbert@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+// 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.)
+ */
+function generateSVGDataURI(aViewboxArr, aWidth, aHeight,
+                            aAlign, aMeetOrSlice) {
+  // prefix
+  var datauri = "data:image/svg+xml,"
+  // Begin the SVG tag
+  datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22";
+
+  // Append the custom chunk from our params
+  datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+                                       aAlign, aMeetOrSlice);
+
+  // Put closing leftbracket on SVG tag
+  datauri += "%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) {
+        var curVal = aViewboxArr[i];
+        str += curVal + "%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) {
+  var rootNode = document.getElementsByTagName("body")[0];
+
+  // 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 hostWidth = hostNodeWidthVals[i];
+    for (var j = 0; j < hostNodeHeightVals.length; j++) {
+      var hostHeight = hostNodeHeightVals[j];
+      for (var k = 0; k < ALIGN_VALS.length; k++) {
+        var alignVal = ALIGN_VALS[k];
+
+        // Generate the Data URI
+        var uri = generateSVGDataURI(aSVGParams.viewBox,
+                                     aSVGParams.width, aSVGParams.height,
+                                     alignVal,
+                                     aSVGParams.meetOrSlice);
+
+        // Generate & append the host node element
+        var hostNode = generateHostNode(aHostNodeTagName, uri,
+                                        hostWidth, hostHeight);
+        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"));
+        }
+      }
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/zoom/img-zoomIn-1.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="1.5">
+<body>
+  <img src="squaredCircle.svg">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/zoom/img-zoomOut-1.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="0.5">
+<body>
+  <img src="squaredCircle.svg">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/zoom/reftest.list
@@ -0,0 +1,6 @@
+# Tests related to SVG being used as an image, with zooming
+
+# Simple <img> tests
+== img-zoomIn-1.html   squaredCircle-150x150-ref.html
+
+== img-zoomOut-1.html  squaredCircle-50x50-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/zoom/squaredCircle-150x150-ref.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="1.5">
+<body>
+  <embed src="squaredCircle.svg">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/image/zoom/squaredCircle-50x50-ref.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="0.5">
+<body>
+  <embed src="squaredCircle.svg">
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/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>
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -1,12 +1,15 @@
 
 # bugs/
 include bugs/reftest.list
 
+# svg-as-an-image tests
+include image/reftest.list
+
 # sizing tests
 include sizing/reftest.list
 
 include filters/reftest.list
 
 # smil / animation tests
 include smil/reftest.list