summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/image
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/svg/image
parentInitial commit. (diff)
downloadthunderbird-upstream.tar.xz
thunderbird-upstream.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/image')
-rw-r--r--layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg12
-rw-r--r--layout/reftests/svg/image/blueRect10x10-viewBox.svg7
-rw-r--r--layout/reftests/svg/image/blueRect10x10.pngbin0 -> 125 bytes
-rw-r--r--layout/reftests/svg/image/blueRect10x10.svg6
-rw-r--r--layout/reftests/svg/image/image-fill-01.svg13
-rw-r--r--layout/reftests/svg/image/image-fill-opacity-ref.html4
-rw-r--r--layout/reftests/svg/image/image-fill-opacity.html4
-rw-r--r--layout/reftests/svg/image/image-filter-01-ref.svg9
-rw-r--r--layout/reftests/svg/image/image-filter-01.svg21
-rw-r--r--layout/reftests/svg/image/image-load-01.svg20
-rw-r--r--layout/reftests/svg/image/image-opacity-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-opacity-01.svg6
-rw-r--r--layout/reftests/svg/image/image-opacity-02-ref.svg6
-rw-r--r--layout/reftests/svg/image/image-opacity-02.svg7
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg9
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg12
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg9
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg12
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-03.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg14
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-04.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-05.svg41
-rw-r--r--layout/reftests/svg/image/image-rotate-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-rotate-01.svg6
-rw-r--r--layout/reftests/svg/image/image-rotate-02-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-rotate-02a.svg6
-rw-r--r--layout/reftests/svg/image/image-rotate-02b.svg7
-rw-r--r--layout/reftests/svg/image/image-scaling-01.svg26
-rw-r--r--layout/reftests/svg/image/image-scaling-02.svg26
-rw-r--r--layout/reftests/svg/image/image-scaling-03.svg19
-rw-r--r--layout/reftests/svg/image/image-svg-inline-01.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html8
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html15
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html8
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html15
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html17
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html18
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html18
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html17
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html17
-rw-r--r--layout/reftests/svg/image/image-translate-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-translate-01.svg6
-rw-r--r--layout/reftests/svg/image/image-with-following-content.svg12
-rw-r--r--layout/reftests/svg/image/image-with-mask-and-clipPath.svg13
-rw-r--r--layout/reftests/svg/image/image-x-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-x-01.svg6
-rw-r--r--layout/reftests/svg/image/image-xy-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-xy-01.svg7
-rw-r--r--layout/reftests/svg/image/image-y-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-y-01.svg6
-rw-r--r--layout/reftests/svg/image/image-zoom-02-ref.svg4
-rw-r--r--layout/reftests/svg/image/image-zoom-02.svg7
-rw-r--r--layout/reftests/svg/image/imported-image-01.svg12
-rw-r--r--layout/reftests/svg/image/imported-image-02.svg17
-rw-r--r--layout/reftests/svg/image/imported-image-ref.svg6
-rw-r--r--layout/reftests/svg/image/lime-no-dimensions.svg7
-rw-r--r--layout/reftests/svg/image/lime100x100.pngbin0 -> 232 bytes
-rw-r--r--layout/reftests/svg/image/lime100x100.svg3
-rw-r--r--layout/reftests/svg/image/reftest.list45
-rw-r--r--layout/reftests/svg/image/sprite.pngbin0 -> 5082 bytes
-rw-r--r--layout/reftests/svg/image/sprite.svg5
-rw-r--r--layout/reftests/svg/image/util.js173
70 files changed, 960 insertions, 0 deletions
diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg
new file mode 100644
index 0000000000..9168e86355
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg
@@ -0,0 +1,12 @@
+<!-- Helper SVG file used by some reftests -->
+<!-- This file has an animated preserveAspectRatio value on the root node, so
+ any uses of this file via <image preserveAspectRatio="defer..."> should
+ end up using our *animated* preserveAspectRatio value. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
+ viewBox="0 0 10 10" preserveAspectRatio="xMaxYMax">
+ <set attributeName="preserveAspectRatio" to="none"/>
+
+ <rect x="0" y="0" width="10" height="10" fill="blue"/>
+ <rect x="1" y="1" width="8" height="8" fill="lightblue"/>
+ <rect x="1" y="1" width="8" height="4" fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox.svg b/layout/reftests/svg/image/blueRect10x10-viewBox.svg
new file mode 100644
index 0000000000..d5bb444a94
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10-viewBox.svg
@@ -0,0 +1,7 @@
+<!-- Helper SVG file used by some reftests -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
+ viewBox="0 0 10 10">
+ <rect x="0" y="0" width="10" height="10" fill="blue"/>
+ <rect x="1" y="1" width="8" height="8" fill="lightblue"/>
+ <rect x="1" y="1" width="8" height="4" fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10.png b/layout/reftests/svg/image/blueRect10x10.png
new file mode 100644
index 0000000000..722e97c1eb
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10.png
Binary files differ
diff --git a/layout/reftests/svg/image/blueRect10x10.svg b/layout/reftests/svg/image/blueRect10x10.svg
new file mode 100644
index 0000000000..65e4014467
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10.svg
@@ -0,0 +1,6 @@
+<!-- Helper SVG file used by some reftests -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root">
+ <rect x="0" y="0" width="10" height="10" fill="blue"/>
+ <rect x="1" y="1" width="8" height="8" fill="lightblue"/>
+ <rect x="1" y="1" width="8" height="4" fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-fill-01.svg b/layout/reftests/svg/image/image-fill-01.svg
new file mode 100644
index 0000000000..832be6c048
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-01.svg
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase to ensure that fill is ignored for images</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="64" height="64" fill="red"/>
+ <image fill="none" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII="/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-fill-opacity-ref.html b/layout/reftests/svg/image/image-fill-opacity-ref.html
new file mode 100644
index 0000000000..92b1508cac
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-opacity-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<svg height=400 width=400>
+ <rect height=20 width=20 x=152 y=138 fill=lime></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/image/image-fill-opacity.html b/layout/reftests/svg/image/image-fill-opacity.html
new file mode 100644
index 0000000000..e0b5f31e0f
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-opacity.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<svg height=400 width=400>
+ <image fill-opacity=0 height=20 width=20 x=152 y=138 href=lime100x100.png></image>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/image/image-filter-01-ref.svg b/layout/reftests/svg/image/image-filter-01-ref.svg
new file mode 100644
index 0000000000..66ad638ebf
--- /dev/null
+++ b/layout/reftests/svg/image/image-filter-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g transform="translate(2, 2)">
+ <image x="0" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="0" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-filter-01.svg b/layout/reftests/svg/image/image-filter-01.svg
new file mode 100644
index 0000000000..6ec5a576dc
--- /dev/null
+++ b/layout/reftests/svg/image/image-filter-01.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- This test confirms that images with filters get drawn.
+ (This test uses a no-op filter, for simplicity).
+ -->
+ <style>
+ image { filter: url(#noop); }
+ </style>
+ <defs>
+ <filter id="noop" x="0%" y="0%" width="100%" height="100%">
+ <feConvolveMatrix order="1" kernelMatrix="1"/>
+ </filter>
+ </defs>
+
+ <g transform="translate(2, 2)">
+ <image x="0" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="0" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-load-01.svg b/layout/reftests/svg/image/image-load-01.svg
new file mode 100644
index 0000000000..1b8d4264fc
--- /dev/null
+++ b/layout/reftests/svg/image/image-load-01.svg
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase to ensure that images load when they don't have frames</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="64" height="64" fill="red"/>
+
+ <script>
+ var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+ img.setAttribute("width", "64");
+ img.setAttribute("height", "64");
+ document.querySelector("svg").appendChild(img);
+ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII=");
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-01-ref.svg b/layout/reftests/svg/image/image-opacity-01-ref.svg
new file mode 100644
index 0000000000..63a3f60546
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ style="opacity: 0.3"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-01.svg b/layout/reftests/svg/image/image-opacity-01.svg
new file mode 100644
index 0000000000..9c589d4bfa
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "opacity" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ style="opacity: 0.3"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-02-ref.svg b/layout/reftests/svg/image/image-opacity-02-ref.svg
new file mode 100644
index 0000000000..548d1d54f1
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-02-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g style="opacity: 0.3">
+ <use xlink:href="blueRect10x10.svg#root"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-02.svg b/layout/reftests/svg/image/image-opacity-02.svg
new file mode 100644
index 0000000000..5fd8598d0f
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-02.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure "opacity" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g style="opacity: 0.3">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg
new file mode 100644
index 0000000000..d702a798c8
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg
@@ -0,0 +1,13 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is less than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="image-rendering: -moz-crisp-edges">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10.png", 20, 40);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg
new file mode 100644
index 0000000000..a0405b3ea9
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 20, 40);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg
new file mode 100644
index 0000000000..8022671653
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg
@@ -0,0 +1,12 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is less than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10-viewBox.svg", 20, 40);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg
new file mode 100644
index 0000000000..14b9ff8fae
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg
@@ -0,0 +1,13 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is greater than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="image-rendering: -moz-crisp-edges">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10.png", 40, 20);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg
new file mode 100644
index 0000000000..5ebaa19b03
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg
new file mode 100644
index 0000000000..cbe5bc0bcb
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg
@@ -0,0 +1,12 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is greater than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg
new file mode 100644
index 0000000000..101ad403b0
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // My corresponding testcase uses an image with preserveAspectRatio
+ // set to "none" via SMIL animation. So the testcase's final bonus
+ // "defer" grid-entry will end up rendering with that "none" value.
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
+ "none");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg
new file mode 100644
index 0000000000..7bcd0d35bf
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // This image has a preserveAspectRatio attribute (animated into
+ // existence), so the bonus image element will use that value
+ // because of the "defer" in its preserveAspectRatio.
+ var grid = generateImageGrid("blueRect10x10-viewBox-animPAR.svg", 40, 20,
+ "defer xMinYMin");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg
new file mode 100644
index 0000000000..66e8dcf292
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // My corresponding testcase uses an image with no preserveAspectRatio on
+ // its root node. So, the testcase's final bonus "defer" grid-entry will
+ // fall back on the preserveAspectRatio value that comes along with
+ // "defer" (which is "xMinYMin slice" in this case).
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
+ "xMinYMin slice");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg
new file mode 100644
index 0000000000..58c8f2b305
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // This image has no preserveAspectRatio attribute, so in the bonus
+ // image element, we'll actually apply the value that comes along with
+ // "defer" ("xMinYMin slice").
+ var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20,
+ "defer xMinYMin slice");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-05.svg b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg
new file mode 100644
index 0000000000..11fadbcb86
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+
+ <title>Testing that dynamic changes to preserveAspectRatio cause a reflow</title>
+ <script>
+<![CDATA[
+
+function doTest() {
+ var i1 = document.getElementById("i1");
+ i1.preserveAspectRatio.baseVal.align =
+ SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
+ var i2 = document.getElementById("i2");
+ i2.preserveAspectRatio.baseVal.align =
+ SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE;
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+]]>
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- this image is a 1x1 red gif -->
+ <image id="i1" preserveAspectRatio="none" x="50" y="50" width="200" height="300"
+ style="image-rendering: optimizeSpeed;"
+ xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%FF%00%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"/>
+ <!-- exactly cover the image if it had preserveAspectRatio="xMidYMid" -->
+ <rect x="50" y="100" width="200" height="200" fill="lime"/>
+
+ <rect x="300" y="100" width="200" height="300" fill="red"/>
+ <!-- and this one is a 1x1 lime PNG -->
+ <!-- which would cover the red rect if it had preserveAspectRatio="none" -->
+ <image id="i2" x="300" y="100" width="200" height="300" preserveAspectRatio="xMidYMid" xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" />
+
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-01-ref.svg b/layout/reftests/svg/image/image-rotate-01-ref.svg
new file mode 100644
index 0000000000..bcda450606
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ transform="rotate(90 50 50)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-01.svg b/layout/reftests/svg/image/image-rotate-01.svg
new file mode 100644
index 0000000000..9a1600f9c2
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "rotate" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ transform="rotate(90 50 50)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02-ref.svg b/layout/reftests/svg/image/image-rotate-02-ref.svg
new file mode 100644
index 0000000000..e807ff2f49
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ transform="translate(60, 80) rotate(180 40 40)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02a.svg b/layout/reftests/svg/image/image-rotate-02a.svg
new file mode 100644
index 0000000000..b04035037f
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02a.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "rotate" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ transform="translate(60, 80) rotate(180 40 40)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02b.svg b/layout/reftests/svg/image/image-rotate-02b.svg
new file mode 100644
index 0000000000..69bef2794c
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02b.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure parent's "rotate" value is applied on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g transform="translate(60, 80) rotate(180 40 40)">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-01.svg b/layout/reftests/svg/image/image-scaling-01.svg
new file mode 100644
index 0000000000..449101a4d6
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-01.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780
+
+ Test related to bug 421780; make sure that 1-pixel, single-colour images
+ are correctly scaled to the right size.
+
+ This test makes sure that images aren't sized too big; it takes a 100%
+ width lime rect, overlaid with a 183x183 width stretched red image,
+ overlaid with a 183x183 lime rect.
+
+ 183 in particular is used because 183*183 > 2^16, and we can easily run
+ into double-scaling bugs that will overflow in pixman.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title> Ensure images aren't scaled too big </title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <image width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+ <rect width="183" height="183" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-02.svg b/layout/reftests/svg/image/image-scaling-02.svg
new file mode 100644
index 0000000000..302e46c96f
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-02.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780
+
+ Test related to bug 421780; make sure that 1-pixel, single-colour images
+ are correctly scaled to the right size.
+
+ This test makes sure that images aren't sized too small; it takes a 100%
+ width lime rect, overlaid with a 183x183 width red rect, overlaid with a
+ 183x183 stretched lime image.
+
+ 183 in particular is used because 183*183 > 2^16, and we can easily run
+ into double-scaling bugs that will overflow in pixman.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title> Ensure images aren't scaled too small </title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="183" height="183" fill="red"/>
+ <image style="image-rendering: -moz-crisp-edges" width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAABGdBTUEAALGPC%2FxhBQAAAAxJREFUGFdjYPjPAAACAgEA0dNGRAAAAABJRU5ErkJggg%3D%3D"/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-03.svg b/layout/reftests/svg/image/image-scaling-03.svg
new file mode 100644
index 0000000000..5a5ca8c930
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-03.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1776098
+
+ Make sure small scaled vector images display.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title> Ensure small vector images display</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="98" height="98" fill="red"/>
+ <image transform="scale(200)" width="0.5" height="0.5" href="lime100x100.svg"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/image/image-svg-inline-01.html b/layout/reftests/svg/image/image-svg-inline-01.html
new file mode 100644
index 0000000000..8fe8aac39f
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-01.html
@@ -0,0 +1,16 @@
+<html>
+ <!-- Test to make sure svg:image is painted at correct position when its
+ containing SVG is included inline in HTML at some non-(0,0) position. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 60px; margin-top: 80px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- 1x1 lime PNG, scaled to 100x100 -->
+ <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html
new file mode 100644
index 0000000000..669241ab73
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="15" height="30" fill="lime"/>
+ <rect x="15" y="0" width="15" height="30" fill="blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html
new file mode 100644
index 0000000000..821147f9af
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html
new file mode 100644
index 0000000000..0b68b7d888
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html
@@ -0,0 +1,15 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0; image-rendering: -moz-crisp-edges">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html
new file mode 100644
index 0000000000..1fe71d0904
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="5" height="10" fill="lime"/>
+ <rect x="5" y="0" width="5" height="10" fill="blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html
new file mode 100644
index 0000000000..d1f7bc35a4
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html
new file mode 100644
index 0000000000..dcb118a7df
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html
@@ -0,0 +1,15 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0; image-rendering: -moz-crisp-edges">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html
new file mode 100644
index 0000000000..ef187a5a57
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <!-- SVG with no intrinsic dimensions -->
+ <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html
new file mode 100644
index 0000000000..419f3168ca
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- 1x1 lime PNG, scaled to 100x100 -->
+ <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html
new file mode 100644
index 0000000000..9d273c91ec
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html
@@ -0,0 +1,18 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <!-- SVG with an intrinsic size of 100px x 100px; percentage size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html
new file mode 100644
index 0000000000..921fa4ec2f
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html
@@ -0,0 +1,18 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <!-- SVG with an intrinsic size of 100px x 100px; explicit size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100px" height="100px"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html
new file mode 100644
index 0000000000..6532c1576a
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- SVG with no intrinsic dimensions -->
+ <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html
new file mode 100644
index 0000000000..c45f016015
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- 1x1 lime PNG, scaled to 100x100 -->
+ <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html
new file mode 100644
index 0000000000..5c88134c03
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- SVG with an intrinsic size of 100px x 100px; percentage size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html
new file mode 100644
index 0000000000..ad24ce81e5
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- SVG with an intrinsic size of 100px x 100px; explicit size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100px" height="100px"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-translate-01-ref.svg b/layout/reftests/svg/image/image-translate-01-ref.svg
new file mode 100644
index 0000000000..161aaa3f2e
--- /dev/null
+++ b/layout/reftests/svg/image/image-translate-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ transform="translate(60, 80)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-translate-01.svg b/layout/reftests/svg/image/image-translate-01.svg
new file mode 100644
index 0000000000..29311478bf
--- /dev/null
+++ b/layout/reftests/svg/image/image-translate-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure transform value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ transform="translate(60, 80)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-with-following-content.svg b/layout/reftests/svg/image/image-with-following-content.svg
new file mode 100644
index 0000000000..b3f6d98a79
--- /dev/null
+++ b/layout/reftests/svg/image/image-with-following-content.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+
+ <rect width="100%" height="100%" fill="lime" />
+
+ <rect width="220" height="220" fill="red" />
+
+ <svg x="10" y="10" width="200" height="200">
+ <image width="200" height="200" href="blueRect10x10.png"/>
+ </svg>
+
+ <rect width="220" height="220" fill="lime" />
+</svg>
diff --git a/layout/reftests/svg/image/image-with-mask-and-clipPath.svg b/layout/reftests/svg/image/image-with-mask-and-clipPath.svg
new file mode 100644
index 0000000000..d010eca527
--- /dev/null
+++ b/layout/reftests/svg/image/image-with-mask-and-clipPath.svg
@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red"/>
+ <g transform="translate(80 30)">
+ <clipPath id="c" clipPathUnits="userSpaceOnUse">
+ <rect x="-80" y="-30" width="100" height="100"/>
+ </clipPath>
+ <mask id="m" x="-80" y="-30" width="100" height="100">
+ <rect x="-80" y="-30" width="100" height="100" fill="white"/>
+ </mask>
+ <image x="-80" y="-30" width="100" height="100" href="lime100x100.png" mask="url(#m)" clip-path="url(#c)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-x-01-ref.svg b/layout/reftests/svg/image/image-x-01-ref.svg
new file mode 100644
index 0000000000..4c69676845
--- /dev/null
+++ b/layout/reftests/svg/image/image-x-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ x="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-x-01.svg b/layout/reftests/svg/image/image-x-01.svg
new file mode 100644
index 0000000000..db3be2af38
--- /dev/null
+++ b/layout/reftests/svg/image/image-x-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "x" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ x="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-xy-01-ref.svg b/layout/reftests/svg/image/image-xy-01-ref.svg
new file mode 100644
index 0000000000..2821f93246
--- /dev/null
+++ b/layout/reftests/svg/image/image-xy-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ x="123" y="234"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-xy-01.svg b/layout/reftests/svg/image/image-xy-01.svg
new file mode 100644
index 0000000000..1afa32a60d
--- /dev/null
+++ b/layout/reftests/svg/image/image-xy-01.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure "x" and "y" value are simultaneously applied correctly
+ on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ x="123" y="234"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-y-01-ref.svg b/layout/reftests/svg/image/image-y-01-ref.svg
new file mode 100644
index 0000000000..9a608e8dbd
--- /dev/null
+++ b/layout/reftests/svg/image/image-y-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ y="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-y-01.svg b/layout/reftests/svg/image/image-y-01.svg
new file mode 100644
index 0000000000..2c8d04fd88
--- /dev/null
+++ b/layout/reftests/svg/image/image-y-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "y" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ y="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-zoom-02-ref.svg b/layout/reftests/svg/image/image-zoom-02-ref.svg
new file mode 100644
index 0000000000..fca1d5703e
--- /dev/null
+++ b/layout/reftests/svg/image/image-zoom-02-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image width="15" height="15" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-zoom-02.svg b/layout/reftests/svg/image/image-zoom-02.svg
new file mode 100644
index 0000000000..f426dfca2a
--- /dev/null
+++ b/layout/reftests/svg/image/image-zoom-02.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ reftest-zoom="1.5" width="10" height="10">
+ <title>Testcase to ensure that full-page-zoom will zoom raster
+ images the right amount.</title>
+ <image width="10" height="10" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-01.svg b/layout/reftests/svg/image/imported-image-01.svg
new file mode 100644
index 0000000000..b7ef5d5acf
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-01.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script>
+ <![CDATA[
+ var doc = new DOMParser().parseFromString('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="10" height="10" xlink:href="blueRect10x10.png"/></svg>', 'text/xml');
+ document.documentElement.appendChild(doc.documentElement.firstChild);
+ ]]>
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-02.svg b/layout/reftests/svg/image/imported-image-02.svg
new file mode 100644
index 0000000000..7e51025795
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-02.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script>
+ <![CDATA[
+ var doc = document.implementation.createDocument("", "", null);
+ var img = doc.createElementNS("http://www.w3.org/2000/svg", "image");
+ img.setAttribute("width", "10");
+ img.setAttribute("height", "10");
+ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
+ "blueRect10x10.png");
+ document.documentElement.appendChild(img);
+ ]]>
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-ref.svg b/layout/reftests/svg/image/imported-image-ref.svg
new file mode 100644
index 0000000000..4b0d1accc9
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-ref.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image width="10" height="10" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/lime-no-dimensions.svg b/layout/reftests/svg/image/lime-no-dimensions.svg
new file mode 100644
index 0000000000..1723cb66c0
--- /dev/null
+++ b/layout/reftests/svg/image/lime-no-dimensions.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="shape-rendering: crispEdges">
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/image/lime100x100.png b/layout/reftests/svg/image/lime100x100.png
new file mode 100644
index 0000000000..c9bb375943
--- /dev/null
+++ b/layout/reftests/svg/image/lime100x100.png
Binary files differ
diff --git a/layout/reftests/svg/image/lime100x100.svg b/layout/reftests/svg/image/lime100x100.svg
new file mode 100644
index 0000000000..bba9d34236
--- /dev/null
+++ b/layout/reftests/svg/image/lime100x100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
+ <rect width="100px" height="100px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/svg/image/reftest.list b/layout/reftests/svg/image/reftest.list
new file mode 100644
index 0000000000..408fa954e2
--- /dev/null
+++ b/layout/reftests/svg/image/reftest.list
@@ -0,0 +1,45 @@
+# Tests of the SVG <image> element
+
+== image-fill-01.svg ../pass.svg
+== image-filter-01.svg image-filter-01-ref.svg
+== image-load-01.svg ../pass.svg
+fuzzy(0-4,0-110) == image-opacity-01.svg image-opacity-01-ref.svg # Bug 779514 for Android
+fuzzy(0-1,0-100) == image-opacity-02.svg image-opacity-02-ref.svg # Bug 776039 for Android
+== image-rotate-01.svg image-rotate-01-ref.svg
+== image-rotate-02a.svg image-rotate-02-ref.svg
+== image-rotate-02b.svg image-rotate-02-ref.svg
+== image-scaling-01.svg ../pass.svg
+== image-scaling-02.svg ../pass.svg
+== image-scaling-03.svg ../pass.svg
+== image-svg-inline-01.html ../pass.svg
+== image-svg-inline-zoom-in-01a.html ../pass.svg
+== image-svg-inline-zoom-in-01b.html ../pass.svg
+== image-svg-inline-zoom-in-01c.html ../pass.svg
+== image-svg-inline-zoom-in-01d.html ../pass.svg
+== image-svg-inline-zoom-out-01a.html ../pass.svg
+== image-svg-inline-zoom-out-01b.html ../pass.svg
+== image-svg-inline-zoom-out-01c.html ../pass.svg
+== image-svg-inline-zoom-out-01d.html ../pass.svg
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-in-01a.html image-svg-inline-sprite-zoom-in-01-ref.html
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-in-01b.html image-svg-inline-sprite-zoom-in-01-ref.html
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-out-01a.html image-svg-inline-sprite-zoom-out-01-ref.html
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-out-01b.html image-svg-inline-sprite-zoom-out-01-ref.html
+== image-translate-01.svg image-translate-01-ref.svg
+== image-with-following-content.svg ../pass.svg
+== image-with-mask-and-clipPath.svg ../pass.svg
+== image-x-01.svg image-x-01-ref.svg
+== image-xy-01.svg image-xy-01-ref.svg
+== image-y-01.svg image-y-01-ref.svg
+fails-if(useDrawSnapshot) == image-zoom-02.svg image-zoom-02-ref.svg
+== imported-image-01.svg imported-image-ref.svg
+== imported-image-02.svg imported-image-ref.svg
+== image-fill-opacity.html image-fill-opacity-ref.html
+
+# Tests for <image> with preserveAspectRatio
+fuzzy(0-57,0-352) == image-preserveAspectRatio-01-raster.svg image-preserveAspectRatio-01-ref.svg
+fuzzy(0-57,0-352) == image-preserveAspectRatio-01-svg.svg image-preserveAspectRatio-01-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-02-raster.svg image-preserveAspectRatio-02-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-02-svg.svg image-preserveAspectRatio-02-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-03.svg image-preserveAspectRatio-03-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-04.svg image-preserveAspectRatio-04-ref.svg
+== image-preserveAspectRatio-05.svg ../pass.svg
diff --git a/layout/reftests/svg/image/sprite.png b/layout/reftests/svg/image/sprite.png
new file mode 100644
index 0000000000..830eb77731
--- /dev/null
+++ b/layout/reftests/svg/image/sprite.png
Binary files differ
diff --git a/layout/reftests/svg/image/sprite.svg b/layout/reftests/svg/image/sprite.svg
new file mode 100644
index 0000000000..2ec702dfb2
--- /dev/null
+++ b/layout/reftests/svg/image/sprite.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" style="shape-rendering: crispEdges">
+<rect x="0" y="0" width="200" height="200" fill="red"/>
+<rect x="-1" y="99" width="11" height="22" fill="lime"/>
+<rect x="10" y="99" width="11" height="22" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/image/util.js b/layout/reftests/svg/image/util.js
new file mode 100644
index 0000000000..144edd356a
--- /dev/null
+++ b/layout/reftests/svg/image/util.js
@@ -0,0 +1,173 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// The possible values of the "align" component of preserveAspectRatio.
+const ALIGN_VALS = ["none",
+ "xMinYMin", "xMinYMid", "xMinYMax",
+ "xMidYMin", "xMidYMid", "xMidYMax",
+ "xMaxYMin", "xMaxYMid", "xMaxYMax"];
+
+// The possible values of the "meetOrSlice" component of preserveAspectRatio.
+const MEETORSLICE_VALS = [ "meet", "slice" ];
+
+const SVGNS = "http://www.w3.org/2000/svg";
+const XLINKNS = "http://www.w3.org/1999/xlink";
+
+// This is the separation between the x & y values of each <image> in a
+// generated grid.
+const IMAGE_OFFSET = 50;
+
+function generateBorderRect(aX, aY, aWidth, aHeight) {
+ var rect = document.createElementNS(SVGNS, "rect");
+ rect.setAttribute("x", aX);
+ rect.setAttribute("y", aY);
+ rect.setAttribute("width", aWidth);
+ rect.setAttribute("height", aHeight);
+ rect.setAttribute("fill", "none");
+ rect.setAttribute("stroke", "black");
+ rect.setAttribute("stroke-width", "2");
+ rect.setAttribute("stroke-dasharray", "3 2");
+ return rect;
+}
+
+// Returns an SVG <image> element with the given xlink:href, width, height,
+// and preserveAspectRatio=[aAlign aMeetOrSlice] attributes
+function generateImageElementForParams(aX, aY, aWidth, aHeight,
+ aHref, aAlign, aMeetOrSlice) {
+ var image = document.createElementNS(SVGNS, "image");
+ image.setAttribute("x", aX);
+ image.setAttribute("y", aY);
+ image.setAttribute("width", aWidth);
+ image.setAttribute("height", aHeight);
+ image.setAttributeNS(XLINKNS, "href", aHref);
+ image.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice);
+ return image;
+}
+
+// Returns a <g> element filled with a grid of <image> elements which each
+// have the specified aWidth & aHeight and which use all possible values of
+// preserveAspectRatio.
+//
+// The final "aBonusPARVal" argument (if specified) is used as the
+// preserveAspectRatio value on a bonus <image> element, added at the end.
+function generateImageGrid(aHref, aWidth, aHeight, aBonusPARVal) {
+ var grid = document.createElementNS(SVGNS, "g");
+ var y = 0;
+ var x = 0;
+ for (var i = 0; i < ALIGN_VALS.length; i++) {
+ // Jump to next line of grid, for every other "i" value.
+ // (every fourth entry)
+ if (i && i % 2 == 0) {
+ y += IMAGE_OFFSET;
+ x = 0;
+ }
+ var alignVal = ALIGN_VALS[i];
+ for (var j = 0; j < MEETORSLICE_VALS.length; j++) {
+ var meetorsliceVal = MEETORSLICE_VALS[j];
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+ var image = generateImageElementForParams(x, y, aWidth, aHeight,
+ aHref, alignVal,
+ meetorsliceVal);
+ grid.appendChild(border);
+ grid.appendChild(image);
+ x += IMAGE_OFFSET;
+ }
+ }
+
+ if (aBonusPARVal) {
+ // Add one final entry with "bonus" pAR value.
+ y += IMAGE_OFFSET;
+ x = 0;
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+ var image = generateImageElementForParams(x, y, aWidth, aHeight,
+ aHref, aBonusPARVal, "");
+ grid.appendChild(border);
+ grid.appendChild(image);
+ }
+
+ return grid;
+}
+
+// Returns an SVG <symbol> element that...
+// (a) has the given ID
+// (b) contains only a <use> element to the given URI
+// (c) has a hardcoded viewBox="0 0 10 10" attribute
+// (d) has the given preserveAspectRatio=[aAlign aMeetOrSlice] attribute
+function generateSymbolElementForParams(aSymbolID, aHref,
+ aAlign, aMeetOrSlice) {
+ var use = document.createElementNS(SVGNS, "use");
+ use.setAttributeNS(XLINKNS, "href", aHref);
+
+ var symbol = document.createElementNS(SVGNS, "symbol");
+ symbol.setAttribute("id", aSymbolID);
+ symbol.setAttribute("viewBox", "0 0 10 10");
+ symbol.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice);
+
+ symbol.appendChild(use);
+ return symbol;
+}
+
+function generateUseElementForParams(aTargetURI, aX, aY, aWidth, aHeight) {
+ var use = document.createElementNS(SVGNS, "use");
+ use.setAttributeNS(XLINKNS, "href", aTargetURI);
+ use.setAttribute("x", aX);
+ use.setAttribute("y", aY);
+ use.setAttribute("width", aWidth);
+ use.setAttribute("height", aHeight);
+ return use;
+}
+
+// Returns a <g> element filled with a grid of <use> elements which each
+// have the specified aWidth & aHeight and which reference <symbol> elements
+// with all possible values of preserveAspectRatio. Each <symbol> contains
+// a <use> that links to the given URI, aHref.
+//
+// The final "aBonusPARVal" argument (if specified) is used as the
+// preserveAspectRatio value on a bonus <symbol> element, added at the end.
+function generateSymbolGrid(aHref, aWidth, aHeight, aBonusPARVal) {
+ var grid = document.createElementNS(SVGNS, "g");
+ var y = 0;
+ var x = 0;
+ for (var i = 0; i < ALIGN_VALS.length; i++) {
+ // Jump to next line of grid, for every other "i" value.
+ // (every fourth entry)
+ if (i && i % 2 == 0) {
+ y += IMAGE_OFFSET;
+ x = 0;
+ }
+ var alignVal = ALIGN_VALS[i];
+ for (var j = 0; j < MEETORSLICE_VALS.length; j++) {
+ var meetorsliceVal = MEETORSLICE_VALS[j];
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+
+ var symbolID = "symbol_" + alignVal + "_" + meetorsliceVal;
+ var symbol = generateSymbolElementForParams(symbolID, aHref,
+ alignVal, meetorsliceVal);
+ var use = generateUseElementForParams("#" + symbolID,
+ x, y, aWidth, aHeight);
+ grid.appendChild(symbol); // This isn't painted
+ grid.appendChild(border);
+ grid.appendChild(use);
+ x += IMAGE_OFFSET;
+ }
+ }
+
+ if (aBonusPARVal) {
+ // Add one final entry with "bonus" pAR value.
+ y += IMAGE_OFFSET;
+ x = 0;
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+ var symbolID = "symbol_Bonus";
+ var symbol = generateSymbolElementForParams(symbolID, aHref,
+ aBonusPARVal, "");
+ var use = generateUseElementForParams("#" + symbolID,
+ x, y, aWidth, aHeight);
+ grid.appendChild(symbol); // This isn't painted
+ grid.appendChild(border);
+ grid.appendChild(use);
+ }
+
+ return grid;
+}