diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/svg/struct | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/svg/struct')
43 files changed, 799 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/struct/UnknownElement/interface.svg b/testing/web-platform/tests/svg/struct/UnknownElement/interface.svg new file mode 100644 index 0000000000..987f20c5e4 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/UnknownElement/interface.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + version="1.1" + width="100%" height="100%" viewBox="0 0 400 400"> +<title>Interface of unknown element</title> +<h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UnknownElement"/> +<h:script src="/resources/testharness.js"/> +<h:script src="/resources/testharnessreport.js"/> + +<foobar id="target"/> + +<h:script><![CDATA[ +test(function() { + var e = document.getElementById("target"); + assert_equals(Object.getPrototypeOf(e), SVGUnknownElement.prototype); +}); +]]></h:script> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/currentScale-change-repaint.html b/testing/web-platform/tests/svg/struct/reftests/currentScale-change-repaint.html new file mode 100644 index 0000000000..aa3939c1be --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/currentScale-change-repaint.html @@ -0,0 +1,16 @@ +<!doctype HTML> +<meta charset="utf-8"> +<title>Testcase for changing currentScale on SVG embedded in HTML</title> +<link rel="help" href="https://www.w3.org/TR/SVG/struct.html#__svg__SVGSVGElement__currentScale"> +<link rel="match" href="reference/green-100x100.html"> +<script> + function go() { + const mySVG = document.getElementById("mySVG"); + mySVG.currentScale = 0.5; + } +</script> +<body onload="go()"> + <svg id="mySVG"> + <rect width="100" height="100" fill="green"></rect> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/struct/reftests/currentScale.svg b/testing/web-platform/tests/svg/struct/reftests/currentScale.svg new file mode 100644 index 0000000000..926117b6d5 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/currentScale.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" onload="scaleDown()"> + <title>Testcase for changing currentScale on SVG embedded in HTML</title> + <h:link rel="help" href="https://www.w3.org/TR/SVG/struct.html#__svg__SVGSVGElement__currentScale"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <script> + function scaleDown() { + document.documentElement.currentScale = 0.5; + } + </script> + <rect width="200" height="200" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/gradient-in-symbol.svg b/testing/web-platform/tests/svg/struct/reftests/gradient-in-symbol.svg new file mode 100644 index 0000000000..be0f4ff895 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/gradient-in-symbol.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><symbol> with a gradient inside</title> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/struct.html#SymbolElement"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <rect fill="url(#a)" width="100" height="100"/> + <symbol> + <linearGradient id="a"> + <stop offset="5%" stop-color="green" /> + </linearGradient> + </symbol> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/nested-svg-through-display-contents.svg b/testing/web-platform/tests/svg/struct/reftests/nested-svg-through-display-contents.svg new file mode 100644 index 0000000000..1be64d5242 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/nested-svg-through-display-contents.svg @@ -0,0 +1,13 @@ +<?xml version="1.0"?> +<svg viewBox="0 0 400 400" width="400" height="400" stroke="none" id="s1" + xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#ForeignNamespaces"/> + <rect x="0" y="0" width="100" height="100" fill="green"></rect> + <h:div style="display: contents"> + <svg width="300" height="300"> + <rect x="5" y="5" width="100" height="100" fill="red"></rect> + </svg> + </h:div> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/reference/green-100x100.html b/testing/web-platform/tests/svg/struct/reftests/reference/green-100x100.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/reference/green-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/svg/struct/reftests/reference/green-100x100.svg b/testing/web-platform/tests/svg/struct/reftests/reference/green-100x100.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/reference/green-100x100.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/requiredextensions-empty-string.svg b/testing/web-platform/tests/svg/struct/reftests/requiredextensions-empty-string.svg new file mode 100644 index 0000000000..28f5da4a3e --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/requiredextensions-empty-string.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>requiredExtensions: present but empty attribute evaluates to false</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#RequiredExtensionsAttribute"/> + <h:link rel="match" href="../scripted/blank.svg"/> + <rect width="100" height="100" fill="red" requiredExtensions=""/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/requiredextensions-xhtml.tentative.svg b/testing/web-platform/tests/svg/struct/reftests/requiredextensions-xhtml.tentative.svg new file mode 100644 index 0000000000..911f983cab --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/requiredextensions-xhtml.tentative.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>requiredExtensions: support for HTML/XHTML (non-normative)</title> + <h:link rel="match" href="reference/green-100x100.svg"/> + <switch> + <foreignObject width="100" height="100" requiredExtensions="http://www.w3.org/1999/xhtml"> + <body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0"> + <div style="width: 100px; height: 100px; background-color: green"></div> + </body> + </foreignObject> + <rect width="100" height="100" fill="red"/> + </switch> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/support/etag-max-age-zero-icons.svg b/testing/web-platform/tests/svg/struct/reftests/support/etag-max-age-zero-icons.svg new file mode 100644 index 0000000000..6f7fb0f830 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/support/etag-max-age-zero-icons.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <symbol id="green-square" viewBox="0 0 16 16"> + <rect width="16" height="16" fill="green"/> + </symbol> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/support/etag-max-age-zero-icons.svg.headers b/testing/web-platform/tests/svg/struct/reftests/support/etag-max-age-zero-icons.svg.headers new file mode 100644 index 0000000000..3f0c26c8fe --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/support/etag-max-age-zero-icons.svg.headers @@ -0,0 +1,2 @@ +ETag: icons +Cache-Control: max-age=0 diff --git a/testing/web-platform/tests/svg/struct/reftests/support/red-rect.svg b/testing/web-platform/tests/svg/struct/reftests/support/red-rect.svg new file mode 100644 index 0000000000..1ee578ab6a --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/support/red-rect.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect id="red-rect" width="100" height="100" fill="red"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/support/sprites.svg b/testing/web-platform/tests/svg/struct/reftests/support/sprites.svg new file mode 100644 index 0000000000..f73b885191 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/support/sprites.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect id="green-rect" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/svg-getIntersectionList-001.svg b/testing/web-platform/tests/svg/struct/reftests/svg-getIntersectionList-001.svg new file mode 100644 index 0000000000..20958dd76b --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/svg-getIntersectionList-001.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="500" height="500" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml"> + <!-- getIntersectionList causes transforms to be recalculated in SVG --> + <h:link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=77179"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <script> + onload = function() { + const root = document.documentElement; + root.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "text")); + root.getIntersectionList(root.createSVGRect(), null); + } + </script> + <!-- This test passes if there is a green non-rotated square visible on the top-left corner of the page. --> + <g transform="translate(100, 100) rotate(135)"> + <rect width="100" height="100" fill="green" transform="rotate(45)" /> + </g> +</svg> + diff --git a/testing/web-platform/tests/svg/struct/reftests/use-a.svg b/testing/web-platform/tests/svg/struct/reftests/use-a.svg new file mode 100644 index 0000000000..40d4c83f21 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-a.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Testing that 'use' can target 'a' elements</title> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <a id="a"> + <rect width="100" height="100" fill="green"/> + </a> + </defs> + <rect x="10" y="10" width="80" height="80" fill="red"/> + + <use href="#a"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-adopted-with-external-resource.tentative.svg b/testing/web-platform/tests/svg/struct/reftests/use-adopted-with-external-resource.tentative.svg new file mode 100644 index 0000000000..830d4555e5 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-adopted-with-external-resource.tentative.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Adopting a <use> (from an inactive document) requests an external resource</title> + <h:link rel="match" href="reference/green-100x100.svg"/> + <script type="text/plain" template=""><![CDATA[ + <svg xmlns="http://www.w3.org/2000/svg"> + <use href="support/sprites.svg#green-rect"/> + </svg>]]> + </script> + <script> + let text = document.querySelector('script[template]').textContent; + let doc = new DOMParser().parseFromString(text, 'image/svg+xml'); + document.documentElement.appendChild(doc.documentElement); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-cross-origin.svg b/testing/web-platform/tests/svg/struct/reftests/use-cross-origin.svg new file mode 100644 index 0000000000..3de069c8d1 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-cross-origin.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><use> with a cross-origin resource</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <rect width="100" height="100" fill="green"/> + <script> + const svg = document.querySelector('svg'); + const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + use.setAttribute('href', location.href.replace('://', '://www1.') + '/../support/red-rect.svg#red-rect'); + svg.appendChild(use); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-data-url-set-attributeName.tentative.svg b/testing/web-platform/tests/svg/struct/reftests/use-data-url-set-attributeName.tentative.svg new file mode 100644 index 0000000000..248f218bd7 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-data-url-set-attributeName.tentative.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><use> with a data: URL resource loaded by <set attributeName></title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <rect width="100" height="100" fill="green"/> + <use> + <set attributeName="href" to="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IGlkPSJyZWQtcmVjdCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJlZCIvPgo8L3N2Zz4=#red-rect"/> + </use> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-data-url-setAttribute.tentative.html b/testing/web-platform/tests/svg/struct/reftests/use-data-url-setAttribute.tentative.html new file mode 100644 index 0000000000..b28dd0ecf5 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-data-url-setAttribute.tentative.html @@ -0,0 +1,18 @@ +<!doctype HTML> +<meta charset="utf-8"> +<title>Testcase for changing a valid <use> to a data URL:</title> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"> +<link rel="match" href="reference/green-100x100.html"> +<script> + function go() { + const use = document.querySelector("use"); + use.setAttribute("href", "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IGlkPSJvcmFuZ2UtcmVjdCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im9yYW5nZSIvPgo8L3N2Zz4=#orange-rect"); + } +</script> +<body onload="go()"> + <svg id="mySVG"> + <rect id="red" width="100" height="100" fill="red"></rect> + <rect id="green" width="100" height="100" fill="green"></rect> + <use x="100" y="0" href="#red"></use> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-data-url.tentative.svg b/testing/web-platform/tests/svg/struct/reftests/use-data-url.tentative.svg new file mode 100644 index 0000000000..04414030a3 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-data-url.tentative.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><use> with a data: URL resource</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <rect width="100" height="100" fill="green"/> + <use href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IGlkPSJyZWQtcmVjdCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJlZCIvPgo8L3N2Zz4=#red-rect"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-encoding.svg b/testing/web-platform/tests/svg/struct/reftests/use-encoding.svg new file mode 100644 index 0000000000..e376fa18b7 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-encoding.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><use> with an encoded href</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <rect id="a b" width="100" height="100" fill="green"/> + </defs> + <rect width="100" height="100" fill="red"/> + <use href="#a%20b"></use> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-external-resource-with-revalidation.tentative.html b/testing/web-platform/tests/svg/struct/reftests/use-external-resource-with-revalidation.tentative.html new file mode 100644 index 0000000000..d899165fa9 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-external-resource-with-revalidation.tentative.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Multiple <use> referencing same external resource, with revalidation required</title> +<link rel="match" href="reference/green-100x100.html"> +<svg> + <rect width="100" height="100" fill="red"/> +</svg> +<script> + let container = document.querySelector('svg'); + function makeUse(x) { + let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + use.setAttribute('href', 'support/etag-max-age-zero-icons.svg#green-square'); + use.setAttribute('x', x); + use.setAttribute('width', 50); + use.setAttribute('height', 50); + use.setAttribute('transform', 'scale(1, 2)'); + return use; + } + function insertFirstUse() { + let use = makeUse(0); + use.onload = insertSecondUse; + container.appendChild(use); + } + function insertSecondUse() { + let use = makeUse(50); + use.onload = endTest; + container.appendChild(use); + document.body.offsetTop; + } + function endTest() { + document.documentElement.classList.remove('reftest-wait'); + } + onload = function() { + requestAnimationFrame(insertFirstUse); + }; +</script> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-inheritance-001.svg b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-001.svg new file mode 100644 index 0000000000..5e375b94cd --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-001.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Use property inheritance in SVG2</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:link rel="author" title="Mike Bremford" href="http://bfo.com"/> + </metadata> + <style> + use rect { stroke: red } + .container rect { fill: red; stroke: red } + rect { stroke-width: 40px; stroke: green } + rect:root { opacity: 0 } + </style> + <defs> + <g class="container"> + <rect id="r" x="20" y="20" width="60" height="60" style="fill-opacity:1"/> + </g> + </defs> + <g> + <use href="#r" xlink:href="#r" style="fill: green; fill-opacity:0"/> + </g> + <!-- + This presume the SVG2 use inheritance rules, in SVG1 it will display as red. + + 1. The "rect" cloned by the "use" element is in a shadow DOM, so it DOES NOT + inherit the stroke from the "use rect" or ".container rect" style rules. + 2. The cloned "rect" DOES get the rules set by the "rect" style rule, as that + still matches elements in the shadow DOM. + 3. The "rect" DOES inherit "fill: green" from the <use> + 4. The "rect"'s own "fill-opacity: 1" overrides the "fill-opacity: 0" inherited + from the "use" element. + 5. Even though "rect" is considered to have no parent, it is not a root element + so does not match the rect:root style rule + --> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-child-of.svg b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-child-of.svg new file mode 100644 index 0000000000..1c4a395407 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-child-of.svg @@ -0,0 +1,37 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Use property inheritance with :nth-child(... of <selector list>) in SVG2</title> + <metadata> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance"/> + <h:link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1821258"/> + <h:link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net"/> + </metadata> + <style> + :nth-child(n of use rect) { stroke: red } + :nth-child(n of .container rect) { fill: red; stroke: red } + rect { stroke-width: 40px; stroke: green } + rect:root { opacity: 0 } + </style> + <defs> + <g class="container"> + <rect id="r" x="20" y="20" width="60" height="60" style="fill-opacity:1"/> + </g> + </defs> + <g> + <use href="#r" xlink:href="#r" style="fill: green; fill-opacity:0"/> + </g> + <!-- + This presumes the SVG2 use inheritance rules, in SVG1 it will display as red. + + 1. The "rect" cloned by the "use" element is in a shadow DOM, so it DOES NOT + inherit the stroke from the ":nth-child(n of use rect)" or + ":nth-child(n of .container rect)" style rules. + 2. The cloned "rect" DOES get the rules set by the "rect" style rule, as that + still matches elements in the shadow DOM. + 3. The "rect" DOES inherit "fill: green" from the <use> + 4. The "rect"'s own "fill-opacity: 1" overrides the "fill-opacity: 0" inherited + from the "use" element. + 5. Even though "rect" is considered to have no parent, it is not a root element + so does not match the rect:root style rule + --> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg new file mode 100644 index 0000000000..229be9cbf9 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-inheritance-nth-last-child-of.svg @@ -0,0 +1,37 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Use property inheritance with :nth-last-child(... of <selector list>) in SVG2</title> + <metadata> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance"/> + <h:link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1821258"/> + <h:link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net"/> + </metadata> + <style> + :nth-last-child(n of use rect) { stroke: red } + :nth-last-child(n of .container rect) { fill: red; stroke: red } + rect { stroke-width: 40px; stroke: green } + rect:root { opacity: 0 } + </style> + <defs> + <g class="container"> + <rect id="r" x="20" y="20" width="60" height="60" style="fill-opacity:1"/> + </g> + </defs> + <g> + <use href="#r" xlink:href="#r" style="fill: green; fill-opacity:0"/> + </g> + <!-- + This presumes the SVG2 use inheritance rules, in SVG1 it will display as red. + + 1. The "rect" cloned by the "use" element is in a shadow DOM, so it DOES NOT + inherit the stroke from the ":nth-last-child(n of use rect)" or + ":nth-last-child(n of .container rect)" style rules. + 2. The cloned "rect" DOES get the rules set by the "rect" style rule, as that + still matches elements in the shadow DOM. + 3. The "rect" DOES inherit "fill: green" from the <use> + 4. The "rect"'s own "fill-opacity: 1" overrides the "fill-opacity: 0" inherited + from the "use" element. + 5. Even though "rect" is considered to have no parent, it is not a root element + so does not match the rect:root style rule + --> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-no-tspan.svg b/testing/web-platform/tests/svg/struct/reftests/use-no-tspan.svg new file mode 100644 index 0000000000..5368ca343c --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-no-tspan.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Testing that 'use' cannot make 'tspan' elements visible</title> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <text><tspan id="t" x="20" y="100" fill="red" font-size="36">Should not see this</tspan></text> + </defs> + <rect width="100" height="100" fill="green"/> + + <use href="#t"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-ref-inside-data-url.tentative.html b/testing/web-platform/tests/svg/struct/reftests/use-ref-inside-data-url.tentative.html new file mode 100644 index 0000000000..d6ac2e3654 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-ref-inside-data-url.tentative.html @@ -0,0 +1,15 @@ +<!doctype HTML> +<meta charset="utf-8"> +<title>Testcase for where SVG loaded via data: uses #ref</title> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"> +<link rel="match" href="reference/green-100x100.html"> +<body> +<!-- base64 SVG source: +<svg xmlns="http://www.w3.org/2000/svg"> + <rect id="green-rect" width="100" height="100" fill="green"/> + <rect width="100" height="100" fill="red"/> + <use href="#green-rect"/> +</svg> +--> +<img src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cmVjdCBpZD0iZ3JlZW4tcmVjdCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9ImdyZWVuIi8+DQogIDxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJyZWQiLz4NCiAgPHVzZSBocmVmPSIjZ3JlZW4tcmVjdCIvPg0KPC9zdmc+"> +</body> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-same-origin.svg b/testing/web-platform/tests/svg/struct/reftests/use-same-origin.svg new file mode 100644 index 0000000000..0aa1ec83af --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-same-origin.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><use> with a same-origin resource</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <use href="support/sprites.svg#green-rect"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-svg-dimensions-override-001.svg b/testing/web-platform/tests/svg/struct/reftests/use-svg-dimensions-override-001.svg new file mode 100644 index 0000000000..c658adce80 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-svg-dimensions-override-001.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml" width="800" height="600"> + <title>'width' and 'height' from <use> overrides values on referenced <svg></title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseLayout"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <svg id="s" width="10" height="10"> + <rect width="100%" height="100%" fill="green"/> + </svg> + </defs> + <rect width="100" height="100" fill="red"/> + <svg width="1" height="1" overflow="visible"> + <use xlink:href="#s" x="90" y="90"/> + <use xlink:href="#s" y="90" width="90"/> + <use xlink:href="#s" x="90" height="90"/> + <use xlink:href="#s" width="90" height="90"/> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-svg-dimensions-override-002.svg b/testing/web-platform/tests/svg/struct/reftests/use-svg-dimensions-override-002.svg new file mode 100644 index 0000000000..6c3f97b8dc --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-svg-dimensions-override-002.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml" width="800" height="600"> + <title>'width' and 'height' from <use> overrides values on referenced <svg></title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseLayout"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <svg id="s"> + <rect width="100%" height="100%" fill="green"/> + </svg> + </defs> + <rect width="100" height="100" fill="red"/> + <svg width="10" height="10" overflow="visible"> + <use xlink:href="#s" x="90" y="90"/> + <use xlink:href="#s" y="90" width="90"/> + <use xlink:href="#s" x="90" height="90"/> + <use xlink:href="#s" width="90" height="90"/> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-switch.svg b/testing/web-platform/tests/svg/struct/reftests/use-switch.svg new file mode 100644 index 0000000000..6c01c30198 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-switch.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Testing that 'use' can target 'switch' elements</title> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <switch id="s"> + <rect width="100" height="100" fill="green"/> + </switch> + </defs> + <rect x="10" y="10" width="80" height="80" fill="red"/> + + <use href="#s"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-symbol-dimensions-override-001.svg b/testing/web-platform/tests/svg/struct/reftests/use-symbol-dimensions-override-001.svg new file mode 100644 index 0000000000..1f8f714147 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-symbol-dimensions-override-001.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml" width="800" height="600"> + <title>'width' and 'height' from <use> overrides values on referenced <symbol></title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseLayout"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <symbol id="s" width="10" height="10"> + <rect width="100%" height="100%" fill="green"/> + </symbol> + </defs> + <rect width="100" height="100" fill="red"/> + <svg width="1" height="1" overflow="visible"> + <use xlink:href="#s" x="90" y="90"/> + <use xlink:href="#s" y="90" width="90"/> + <use xlink:href="#s" x="90" height="90"/> + <use xlink:href="#s" width="90" height="90"/> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-symbol-dimensions-override-002.svg b/testing/web-platform/tests/svg/struct/reftests/use-symbol-dimensions-override-002.svg new file mode 100644 index 0000000000..9c1fd49083 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-symbol-dimensions-override-002.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml" width="800" height="600"> + <title>'width' and 'height' from <use> overrides values on referenced <symbol></title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseLayout"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <symbol id="s"> + <rect width="100%" height="100%" fill="green"/> + </symbol> + </defs> + <rect width="100" height="100" fill="red"/> + <svg width="10" height="10" overflow="visible"> + <use xlink:href="#s" x="90" y="90"/> + <use xlink:href="#s" y="90" width="90"/> + <use xlink:href="#s" x="90" height="90"/> + <use xlink:href="#s" width="90" height="90"/> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/struct/reftests/use-symbol-display-none.svg b/testing/web-platform/tests/svg/struct/reftests/use-symbol-display-none.svg new file mode 100644 index 0000000000..7cb2720d7e --- /dev/null +++ b/testing/web-platform/tests/svg/struct/reftests/use-symbol-display-none.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title><use> with a display="none" symbol</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <symbol id="a" display="none"> + <rect width="100" height="100" fill="red"/> + </symbol> + </defs> + <rect width="100" height="100" fill="green"/> + <use href="#a"></use> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/autofocus-attribute.svg b/testing/web-platform/tests/svg/struct/scripted/autofocus-attribute.svg new file mode 100644 index 0000000000..edf200c4c7 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/autofocus-attribute.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Autofocus attribute</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#autofocusattribute"/> + </metadata> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/html/interaction/focus/the-autofocus-attribute/resources/utils.js"/> + <script><![CDATA[ +const SVG_NS = 'http://www.w3.org/2000/svg'; + +promise_test(async t => { + let w = window.open('blank.svg'); + await waitForLoad(w); + t.add_cleanup(() => { w.close(); }); + const svgA = w.document.createElementNS(SVG_NS, 'a'); + svgA.setAttribute('href', '#'); + svgA.setAttribute('autofocus', 'autofocus'); + w.document.documentElement.appendChild(svgA); + await waitUntilStableAutofocusState(w); + assert_equals(w.document.activeElement, svgA); +}, '<a> should support autofocus'); + +promise_test(async t => { + let w = window.open('blank.svg'); + await waitForLoad(w); + t.add_cleanup(() => { w.close(); }); + const path = w.document.createElementNS(SVG_NS, 'path'); + path.setAttribute('d', 'M0,0h8v8z'); + path.setAttribute('tabindex', '0'); + path.setAttribute('autofocus', 'autofocus'); + w.document.documentElement.appendChild(path); + await waitUntilStableAutofocusState(w); + assert_equals(w.document.activeElement, path); +}, 'Renderable element with tabindex should support autofocus'); + +promise_test(async t => { + let w = window.open('blank.svg'); + await waitForLoad(w); + t.add_cleanup(() => { w.close(); }); + let element = w.document.createElementNS(SVG_NS, 'metadata'); + element.setAttribute('tabindex', '0'); + element.setAttribute('autofocus', 'autofocus'); + w.document.documentElement.appendChild(element); + await waitUntilStableAutofocusState(w); + // https://html.spec.whatwg.org/C/#dom-documentorshadowroot-activeelement + // 6. If candidate's document element is non-null, then return that document + // element. + assert_equals(w.document.activeElement.tagName, 'svg'); +}, 'Never-rendered element with tabindex should not support autofocus'); +]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/blank.svg b/testing/web-platform/tests/svg/struct/scripted/blank.svg new file mode 100644 index 0000000000..9e560bdc5f --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/blank.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg"></svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-checkIntersection-001.svg b/testing/web-platform/tests/svg/struct/scripted/svg-checkIntersection-001.svg new file mode 100644 index 0000000000..059cdef2a6 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-checkIntersection-001.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script> + const test = async_test('checkIntersection() / checkEnclosure() with null ref. element'); + window.onload = test.step_func_done(() => { + const root = document.documentElement; + assert_throws_js(TypeError, () => root.checkIntersection(null, root.createSVGRect())); + assert_throws_js(TypeError, () => root.checkEnclosure(null, root.createSVGRect())); + }); + </script> + <!-- This test passes if it does not crash. --> + <text>PASS</text> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-001.svg b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-001.svg new file mode 100644 index 0000000000..a360bad3d3 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-001.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> +<html:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#__svg__SVGSVGElement__getIntersectionList"/> +<html:script src="/resources/testharness.js"/> +<html:script src="/resources/testharnessreport.js"/> +<html:link rel="stylesheet" href="/fonts/ahem.css"/> +<style> +text { + font-family: Ahem; + font-size: 100px; +} +</style> +<text x="0" y="80">Text0</text> +<text x="0" y="80" style="display:none">Text1</text> +<text x="0" y="80" pointer-events="none">Text2</text> +<text x="0" y="80">Text3</text> + +<script> +test(t => { + const svg = document.documentElement; + const rect = svg.createSVGRect(); + rect.x = 10; + rect.y = 70; + rect.width = 20; + rect.height = 20; + const texts = document.querySelectorAll('text'); + const list = svg.getIntersectionList(rect, null); + assert_array_equals(list, [texts[0], texts[3]]); +}, 'SVGSVGElement.getIntersectionList()'); +</script> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-002.svg b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-002.svg new file mode 100644 index 0000000000..c2c1f8e425 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-002.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg id="root" xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script> + const test = async_test('getIntersectionList() on clipped element'); + window.onload = test.step_func_done(() => { + const testSVG = document.getElementById('root'); + const r = testSVG.createSVGRect(); + r.x = 0; + r.y = 0; + r.width = 100; + r.height = 100; + + assert_equals(testSVG.getIntersectionList(r, testSVG).length, 1); + }); + </script> + <rect x="0" y="0" width="200" height="200"/> + <clipPath id="MyClip"> + <rect y="100" width="200" height="100"/> + </clipPath> + <rect x="0" y="0" width="200" height="200" clip-path="url(#MyClip)" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-003.svg b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-003.svg new file mode 100644 index 0000000000..b08ea71b36 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-003.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" + id="askedForIntersection"> +<h:script src="/resources/testharness.js"/> +<h:script src="/resources/testharnessreport.js"/> +<style> +.c1:nth-last-of-type(1n) { } +</style> +<script> + const test = async_test('getIntersectionList() crash test'); + window.onload = test.step_func_done(() => { + docElement = document.documentElement; + textarea = document.createElementNS("http://www.w3.org/1999/xhtml", "textarea"); + textarea.setAttribute("class", "c1"); + docElement.appendChild(textarea); + object = document.createElementNS("http://www.w3.org/1999/xhtml", "object"); + object.setAttribute("usemap", "#DivLogo-map"); + iframe = document.createElementNS("http://www.w3.org/1999/xhtml", "iframe"); + docElement.appendChild(iframe); + var svg = document.getElementById('askedForIntersection'); + var rect = svg.createSVGRect(); + svg.getIntersectionList(rect, svg); + }); +</script> +<rect style='content: counters(c, ".", decimal)'></rect> +<text x="10" y="50">PASS (didn't crash)</text> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-004.svg b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-004.svg new file mode 100644 index 0000000000..c029a3b070 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-004.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script> + const test = async_test('getIntersectionList() with nested <svg>'); + window.onload = test.step_func_done(() => { + const testSVG = document.getElementById('askedForIntersection'); + const r = testSVG.createSVGRect(); + r.x = 0; + r.y = 0; + r.width = 100; + r.height = 100; + + assert_equals(testSVG.getIntersectionList(r, testSVG).length, 2); + }); + </script> + <rect x="0" y="0" width="100" height="100" id="r1"/> + <svg id="askedForIntersection"> + <rect x="0" y="0" width="100" height="100" id="r2"/> + <svg id="nestedSVG"> + <rect x="0" y="0" width="100" height="100" id="r3"/> + </svg> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/use-load-error-events.tentative.html b/testing/web-platform/tests/svg/struct/scripted/use-load-error-events.tentative.html new file mode 100644 index 0000000000..2c52072e16 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/use-load-error-events.tentative.html @@ -0,0 +1,128 @@ +<!doctype html> +<title>'load' and 'error' events for SVG <use></title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/rendering-utils.js"></script> +<svg> + <defs> + <rect id="local" width="100" height="100" fill="blue"/> + </defs> +</svg> +<script> + function newUseElement() { + return document.createElementNS('http://www.w3.org/2000/svg', 'use'); + } + function makeWatcher(root, eventType, url) { + return new Promise(resolve => { + const watcher = newUseElement(); + watcher.addEventListener(eventType, resolve); + watcher.setAttribute('href', url); + root.appendChild(watcher); + }); + } + function expectEvents(t, element, event) { + return new EventWatcher(t, element, ['load', 'error']).wait_for(event); + } + const DATA_URL_PAYLOAD = + '<svg xmlns="http://www.w3.org/2000/svg"><rect id="green" fill="lime" width="100" height="50"/></svg>'; + const cookie = Date.now(); + let counter = 0; + function makeCookie(index) { + return `${cookie}-${index}`; + } + function getUrl(type) { + const cookie = makeCookie(counter++); + switch (type) { + case 'existing': + return `/images/colors.svg?${cookie}#green`; + case 'existing-data': + return `data:image/svg+xml,${DATA_URL_PAYLOAD}#green`; + case 'non-existing': + return `/images/this-file-should-not-exist.svg?${cookie}#green`; + case 'broken': + return `/images/fail.gif?${cookie}#green`; + } + } + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + expectEvents(t, use, []); + svg.appendChild(use).setAttribute('href', '#local'); + return waitForAtLeastOneFrame(); + }, document.title + ', local reference, existing'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + expectEvents(t, use, []); + svg.appendChild(use).setAttribute('href', '#local_not_there'); + return waitForAtLeastOneFrame(); + }, document.title + ', local reference, non-existing'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + const watcher = expectEvents(t, use, ['load']); + const url = getUrl('existing'); + svg.appendChild(use).setAttribute('href', url); + return watcher; + }, document.title + ', external reference, existing'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + const watcher = expectEvents(t, use, ['error']); + const url = getUrl('existing-data'); + svg.appendChild(use).setAttribute('href', url); + return watcher; + }, document.title + ', external data: URL reference, existing'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + const watcher = expectEvents(t, use, ['error']); + const url = getUrl('non-existing'); + svg.appendChild(use).setAttribute('href', url); + return watcher; + }, document.title + ', external reference, non-existing'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + const watcher = expectEvents(t, use, ['error']); + const url = getUrl('broken'); + svg.appendChild(use).setAttribute('href', url); + return watcher; + }, document.title + ', external reference, existing, parse error'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + expectEvents(t, use, []); + const url = getUrl('existing'); + svg.appendChild(use).setAttribute('href', url); + t.step_timeout(() => use.setAttribute('href', '#local')); + return makeWatcher(svg, 'load', url); + }, document.title + ', external reference, existing, changed to local reference while loading'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + expectEvents(t, use, []); + const url = getUrl('existing-data'); + svg.appendChild(use).setAttribute('href', url); + t.step_timeout(() => use.setAttribute('href', '#local')); + return makeWatcher(svg, 'error', url); + }, document.title + ', external data: URL reference, existing, changed to local reference while loading'); + + promise_test(t => { + const svg = document.querySelector('svg'); + const use = newUseElement(); + expectEvents(t, use, []); + const url = getUrl('non-existing'); + svg.appendChild(use).setAttribute('href', url); + t.step_timeout(() => use.setAttribute('href', '#local')); + return makeWatcher(svg, 'error', url); + }, document.title + ', external reference, non-existing, changed to local reference while loading'); +</script> diff --git a/testing/web-platform/tests/svg/struct/use-getComputedStyle.html b/testing/web-platform/tests/svg/struct/use-getComputedStyle.html new file mode 100644 index 0000000000..1e5d5af57c --- /dev/null +++ b/testing/web-platform/tests/svg/struct/use-getComputedStyle.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>SVG Test: Resolved positioning inside use</title> +<link rel="help" href="https://www.w3.org/TR/SVG2/struct.html#UseElement"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg> + <use id="use" x="1" y="2"/> +</svg> +<script> + test(() => { + assert_equals(getComputedStyle(use).x, "1px", "use element should have x computed to '1px'."); + assert_equals(getComputedStyle(use).y, "2px", "use element should have y computed to '2px'."); + }, "Test that we map use element positioning to style."); +</script> |
