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>