diff options
Diffstat (limited to 'testing/web-platform/tests/svg')
39 files changed, 794 insertions, 101 deletions
diff --git a/testing/web-platform/tests/svg/animations/repeatcount-attribute-mutation.html b/testing/web-platform/tests/svg/animations/repeatcount-attribute-mutation.html new file mode 100644 index 0000000000..fd4952b4ba --- /dev/null +++ b/testing/web-platform/tests/svg/animations/repeatcount-attribute-mutation.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>Mutating the 'repeatCount' attribute after the element has been inserted</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg height="0"> + <rect width="10" height="100" fill="blue"> + <animate id="anim" attributeName="width" from="10" to="100" dur="10ms" + repeatCount="indefinite"/> + </rect> +</svg> +<script> + promise_test(t => { + const anim = document.getElementById("anim"); + anim.removeAttribute('repeatCount'); + + const watcher = new EventWatcher(t, anim, ['endEvent', 'repeatEvent']); + return watcher.wait_for('endEvent'); + }); +</script> diff --git a/testing/web-platform/tests/svg/animations/stop-animation-01.html b/testing/web-platform/tests/svg/animations/stop-animation-01.html new file mode 100644 index 0000000000..d240c51142 --- /dev/null +++ b/testing/web-platform/tests/svg/animations/stop-animation-01.html @@ -0,0 +1,21 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Animate a <stop> element</title> +<link rel="match" href="../struct/reftests/reference/green-100x100.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<script> +function test() { + waitForAtLeastOneFrame().then(takeScreenshot); +} +</script> +<svg> + <linearGradient id="g"> + <stop stop-color="red"> + <animate attributeName="stop-color" values="red; green" dur="1s" + keyTimes="0; 0.01" fill="freeze" calcMode="discrete" + onbegin="test()"/> + </stop> + </linearGradient> + <rect width="100" height="100" fill="url(#g)"/> +</svg> diff --git a/testing/web-platform/tests/svg/crashtests/firefox-bug-1883804.html b/testing/web-platform/tests/svg/crashtests/firefox-bug-1883804.html new file mode 100644 index 0000000000..83327b69d3 --- /dev/null +++ b/testing/web-platform/tests/svg/crashtests/firefox-bug-1883804.html @@ -0,0 +1,3 @@ +<svg> +<set xlink:href="#)᭭%a8*=٫́壎 +<title class="
> diff --git a/testing/web-platform/tests/svg/historical.html b/testing/web-platform/tests/svg/historical.html index 47935c6461..ed455ae248 100644 --- a/testing/web-platform/tests/svg/historical.html +++ b/testing/web-platform/tests/svg/historical.html @@ -65,6 +65,9 @@ var removedMembers = { "xmllang", "xmlspace" ], + "SVGAElement": [ + "text" + ], "SVGGraphicsElement": [ "farthestViewportElement", "getTransformToElement", diff --git a/testing/web-platform/tests/svg/idlharness.window.js b/testing/web-platform/tests/svg/idlharness.window.js index 04cf99729e..a26fa2bef6 100644 --- a/testing/web-platform/tests/svg/idlharness.window.js +++ b/testing/web-platform/tests/svg/idlharness.window.js @@ -42,9 +42,9 @@ const elements = [ 'script', 'animate', 'set', + 'discard', 'animateMotion', 'mpath', - 'animateColor', 'animateTransform', 'metadata', 'foreignObject', @@ -167,10 +167,10 @@ idl_test( SVGViewElement: ['objects.view'], SVGScriptElement: ['objects.script'], SVGAnimateElement: ['objects.animate'], + SVGDiscardElement: ['objects.discard'], SVGSetElement: ['objects.set'], SVGAnimateMotionElement: ['objects.animateMotion'], SVGMPathElement: ['objects.mpath'], - SVGAnimateColorElement: ['objects.animateColor'], SVGAnimateTransformElement: ['objects.animateTransform'], SVGMetadataElement: ['objects.metadata'], SVGForeignObjectElement: ['objects.foreignObject'], diff --git a/testing/web-platform/tests/svg/import/animate-elem-30-t-manual.svg b/testing/web-platform/tests/svg/import/animate-elem-30-t-manual.svg index d27f9a1d6d..bfc4cb4861 100644 --- a/testing/web-platform/tests/svg/import/animate-elem-30-t-manual.svg +++ b/testing/web-platform/tests/svg/import/animate-elem-30-t-manual.svg @@ -95,7 +95,7 @@ <defs> <rect id="rectID" x="10" y="60" width="60" height="20" fill="blue" stroke="black" stroke-width="2"> - <animateColor attributeName="fill" from="white" to="rgb(16, 93, 140)" begin="0" dur="3" fill="freeze"/> + <animate attributeName="fill" from="white" to="rgb(16, 93, 140)" begin="0" dur="3" fill="freeze"/> <animate attributeName="height" from="20" to="40" begin="0" dur="3" fill="freeze"/> </rect> </defs> diff --git a/testing/web-platform/tests/svg/import/animate-elem-85-t-manual.svg b/testing/web-platform/tests/svg/import/animate-elem-85-t-manual.svg index 6c09ffb3b5..c5ded325cd 100644 --- a/testing/web-platform/tests/svg/import/animate-elem-85-t-manual.svg +++ b/testing/web-platform/tests/svg/import/animate-elem-85-t-manual.svg @@ -15,7 +15,7 @@ version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-85-t.svg,v $"> <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation"> <p> - The first subtest tests animateColor with 'to' and 'from' values including + The first subtest tests animate with 'to' and 'from' values including currentColor. The second subtest checks that the value of currentColor is the current animated value of the color property, by animating the color property at the same time as animating fill with a 'from' or 'to' value of currentColor. @@ -50,29 +50,29 @@ <g id="subtest_1"> <rect fill="#f00" x="30" y="50" height="100" width="90"> <!-- basic test from two numeric hex values --> - <animateColor attributeName="fill" from="#000000" to="#008000" begin="0s" dur="5s" fill="freeze"/> + <animate attributeName="fill" from="#000000" to="#008000" begin="0s" dur="5s" fill="freeze"/> </rect> <rect fill="#f00" x="140" y="50" height="100" width="90"> <!-- same, check color keywords accepted in animations --> - <animateColor attributeName="fill" from="#000000" to="green" begin="0s" dur="5s" fill="freeze"/> + <animate attributeName="fill" from="#000000" to="green" begin="0s" dur="5s" fill="freeze"/> </rect> <rect color="green" fill="#f00" x="250" y="50" height="100" width="90"> <!-- same, static value of currentColor in 'to' --> - <animateColor attributeName="fill" from="#000000" to="currentColor" begin="0s" dur="5s" fill="freeze"/> + <animate attributeName="fill" from="#000000" to="currentColor" begin="0s" dur="5s" fill="freeze"/> </rect> <rect color="black" fill="#f00" x="360" y="50" height="100" width="90"> <!-- same, static value of currentColor in 'from' --> - <animateColor attributeName="fill" to="#008000" from="currentColor" begin="0s" dur="5s" fill="freeze"/> + <animate attributeName="fill" to="#008000" from="currentColor" begin="0s" dur="5s" fill="freeze"/> </rect> </g> <g id="subtest_2"> <rect color="black" fill="blue" x="100" y="180" height="60" width="280"> - <animateColor attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/> - <animateColor attributeName="fill" from="#008000" to="currentColor" begin="5s" dur="5s" fill="freeze"/> + <animate attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/> + <animate attributeName="fill" from="#008000" to="currentColor" begin="5s" dur="5s" fill="freeze"/> </rect> <rect color="black" fill="blue" x="100" y="245" height="60" width="280"> - <animateColor attributeName="fill" from="#008000" to="currentColor" begin="5s" dur="5s" fill="freeze"/> - <animateColor attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/> + <animate attributeName="fill" from="#008000" to="currentColor" begin="5s" dur="5s" fill="freeze"/> + <animate attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/> </rect> <!-- color fill diff --git a/testing/web-platform/tests/svg/import/animate-pservers-grad-01-b-manual.svg b/testing/web-platform/tests/svg/import/animate-pservers-grad-01-b-manual.svg index 98456fb073..15672bac5f 100644 --- a/testing/web-platform/tests/svg/import/animate-pservers-grad-01-b-manual.svg +++ b/testing/web-platform/tests/svg/import/animate-pservers-grad-01-b-manual.svg @@ -47,8 +47,8 @@ <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18"> <defs> <g id="g0" stop-color="yellow" stop-opacity="0" color="yellow"> - <animateColor id="a1" attributeName="stop-color" from="red" to="green" dur="5" fill="freeze"/> - <animateColor id="a2" attributeName="color" from="yellow" to="green" dur="5" fill="freeze"/> + <animate id="a1" attributeName="stop-color" from="red" to="green" dur="5" fill="freeze"/> + <animate id="a2" attributeName="color" from="yellow" to="green" dur="5" fill="freeze"/> <animate id="a3" attributeName="stop-opacity" from="0.5" to="1" dur="5" fill="freeze"/> <linearGradient id="MyGradient1" stop-color="inherit"> @@ -73,7 +73,7 @@ </g> </defs> <g id="g1" stop-color="blue"> - <animateColor id="a4" attributeName="stop-color" from="blue" to="red" dur="5" fill="freeze"/> + <animate id="a4" attributeName="stop-color" from="blue" to="red" dur="5" fill="freeze"/> <rect id="r1" fill="url(#MyGradient1)" width="100" height="100" x="50" y="50"/> </g> <g id="g2" stop-opacity="1"> @@ -81,12 +81,12 @@ <rect id="r2" fill="url(#MyGradient2)" width="100" height="100" x="200" y="50"/> </g> <g id="g3" stop-opacity="1" stop-color="blue"> - <animateColor id="a6" attributeName="stop-color" from="blue" to="red" dur="5" fill="freeze"/> + <animate id="a6" attributeName="stop-color" from="blue" to="red" dur="5" fill="freeze"/> <animate id="a7" attributeName="stop-opacity" from="1" to="0" dur="5" fill="freeze"/> <rect id="r3" fill="url(#MyGradient3)" width="100" height="100" x="50" y="200"/> </g> <g id="g4" color="blue"> - <animateColor id="a7" attributeName="color" from="blue" to="red" dur="5" fill="freeze"/> + <animate id="a7" attributeName="color" from="blue" to="red" dur="5" fill="freeze"/> <rect id="r4" fill="url(#MyGradient4)" width="100" height="100" x="200" y="200"/> </g> </g> diff --git a/testing/web-platform/tests/svg/interact/scripted/async-02.html b/testing/web-platform/tests/svg/interact/scripted/async-02.html new file mode 100644 index 0000000000..c11fa9f33f --- /dev/null +++ b/testing/web-platform/tests/svg/interact/scripted/async-02.html @@ -0,0 +1,31 @@ +<html> + <head> + <title>Inline async module script without external deps onload blocking</title> + <link rel="help" href="https://svgwg.org/svg2-draft/interact.html#ScriptElement"/> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <svg> + <script> + let loadFired = false; + let moduleRan = false + let test = async_test("Inline async module script vs. onload"); + window.addEventListener("load", test.step_func(function() { + loadFired = true; + assert_true(moduleRan, "Module should have run before the load event"); + test.step_timeout(function() { + test.done(); + }, 0); + })); + </script> + <script type="module" async> + moduleRan = true; + test.step_func(function() { + assert_false(loadFired, "onload should not have fired yet"); + }); + </script> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/svg/interact/scripted/async-03.html b/testing/web-platform/tests/svg/interact/scripted/async-03.html new file mode 100644 index 0000000000..fb8ee6d0de --- /dev/null +++ b/testing/web-platform/tests/svg/interact/scripted/async-03.html @@ -0,0 +1,31 @@ +<html> + <head> + <title>Inline async script without external deps onload blocking</title> + <link rel="help" href="https://svgwg.org/svg2-draft/interact.html#ScriptElement"/> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <svg> + <script> + let loadFired = false; + let asyncRan = false + let test = async_test("Inline async script vs. onload"); + window.addEventListener("load", test.step_func(function() { + loadFired = true; + assert_true(asyncRan, "Async should have run before the load event"); + test.step_timeout(function() { + test.done(); + }, 0); + })); + </script> + <script async> + asyncRan = true; + test.step_func(function() { + assert_false(loadFired, "onload should not have fired yet"); + }); + </script> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/svg/interact/scripted/defer-02.html b/testing/web-platform/tests/svg/interact/scripted/defer-02.html new file mode 100644 index 0000000000..0fcebae0ae --- /dev/null +++ b/testing/web-platform/tests/svg/interact/scripted/defer-02.html @@ -0,0 +1,32 @@ +<html> + <head> + <title>Inline defer module script without external deps onload blocking</title> + <link rel="help" href="https://svgwg.org/svg2-draft/interact.html#ScriptElement"/> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <svg> + <script> + let loadFired = false; + let moduleRan = false + let test = async_test("Inline defer module script vs. onload"); + window.addEventListener("load", test.step_func(function() { + loadFired = true; + assert_true(moduleRan, "Module should have run before the load event"); + test.step_timeout(function() { + test.done(); + }, 0); + })); + </script> + <!-- defer should be equivalent to neither defer nor async specified --> + <script type="module" defer> + moduleRan = true; + test.step_func(function() { + assert_false(loadFired, "onload should not have fired yet"); + }); + </script> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/svg/interact/scripted/module-02.html b/testing/web-platform/tests/svg/interact/scripted/module-02.html new file mode 100644 index 0000000000..8a6d6ac3f6 --- /dev/null +++ b/testing/web-platform/tests/svg/interact/scripted/module-02.html @@ -0,0 +1,31 @@ +<html> + <head> + <title>Inline module script without external deps onload blocking</title> + <link rel="help" href="https://svgwg.org/svg2-draft/interact.html#ScriptElement"/> + <meta name=timeout content=long> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <svg> + <script> + let loadFired = false; + let moduleRan = false + let test = async_test("Inline module script vs. onload"); + window.addEventListener("load", test.step_func(function() { + loadFired = true; + assert_true(moduleRan, "Module should have run before the load event"); + test.step_timeout(function() { + test.done(); + }, 0); + })); + </script> + <script type="module"> + moduleRan = true; + test.step_func(function() { + assert_false(loadFired, "onload should not have fired yet"); + }); + </script> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/svg/linking/scripted/a.text-getter-01.svg b/testing/web-platform/tests/svg/linking/scripted/a.text-getter-01.svg deleted file mode 100644 index d0b26f2042..0000000000 --- a/testing/web-platform/tests/svg/linking/scripted/a.text-getter-01.svg +++ /dev/null @@ -1,37 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<svg xmlns="http://www.w3.org/2000/svg" - xmlns:h="http://www.w3.org/1999/xhtml"> - <title>SVGAElement.text getting</title> - <metadata> - <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> - </metadata> - <script>var b</script> - <g id="test"> - <a href="a">a b c </a> - <a href="b">a <!--b-->b c </a> - <a href="c">a <b>b</b> c </a> - <a href="d">a <script>b</script> c </a> - <script><![CDATA[ - var e = document.getElementById("test") - .appendChild(document.createElementNS("http://www.w3.org/2000/svg","a")); - e.href.baseVal = "d"; - e.appendChild(document.createTextNode("a ")); - e.appendChild(document.createTextNode("b ")); - e.appendChild(document.createTextNode("c ")); - ]]></script> - </g> - <h:script src="/resources/testharness.js"/> - <h:script src="/resources/testharnessreport.js"/> - <script><![CDATA[ - test(function() { - var list = document.getElementById("test") - .getElementsByTagName("a"); - for (var i = 0, il = list.length; i < il; ++i) { - test(function() { - assert_equals(list[i].text, list[i].textContent); - assert_equals(list[i].text, "a b c "); - }, "Test for anchor " + i); - } - }); - ]]></script> -</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/linking/scripted/a.text-setter-01.svg b/testing/web-platform/tests/svg/linking/scripted/a.text-setter-01.svg deleted file mode 100644 index 53ad8fce9a..0000000000 --- a/testing/web-platform/tests/svg/linking/scripted/a.text-setter-01.svg +++ /dev/null @@ -1,44 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<svg xmlns="http://www.w3.org/2000/svg" - xmlns:h="http://www.w3.org/1999/xhtml"> - <title>SVGAElement.text setting</title> - <metadata> - <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> - </metadata> - <g id="test"> - <a href="a">a b c</a> - <a href="b">a <!--b--> c</a> - <a href="c">a <b>b</b> c</a> - <script><![CDATA[ - var d = document.getElementById("test") - .appendChild(document.createElementNS("http://www.w3.org/2000/svg","a")); - d.href.baseVal = "d"; - d.appendChild(document.createTextNode("a ")); - d.appendChild(document.createTextNode("b ")); - d.appendChild(document.createTextNode("c ")); - ]]></script> - </g> - <h:script src="/resources/testharness.js"/> - <h:script src="/resources/testharnessreport.js"/> - <script><![CDATA[ - test(function() { - var list = document.getElementById("test") - .getElementsByTagName("a"); - for (var i = 0, il = list.length; i < il; ++i) { - test(function() { - list[i].text = "x"; - assert_equals(list[i].text, "x"); - assert_equals(list[i].textContent, "x"); - assert_equals(list[i].firstChild.data, "x"); - assert_equals(list[i].childNodes.length, 1); - - list[i].textContent = "y"; - assert_equals(list[i].text, "y"); - assert_equals(list[i].textContent, "y"); - assert_equals(list[i].firstChild.data, "y"); - assert_equals(list[i].childNodes.length, 1); - }, "Test for anchor " + i); - } - }); - ]]></script> -</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-001.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-001.svg index fd58d9b790..7be33cb20f 100644 --- a/testing/web-platform/tests/svg/painting/reftests/paint-context-001.svg +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-001.svg @@ -35,7 +35,7 @@ <defs> <rect id="rectangle" width="2" height="2" style="fill:context-stroke;stroke:context-fill" /> <marker id="marker" style="overflow:visible" markerWidth="2" markerHeight="2" orient="auto" viewBox="0 0 2 2" refX="1" refY="1"> - <use xlink:href="#rectangle"/> + <use xlink:href="#rectangle" style="fill:context-fill;stroke:context-stroke"/> </marker> <path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/> </defs> @@ -44,4 +44,4 @@ <path d="m 120,220 c 120,120 120,-120 240,0"/> </g> -</svg> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-003-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-003-ref.svg new file mode 100644 index 0000000000..69ba36f448 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-003-ref.svg @@ -0,0 +1,17 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Paint: 'context-fill' and 'context-stroke' vis-a-vis 'currentcolor'</title> + <html:link rel="author" + title="Stefan Zager" + href="mailto:szager@chromium.org"/> + </g> + + <g style="stroke-width:15px"> + <rect x="25" y="25" width="100" height="100" fill="green" stroke="none"/> + <rect x="150" y="25" width="100" height="100" fill="none" stroke="green"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-003.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-003.svg new file mode 100644 index 0000000000..be1f378bf8 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-003.svg @@ -0,0 +1,26 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Paint: 'context-fill' and 'context-stroke' vis-a-vis 'currentcolor'</title> + <html:link rel="author" + title="Stefan Zager" + href="mailto:szager@chromium.org"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint"/> + <html:link rel="match" href="paint-context-003-ref.svg"/> + </g> + + <defs> + <g id="g" color="green"> + <rect width="100" height="100" fill="context-fill" stroke="context-stroke"/> + </g> + </defs> + + <g id="test-body-content" color="red" style="stroke-width:15px"> + <use x="25" y="25" href="#g" stroke="none" fill="currentcolor"/> + <use x="150" y="25" href="#g" stroke="currentcolor" fill="none"/> + </g> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-004-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-004-ref.svg new file mode 100644 index 0000000000..25acb75ba0 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-004-ref.svg @@ -0,0 +1,30 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 120 90" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Paint: 'context-fill' and 'context-stroke' with paint server</title> + <html:link rel="author" + title="Stefan Zager" + href="mailto:szager@chromium.org"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint"/> + </g> + + <defs> + <pattern id="grid-ref" x="0" y="0" width="8" height="8" stroke="blue" stroke-width="2" patternUnits="userSpaceOnUse"> + <path d="M 0,4 h 8"/> + <path d="M 4,0 v 8"/> + </pattern> + + <g id="rects-ref" fill="url(#grid-ref)"> + <rect x="0" y="0" width="32" height="64"/> + <rect x="32" y="6" width="32" height="58"/> + </g> + </defs> + + <g id="ref-content"> + <use x="18" y="18" xlink:href="#rects-ref"/> + </g> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-004.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-004.svg new file mode 100644 index 0000000000..669d44de46 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-004.svg @@ -0,0 +1,31 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 120 90" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Paint: 'context-fill' and 'context-stroke' with paint server</title> + <html:link rel="author" + title="Stefan Zager" + href="mailto:szager@chromium.org"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint"/> + <html:link rel="match" href="paint-context-004-ref.svg" /> + </g> + + <defs> + <pattern id="grid" x="0" y="0" width="0.125" height="0.125" stroke="blue" stroke-width="0.03125" patternContentUnits="objectBoundingBox"> + <path d="M 0,0.0625 h 0.125"/> + <path d="M 0.0625,0 v 0.125"/> + </pattern> + + <g id="rects"> + <rect x="0" y="0" width="32" height="64" fill="context-fill"/> + <rect x="32" y="6" width="32" height="58" fill="context-fill"/> + </g> + </defs> + + <g id="test-body-content"> + <use x="18" y="18" fill="url(#grid)" xlink:href="#rects"/> + </g> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-005-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-005-ref.svg new file mode 100644 index 0000000000..fa30a5361c --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-005-ref.svg @@ -0,0 +1,22 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Paint: 'paint-order'</title> + <html:link rel="author" + title="Stefan Zager" + href="mailto:szager@chromium.org"/> + </g> + + <defs> + <rect id="rectangle" width="120" height="120" /> + </defs> + + <g id="test-reference" font-size="16" style="fill:lime;stroke:blue;stroke-width:15px"> + <use xlink:href="#rectangle" transform="translate(60,120)"/> + <use xlink:href="#rectangle" transform="translate(300,120)" style="fill:lightblue;stroke:green"/> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-005.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-005.svg new file mode 100644 index 0000000000..8bbfff8d47 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-005.svg @@ -0,0 +1,39 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Paint: 'context-fill' and 'context-stroke' invalidation test</title> + <html:link rel="author" + title="Stefan Zager" + href="mailto:szager@chromium.org"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint"/> + <html:link rel="match" href="paint-context-005-ref.svg" /> + </g> + + <html:script src="/resources/testharness.js"/> + <html:script src="/resources/testharnessreport.js"/> + + <defs> + <rect id="rectangle" width="120" height="120" style="fill:context-fill;stroke:context-stroke" /> + </defs> + + <g id="test-body-content" font-size="16" style="fill:blue;stroke:lime;stroke-width:15px"> + <use xlink:href="#rectangle" transform="translate(60,120)"/> + <use id="use" xlink:href="#rectangle" transform="translate(300,120)" style="fill:green;stroke:lightblue"/> + </g> + + <html:script> + async_test(t => { + onload = () => { + requestAnimationFrame(() => { requestAnimationFrame(() => { + let use = document.getElementById("use"); + use.style = "fill:lightblue;stroke:green"; + requestAnimationFrame(() => { t.done() }); + })}); + }; + }); + </html:script> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-order-002-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-order-002-ref.svg new file mode 100644 index 0000000000..372e53e463 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-order-002-ref.svg @@ -0,0 +1,61 @@ +<svg viewBox="-10 -10 280 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <marker id="m" refX="5" refY="5" viewBox="0 0 10 10" overflow="visible"> + <circle cx="5" cy="5" r="3" fill="black" stroke="black" fill-opacity="0.5"/> + </marker> + <svg id="poly" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke="lime" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + </svg> + <svg id="poly-f-m-s" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke="lime" stroke-width="50" stroke-opacity="0.5"/> + </svg> + <svg id="poly-m-f-s" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke-width="50" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke="lime" stroke-width="50" stroke-opacity="0.5"/> + </svg> + <svg id="poly-s-m-f" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke="lime" stroke-width="50" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke-width="50" stroke-opacity="0.5"/> + </svg> + <svg id="poly-s-f-m" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke="lime" stroke-width="50" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke-width="50" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + </svg> + <svg id="poly-m-s-f" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="none" stroke="lime" stroke-width="50" stroke-opacity="0.5"/> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke-width="50" stroke-opacity="0.5"/> + </svg> + </defs> + + <use xlink:href="#poly" width="50" height="50"/> + <use xlink:href="#poly" width="50" height="50" x="50"/> + + <g transform="translate(0,50)"> + <use xlink:href="#poly" width="50" height="50" x="0"/> + <use xlink:href="#poly" width="50" height="50" x="50"/> + <use xlink:href="#poly" width="50" height="50" x="100"/> + <use xlink:href="#poly-f-m-s" width="50" height="50" x="150"/> + <use xlink:href="#poly-f-m-s" width="50" height="50" x="200" /> + </g> + + <g transform="translate(0,100)"> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="0"/> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="50"/> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="100"/> + <use xlink:href="#poly-s-m-f" width="50" height="50" x="150"/> + <use xlink:href="#poly-s-m-f" width="50" height="50" x="200"/> + </g> + + <g transform="translate(0,150)"> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="0"/> + <use xlink:href="#poly-m-s-f" width="50" height="50" x="50"/> + <use xlink:href="#poly-m-s-f" width="50" height="50" x="100"/> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="150"/> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="200"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-order-002.svg b/testing/web-platform/tests/svg/painting/reftests/paint-order-002.svg new file mode 100644 index 0000000000..a9bf7d01fc --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-order-002.svg @@ -0,0 +1,39 @@ +<svg viewBox="-10 -10 280 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml"> + <h:link rel="match" href="paint-order-002-ref.svg"/> + <defs> + <marker id="m" refX="5" refY="5" viewBox="0 0 10 10" overflow="visible"> + <circle cx="5" cy="5" r="3" fill="black" stroke="black" fill-opacity="0.5"/> + </marker> + <svg id="poly" viewBox="-10 -10 420 420"> + <polygon points="50 50 50 350 350 350 250 200" fill="blue" stroke="lime" stroke-width="50" style="marker: url(#m)" stroke-opacity="0.5"/> + </svg> + </defs> + + <use xlink:href="#poly" width="50" height="50"/> + <use xlink:href="#poly" style="paint-order: normal" width="50" height="50" x="50"/> + + <g transform="translate(0,50)"> + <use xlink:href="#poly" style="paint-order: fill" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: fill stroke" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: fill stroke markers" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: fill markers" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: fill markers stroke" width="50" height="50" x="200" /> + </g> + + <g transform="translate(0,100)"> + <use xlink:href="#poly" style="paint-order: stroke" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: stroke fill" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: stroke fill markers" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: stroke markers" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: stroke markers fill" width="50" height="50" x="200"/> + </g> + + <g transform="translate(0,150)"> + <use xlink:href="#poly" style="paint-order: markers" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: markers stroke" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: markers stroke fill" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: markers fill" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: markers fill stroke" width="50" height="50" x="200"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-order-003-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-order-003-ref.svg new file mode 100644 index 0000000000..6abc0c76af --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-order-003-ref.svg @@ -0,0 +1,61 @@ +<svg viewBox="-10 -10 280 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <marker id="m" refX="5" refY="5" viewBox="0 0 10 10" overflow="visible"> + <circle cx="5" cy="5" r="3" fill="black" stroke="black" fill-opacity="0.5"/> + </marker> + <svg id="poly" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke="lime" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + </svg> + <svg id="poly-f-m-s" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + <svg id="poly-m-f-s" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + <svg id="poly-s-m-f" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + <svg id="poly-s-f-m" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + </svg> + <svg id="poly-m-s-f" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + </defs> + + <use xlink:href="#poly" width="50" height="50"/> + <use xlink:href="#poly" width="50" height="50" x="50"/> + + <g transform="translate(0,50)"> + <use xlink:href="#poly" width="50" height="50" x="0"/> + <use xlink:href="#poly" width="50" height="50" x="50"/> + <use xlink:href="#poly" width="50" height="50" x="100"/> + <use xlink:href="#poly-f-m-s" width="50" height="50" x="150"/> + <use xlink:href="#poly-f-m-s" width="50" height="50" x="200" /> + </g> + + <g transform="translate(0,100)"> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="0"/> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="50"/> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="100"/> + <use xlink:href="#poly-s-m-f" width="50" height="50" x="150"/> + <use xlink:href="#poly-s-m-f" width="50" height="50" x="200"/> + </g> + + <g transform="translate(0,150)"> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="0"/> + <use xlink:href="#poly-m-s-f" width="50" height="50" x="50"/> + <use xlink:href="#poly-m-s-f" width="50" height="50" x="100"/> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="150"/> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="200"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-order-003.svg b/testing/web-platform/tests/svg/painting/reftests/paint-order-003.svg new file mode 100644 index 0000000000..f196260074 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paint-order-003.svg @@ -0,0 +1,39 @@ +<svg viewBox="-10 -10 280 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:h="http://www.w3.org/1999/xhtml"> + <h:link rel="match" href="paint-order-003-ref.svg"/> + <defs> + <marker id="m" refX="5" refY="5" viewBox="0 0 10 10" overflow="visible"> + <circle cx="5" cy="5" r="3" fill="black" stroke="black" fill-opacity="0.5"/> + </marker> + <svg id="poly" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke="lime" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + </svg> + </defs> + + <use xlink:href="#poly" width="50" height="50"/> + <use xlink:href="#poly" style="paint-order: normal" width="50" height="50" x="50"/> + + <g transform="translate(0,50)"> + <use xlink:href="#poly" style="paint-order: fill" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: fill stroke" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: fill stroke markers" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: fill markers" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: fill markers stroke" width="50" height="50" x="200" /> + </g> + + <g transform="translate(0,100)"> + <use xlink:href="#poly" style="paint-order: stroke" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: stroke fill" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: stroke fill markers" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: stroke markers" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: stroke markers fill" width="50" height="50" x="200"/> + </g> + + <g transform="translate(0,150)"> + <use xlink:href="#poly" style="paint-order: markers" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: markers stroke" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: markers stroke fill" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: markers fill" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: markers fill stroke" width="50" height="50" x="200"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations-ref.svg new file mode 100644 index 0000000000..c209d88a77 --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations-ref.svg @@ -0,0 +1,66 @@ +<svg viewBox="-10 -10 280 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + text { + text-decoration: underline; + } + </style> + <defs> + <marker id="m" refX="5" refY="5" viewBox="0 0 10 10" overflow="visible"> + <circle cx="5" cy="5" r="3" fill="black" stroke="black" fill-opacity="0.5"/> + </marker> + <svg id="poly" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke="lime" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + </svg> + <svg id="poly-f-m-s" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m); text-decoration: underline">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + <svg id="poly-m-f-s" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + <svg id="poly-s-m-f" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + <svg id="poly-s-f-m" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + </svg> + <svg id="poly-m-s-f" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m)">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="none" stroke="lime" stroke-width="10" stroke-opacity="0.5">test</text> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke-width="10" stroke-opacity="0.5">test</text> + </svg> + </defs> + + <use xlink:href="#poly" width="50" height="50"/> + <use xlink:href="#poly" width="50" height="50" x="50"/> + + <g transform="translate(0,50)"> + <use xlink:href="#poly" width="50" height="50" x="0"/> + <use xlink:href="#poly" width="50" height="50" x="50"/> + <use xlink:href="#poly" width="50" height="50" x="100"/> + <use xlink:href="#poly-f-m-s" width="50" height="50" x="150"/> + <use xlink:href="#poly-f-m-s" width="50" height="50" x="200" /> + </g> + + <g transform="translate(0,100)"> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="0"/> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="50"/> + <use xlink:href="#poly-s-f-m" width="50" height="50" x="100"/> + <use xlink:href="#poly-s-m-f" width="50" height="50" x="150"/> + <use xlink:href="#poly-s-m-f" width="50" height="50" x="200"/> + </g> + + <g transform="translate(0,150)"> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="0"/> + <use xlink:href="#poly-m-s-f" width="50" height="50" x="50"/> + <use xlink:href="#poly-m-s-f" width="50" height="50" x="100"/> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="150"/> + <use xlink:href="#poly-m-f-s" width="50" height="50" x="200"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations.svg b/testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations.svg new file mode 100644 index 0000000000..5b313220bd --- /dev/null +++ b/testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations.svg @@ -0,0 +1,38 @@ +<svg viewBox="-10 -10 280 220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml"> + <html:link rel="match" href="paintorder-text-decorations-ref.svg"/> + <defs> + <marker id="m" refX="5" refY="5" viewBox="0 0 10 10" overflow="visible"> + <circle cx="5" cy="5" r="3" fill="black" stroke="black" fill-opacity="0.5"/> + </marker> + <svg id="poly" viewBox="-10 -10 420 420"> + <text y="300" font-family="sans-serif" font-size="200" fill="blue" stroke="lime" stroke-width="10" stroke-opacity="0.5" style="marker: url(#m); text-decoration: underline">test</text> + </svg> + </defs> + + <use xlink:href="#poly" width="50" height="50"/> + <use xlink:href="#poly" style="paint-order: normal" width="50" height="50" x="50"/> + + <g transform="translate(0,50)"> + <use xlink:href="#poly" style="paint-order: fill" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: fill stroke" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: fill stroke markers" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: fill markers" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: fill markers stroke" width="50" height="50" x="200" /> + </g> + + <g transform="translate(0,100)"> + <use xlink:href="#poly" style="paint-order: stroke" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: stroke fill" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: stroke fill markers" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: stroke markers" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: stroke markers fill" width="50" height="50" x="200"/> + </g> + + <g transform="translate(0,150)"> + <use xlink:href="#poly" style="paint-order: markers" width="50" height="50" x="0"/> + <use xlink:href="#poly" style="paint-order: markers stroke" width="50" height="50" x="50"/> + <use xlink:href="#poly" style="paint-order: markers stroke fill" width="50" height="50" x="100"/> + <use xlink:href="#poly" style="paint-order: markers fill" width="50" height="50" x="150"/> + <use xlink:href="#poly" style="paint-order: markers fill stroke" width="50" height="50" x="200"/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/pservers/reftests/gradient-transform-03.svg b/testing/web-platform/tests/svg/pservers/reftests/gradient-transform-03.svg new file mode 100644 index 0000000000..25e304614d --- /dev/null +++ b/testing/web-platform/tests/svg/pservers/reftests/gradient-transform-03.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <title>Gradient with 'transform' property added dynamically</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#pservers-LinearGradientElementGradientTransformAttribute"/> + <h:link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-attribute-specificity"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:script src="/common/reftest-wait.js"/> + <h:script src="/common/rendering-utils.js"/> + + <linearGradient id="lg"> + <stop offset="0" stop-color="green"/> + <stop offset="0.5" stop-color="green"/> + <stop offset="1" stop-color="red"/> + </linearGradient> + <rect width="100" height="100" fill="url(#lg)"/> + <script> + waitForAtLeastOneFrame().then(() => { + const gradient = document.getElementById('lg'); + gradient.style.transform = 'scale(2)'; + takeScreenshot(); + }); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/pservers/reftests/pattern-transform-03.svg b/testing/web-platform/tests/svg/pservers/reftests/pattern-transform-03.svg new file mode 100644 index 0000000000..b2e0e7aaa2 --- /dev/null +++ b/testing/web-platform/tests/svg/pservers/reftests/pattern-transform-03.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <title>Pattern with 'transform' property added dynamically</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#pservers-PatternElementPatternTransformAttribute"/> + <h:link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-attribute-specificity"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:script src="/common/reftest-wait.js"/> + <h:script src="/common/rendering-utils.js"/> + + <pattern id="pat" width="100" height="100"> + <rect x="25" y="25" width="75" height="75" fill="red"/> + <rect width="75" height="75" fill="green"/> + </pattern> + <rect width="100" height="100" fill="url(#pat)"/> + <script> + waitForAtLeastOneFrame().then(() => { + const pattern = document.getElementById('pat'); + pattern.style.transform = 'translate(-25px, -25px) scale(2)'; + takeScreenshot(); + }); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/rendering/order/clip-path-filter-order-ref.svg b/testing/web-platform/tests/svg/render/order/clip-path-filter-order-ref.svg index ea42d9eb02..ea42d9eb02 100644 --- a/testing/web-platform/tests/svg/rendering/order/clip-path-filter-order-ref.svg +++ b/testing/web-platform/tests/svg/render/order/clip-path-filter-order-ref.svg diff --git a/testing/web-platform/tests/svg/rendering/order/clip-path-filter-order.svg b/testing/web-platform/tests/svg/render/order/clip-path-filter-order.svg index 22cda52d68..22cda52d68 100644 --- a/testing/web-platform/tests/svg/rendering/order/clip-path-filter-order.svg +++ b/testing/web-platform/tests/svg/render/order/clip-path-filter-order.svg diff --git a/testing/web-platform/tests/svg/rendering/order/z-index-ref.svg b/testing/web-platform/tests/svg/render/order/z-index-ref.svg index ff7f915668..ff7f915668 100644 --- a/testing/web-platform/tests/svg/rendering/order/z-index-ref.svg +++ b/testing/web-platform/tests/svg/render/order/z-index-ref.svg diff --git a/testing/web-platform/tests/svg/rendering/order/z-index.svg b/testing/web-platform/tests/svg/render/order/z-index.svg index 786290a158..786290a158 100644 --- a/testing/web-platform/tests/svg/rendering/order/z-index.svg +++ b/testing/web-platform/tests/svg/render/order/z-index.svg diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-checkIntersection-002.svg b/testing/web-platform/tests/svg/struct/scripted/svg-checkIntersection-002.svg new file mode 100644 index 0000000000..1ff1f7829f --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-checkIntersection-002.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>checkIntersection()</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#__svg__SVGSVGElement__checkIntersection"/> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + + <g id="g_outer"> + <g id="g_inner_top"> + <rect id="r_top_left" width="50" height="50"/> + <rect x="50" width="50" height="50"/> + </g> + <g transform="translate(0, 50)"> + <rect width="50" height="50"/> + <rect x="50" width="50" height="50"/> + </g> + </g> + <script> + function makeRect(x, y, width, height) { + const svg = document.documentElement; + return Object.assign(svg.createSVGRect(), {x, y, width, height}); + } + test(t => { + [ + { element: 'r_top_left', rect: [10, 10, 10, 10], expected: true }, + { element: 'r_top_left', rect: [10, 10, 80, 10], expected: true }, + { element: 'r_top_left', rect: [60, 10, 10, 10], expected: false }, + { element: 'g_inner_top', rect: [10, 10, 80, 10], expected: true }, + { element: 'g_inner_top', rect: [60, 10, 10, 10], expected: false }, + { element: 'g_outer', rect: [10, 10, 80, 10], expected: false }, + { element: 'g_outer', rect: [10, 10, 80, 80], expected: true }, + ].forEach(testcase => { + const element = document.getElementById(testcase.element); + const rect = makeRect(...testcase.rect); + const svg = document.documentElement; + assert_equals(svg.checkIntersection(element, rect), testcase.expected, + `${document.title}, element ${testcase.element} rect ${testcase.rect}`); + }); + }); + </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 index c2c1f8e425..dd30943569 100644 --- a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-002.svg +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-002.svg @@ -10,7 +10,7 @@ r.x = 0; r.y = 0; r.width = 100; - r.height = 100; + r.height = 99.9; assert_equals(testSVG.getIntersectionList(r, testSVG).length, 1); }); diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-005.svg b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-005.svg new file mode 100644 index 0000000000..717c15eef5 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-005.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>getIntersectionList() on element with intersecting bounding box</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#__svg__SVGSVGElement__getIntersectionList"/> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + + <rect id="e0" x="110" y="100" width="100" height="100" fill="red"/> + <rect id="e1" x="160" y="130" width="40" height="40" fill="green"/> + <path id="e2" stroke="blue" fill="none" stroke-width="2" d="M100 200 120 110 220 100"/> + + <script> +test(t => { + const svg = document.documentElement; + const queryRect = document.getElementById('e1').getBBox(); + + const list = svg.getIntersectionList(queryRect, null); + const result = Array.from(list).map(e => e.id).sort(); + assert_array_equals(result, ['e0', 'e1']); +}); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-006.svg b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-006.svg new file mode 100644 index 0000000000..a7b9465013 --- /dev/null +++ b/testing/web-platform/tests/svg/struct/scripted/svg-getIntersectionList-006.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>getIntersectionList() with <use></title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#__svg__SVGSVGElement__getIntersectionList"/> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + + <defs> + <g id="conn"> + <circle cx="0" cy="0" r="20"/> + </g> + </defs> + <circle cx="65" cy="50" r="20" fill="blue"/> + <use href="#conn" x="50" y="50" fill="red"/> + + <script> + function getMatchingLocalNames(x, y) { + const svg = document.documentElement; + const rect = Object.assign(svg.createSVGRect(), {x, y, width: 1, height: 1}); + const elems = svg.getIntersectionList(rect, null); + return Array.from(elems).map(e => e.localName).sort(); + } + + test(t => { + assert_array_equals(getMatchingLocalNames(50, 60), ['circle', 'use']); + assert_array_equals(getMatchingLocalNames(0, 0), []); + }); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/color-inherit-link-visited-ref.svg b/testing/web-platform/tests/svg/styling/color-inherit-link-visited-ref.svg index 3342e9347c..3342e9347c 100644 --- a/testing/web-platform/tests/svg/color-inherit-link-visited-ref.svg +++ b/testing/web-platform/tests/svg/styling/color-inherit-link-visited-ref.svg diff --git a/testing/web-platform/tests/svg/color-inherit-link-visited.svg b/testing/web-platform/tests/svg/styling/color-inherit-link-visited.svg index 9324f1116b..9324f1116b 100644 --- a/testing/web-platform/tests/svg/color-inherit-link-visited.svg +++ b/testing/web-platform/tests/svg/styling/color-inherit-link-visited.svg |
