diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/svg/image | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/image')
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 Binary files differnew file mode 100644 index 0000000000..722e97c1eb --- /dev/null +++ b/layout/reftests/svg/image/blueRect10x10.png diff --git a/layout/reftests/svg/image/blueRect10x10.svg b/layout/reftests/svg/image/blueRect10x10.svg new file mode 100644 index 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 Binary files differnew file mode 100644 index 0000000000..c9bb375943 --- /dev/null +++ b/layout/reftests/svg/image/lime100x100.png 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 Binary files differnew file mode 100644 index 0000000000..830eb77731 --- /dev/null +++ b/layout/reftests/svg/image/sprite.png diff --git a/layout/reftests/svg/image/sprite.svg b/layout/reftests/svg/image/sprite.svg new file mode 100644 index 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; +} |
