summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/svg/painting/reftests
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/svg/painting/reftests')
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-001.svg4
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-003-ref.svg17
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-003.svg26
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-004-ref.svg30
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-004.svg31
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-005-ref.svg22
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-context-005.svg39
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-order-002-ref.svg61
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-order-002.svg39
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-order-003-ref.svg61
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paint-order-003.svg39
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations-ref.svg66
-rw-r--r--testing/web-platform/tests/svg/painting/reftests/paintorder-text-decorations.svg38
13 files changed, 471 insertions, 2 deletions
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>