Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/svg/painting
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
143 files changed, 4764 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/painting/OWNERS b/testing/web-platform/tests/svg/painting/OWNERS
new file mode 100644
index 0000000000..47be782163
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/OWNERS
@@ -0,0 +1 @@
+@kamidphish
+\ No newline at end of file
diff --git a/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fallback-ref.svg b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fallback-ref.svg
new file mode 100644
index 0000000000..c4d946beb6
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fallback-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- pattern inherits fill color via currentcolor -->
+  <circle stroke="black" fill="limegreen" cx="50" cy="50" r="40" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fallback.svg b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fallback.svg
new file mode 100644
index 0000000000..49d7fea59c
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fallback.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <metadata>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com"/>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/pservers.html"/>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="currentColor-override-pserver-fallback-ref.svg"/>
+    <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="missing pattern fallback inherits fill color via currentcolor."/>
+  </metadata>
+
+  <g fill="url(#NotFound) currentcolor" color="red">
+    <circle color="limegreen" stroke="black" cx="50" cy="50" r="40" />
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fill-ref.svg b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fill-ref.svg
new file mode 100644
index 0000000000..c86b77931b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fill-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- pattern inherits fill color via currentcolor -->
+  <defs>
+    <pattern id="MyPattern" patternUnits="userSpaceOnUse"
+             x="5" y ="5" width="10" height="10">
+      <circle fill="limegreen" cx="5" cy="5" r="5" />
+    </pattern>
+  </defs>
+
+  <circle color="blue" stroke="black" fill="url(#MyPattern)" cx="50" cy="50" r="40" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fill.svg b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fill.svg
new file mode 100644
index 0000000000..0e3d9ff116
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-fill.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <metadata>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com"/>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/pservers.html"/>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="currentColor-override-pserver-fill-ref.svg"/>
+    <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="pattern inherits fill color via currentcolor."/>
+  </metadata>
+
+  <defs>
+    <pattern id="MyPattern" patternUnits="userSpaceOnUse"
+             x="5" y ="5" width="10" height="10" color="red" fill="currentcolor">
+      <circle color="limegreen" fill="inherit" cx="5" cy="5" r="5" />
+    </pattern>
+  </defs>
+
+  <circle stroke="black" fill="url(#MyPattern)" cx="50" cy="50" r="40" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/currentColor-override-pserver-stroke-ref.svg b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-stroke-ref.svg
new file mode 100644
index 0000000000..0b7a5f8ec9
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-stroke-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- pattern inherits fill color via currentcolor -->
+  <defs>
+    <pattern id="MyPattern" patternUnits="userSpaceOnUse"
+             x="5" y ="5" width="10" height="10">
+      <circle stroke="limegreen" stroke-width="5%" cx="5" cy="5" r="5" />
+    </pattern>
+  </defs>
+
+  <circle stroke="black" fill="url(#MyPattern)" cx="50" cy="50" r="40" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/currentColor-override-pserver-stroke.svg b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-stroke.svg
new file mode 100644
index 0000000000..bff502c22b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/currentColor-override-pserver-stroke.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <metadata>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com"/>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/pservers.html"/>
+    <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="currentColor-override-pserver-stroke-ref.svg"/>
+    <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="pattern inherits stroke color via currentcolor."/>
+  </metadata>
+
+  <defs>
+    <pattern id="MyPattern" patternUnits="userSpaceOnUse"
+             x="5" y ="5" width="10" height="10" color="red" stroke="currentcolor">
+      <circle color="limegreen" stroke="inherit" stroke-width="5%" cx="5" cy="5" r="5" />
+    </pattern>
+  </defs>
+
+  <circle stroke="black" fill="url(#MyPattern)" cx="50" cy="50" r="40" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/foreignObject-overflow-ref.html b/testing/web-platform/tests/svg/painting/foreignObject-overflow-ref.html
new file mode 100644
index 0000000000..2de1a2fe26
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/foreignObject-overflow-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<title>foreignObject overflow</title>
+<svg width="400" height="400">
+  <foreignObject x="100" y="100" style="overflow: visible" width="250" height="250" font-size="16px">
+    <div style="width:100px;height:100px;background:yellow;border:1px solid red">
+      <div style="position:absolute;top:20px;left:30px;width:20px;height:20px;background:navy"></div>
+      Should show all the text
+    </div>
+  </foreignObject>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/foreignObject-overflow.html b/testing/web-platform/tests/svg/painting/foreignObject-overflow.html
new file mode 100644
index 0000000000..2802884bda
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/foreignObject-overflow.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<title>foreignObject overflow</title>
+<link rel="match" href="foreignObject-overflow-ref.html">
+<svg width="400" height="400">
+  <foreignObject x="100" y="100" style="overflow: visible" width="2" height="2" font-size="16px">
+    <div style="width:100px;height:100px;background:yellow;border:1px solid red">
+      <div style="position:absolute;top:20px;left:30px;width:20px;height:20px;background:navy"></div>
+      Should show all the text
+    </div>
+  </foreignObject>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/inheritance.svg b/testing/web-platform/tests/svg/painting/inheritance.svg
new file mode 100644
index 0000000000..e79ac3b310
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/inheritance.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>Inheritance of SVG painting properties</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html"/>
+    <h:meta name="assert" content="properties inherit according to the spec."/>
+    <h:meta name="assert" content="properties have expected initial values."/>
+  </metadata>
+  <g id="container">
+      <g id="target"></g>
+  </g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/inheritance-testcommon.js"/>
+  <script><![CDATA[
+
+assert_inherited('fill', 'rgb(0, 0, 0)', 'rgb(42, 53, 64)');
+assert_inherited('fill-rule', 'nonzero', 'evenodd');
+assert_inherited('fill-opacity', '1', '0.5');
+assert_inherited('stroke', 'none', 'rgb(42, 53, 64)');
+assert_inherited('stroke-opacity', '1', '0.5');
+assert_inherited('stroke-width', '1px', '3px');
+assert_inherited('stroke-linecap', 'butt', 'round');
+assert_inherited('stroke-linejoin', 'miter', 'round');
+assert_inherited('stroke-miterlimit', '4', '12');
+assert_inherited('stroke-dasharray', 'none', '1px, 2px, 3px');
+assert_inherited('stroke-dashoffset', '0px', '50%');
+assert_inherited('marker-start', 'none', 'url("https://example/com/diagram.svg#marker")');
+assert_inherited('marker-mid', 'none', 'url("https://example/com/diagram.svg#marker")');
+assert_inherited('marker-end', 'none', 'url("https://example/com/diagram.svg#marker")');
+assert_inherited('paint-order', 'normal', 'markers stroke');
+assert_inherited('color-interpolation', 'srgb', 'linearrgb');
+assert_inherited('shape-rendering', 'auto', 'optimizespeed');
+assert_inherited('text-rendering', 'auto', 'optimizespeed');
+assert_inherited('image-rendering', 'auto', 'optimizequality');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-001-ref.svg b/testing/web-platform/tests/svg/painting/marker-001-ref.svg
new file mode 100644
index 0000000000..09bc3b7f77
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-001-ref.svg
@@ -0,0 +1,37 @@
+<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
+  <text x="10" y="30" font-size="14">Basic Markers</text>
+  <path fill="none" stroke="black" stroke-width="16" d="M 130 40 L 180 40 L 180 90"/>
+  <g transform="translate(114,24)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+  <g transform="translate(164,24)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+  <g transform="translate(164,74)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+
+  <text x="10" y="115" font-size="14">Start, Middle and End</text>
+  <path fill="none" stroke="black" stroke-width="16" d="M 130 135 L 180 135 L 180 185"/>
+  <g transform="translate(114,119)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+  <g transform="translate(180,135)">
+    <circle r="16" fill="green" stroke="none"/>
+  </g>
+  <g transform="translate(164,169)">
+    <path d="M 16 0 L 32 32 L 0 32 Z" fill="blue" stroke="none"/>
+  </g>
+
+  <text x="10" y="210" font-size="14">Automatic Orientation</text>
+  <path fill="none" stroke="black" stroke-width="16" d="M 130 230 L 180 230 L 180 280"/>
+  <g transform="translate(130,230) rotate(0)">
+    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
+  </g>
+  <g transform="translate(180,230) rotate(45)">
+    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
+  </g>
+  <g transform="translate(180,280) rotate(90)">
+    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-001.svg b/testing/web-platform/tests/svg/painting/marker-001.svg
new file mode 100644
index 0000000000..dbcfd5b432
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-001.svg
@@ -0,0 +1,55 @@
+<svg width="300" height="300"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    Tests the basic support for markers.
+
+    The top test examines the basic support for the marker element and style. The
+    markers are purple rectangles.
+
+    The middle test examines the support for the different styles of marker
+    properties. The "marker-start" property defines the marker to use at the first
+    vertex of the marked path, in this case a purple rectangle. The "marker-end"
+    property defines the marker to use at the last vertex of the marked path, in
+    this case a blue triangle. The "marker-mid" property defines the marker to use
+    at all vertices, other than the first and last, of the marked path, in this
+    case a green circle.
+
+    The bottom test examines the support for marker orientation along the path
+    direction. The second vertex, the top right corner of the path, has a marker
+    that is rotated 45 degrees, since that is the average of the horizontal and
+    vertical segments each side. The last vertex, the bottom right corner of the
+    path, has a marker rotated 90 degrees since that is the direction of the last
+    path segment.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-001-ref.svg"/>
+    <html:meta name="assert" content="Tests the basic support for markers."/>
+    <defs>
+      <!-- Define a few simple marker elements -->
+      <marker id="marker1" refX="1" refY="1" overflow="visible" >
+        <rect width="2" height="2" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="marker2" orient="auto" refX="1" refY="1" overflow="visible">
+        <path d="M 1 0 L 2 2 L 0 2 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="markerStart" refX="1" refY="1" overflow="visible">
+        <rect width="2" height="2" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="markerMiddle" overflow="visible">
+        <circle cx="0" cy="0" r="1" fill="green" stroke="none"/>
+      </marker>
+      <marker id="markerEnd" refX="1" refY="1" overflow="visible">
+        <path d="M 1 0 L 2 2 L 0 2 Z" fill="blue" stroke="none"/>
+      </marker>
+    </defs>
+    <!-- Basic Marker Test -->
+    <text x="10" y="30" font-size="14">Basic Markers</text>
+    <path fill="none" stroke="black" stroke-width="16" marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 130 40 L 180 40 L 180 90"/>
+    <!-- Start, Middle and End Marker Test -->
+    <text x="10" y="115" font-size="14">Start, Middle and End</text>
+    <path fill="none" stroke="black" stroke-width="16" marker-start="url(#markerStart)" marker-mid="url(#markerMiddle)" marker-end="url(#markerEnd)" d="M 130 135 L 180 135 L 180 185"/>
+    <!-- Auto Orientation Marker Test -->
+    <text x="10" y="210" font-size="14">Automatic Orientation</text>
+    <path fill="none" stroke="black" stroke-width="16" marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 130 230 L 180 230 L 180 280"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-002-ref.svg b/testing/web-platform/tests/svg/painting/marker-002-ref.svg
new file mode 100644
index 0000000000..1b1446ce11
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-002-ref.svg
@@ -0,0 +1,43 @@
+<svg width="500" height="500"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <g>
+      <text x="125" y="30" font-size="14" fill="black">Marker Rendering Properties</text>
+      <!-- Fill property -->
+      <g>
+        <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
+          <rect width="10" height="10" fill="black" stroke="none" stroke-width="8"/>
+        </marker>
+        <text x="100" y="140" font-size="10" fill="black" stroke="none">Fill Property</text>
+        <path marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 30 60 L 80 60 L 80 110 Z"
+            fill="black" stroke="none" stroke-width="8"/>
+      </g>
+      <!-- Stroke property -->
+      <g>
+        <marker id="marker2" viewBox="0 0 20 20" markerWidth="4" markerHeight="4" refX="10" refY="10" markerUnits="strokeWidth">
+          <rect width="20" height="20" fill="none" stroke="black" stroke-width="4"/>
+        </marker>
+        <text x="340" y="140" font-size="10" fill="black" stroke="none">Stroke Property</text>
+        <path marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 270 60 L 320 60 L 320 110 Z"
+            fill="none" stroke="black" stroke-width="4"/>
+      </g>
+      <!-- Define marker element with parents setting painting properties -->
+      <g>
+        <marker id="marker3" viewBox="0 0 20 20" markerWidth="4" markerHeight="4" refX="10" refY="10" markerUnits="strokeWidth">
+          <rect width="20" height="20" stroke="black" fill="green" stroke-width="8"/>
+        </marker>
+        <marker id="marker4" viewBox="0 0 10 10" markerWidth="4" markerHeight="4" refX="5" refY="5" markerUnits="strokeWidth">
+          <rect width="10" height="10" fill="black" stroke-width="4" stroke="blue"/>
+        </marker>
+      </g>
+      <!-- Parent and specified properties -->
+      <g>
+        <text x="90" y="270" font-size="10" fill="black" stroke="none">Mixed Properties</text>
+        <path stroke="purple" stroke-width="4" marker-start="url(#marker3)" marker-mid="url(#marker3)" marker-end="url(#marker3)" d="M 30 190 L 80 190 L 80 240 Z" fill="orange"/>
+      </g>
+      <g>
+        <text x="340" y="270" font-size="10" fill="black" stroke="none">Mixed Properties</text>
+        <path stroke="purple" stroke-width="4" marker-start="url(#marker4)" marker-mid="url(#marker4)" marker-end="url(#marker4)" d="M 270 190 L 320 190 L 320 240 Z" fill="orange"/>
+      </g>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-002.svg b/testing/web-platform/tests/svg/painting/marker-002.svg
new file mode 100644
index 0000000000..790edd1cab
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-002.svg
@@ -0,0 +1,67 @@
+<svg width="500" height="500"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    Tests the rendering of markers, specifically property inheritance. For the four
+    tests, there should be two identical paths with markers drawn.
+
+    The top two tests examine the rendering of markers when the marker and the path
+    referencing it share the same parent and all painting properties are specfied
+    on that parent. The first test show inheritance of the 'fill' property and the
+    second the inheritance of the 'paint' property. In both tests, the marker is
+    painting using the same properties as the referencing object. Because of
+    scaling transformations on the marker, the stroke on the second test is thinner
+    than on the referencing object.
+
+    The third and fourth tests examine the rendering of markers in a situation
+    where the marker and referencing path do NOT share the same parent and painting
+    properties are specified both on the parent of the marked path and on the
+    contents of the marker itself. In both cases, the marker's parent specifies
+    fill="green" stroke="blue" stroke-width="8". For the third test, the marker
+    contents override with stroke="black". For the fourth test, the marker contents
+    override with fill="black". In neither case should you see fill="orange" or
+    stroke="blue" or "stroke="purple" on the markers as these properties are
+    specified on the ancestor of the referencing object or the referencing object
+    itself and thus shouldn't affect the marker.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-002-ref.svg"/>
+    <html:meta name="assert" content="Tests property inheritance when rendering markers."/>
+    <g fill="green">
+      <text x="125" y="30" font-size="14" fill="black">Marker Rendering Properties</text>
+      <!-- Fill property -->
+      <g fill="black" stroke="none" stroke-width="8">
+        <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
+          <rect width="10" height="10"/>
+        </marker>
+        <text x="100" y="140" font-size="10" fill="black" stroke="none">Fill Property</text>
+        <path marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 30 60 L 80 60 L 80 110 Z"/>
+      </g>
+      <!-- Stroke property -->
+      <g fill="none" stroke="black" stroke-width="4">
+        <marker id="marker2" viewBox="0 0 20 20" markerWidth="4" markerHeight="4" refX="10" refY="10" markerUnits="strokeWidth">
+          <rect width="20" height="20"/>
+        </marker>
+        <text x="340" y="140" font-size="10" fill="black" stroke="none">Stroke Property</text>
+        <path marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 270 60 L 320 60 L 320 110 Z"/>
+      </g>
+      <!-- Define marker element with parents setting painting properties -->
+      <g fill="green" stroke="blue" stroke-width="8">
+        <marker id="marker3" viewBox="0 0 20 20" markerWidth="4" markerHeight="4" refX="10" refY="10" markerUnits="strokeWidth">
+          <rect width="20" height="20" stroke="black"/>
+        </marker>
+        <marker id="marker4" viewBox="0 0 10 10" markerWidth="4" markerHeight="4" refX="5" refY="5" markerUnits="strokeWidth">
+          <rect width="10" height="10" fill="black" stroke-width="4"/>
+        </marker>
+      </g>
+      <!-- Parent and specified properties -->
+      <g fill="orange" stroke="blue">
+        <text x="90" y="270" font-size="10" fill="black" stroke="none">Mixed Properties</text>
+        <path stroke="purple" stroke-width="4" marker-start="url(#marker3)" marker-mid="url(#marker3)" marker-end="url(#marker3)" d="M 30 190 L 80 190 L 80 240 Z"/>
+      </g>
+      <g fill="orange" stroke="green">
+        <text x="340" y="270" font-size="10" fill="black" stroke="none">Mixed Properties</text>
+        <path stroke="purple" stroke-width="4" marker-start="url(#marker4)" marker-mid="url(#marker4)" marker-end="url(#marker4)" d="M 270 190 L 320 190 L 320 240 Z"/>
+      </g>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-003-ref.svg b/testing/web-platform/tests/svg/painting/marker-003-ref.svg
new file mode 100644
index 0000000000..a9cdc59cf3
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-003-ref.svg
@@ -0,0 +1,19 @@
+<svg width="500" height="500"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <defs>
+      <marker id="marker1" markerUnits="strokeWidth" refX="50" refY="50" markerWidth="5" markerHeight="5" viewBox="0 0 100 100">
+        <rect width="100" height="100" fill="royalblue" stroke="none"/>
+      </marker>
+    </defs>
+
+    <text font-size="20" x="240" y="28" text-anchor="middle">'marker' property test</text>
+    <g fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)"
+        marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)">
+      <path d="M10,60 Q90,60 90,140 Q10,140 10,60 Z M10,140 Q10,60 90,60 Q90,140 10,140 Z M50,70 L80,100 50,130 20,100 Z"/>
+      <polygon points="100,60 120,140 140,60 160,140 180,60 180,100 100,100"/>
+      <polyline points="190,60 210,140 230,60 250,140 270,60 270,100 190,100"/>
+      <line x1="280" x2="370" y1="60" y2="140"/>
+      <line x1="370" x2="280" y1="60" y2="140"/>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-003.svg b/testing/web-platform/tests/svg/painting/marker-003.svg
new file mode 100644
index 0000000000..b4bebec587
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-003.svg
@@ -0,0 +1,29 @@
+<svg width="500" height="500"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    The SVG specification defines three properties to reference markers: marker-start, marker-mid,
+    marker-end. It also provides a shorthand property,marker.  Using the marker property from a style sheet
+    is equivalent to using all three (start, mid, end). However, shorthand properties cannot be used as presentation attributes.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-003-ref.svg"/>
+    <html:meta name="assert" content="Tests marker property."/>
+    <defs>
+      <marker id="marker1" markerUnits="strokeWidth" refX="50" refY="50" markerWidth="5" markerHeight="5" viewBox="0 0 100 100">
+        <rect width="100" height="100" fill="royalblue" stroke="none"/>
+      </marker>
+      <style type="text/css">
+        #markme { marker: url(#marker1) }
+      </style>
+    </defs>
+
+    <text font-size="20" x="240" y="28" text-anchor="middle">'marker' property test</text>
+    <g fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)" id="markme">
+      <path d="M10,60 Q90,60 90,140 Q10,140 10,60 Z M10,140 Q10,60 90,60 Q90,140 10,140 Z M50,70 L80,100 50,130 20,100 Z"/>
+      <polygon points="100,60 120,140 140,60 160,140 180,60 180,100 100,100"/>
+      <polyline points="190,60 210,140 230,60 250,140 270,60 270,100 190,100"/>
+      <line x1="280" x2="370" y1="60" y2="140"/>
+      <line x1="370" x2="280" y1="60" y2="140"/>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-004-ref.svg b/testing/web-platform/tests/svg/painting/marker-004-ref.svg
new file mode 100644
index 0000000000..aaad02c732
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-004-ref.svg
@@ -0,0 +1,10 @@
+<svg width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
+    <text font-size="20" x="240" y="28" text-anchor="middle">'marker' attribute test</text>
+    <g fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)">
+      <path d="M10,60 Q90,60 90,140 Q10,140 10,60 Z M10,140 Q10,60 90,60 Q90,140 10,140 Z M50,70 L80,100 50,130 20,100 Z"/>
+      <polygon points="100,60 120,140 140,60 160,140 180,60 180,100 100,100"/>
+      <polyline points="190,60 210,140 230,60 250,140 270,60 270,100 190,100"/>
+      <line x1="280" x2="370" y1="60" y2="140"/>
+      <line x1="370" x2="280" y1="60" y2="140"/>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-004.svg b/testing/web-platform/tests/svg/painting/marker-004.svg
new file mode 100644
index 0000000000..7f106961db
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-004.svg
@@ -0,0 +1,27 @@
+<svg width="100%" height="100%" viewBox="0 0 480 360"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    The SVG specification defines three properties to reference markers: marker-start, marker-mid,
+    marker-end. It also provides a shorthand property,marker.  Using the marker property from a style sheet
+    is equivalent to using all three (start, mid, end). However, shorthand properties cannot be used as presentation attributes.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-004-ref.svg"/>
+    <html:meta name="assert" content="Tests marker property."/>
+    <defs>
+      <marker id="marker2" markerUnits="strokeWidth" refX="100" refY="100" markerWidth="15" markerHeight="15" viewBox="0 0 200 200">
+        <rect width="200" height="200" fill="red" stroke="none"/>
+      </marker>
+    </defs>
+
+    <text font-size="20" x="240" y="28" text-anchor="middle">'marker' attribute test</text>
+    <!-- There is no marker attribute so no markers should be applied. -->
+    <g marker="url(#marker2)" fill="gold" stroke="black" fill-rule="evenodd" transform="translate(50,20)">
+      <path d="M10,60 Q90,60 90,140 Q10,140 10,60 Z M10,140 Q10,60 90,60 Q90,140 10,140 Z M50,70 L80,100 50,130 20,100 Z"/>
+      <polygon points="100,60 120,140 140,60 160,140 180,60 180,100 100,100"/>
+      <polyline points="190,60 210,140 230,60 250,140 270,60 270,100 190,100"/>
+      <line x1="280" x2="370" y1="60" y2="140"/>
+      <line x1="370" x2="280" y1="60" y2="140"/>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-005-ref.svg b/testing/web-platform/tests/svg/painting/marker-005-ref.svg
new file mode 100644
index 0000000000..6e4ae27954
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-005-ref.svg
@@ -0,0 +1,192 @@
+<svg width="500" height="500"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+        Verify result of overflow using explicit clip boxes.
+        Dimensions of shapes in markers are different than in the test so that
+        the ref will be different to the test when neither overflow nor
+        clip-path are implemented.
+    -->
+    <defs>
+      <clipPath id="viewBox10x10Clip">
+        <rect width="10" height="10"/>
+      </clipPath>
+      <clipPath id="viewBox8x8Clip">
+        <rect width="8" height="8"/>
+      </clipPath>
+      <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="marker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="markerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
+        <circle cx="4" cy="4" r="80" fill="green" stroke="none" clip-path="url(#viewBox8x8Clip)"/>
+      </marker>
+      <marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+
+      <marker id="vmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="vmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="vmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="vmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="vmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+
+      <marker id="amarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="amarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="amarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="amarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="amarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+
+      <marker id="smarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="smarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="smarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="smarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
+        <circle cx="4" cy="4" r="80" fill="green" stroke="none" clip-path="url(#viewBox8x8Clip)"/>
+      </marker>
+      <marker id="smarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+
+      <marker id="hmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="hmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="hmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="100" height="100" fill="purple" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+      <marker id="hmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
+        <circle cx="4" cy="4" r="80" fill="green" stroke="none" clip-path="url(#viewBox8x8Clip)"/>
+      </marker>
+      <marker id="hmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none" clip-path="url(#viewBox10x10Clip)"/>
+      </marker>
+    </defs>
+
+    <style type="text/css">
+      .testpaths {
+          fill:none;
+          stroke:black;
+          stroke-width:8px;
+      }
+
+      /* no overflow specified */
+      #p1  { marker: url(#marker1); }
+      #p2  {
+          marker-start: url(#markerStart);
+          marker-mid:url(#markerMiddle);
+          marker-end: url(#markerEnd);
+      }
+      #p3  { marker: url(#marker2); }
+
+      /* overflow = visible */
+      #p4  { marker: url(#vmarker1); }
+      #p5  {
+          marker-start: url(#vmarkerStart);
+          marker-mid:url(#vmarkerMiddle);
+          marker-end: url(#vmarkerEnd);
+      }
+      #p6  { marker: url(#vmarker2); }
+
+      /* overflow = auto */
+      #p7  { marker: url(#amarker1); }
+      #p8  {
+          marker-start: url(#amarkerStart);
+          marker-mid:url(#amarkerMiddle);
+          marker-end: url(#amarkerEnd);
+      }
+      #p9  { marker: url(#amarker2); }
+
+      /* overflow = scroll */
+      #p10  { marker: url(#smarker1); }
+      #p11  {
+          marker-start: url(#smarkerStart);
+          marker-mid:url(#smarkerMiddle);
+          marker-end: url(#smarkerEnd);
+      }
+      #p12  { marker: url(#smarker2); }
+
+      /* overflow = hidden */
+      #p13  { marker: url(#hmarker1); }
+      #p14  {
+          marker-start: url(#hmarkerStart);
+          marker-mid:url(#hmarkerMiddle);
+          marker-end: url(#hmarkerEnd);
+      }
+      #p15  { marker: url(#hmarker2); }
+    </style>
+
+    <text x="50%" y="3em" style="font: 18px; text-anchor:middle;">Test marker overflow</text>
+
+    <g style="font: 14px; text-anchor:middle" transform="translate(0,280)">
+      <text x="60">default</text>
+      <text x="155">'visible'</text>
+      <text x="245">'auto'</text>
+      <text x="340">'scroll'</text>
+      <text x="430">'hidden'</text>
+    </g>
+
+    <g transform="translate(-30,75)">
+      <g id="subtest1" transform="scale(0.6)">
+        <path id="p1" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p2" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p3" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest2" transform="scale(0.6) translate(150,0)">
+        <path id="p4" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p5" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p6" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+      <g id="subtest3" transform="scale(0.6) translate(300,0)">
+        <path id="p7" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p8" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p9" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest4" transform="scale(0.6) translate(450,0)">
+        <path id="p10" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p11" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p12" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest5" transform="scale(0.6) translate(600,0)">
+        <path id="p13" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p14" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p15" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-005.svg b/testing/web-platform/tests/svg/painting/marker-005.svg
new file mode 100644
index 0000000000..640b3545de
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-005.svg
@@ -0,0 +1,191 @@
+<svg width="500" height="500"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    Test all the 'overflow' property values except 'inherit' on the 'marker' element.
+
+    Each column tests a value of the 'overflow' property.
+    The first row uses the 'marker' property to set the same marker on start-, mid- and end-points on the path.
+    The second row uses 'marker-start', 'marker-mid' and 'marker-end' to give each point its own marker.
+    The third row uses the 'marker' property like the first row, but here the marker has orient="auto" set.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-005-ref.svg"/>
+    <html:meta name="assert" content="Test all the 'overflow' property values except 'inherit' on the 'marker' element."/>
+    <defs>
+      <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="marker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="markerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+
+      <marker id="vmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="vmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="vmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="vmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="vmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+
+      <marker id="amarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="amarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="auto">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="amarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="amarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="auto">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="amarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="auto">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+
+      <marker id="smarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="smarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="scroll">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="smarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="smarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="scroll">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="smarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="scroll">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+
+      <marker id="hmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="hmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="hidden">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+      <marker id="hmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden">
+        <rect width="15" height="15" fill="purple" stroke="none"/>
+      </marker>
+      <marker id="hmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="hidden">
+        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
+      </marker>
+      <marker id="hmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="hidden">
+        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
+      </marker>
+    </defs>
+
+    <style type="text/css">
+      .testpaths {
+          fill:none;
+          stroke:black;
+          stroke-width:8px;
+      }
+
+      /* no overflow specified */
+      #p1  { marker: url(#marker1); }
+      #p2  {
+          marker-start: url(#markerStart);
+          marker-mid:url(#markerMiddle);
+          marker-end: url(#markerEnd);
+      }
+      #p3  { marker: url(#marker2); }
+
+      /* overflow = visible */
+      #p4  { marker: url(#vmarker1); }
+      #p5  {
+          marker-start: url(#vmarkerStart);
+          marker-mid:url(#vmarkerMiddle);
+          marker-end: url(#vmarkerEnd);
+      }
+      #p6  { marker: url(#vmarker2); }
+
+      /* overflow = auto */
+      #p7  { marker: url(#amarker1); }
+      #p8  {
+          marker-start: url(#amarkerStart);
+          marker-mid:url(#amarkerMiddle);
+          marker-end: url(#amarkerEnd);
+      }
+      #p9  { marker: url(#amarker2); }
+
+      /* overflow = scroll */
+      #p10  { marker: url(#smarker1); }
+      #p11  {
+          marker-start: url(#smarkerStart);
+          marker-mid:url(#smarkerMiddle);
+          marker-end: url(#smarkerEnd);
+      }
+      #p12  { marker: url(#smarker2); }
+
+      /* overflow = hidden */
+      #p13  { marker: url(#hmarker1); }
+      #p14  {
+          marker-start: url(#hmarkerStart);
+          marker-mid:url(#hmarkerMiddle);
+          marker-end: url(#hmarkerEnd);
+      }
+      #p15  { marker: url(#hmarker2); }
+    </style>
+
+    <text x="50%" y="3em" style="font: 18px; text-anchor:middle;">Test marker overflow</text>
+
+    <g style="font: 14px; text-anchor:middle" transform="translate(0,280)">
+      <text x="60">default</text>
+      <text x="155">'visible'</text>
+      <text x="245">'auto'</text>
+      <text x="340">'scroll'</text>
+      <text x="430">'hidden'</text>
+    </g>
+
+    <g transform="translate(-30,75)">
+      <g id="subtest1" transform="scale(0.6)">
+        <path id="p1" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p2" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p3" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest2" transform="scale(0.6) translate(150,0)">
+        <path id="p4" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p5" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p6" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest3" transform="scale(0.6) translate(300,0)">
+        <path id="p7" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p8" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p9" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest4" transform="scale(0.6) translate(450,0)">
+        <path id="p10" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p11" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p12" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+
+      <g id="subtest5" transform="scale(0.6) translate(600,0)">
+        <path id="p13" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
+        <path id="p14" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
+        <path id="p15" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
+      </g>
+    </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-006-ref.svg b/testing/web-platform/tests/svg/painting/marker-006-ref.svg
new file mode 100644
index 0000000000..09bc3b7f77
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-006-ref.svg
@@ -0,0 +1,37 @@
+<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
+  <text x="10" y="30" font-size="14">Basic Markers</text>
+  <path fill="none" stroke="black" stroke-width="16" d="M 130 40 L 180 40 L 180 90"/>
+  <g transform="translate(114,24)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+  <g transform="translate(164,24)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+  <g transform="translate(164,74)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+
+  <text x="10" y="115" font-size="14">Start, Middle and End</text>
+  <path fill="none" stroke="black" stroke-width="16" d="M 130 135 L 180 135 L 180 185"/>
+  <g transform="translate(114,119)">
+    <rect width="32" height="32" fill="purple" stroke="none"/>
+  </g>
+  <g transform="translate(180,135)">
+    <circle r="16" fill="green" stroke="none"/>
+  </g>
+  <g transform="translate(164,169)">
+    <path d="M 16 0 L 32 32 L 0 32 Z" fill="blue" stroke="none"/>
+  </g>
+
+  <text x="10" y="210" font-size="14">Automatic Orientation</text>
+  <path fill="none" stroke="black" stroke-width="16" d="M 130 230 L 180 230 L 180 280"/>
+  <g transform="translate(130,230) rotate(0)">
+    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
+  </g>
+  <g transform="translate(180,230) rotate(45)">
+    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
+  </g>
+  <g transform="translate(180,280) rotate(90)">
+    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-006.svg b/testing/web-platform/tests/svg/painting/marker-006.svg
new file mode 100644
index 0000000000..61af077f29
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-006.svg
@@ -0,0 +1,61 @@
+<svg width="300" height="300"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    Tests the basic support for markers. For the three tests, there should be two
+    identical paths with markers drawn. The path on the left is rendered using the
+    marker elements. The path on the right is rendered using the equivalent SVG,
+    showing what the marked path should look like.
+
+    This test is similar to the marker-001.svg test, but has some viewBox
+    attributes that have a non-zero offset.
+
+    The top test examines the basic support for the marker element and style. The
+    markers are purple rectangles.
+
+    The middle test examines the support for the different styles of marker
+    properties. The "marker-start" property defines the marker to use at the first
+    vertex of the marked path, in this case a purple rectangle. The "marker-end"
+    property defines the marker to use at the last vertex of the marked path, in
+    this case a blue triangle. The "marker-mid" property defines the marker to use
+    at all vertices, other than the first and last, of the marked path, in this
+    case a green circle.
+
+    The bottom test examines the support for marker orientation along the path
+    direction. The second vertex, the top right corner of the path, has a marker
+    that is rotated 45 degrees, since that is the average of the horizontal and
+    vertical segments each side. The last vertex, the bottom right corner of the
+    path, has a marker rotated 90 degrees since that is the direction of the last
+    path segment.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-006-ref.svg"/>
+    <html:meta name="assert" content="Support for marker viewBox."/>
+    <defs>
+        <!-- Define a few simple marker elements -->
+        <marker id="marker1" viewBox="20 20 10 10" markerWidth="2" markerHeight="2" refX="25" refY="25" markerUnits="strokeWidth">
+            <rect x="20" y="20" width="10" height="10" fill="purple" stroke="none"/>
+        </marker>
+        <marker id="marker2" viewBox="-5 -5 10 10" markerWidth="2" markerHeight="2" markerUnits="strokeWidth" orient="auto">
+            <path d="M 0 -5 L 5 5 L -5 5 Z" fill="blue" stroke="none"/>
+        </marker>
+        <marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
+            <rect width="10" height="10" fill="purple" stroke="none"/>
+        </marker>
+        <marker id="markerMiddle" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
+            <circle cx="5" cy="5" r="5" fill="green" stroke="none"/>
+        </marker>
+        <marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
+            <path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
+        </marker>
+    </defs>
+    <!-- Basic Marker Test -->
+    <text x="10" y="30" font-size="14">Basic Markers</text>
+    <path fill="none" stroke="black" stroke-width="16" marker-start="url(#marker1)" marker-mid="url(#marker1)" marker-end="url(#marker1)" d="M 130 40 L 180 40 L 180 90"/>
+    <!-- Start, Middle and End Marker Test -->
+    <text x="10" y="115" font-size="14">Start, Middle and End</text>
+    <path fill="none" stroke="black" stroke-width="16" marker-start="url(#markerStart)" marker-mid="url(#markerMiddle)" marker-end="url(#markerEnd)" d="M 130 135 L 180 135 L 180 185"/>
+    <!-- Auto Orientation Marker Test -->
+    <text x="10" y="210" font-size="14">Automatic Orientation</text>
+    <path fill="none" stroke="black" stroke-width="16" marker-start="url(#marker2)" marker-mid="url(#marker2)" marker-end="url(#marker2)" d="M 130 230 L 180 230 L 180 280"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-007-ref.svg b/testing/web-platform/tests/svg/painting/marker-007-ref.svg
new file mode 100644
index 0000000000..be4df3a410
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-007-ref.svg
@@ -0,0 +1,4 @@
+<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
+    <path d="M 25 25 v100 h100 z" fill="green" />
+    <path d="M 125 25 v100 h100 z" fill="green" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-007.svg b/testing/web-platform/tests/svg/painting/marker-007.svg
new file mode 100644
index 0000000000..c781220378
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-007.svg
@@ -0,0 +1,23 @@
+<svg width="300" height="300"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    A 'marker' element with 'display' set to 'none' on that
+    element or any ancestor is rendered when referenced by another element.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-007-ref.svg"/>
+    <html:meta name="assert" content="Test marker element with 'display' set to 'none' is rendered when referenced."/>
+    <defs>
+        <marker id="testMarker" markerWidth="100" markerHeight="100" display="none">
+            <path d="M 0 0 L 200 200 L 0 150 z" fill="green" />
+        </marker>
+        <g display="none">
+          <marker id="testMarker2" markerWidth="100" markerHeight="100">
+            <path d="M 0 0 L 200 200 L 0 150 z" fill="green" />
+          </marker>
+        </g>
+    </defs>
+    <path d="M 0 0 L 25 25" marker-end="url(#testMarker)" />
+    <path d="M 100 0 L 125 25" marker-end="url(#testMarker2)" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-008-ref.svg b/testing/web-platform/tests/svg/painting/marker-008-ref.svg
new file mode 100644
index 0000000000..b4f329b3bc
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-008-ref.svg
@@ -0,0 +1,28 @@
+<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
+
+    <line class="start" x1="10" y1="50" x2="100" y2="50" stroke="black" />
+    <rect x="10" y="50" width="10" height="10" fill="blue"/>
+    <path class="start" d="M 10 100 L 50 100 L 100 100" stroke="black"/>
+    <rect x="10" y="100" width="10" height="10" fill="blue"/>
+    <polygon class="start" points="10,150 50,150 100,150" stroke="black"/>
+    <rect x="10" y="150" width="10" height="10" fill="blue"/>
+    <polyline class="start" points="10,200 50,200 100,200" stroke="black"/>
+    <rect x="10" y="200" width="10" height="10" fill="blue"/>
+
+    <line class="end" x1="150" y1="50" x2="250" y2="50" stroke="black"/>
+    <rect x="250" y="50" width="10" height="10" fill="blue"/>
+    <path class="end" d="M 150 100 L 200 100 L 250 100" stroke="black"/>
+    <rect x="250" y="100" width="10" height="10" fill="blue"/>
+    <polygon class="end" points="250,150 200,150" stroke="black"/>
+    <rect x="250" y="150" width="10" height="10" fill="blue"/>
+    <polyline class="end" points="150,200 200,200 250,200" stroke="black"/>
+    <rect x="250" y="200" width="10" height="10" fill="blue"/>
+
+    <line class="mid" x1="300" y1="50" x2="400" y2="50" stroke="black"/>
+    <path class="mid" d="M 300 100 L 350 100 L 400 100" stroke="black"/>
+    <rect x="350" y="100" width="10" height="10" fill="blue"/>
+    <polygon class="mid" points="300,150 350,150" stroke="black"/>
+    <rect x="350" y="150" width="10" height="10" fill="blue"/>
+    <polyline class="mid" points="300,200 350,200 400,200" stroke="black"/>
+    <rect x="350" y="200" width="10" height="10" fill="blue"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-008.svg b/testing/web-platform/tests/svg/painting/marker-008.svg
new file mode 100644
index 0000000000..47f70336a6
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-008.svg
@@ -0,0 +1,46 @@
+<svg width="500" height="300"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+    <!--
+    Test 'Marker-start', 'marker-mid', and 'marker-end' apply markers at the
+    appropriate vertices when applied to 'line', 'path', 'polygon' and 'polyline'
+    elements.
+    Note: 'marker-mid' has no effect on the 'line' element.
+    -->
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
+    <html:link rel="match" href="marker-008-ref.svg"/>
+    <html:meta name="assert" content="Tests marker-* render at the appropriate vertices."/>
+    <style type="text/css">
+        .start
+        {
+            marker-start: url(#markerTest);
+        }
+        .end
+        {
+            marker-end: url(#markerTest);
+        }
+        .mid
+        {
+            marker-mid: url(#markerTest);
+        }
+    </style>
+    <defs>
+        <marker id="markerTest" markerWidth="10" markerHeight="10" fill="blue">
+            <rect width="50" height="55" />
+        </marker>
+    </defs>
+    <line class="start" x1="10" y1="50" x2="100" y2="50" stroke="black" />
+    <path class="start" d="M 10 100 L 50 100 L 100 100" stroke="black"/>
+    <polygon class="start" points="10,150 50,150 100,150" stroke="black"/>
+    <polyline class="start" points="10,200 50,200 100,200" stroke="black"/>
+
+    <line class="end" x1="150" y1="50" x2="250" y2="50" stroke="black"/>
+    <path class="end" d="M 150 100 L 200 100 L 250 100" stroke="black"/>
+    <polygon class="end" points="250,150 200,150" stroke="black"/>
+    <polyline class="end" points="150,200 200,200 250,200" stroke="black"/>
+
+    <line class="mid" x1="300" y1="50" x2="400" y2="50" stroke="black"/>
+    <path class="mid" d="M 300 100 L 350 100 L 400 100" stroke="black"/>
+    <polygon class="mid" points="300,150 350,150" stroke="black"/>
+    <polyline class="mid" points="300,200 350,200 400,200" stroke="black"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-009-ref.svg b/testing/web-platform/tests/svg/painting/marker-009-ref.svg
new file mode 100644
index 0000000000..968eba091c
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-009-ref.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+    <path d="M50,50 h100 v100 z m150,0 h100 v100 z m150,0 h100 v100 z"
+    fill="none" stroke="black" stroke-width="10"
+    />
+    <circle cx="50" cy="50" r="25" fill="green"/>
+    <circle cx="50" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="150" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="150" cy="150" r="20" fill="skyblue" opacity="0.9"/>
+
+    <circle cx="200" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="200" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="300" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="300" cy="150" r="20" fill="skyblue" opacity="0.9"/>
+
+    <circle cx="350" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="350" cy="50" r="15" fill="maroon" opacity="0.85"/>
+    <circle cx="450" cy="50" r="20" fill="skyblue" opacity="0.9"/>
+    <circle cx="450" cy="150" r="20" fill="skyblue" opacity="0.9"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-009.svg b/testing/web-platform/tests/svg/painting/marker-009.svg
new file mode 100644
index 0000000000..9e6fe21d91
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-009.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="500" height="500">
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#OrientAttribute"/>
+    <html:link rel="match" href="marker-009-ref.svg"/>
+    <html:meta name="assert" content="Tests correct number of markers are drawn on multiple sub-paths"/>
+    <defs>
+        <marker id="m1" markerUnits="userSpaceOnUse" overflow="visible">
+            <circle cx="0" cy="0" r="25" fill="green"/>
+        </marker>
+        <marker id="m2" markerUnits="userSpaceOnUse" overflow="visible">
+            <circle cx="0" cy="0" r="20" fill="skyblue" opacity="0.9"/>
+        </marker>
+        <marker id="m3" markerUnits="userSpaceOnUse" overflow="visible">
+            <circle cx="0" cy="0" r="15" fill="maroon" opacity="0.85"/>
+        </marker>
+    </defs>
+
+    <path d="M50,50 h100 v100 z m150,0 h100 v100 z m150,0 h100 v100 z"
+    fill="none" stroke="black" stroke-width="10"
+    marker-start="url(#m1)"
+    marker-mid="url(#m2)"
+    marker-end="url(#m3)"
+    />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-orient-001-ref.svg b/testing/web-platform/tests/svg/painting/marker-orient-001-ref.svg
new file mode 100644
index 0000000000..e328aa0546
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-orient-001-ref.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+    <defs>
+        <marker id="arrowNW" orient="225" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+        <marker id="arrowNE" orient="315" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+        <marker id="arrowSE" orient="45" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+        <marker id="arrowSW" orient="135" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+        <marker id="arrowW" orient="180" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+        <marker id="arrowS" orient="90" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+        <marker id="arrowAuto" orient="auto" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+     </defs>
+    <!-- Test path, with markers -->
+    <path d="M 40,40 l140,140 240,240" marker-start="url(#arrowNW)" marker-mid="url(#arrowSE)" marker-end="url(#arrowSE)" stroke="black" stroke-width="2"/>
+    <path d="M 40,400 l100,-100 100,-100" marker-start="url(#arrowSW)" marker-mid="url(#arrowNE)" marker-end="url(#arrowNE)" stroke="black" stroke-width="2"/>
+    <path d="M 160,40 c40,0 40,0 40,40" marker-start="url(#arrowW)" marker-end="url(#arrowS)" stroke="black" fill="none" stroke-width="2"/>
+    <path d="M 260,140 a 100,100 0 1 1 100,100" marker-start="url(#arrowS)" marker-end="url(#arrowW)" stroke="black" fill="none" stroke-width="2"/>
+    <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowSW)" marker-mid="url(#arrowAuto)" marker-end="url(#arrowNE)" stroke="black" fill="none" stroke-width="2"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-orient-001.svg b/testing/web-platform/tests/svg/painting/marker-orient-001.svg
new file mode 100644
index 0000000000..eefb106839
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-orient-001.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="500" height="500">
+    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#OrientAttribute"/>
+    <html:link rel="match" href="marker-orient-001-ref.svg"/>
+    <html:meta name="assert" content="Ensure orientation of auto and auto-start-reverse markers is correct."/>
+    <defs>
+        <marker id="arrow" orient="auto-start-reverse" markerUnits="userSpaceOnUse" style="overflow:visible">
+            <path d="M25,0 L 0,-25 L0,25 z" fill="green"/>
+        </marker>
+     </defs>
+    <!-- Test path, with markers -->
+    <path d="M 40,40 l140,140 240,240" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" stroke="black" stroke-width="2"/>
+    <path d="M 40,400 l100,-100 100,-100" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" stroke="black" stroke-width="2"/>
+    <path d="M 160,40 c40,0 40,0 40,40" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" stroke="black" fill="none" stroke-width="2"/>
+    <path d="M 260,140 a 100,100 0 1 1 100,100" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" stroke="black" fill="none" stroke-width="2"/>
+    <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" stroke="black" fill="none" stroke-width="2"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/marker-with-mask-cycle-crash.html b/testing/web-platform/tests/svg/painting/marker-with-mask-cycle-crash.html
new file mode 100644
index 0000000000..ec514044ba
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/marker-with-mask-cycle-crash.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Marker with mask reference cycle</title>
+<svg>
+  <mask id='mask'>
+    <path d='M0,0h50v50h-50z' marker-start='url(#marker)'/>
+  </mask>
+  <marker id='marker' mask='url(#mask)'></marker>
+  <path d='M0,0h100v100h-100z' fill='green' marker-start='url(#marker)'/>
+</svg>
+<script>
+  document.body.offsetTop;
+  document.querySelector('#marker').setAttribute('fill', 'url(#nonexisting)');
+</script>
diff --git a/testing/web-platform/tests/svg/painting/mask-containing-image-with-clip-path.svg b/testing/web-platform/tests/svg/painting/mask-containing-image-with-clip-path.svg
new file mode 100644
index 0000000000..faeec28a35
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/mask-containing-image-with-clip-path.svg
@@ -0,0 +1,31 @@
+<svg class="reftest-wait" xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:script src="/common/reftest-wait.js"/>
+  <html:script src="/common/rendering-utils.js"/>
+  <html:link rel="match" href="../embedded/reference/green-rect-100x100.svg"/>
+  <script>
+<![CDATA[
+  function loadImage() {
+    waitForAtLeastOneFrame().then(() => {
+      var clip = document.getElementById('clip');
+      clip.setAttribute('width', '100');
+      clip.setAttribute('height', '100');
+      waitForAtLeastOneFrame().then(takeScreenshot);
+    });
+  }
+]]>
+  </script>
+  <defs>
+    <mask id="mask">
+      <g clip-path="url(#clip_path)">
+        <image onload="loadImage()" width="100px" height="100px" href="support/white-rect-100x100.svg"/>
+      </g>
+    </mask>
+    <clipPath id="clip_path">
+      <rect id="clip"/>
+    </clipPath>
+  </defs>
+  <g mask="url(#mask)">
+    <rect width="100" height="100" fill="green"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/color-interpolation-computed.svg b/testing/web-platform/tests/svg/painting/parsing/color-interpolation-computed.svg
new file mode 100644
index 0000000000..c437a0a908
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/color-interpolation-computed.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().colorInterpolation</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty"/>
+    <h:meta name="assert" content="color-interpolation computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("color-interpolation", "auto");
+test_computed_value("color-interpolation", "srgb");
+test_computed_value("color-interpolation", "linearrgb");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/color-interpolation-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/color-interpolation-invalid.svg
new file mode 100644
index 0000000000..11fd05be07
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/color-interpolation-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing color-interpolation with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty"/>
+    <h:meta name="assert" content="color-interpolation supports only the grammar 'auto | sRGB | linearRGB'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("color-interpolation", "none");
+test_invalid_value("color-interpolation", "auto srgb");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/color-interpolation-valid.svg b/testing/web-platform/tests/svg/painting/parsing/color-interpolation-valid.svg
new file mode 100644
index 0000000000..9465edb232
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/color-interpolation-valid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing color-interpolation with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty"/>
+    <h:meta name="assert" content="color-interpolation supports the full grammar 'auto | sRGB | linearRGB'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("color-interpolation", "auto");
+test_valid_value("color-interpolation", "srgb");
+test_valid_value("color-interpolation", "linearrgb");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-computed.svg b/testing/web-platform/tests/svg/painting/parsing/fill-computed.svg
new file mode 100644
index 0000000000..7012fb6ca6
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-computed.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().fill</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillProperty"/>
+    <h:meta name="assert" content="fill computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("fill", "none");
+test_computed_value("fill", "rgb(12, 34, 56)");
+
+test_computed_value("fill", 'url("https://example.com/")');
+test_computed_value("fill", 'url("https://example.com/") none');
+test_computed_value("fill", 'url("https://example.com/") rgb(12, 34, 56)');
+
+// context-fill and context-stroke are not yet supported by browsers.
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['fill'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['fill'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/fill-invalid.svg
new file mode 100644
index 0000000000..1feb867c3a
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-invalid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing fill with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillProperty"/>
+    <h:meta name="assert" content="fill supports only the paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("fill", "auto");
+test_invalid_value("fill", "none red");
+test_invalid_value("fill", 'none url("https://example.com/")');
+test_invalid_value("fill", 'red url("https://example.com/")');
+test_invalid_value("fill", 'url("https://example.com/") none red');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-opacity-computed.svg b/testing/web-platform/tests/svg/painting/parsing/fill-opacity-computed.svg
new file mode 100644
index 0000000000..16843bccee
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-opacity-computed.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().fillOpacity</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillOpacity"/>
+    <h:meta name="assert" content="fill-opacity computed value is clamped to the range [0,1]."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("fill-opacity", "-1", "0");
+test_computed_value("fill-opacity", "0.5");
+test_computed_value("fill-opacity", "3", "1");
+test_computed_value("fill-opacity", "-100%", "0");
+test_computed_value("fill-opacity", "50%", "0.5");
+test_computed_value("fill-opacity", "300%", "1");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-opacity-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/fill-opacity-invalid.svg
new file mode 100644
index 0000000000..86726c6ad0
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-opacity-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing fill-opacity with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty"/>
+    <h:meta name="assert" content="fill-opacity supports only the grammar 'alpha-value'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("fill-opacity", "1.");
+test_invalid_value("fill-opacity", "2 3");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-opacity-valid.svg b/testing/web-platform/tests/svg/painting/parsing/fill-opacity-valid.svg
new file mode 100644
index 0000000000..90d2732b18
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-opacity-valid.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing fill-opacity with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty"/>
+    <h:meta name="assert" content="fill-opacity supports the full grammar 'alpha-value'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("fill-opacity", "-1");
+test_valid_value("fill-opacity", "0.5");
+test_valid_value("fill-opacity", "3");
+test_valid_value("fill-opacity", "-100%", "-1");
+test_valid_value("fill-opacity", "50%", "0.5");
+test_valid_value("fill-opacity", "300%", "3");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-rule-computed.svg b/testing/web-platform/tests/svg/painting/parsing/fill-rule-computed.svg
new file mode 100644
index 0000000000..293450e13c
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-rule-computed.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().fillRule</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty"/>
+    <h:meta name="assert" content="fill-rule computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("fill-rule", "nonzero");
+test_computed_value("fill-rule", "evenodd");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-rule-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/fill-rule-invalid.svg
new file mode 100644
index 0000000000..d89a81acbb
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-rule-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing fill-rule with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty"/>
+    <h:meta name="assert" content="fill-rule supports only the grammar 'nonzero | evenodd'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("fill-rule", "auto");
+test_invalid_value("fill-rule", "nonzero evenodd");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-rule-valid.svg b/testing/web-platform/tests/svg/painting/parsing/fill-rule-valid.svg
new file mode 100644
index 0000000000..5112bda894
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-rule-valid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing fill-rule with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty"/>
+    <h:meta name="assert" content="fill-rule supports the full grammar 'nonzero | evenodd'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("fill-rule", "nonzero");
+test_valid_value("fill-rule", "evenodd");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/fill-valid.svg b/testing/web-platform/tests/svg/painting/parsing/fill-valid.svg
new file mode 100644
index 0000000000..d5bb5ceb0f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/fill-valid.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing fill with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#FillProperty"/>
+    <h:meta name="assert" content="fill supports the full paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("fill", "none");
+test_valid_value("fill", "context-fill");
+test_valid_value("fill", "context-stroke");
+test_valid_value("fill", "rgb(12, 34, 56)");
+
+test_valid_value("fill", 'url("https://example.com/")');
+test_valid_value("fill", 'url("https://example.com/") none');
+test_valid_value("fill", 'url("https://example.com/") rgb(12, 34, 56)');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/image-rendering-computed.svg b/testing/web-platform/tests/svg/painting/parsing/image-rendering-computed.svg
new file mode 100644
index 0000000000..c842e05906
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/image-rendering-computed.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().imageRendering</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ImageRenderingProperty"/>
+    <h:meta name="assert" content="image-rendering computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("image-rendering", "auto");
+test_computed_value("image-rendering", "optimizequality");
+test_computed_value("image-rendering", "optimizespeed");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/image-rendering-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/image-rendering-invalid.svg
new file mode 100644
index 0000000000..5c3cc9f054
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/image-rendering-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing image-rendering with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ImageRenderingProperty"/>
+    <h:meta name="assert" content="image-rendering supports only the grammar 'auto | optimizeQuality | optimizeSpeed'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("image-rendering", "optimizelegibility");
+test_invalid_value("image-rendering", "auto optimizequality");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/image-rendering-valid.svg b/testing/web-platform/tests/svg/painting/parsing/image-rendering-valid.svg
new file mode 100644
index 0000000000..18402493f3
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/image-rendering-valid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing image-rendering with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ImageRenderingProperty"/>
+    <h:meta name="assert" content="image-rendering supports the full grammar 'auto | optimizeQuality | optimizeSpeed'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("image-rendering", "auto");
+test_valid_value("image-rendering", "optimizequality");
+test_valid_value("image-rendering", "optimizespeed");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-computed.svg b/testing/web-platform/tests/svg/painting/parsing/marker-computed.svg
new file mode 100644
index 0000000000..329dedbbce
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-computed.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().marker</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("marker", "none");
+test_computed_value("marker", 'url("https://example.com/")');
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['marker'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['marker'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-end-computed.svg b/testing/web-platform/tests/svg/painting/parsing/marker-end-computed.svg
new file mode 100644
index 0000000000..da641abb94
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-end-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().MarkerEnd</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty"/>
+    <h:meta name="assert" content="marker-end computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("marker-end", "none");
+test_computed_value("marker-end", 'url("https://example.com/")');
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['marker-end'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['marker-end'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-end-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-end-invalid.svg
new file mode 100644
index 0000000000..bc8e5fcc8b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-end-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker-end with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty"/>
+    <h:meta name="assert" content="marker-end supports only the paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("marker-end", "auto");
+test_invalid_value("marker-end", 'none url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-end-valid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-end-valid.svg
new file mode 100644
index 0000000000..5be036e994
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-end-valid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker-end with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty"/>
+    <h:meta name="assert" content="marker-end supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("marker-end", "none");
+
+test_valid_value("marker-end", 'url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-invalid.svg
new file mode 100644
index 0000000000..64112cd6a7
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-invalid.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker supports only the paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("marker", "auto");
+test_invalid_value("marker", 'none url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-mid-computed.svg b/testing/web-platform/tests/svg/painting/parsing/marker-mid-computed.svg
new file mode 100644
index 0000000000..eddfd61711
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-mid-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().markerMid</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty"/>
+    <h:meta name="assert" content="marker-mid computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("marker-mid", "none");
+test_computed_value("marker-mid", 'url("https://example.com/")');
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['marker-mid'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['marker-mid'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-mid-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-mid-invalid.svg
new file mode 100644
index 0000000000..25cfbba82e
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-mid-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker-mid with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty"/>
+    <h:meta name="assert" content="marker-mid supports only the paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("marker-mid", "auto");
+test_invalid_value("marker-mid", 'none url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-mid-valid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-mid-valid.svg
new file mode 100644
index 0000000000..119fd706b1
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-mid-valid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker-mid with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty"/>
+    <h:meta name="assert" content="marker-mid supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("marker-mid", "none");
+
+test_valid_value("marker-mid", 'url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-shorthand.svg b/testing/web-platform/tests/svg/painting/parsing/marker-shorthand.svg
new file mode 100644
index 0000000000..930a4e2940
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-shorthand.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: marker sets longhands</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/shorthand-testcommon.js"/>
+  <script><![CDATA[
+
+test_shorthand_value('marker', 'none', {
+  'marker-start': 'none',
+  'marker-mid': 'none',
+  'marker-end': 'none'
+});
+
+test_shorthand_value('marker', 'url("https://example.com/")', {
+  'marker-start': 'url("https://example.com/")',
+  'marker-mid': 'url("https://example.com/")',
+  'marker-end': 'url("https://example.com/")'
+});
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-start-computed.svg b/testing/web-platform/tests/svg/painting/parsing/marker-start-computed.svg
new file mode 100644
index 0000000000..08ef87516f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-start-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().markerStart</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty"/>
+    <h:meta name="assert" content="marker-start computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("marker-start", "none");
+test_computed_value("marker-start", 'url("https://example.com/")');
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['marker-start'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['marker-start'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-start-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-start-invalid.svg
new file mode 100644
index 0000000000..6c1fdbcd4b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-start-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker-start with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty"/>
+    <h:meta name="assert" content="marker-start supports only the paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("marker-start", "auto");
+test_invalid_value("marker-start", 'none url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-start-valid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-start-valid.svg
new file mode 100644
index 0000000000..fd6f2d6fe4
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-start-valid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker-start with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty"/>
+    <h:meta name="assert" content="marker-start supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("marker-start", "none");
+
+test_valid_value("marker-start", 'url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/marker-valid.svg b/testing/web-platform/tests/svg/painting/parsing/marker-valid.svg
new file mode 100644
index 0000000000..23d3f24f5c
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-valid.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("marker", "none");
+
+test_valid_value("marker", 'url("https://example.com/")');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/paint-order-computed.svg b/testing/web-platform/tests/svg/painting/parsing/paint-order-computed.svg
new file mode 100644
index 0000000000..29f5fa91ba
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/paint-order-computed.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().paintOrder</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty"/>
+    <h:meta name="assert" content="paint-order computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("paint-order", "normal");
+
+test_computed_value("paint-order", "fill");
+test_computed_value("paint-order", "stroke");
+test_computed_value("paint-order", "markers");
+
+test_computed_value("paint-order", "fill stroke", "fill");
+test_computed_value("paint-order", "fill markers");
+test_computed_value("paint-order", "stroke fill", "stroke");
+test_computed_value("paint-order", "stroke markers");
+test_computed_value("paint-order", "markers fill", "markers");
+test_computed_value("paint-order", "markers stroke");
+
+test_computed_value("paint-order", "fill stroke markers", "fill");
+test_computed_value("paint-order", "fill markers stroke", "fill markers");
+test_computed_value("paint-order", "stroke fill markers", "stroke");
+test_computed_value("paint-order", "stroke markers fill", "stroke markers");
+test_computed_value("paint-order", "markers fill stroke", "markers");
+test_computed_value("paint-order", "markers stroke fill", "markers stroke");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/paint-order-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/paint-order-invalid.svg
new file mode 100644
index 0000000000..5043176dd9
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/paint-order-invalid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing paint-order with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty"/>
+    <h:meta name="assert" content="paint-order supports only the grammar 'normal | [ fill || stroke || markers ]'."/>
+    <h:meta name="assert" content="paint-order uses the shortest serialization."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("paint-order", "normal stroke");
+test_invalid_value("paint-order", "fill fill");
+test_invalid_value("paint-order", "markers normal");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/paint-order-valid.svg b/testing/web-platform/tests/svg/painting/parsing/paint-order-valid.svg
new file mode 100644
index 0000000000..25759d222d
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/paint-order-valid.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing paint-order with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty"/>
+    <h:meta name="assert" content="paint-order supports the full grammar 'normal | [ fill || stroke || markers ]'."/>
+    <h:meta name="assert" content="paint-order uses the shortest serialization."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("paint-order", "normal");
+
+test_valid_value("paint-order", "fill");
+test_valid_value("paint-order", "stroke");
+test_valid_value("paint-order", "markers");
+
+test_valid_value("paint-order", "fill stroke", "fill");
+test_valid_value("paint-order", "fill markers");
+test_valid_value("paint-order", "stroke fill", "stroke");
+test_valid_value("paint-order", "stroke markers");
+test_valid_value("paint-order", "markers fill", "markers");
+test_valid_value("paint-order", "markers stroke");
+
+test_valid_value("paint-order", "fill stroke markers", "fill");
+test_valid_value("paint-order", "fill markers stroke", "fill markers");
+test_valid_value("paint-order", "stroke fill markers", "stroke");
+test_valid_value("paint-order", "stroke markers fill", "stroke markers");
+test_valid_value("paint-order", "markers fill stroke", "markers");
+test_valid_value("paint-order", "markers stroke fill", "markers stroke");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/shape-rendering-computed.svg b/testing/web-platform/tests/svg/painting/parsing/shape-rendering-computed.svg
new file mode 100644
index 0000000000..5e8f530d48
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/shape-rendering-computed.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().shapeRendering</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty"/>
+    <h:meta name="assert" content="shape-rendering computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("shape-rendering", "auto");
+test_computed_value("shape-rendering", "optimizespeed");
+test_computed_value("shape-rendering", "crispedges");
+test_computed_value("shape-rendering", "geometricprecision");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/shape-rendering-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/shape-rendering-invalid.svg
new file mode 100644
index 0000000000..e20ca879db
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/shape-rendering-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing shape-rendering with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty"/>
+    <h:meta name="assert" content="shape-rendering supports only the grammar 'auto | optimizeSpeed | crispEdges | geometricPrecision'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("shape-rendering", "optimizelegibility");
+test_invalid_value("shape-rendering", "auto optimizespeed");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/shape-rendering-valid.svg b/testing/web-platform/tests/svg/painting/parsing/shape-rendering-valid.svg
new file mode 100644
index 0000000000..803609476f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/shape-rendering-valid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing shape-rendering with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty"/>
+    <h:meta name="assert" content="shape-rendering supports the full grammar 'auto | optimizeSpeed | crispEdges | geometricPrecision'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("shape-rendering", "auto");
+test_valid_value("shape-rendering", "optimizespeed");
+test_valid_value("shape-rendering", "crispedges");
+test_valid_value("shape-rendering", "geometricprecision");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-computed.svg
new file mode 100644
index 0000000000..48214d140f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-computed.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().stroke</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty"/>
+    <h:meta name="assert" content="stroke computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke", "none");
+test_computed_value("stroke", "rgb(12, 34, 56)");
+
+test_computed_value("stroke", 'url("https://example.com/")');
+test_computed_value("stroke", 'url("https://example.com/") none');
+test_computed_value("stroke", 'url("https://example.com/") rgb(12, 34, 56)');
+
+// context-fill and context-stroke are not yet supported by browsers.
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['stroke'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['stroke'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-computed.svg
new file mode 100644
index 0000000000..6253e23c0f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-computed.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeDasharray</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty"/>
+    <h:meta name="assert" content="stroke-dasharray computed value uses absolute lengths."/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-dasharray", "none");
+
+test_computed_value("stroke-dasharray", "10", "10px");
+test_computed_value("stroke-dasharray", "calc(10px + 0.5em)", "30px");
+test_computed_value("stroke-dasharray", "calc(10px - 0.5em)", "0px");
+test_computed_value("stroke-dasharray", "40%");
+test_computed_value("stroke-dasharray", "calc(50% + 60px)");
+
+test_computed_value("stroke-dasharray", "10px 20% 30px", "10px, 20%, 30px");
+test_computed_value("stroke-dasharray", "0, 5", "0px, 5px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-invalid.svg
new file mode 100644
index 0000000000..53a9640c8f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-invalid.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-dasharray with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty"/>
+    <h:meta name="assert" content="stroke-dasharray supports only the grammar 'none | dasharray'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-dasharray", "auto");
+test_invalid_value("stroke-dasharray", "none 10px");
+test_invalid_value("stroke-dasharray", "20px / 30px");
+test_invalid_value("stroke-dasharray", "-40px");
+test_invalid_value("stroke-dasharray", "calc(2px + 3)");
+test_invalid_value("stroke-dasharray", "calc(10% + 5)");
+test_invalid_value("stroke-dasharray", "calc(40 + calc(3px + 6%))");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-valid.svg
new file mode 100644
index 0000000000..9326118ceb
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-dasharray-valid.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-dasharray with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty"/>
+    <h:meta name="assert" content="stroke-dasharray supports the full grammar 'none | dasharray'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-dasharray", "none");
+
+// dasharray = [ length-percentage | number ]#*
+test_valid_value("stroke-dasharray", "10px");
+test_valid_value("stroke-dasharray", "20%");
+test_valid_value("stroke-dasharray", "calc(2em + 3ex)");
+
+test_valid_value("stroke-dasharray", "10pt 20% 30pc 40in", "10pt, 20%, 30pc, 40in");
+test_valid_value("stroke-dasharray", "10vmin, 20vmax, 30em, 40ex");
+test_valid_value("stroke-dasharray", "0, 5", ["0, 5", "0px, 5px"]); // Edge/Safari serialize numbers as lengths.
+test_valid_value("stroke-dasharray", "calc(3)");
+test_valid_value("stroke-dasharray", "calc(2 + 1)", "calc(3)");
+test_valid_value("stroke-dasharray", "calc(2 + (7 - 5))", "calc(4)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-computed.svg
new file mode 100644
index 0000000000..561194827e
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-computed.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeDashoffset</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty"/>
+    <h:meta name="assert" content="stroke-dashoffset computed value is absolute length."/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-dashoffset", "10", "10px");
+test_computed_value("stroke-dashoffset", "0.5em", "20px");
+test_computed_value("stroke-dashoffset", "calc(10px + 0.5em)", "30px");
+test_computed_value("stroke-dashoffset", "calc(10px - 0.5em)", "-10px");
+test_computed_value("stroke-dashoffset", "-40%");
+test_computed_value("stroke-dashoffset", "calc(50% + 60px)");
+
+// https://www.w3.org/TR/css-values-3/#absolute-lengths
+test_computed_value("stroke-dashoffset", "254cm", "9600px");
+test_computed_value("stroke-dashoffset", "2540mm", "9600px");
+test_computed_value("stroke-dashoffset", "10160Q", "9600px");
+test_computed_value("stroke-dashoffset", "1in", "96px");
+test_computed_value("stroke-dashoffset", "6pc", "96px");
+test_computed_value("stroke-dashoffset", "72pt", "96px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-invalid.svg
new file mode 100644
index 0000000000..2040355e22
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-invalid.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-dashoffset with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty"/>
+    <h:meta name="assert" content="stroke-dashoffset supports only the grammar 'length-percentage'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-dashoffset", "auto");
+test_invalid_value("stroke-dashoffset", "-10.px");
+test_invalid_value("stroke-dashoffset", "30deg");
+test_invalid_value("stroke-dashoffset", "40px 50%");
+test_invalid_value("stroke-dashoffset", "calc(2px + 3)");
+test_invalid_value("stroke-dashoffset", "calc(10% + 5)");
+test_invalid_value("stroke-dashoffset", "calc(40 + calc(3px + 6%))");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-valid.svg
new file mode 100644
index 0000000000..846b69ccd2
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-dashoffset-valid.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-dashoffset with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty"/>
+    <h:meta name="assert" content="stroke-dashoffset supports the full grammar 'length-percentage'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-dashoffset", "0");
+test_valid_value("stroke-dashoffset", "10px");
+test_valid_value("stroke-dashoffset", "-20%");
+test_valid_value("stroke-dashoffset", "30");
+test_valid_value("stroke-dashoffset", "40Q", "40q");
+test_valid_value("stroke-dashoffset", "calc(2em + 3ex)");
+test_valid_value("stroke-dashoffset", "calc(3)");
+test_valid_value("stroke-dashoffset", "calc(2 + 1)", "calc(3)");
+test_valid_value("stroke-dashoffset", "calc(2 + (7 - 5))", "calc(4)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-invalid.svg
new file mode 100644
index 0000000000..a976ccb977
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-invalid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty"/>
+    <h:meta name="assert" content="stroke supports only the paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke", "auto");
+test_invalid_value("stroke", "none red");
+test_invalid_value("stroke", 'none url("https://example.com/")');
+test_invalid_value("stroke", 'red url("https://example.com/")');
+test_invalid_value("stroke", 'url("https://example.com/") none red');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-computed.svg
new file mode 100644
index 0000000000..a99629f7b9
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-computed.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeLinecap</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty"/>
+    <h:meta name="assert" content="stroke-linecap computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-linecap", "butt");
+test_computed_value("stroke-linecap", "round");
+test_computed_value("stroke-linecap", "square");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-invalid.svg
new file mode 100644
index 0000000000..ba4bd8640e
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-linecap with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty"/>
+    <h:meta name="assert" content="stroke-linecap supports only the grammar 'butt | round | square'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-linecap", "auto");
+test_invalid_value("stroke-linecap", "butt round");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-valid.svg
new file mode 100644
index 0000000000..045c4eef7c
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-linecap-valid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-linecap with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty"/>
+    <h:meta name="assert" content="stroke-linecap supports the full grammar 'butt | round | square'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-linecap", "butt");
+test_valid_value("stroke-linecap", "round");
+test_valid_value("stroke-linecap", "square");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-computed.svg
new file mode 100644
index 0000000000..3e0633fe57
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-computed.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeLinejoin</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty"/>
+    <h:meta name="assert" content="stroke-linejoin computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-linejoin", "miter");
+test_computed_value("stroke-linejoin", "round");
+test_computed_value("stroke-linejoin", "bevel");
+// "miter-clip" and "arcs" are not yet supported by browsers.
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-invalid.svg
new file mode 100644
index 0000000000..6a6c428280
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-linejoin with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty"/>
+    <h:meta name="assert" content="stroke-linejoin supports only the grammar 'miter | miter-clip | round | bevel | arcs'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-linejoin", "auto");
+test_invalid_value("stroke-linejoin", "round bevel");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-valid.svg
new file mode 100644
index 0000000000..876b2f67dd
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-linejoin-valid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-linejoin with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty"/>
+    <h:meta name="assert" content="stroke-linejoin supports the full grammar 'miter | miter-clip | round | bevel | arcs'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-linejoin", "miter");
+test_valid_value("stroke-linejoin", "miter-clip");
+test_valid_value("stroke-linejoin", "round");
+test_valid_value("stroke-linejoin", "bevel");
+test_valid_value("stroke-linejoin", "arcs");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-computed.svg
new file mode 100644
index 0000000000..33e5d2b81e
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-computed.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeMiterlimit</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty"/>
+    <h:meta name="assert" content="stroke-miterlimit computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-miterlimit", "0");
+test_computed_value("stroke-miterlimit", "0.5");
+test_computed_value("stroke-miterlimit", "1");
+test_computed_value("stroke-miterlimit", "7.5");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-invalid.svg
new file mode 100644
index 0000000000..c1307dab5b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-invalid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-miterlimit with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty"/>
+    <h:meta name="assert" content="stroke-miterlimit supports only the grammar 'number'"/>
+    <h:meta name="assert" content="A negative value for stroke-miterlimit must be treated as an illegal value."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-miterlimit", "1.");
+test_invalid_value("stroke-miterlimit", "2 3");
+test_invalid_value("stroke-miterlimit", "-4");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-valid.svg
new file mode 100644
index 0000000000..36fd81d29c
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-miterlimit-valid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-miterlimit with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty"/>
+    <h:meta name="assert" content="stroke-miterlimit supports the full grammar 'number'"/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-miterlimit", "0");
+test_valid_value("stroke-miterlimit", "0.5");
+test_valid_value("stroke-miterlimit", "1");
+test_valid_value("stroke-miterlimit", "7.5");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-computed.svg
new file mode 100644
index 0000000000..df58a213ff
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-computed.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeOpacity</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty"/>
+    <h:meta name="assert" content="stroke-opacity computed value is clamped to the range [0,1]."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-opacity", "-1", "0");
+test_computed_value("stroke-opacity", "0.5");
+test_computed_value("stroke-opacity", "3", "1");
+test_computed_value("stroke-opacity", "-100%", "0");
+test_computed_value("stroke-opacity", "50%", "0.5");
+test_computed_value("stroke-opacity", "300%", "1");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-invalid.svg
new file mode 100644
index 0000000000..af1a954b47
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-opacity with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty"/>
+    <h:meta name="assert" content="stroke-opacity supports only the grammar 'alpha-value'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-opacity", "1.");
+test_invalid_value("stroke-opacity", "2 3");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-valid.svg
new file mode 100644
index 0000000000..a333363e38
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-opacity-valid.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke-opacity with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty"/>
+    <h:meta name="assert" content="stroke-opacity supports the full grammar 'alpha-value'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-opacity", "-1");
+test_valid_value("stroke-opacity", "0.5");
+test_valid_value("stroke-opacity", "3");
+test_valid_value("stroke-opacity", "-100%", "-1");
+test_valid_value("stroke-opacity", "50%", "0.5");
+test_valid_value("stroke-opacity", "300%", "3");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-valid.svg
new file mode 100644
index 0000000000..ce43c1f633
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-valid.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing stroke with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty"/>
+    <h:meta name="assert" content="stroke supports the full paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke", "none");
+test_valid_value("stroke", "context-fill");
+test_valid_value("stroke", "context-stroke");
+test_valid_value("stroke", "rgb(12, 34, 56)");
+
+test_valid_value("stroke", 'url("https://example.com/")');
+test_valid_value("stroke", 'url("https://example.com/") none');
+test_valid_value("stroke", 'url("https://example.com/") rgb(12, 34, 56)');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-width-computed.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-width-computed.svg
new file mode 100644
index 0000000000..5daa9cafba
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-width-computed.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().strokeWidth</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidth"/>
+    <h:meta name="assert" content="stroke-width computed value is absolute length."/>
+  </metadata>
+  <g id="target"></g>
+  <g id="ref"></g>
+  <style>
+    #target, #ref {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-width", "10", "10px");
+test_computed_value("stroke-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("stroke-width", "calc(10px - 0.5em)", "0px");
+test_computed_value("stroke-width", "40%");
+test_computed_value("stroke-width", "calc(50% + 60px)");
+
+const lengthUnits = [
+  'em',
+  'ex',
+  'ch',
+  'rem',
+  'vw',
+  'vh',
+  'vmin',
+  'vmax',
+  'cm',
+  'mm',
+  'Q',
+  'in',
+  'pt',
+  'pc',
+  'px'
+];
+
+for (let lengthUnit of lengthUnits) {
+  const length = '987' + lengthUnit;
+  test(() => {
+    const target = document.getElementById('target');
+    target.style.strokeWidth = length;
+
+    const ref = document.getElementById('ref');
+    ref.style.textIndent = length;
+
+    assert_equals(getComputedStyle(target).strokeWidth, getComputedStyle(ref).textIndent);
+  }, 'stroke-width computes ' + lengthUnit + ' lengths');
+}
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-width-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-width-invalid.svg
new file mode 100644
index 0000000000..2111e376ac
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-width-invalid.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="600px">
+  <title>SVG Painting: parsing stroke-width with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidth"/>
+    <h:meta name="assert" content="stroke-width supports only the grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("stroke-width", "auto");
+test_invalid_value("stroke-width", "10px 20px");
+test_invalid_value("stroke-width", "-1px");
+test_invalid_value("stroke-width", "-10%");
+test_invalid_value("stroke-width", "calc(2px + 3)");
+test_invalid_value("stroke-width", "calc(10% + 5)");
+test_invalid_value("stroke-width", "calc(40 + calc(3px + 6%))");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/stroke-width-valid.svg b/testing/web-platform/tests/svg/painting/parsing/stroke-width-valid.svg
new file mode 100644
index 0000000000..fa00a9b709
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-width-valid.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="600px">
+  <title>SVG Painting: parsing stroke-width with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidth"/>
+    <h:meta name="assert" content="stroke-width supports the full grammar '&lt;length-percentage&gt;' and unitless."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("stroke-width", "0");
+test_valid_value("stroke-width", "10");
+test_valid_value("stroke-width", "1px");
+test_valid_value("stroke-width", "calc(2em + 3ex)");
+test_valid_value("stroke-width", "4%");
+test_valid_value("stroke-width", "5vmin");
+test_valid_value("stroke-width", "calc(50% + 60px)");
+test_valid_value("stroke-width", "calc(3)");
+test_valid_value("stroke-width", "calc(2 + 1)", "calc(3)");
+test_valid_value("stroke-width", "calc(2 + (7 - 5))", "calc(4)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/text-rendering-computed.svg b/testing/web-platform/tests/svg/painting/parsing/text-rendering-computed.svg
new file mode 100644
index 0000000000..b9758afefd
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/text-rendering-computed.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().textRendering</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty"/>
+    <h:meta name="assert" content="text-rendering computed value is as specified."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("text-rendering", "auto");
+test_computed_value("text-rendering", "optimizespeed");
+test_computed_value("text-rendering", "optimizelegibility");
+test_computed_value("text-rendering", "geometricprecision");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/text-rendering-invalid.svg b/testing/web-platform/tests/svg/painting/parsing/text-rendering-invalid.svg
new file mode 100644
index 0000000000..92da841cad
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/text-rendering-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing text-rendering with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty"/>
+    <h:meta name="assert" content="text-rendering supports only the grammar 'auto | optimizeSpeed | optimizeLegibility | geometricPrecision'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("text-rendering", "crispedges");
+test_invalid_value("text-rendering", "auto optimizespeed");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/parsing/text-rendering-valid.svg b/testing/web-platform/tests/svg/painting/parsing/text-rendering-valid.svg
new file mode 100644
index 0000000000..d1a7dbf747
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/text-rendering-valid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing text-rendering with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty"/>
+    <h:meta name="assert" content="text-rendering supports the full grammar 'auto | optimizeSpeed | optimizeLegibility | geometricPrecision'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("text-rendering", "auto");
+test_valid_value("text-rendering", "optimizespeed");
+test_valid_value("text-rendering", "optimizelegibility");
+test_valid_value("text-rendering", "geometricprecision");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/display-none-mask-ref.html b/testing/web-platform/tests/svg/painting/reftests/display-none-mask-ref.html
new file mode 100644
index 0000000000..3739265b23
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/display-none-mask-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <div style="width: 200px; height: 200px;"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <div style="width: 200px; height: 200px; background: green"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <div style="width: 200px; height: 200px;"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <div style="width: 200px; height: 200px; background: green"></div>
+    </foreignObject>
+  </svg>
+
+  <!-- make sure masking actually works -->
+  <svg width="200" height="200">
+      <rect x="0" y="0" width="100" height="50" fill="green"></rect>
+      <rect x="0" y="100" width="100" height="50" fill="green"></rect>
+  </svg>
+  <svg width="200" height="200">
+      <rect x="0" y="0" width="100" height="50" fill="green"></rect>
+      <rect x="0" y="100" width="100" height="50" fill="green"></rect>
+  </svg>
+
+  <!-- make sure masking works on active content -->
+  <svg width="200" height="200">
+    <rect x="0" y="0" width="100" height="50" fill="green"></rect>
+    <rect x="0" y="100" width="100" height="50" fill="green"></rect>
+  </svg>
+  <svg width="200" height="200">
+    <rect x="0" y="0" width="100" height="50" fill="green"></rect>
+    <rect x="0" y="100" width="100" height="50" fill="green"></rect>
+  </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/svg/painting/reftests/display-none-mask.html b/testing/web-platform/tests/svg/painting/reftests/display-none-mask.html
new file mode 100644
index 0000000000..a6aa600757
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/display-none-mask.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Mask behaviour when mask image is missing or display:none</title>
+  <link rel="match"  href="display-none-mask-ref.html">
+  <link name="author" title="Timothy Nikkel" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1624532">
+  <link name="author" title="Mike Bremford" href="http://bfo.com"> <!-- edited 202010 -->
+  <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">
+  <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#MaskElement">
+  <link rel="help" href="https://github.com/w3c/fxtf-drafts/issues/245">
+  <meta name="assert" content="A missing or invalid mask image is equivalent to transparent black (i.e. nothing is displayed). A mask with display:none is disabled (which is a change to the specified behaviour as of issue 245)">
+</head>
+
+<body>
+  <svg width="200" height="200">
+    <!-- missing/invalid mask is equivalent to transparent black - nothing displayed -->
+    <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#notfound');">
+      <div style="width: 200px; height: 200px; background: red"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <!-- display:none on mask means mask is not applied (new in https://github.com/w3c/fxtf-drafts/issues/245) -->
+    <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#noneMask');">
+      <div style="width: 200px; height: 200px; background: green"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <!-- missing/invalid mask is equivalent to transparent black - nothing displayed -->
+      <div style="width: 200px; height: 200px; background: red; mask: url('#notfound');"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <!-- display:none on mask means mask is not applied (new in https://github.com/w3c/fxtf-drafts/issues/245) -->
+      <div style="width: 200px; height: 200px; background: green; mask: url('#noneMask');"></div>
+    </foreignObject>
+  </svg>
+
+  <svg width="200" height="200" style="display:none">
+    <defs>
+      <mask id="noneMask">
+        <rect x="0" y="0" width="200" height="200" fill="#4d4d4d"></rect>
+      </mask>
+    </defs>
+  </svg>
+
+  <!-- make sure masking actually works -->
+  <svg width="200" height="200">
+    <defs>
+      <mask id="aMask">
+        <rect x="0" y="0" width="100" height="50" fill="#ffffff"></rect>
+        <rect x="0" y="100" width="100" height="50" fill="#ffffff"></rect>
+      </mask>
+    </defs>
+    <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');">
+      <div style="width: 200px; height: 200px; background: green;"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <div style="width: 200px; height: 200px; background: green; mask: url('#aMask');"></div>
+    </foreignObject>
+  </svg>
+
+  <!-- make sure masking works on active content -->
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');">
+      <div style="width: 200px; height: 200px; background: green; will-change: transform"></div>
+    </foreignObject>
+  </svg>
+  <svg width="200" height="200">
+    <foreignObject x="0" y="0" width="200" height="200">
+      <div style="width: 200px; height: 200px; background: green; will-change: transform; mask: url('#aMask');"></div>
+    </foreignObject>
+  </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/svg/painting/reftests/fallback-001.svg b/testing/web-platform/tests/svg/painting/reftests/fallback-001.svg
new file mode 100644
index 0000000000..e2788e5f93
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/fallback-001.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG paint server: without fallback color nothing is painted</title>
+  <h:link rel="match" href="../../pservers/reftests/reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="url(#null)"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/fallback-002.svg b/testing/web-platform/tests/svg/painting/reftests/fallback-002.svg
new file mode 100644
index 0000000000..6180cb2a96
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/fallback-002.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG paint server: paint fallback color</title>
+  <h:link rel="match" href="../../pservers/reftests/reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="url(#null) green"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-001-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-001-ref.svg
new file mode 100644
index 0000000000..202ac3420d
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-001-ref.svg
@@ -0,0 +1,94 @@
+<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>Markers on Path (Linear).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+            overflow="visible"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+            overflow="visible"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+            overflow="visible"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+
+    <path id="PStart" transform="matrix(2,0,0,2,0,-10)" d="M 0 0 L 10 5 L 0 10 z" fill="green"/>
+    <path id="PMid"   transform="matrix(2,0,0,2,0,-10)" d="M 0 0 L 10 5 L 0 10 z" fill="orange"/>
+    <path id="PEnd"   transform="matrix(2,0,0,2,0,-10)" d="M 0 0 L 10 5 L 0 10 z" fill="blue"/>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 50,120   50,0    50,0     50,0"/>
+    <path d="m 50,140   50,20   50,-20   50,20"/>
+
+    <path d="m 50,200 l 50,0  l 50,0   l 50,0"/>
+    <path d="m 50,220 l 50,20 l 50,-20 l 50,20"/>
+
+    <path d="m 50,280 h 50 v 50 h 50"/>
+
+    <path d="M 290,120   340,120   390,120   440,120"/>
+    <path d="M 290,140   340,160   390,140   440,160"/>
+
+    <path d="M 290,200 L 340,200 L 390,200 L 440,200"/>
+    <path d="M 290,220 L 340,240 L 390,220 L 440,240"/>
+
+    <path d="M 290,280 H 340 V 330 H 390"/>
+
+    <g id="ref" style="stroke:none">
+      <g id="linear">
+        <use xlink:href="#PStart" transform="translate(50,120)"/>
+        <use xlink:href="#PMid"   transform="translate(100,120)"/>
+        <use xlink:href="#PMid"   transform="translate(150,120)"/>
+        <use xlink:href="#PEnd"   transform="translate(200,120)"/>
+      </g>
+      <g id="zigzag">
+        <path d="m 50,140 50,20"        style="marker-start:url(#Start)"/>
+        <path d="m 50,160 50,0 50,0"    style="marker-mid:url(#Mid)"/>
+        <path d="m 100,140 50,0 50,0"   style="marker-mid:url(#Mid)"/>
+        <path d="m 150,140 50,20"       style="marker-end:url(#End)"/>
+      </g>
+      <g id="step">
+        <path d="m 50,280 50,0"         style="marker-start:url(#Start)"/>
+        <path d="m 50,230 50,50 50,50"  style="marker-mid:url(#Mid)"/>
+        <path d="m 50,280 50,50 50,50"  style="marker-mid:url(#Mid)"/>
+        <path d="m 100,330 50,0"        style="marker-end:url(#End)"/>
+      </g>
+
+      <use xlink:href="#linear"  transform="translate(0,80)"/>
+      <use xlink:href="#zigzag"  transform="translate(0,80)"/>
+    </g>
+
+    <use xlink:href="#ref" transform="translate(240,0)"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-001.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-001.svg
new file mode 100644
index 0000000000..7fb4adf427
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-001.svg
@@ -0,0 +1,67 @@
+<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>Markers on Path (Linear).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-001-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+            overflow="visible"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+            overflow="visible"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            markerHeight="10"
+            orient="auto"
+            overflow="visible"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">
+    <path d="m 50,120   50,0    50,0     50,0"/>
+    <path d="m 50,140   50,20   50,-20   50,20"/>
+
+    <path d="m 50,200 l 50,0  l 50,0   l 50,0"/>
+    <path d="m 50,220 l 50,20 l 50,-20 l 50,20"/>
+
+    <path d="m 50,280 h 50 v 50 h 50"/>
+
+    <path d="M 290,120   340,120   390,120   440,120"/>
+    <path d="M 290,140   340,160   390,140   440,160"/>
+
+    <path d="M 290,200 L 340,200 L 390,200 L 440,200"/>
+    <path d="M 290,220 L 340,240 L 390,220 L 440,240"/>
+
+    <path d="M 290,280 H 340 V 330 H 390"/>
+</g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-002-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-002-ref.svg
new file mode 100644
index 0000000000..c9ee76915b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-002-ref.svg
@@ -0,0 +1,78 @@
+<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>Markers on Path (Bezier).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 50,120  c 20,20 30,-20 50,0 c 20,20 30,-20 50,0 c 20,20 30,-20 50,0"/>
+    <path d="m 50,150  c 20,20 30,-20 50,0 s       30,-20 50,0 s       30,-20 50,0"/>
+
+    <path d="m 50,240  q 25,25 50,0  q 25,-25 50,0  q 25,25 50,0"/>
+    <path d="m 50,270  q 25,25 50,0  t        50,0  t       50,0"/>
+
+    <path d="M 290,120 C 310,140 320,100, 340,120 C 360,140 370,100 390,120 C 410,140 420,100 440,120"/>
+    <path d="M 290,150 C 310,170 320,130, 340,150 S         370,130 390,150 S         420,130 440,150"/>
+
+    <path d="M 290,240 Q 315,265 340,240  Q 365,215 390,240  Q 415,265 440,240"/>
+    <path d="M 290,270 Q 315,295 340,270  T         390,270  T         440,270"/>
+
+    <g id="cubic">
+      <path d="m  50,120 20,20"   style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,120 20,20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,120 20,20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,120 20,20"   style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#cubic"  transform="translate(240,  0)"/>
+    <use xlink:href="#cubic"  transform="translate(  0, 30)"/>
+    <use xlink:href="#cubic"  transform="translate(240, 30)"/>
+
+    <g id="quadratic">
+      <path d="m  50,240 20, 20"  style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,240 20,-20"  style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,240 20, 20"  style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,240 20,-20"  style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#quadratic"  transform="translate(240,  0)"/>
+    <use xlink:href="#quadratic"  transform="translate(  0, 30)"/>
+    <use xlink:href="#quadratic"  transform="translate(240, 30)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-002.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-002.svg
new file mode 100644
index 0000000000..7467c7d523
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-002.svg
@@ -0,0 +1,60 @@
+<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>Markers on Path (Bezier).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-002-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">
+    <path d="m 50,120  c 20,20 30,-20 50,0 c 20,20 30,-20 50,0 c 20,20 30,-20 50,0"/>
+    <path d="m 50,150  c 20,20 30,-20 50,0 s       30,-20 50,0 s       30,-20 50,0"/>
+
+    <path d="m 50,240  q 25,25 50,0  q 25,-25 50,0  q 25,25 50,0"/>
+    <path d="m 50,270  q 25,25 50,0  t        50,0  t       50,0"/>
+
+    <path d="M 290,120 C 310,140 320,100, 340,120 C 360,140 370,100 390,120 C 410,140 420,100 440,120"/>
+    <path d="M 290,150 C 310,170 320,130, 340,150 S         370,130 390,150 S         420,130 440,150"/>
+
+    <path d="M 290,240 Q 315,265 340,240  Q 365,215 390,240  Q 415,265 440,240"/>
+    <path d="M 290,270 Q 315,295 340,270  T         390,270  T         440,270"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-003-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-003-ref.svg
new file mode 100644
index 0000000000..3ba459c700
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-003-ref.svg
@@ -0,0 +1,70 @@
+<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>Markers on Path (Arc).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m  50,120  a 30,20 90 0 0 50,0  a 30,20 90 0 1 50,0  a 30,20 90 0 0 50,0"/>
+
+    <path d="m  50,240  a 30,20 90 0 1 50,0  a 30,20 90 0 0 50,0  a 30,20 90 0 1 50,0"/>
+
+    <path d="M 290,120  A 30,20 90 0 0 340,120  A 30,20 90 0 1 390,120  A 30,20 90 0 0 440,120"/>
+
+    <path d="M 290,240  A 30,20 90 0 1 340,240  A 30,20 90 0 0 390,240  A 30,20 90 0 1 440,240"/>
+
+    <g id="down">
+      <path d="m  50,120 0, 20"   style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,120 0,-20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,120 0, 20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,120 0,-20"   style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#down"  transform="translate(240,  0)"/>
+
+    <g id="up">
+      <path d="m  50,240 0,-20"   style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,240 0, 20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,240 0,-20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,240 0, 20"   style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#up"  transform="translate(240,  0)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-003.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-003.svg
new file mode 100644
index 0000000000..a31bf84e52
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-003.svg
@@ -0,0 +1,56 @@
+<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>Markers on Path (Arc).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-003-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">
+    <path d="m  50,120  a 30,20 90 0 0 50,0  a 30,20 90 0 1 50,0  a 30,20 90 0 0 50,0"/>
+
+    <path d="m  50,240  a 30,20 90 0 1 50,0  a 30,20 90 0 0 50,0  a 30,20 90 0 1 50,0"/>
+
+    <path d="M 290,120  A 30,20 90 0 0 340,120  A 30,20 90 0 1 390,120  A 30,20 90 0 0 440,120"/>
+
+    <path d="M 290,240  A 30,20 90 0 1 340,240  A 30,20 90 0 0 390,240  A 30,20 90 0 1 440,240"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-011-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-011-ref.svg
new file mode 100644
index 0000000000..4d6cc76054
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-011-ref.svg
@@ -0,0 +1,83 @@
+<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>Markers on Sub-Path (Linear).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 50,120   50,0  m 50,0     50,0"/>
+    <path d="m 50,140   50,20 m 50,-20   50,20"/>
+
+    <path d="m 50,200 l 50,0  m 50,0   l 50,0"/>
+    <path d="m 50,220 l 50,20 m 50,-20 l 50,20"/>
+
+    <path d="m 50,280 h 50 m 0,50 h 50"/>
+
+    <path d="M 290,120   340,120 M 390,120   440,120"/>
+    <path d="M 290,140   340,160 M 390,140   440,160"/>
+
+    <path d="M 290,200 L 340,200 M 390,200 L 440,200"/>
+    <path d="M 290,220 L 340,240 M 390,220 L 440,240"/>
+
+    <path d="M 290,280 H 340 M 340,330 H 390"/>
+
+    <g id="linear">
+      <path d="m  50,120 50,0"    style="stroke:none;marker-start:url(#Start);marker-end:url(#Mid)"/>
+      <path d="m 150,120 50,0"    style="stroke:none;marker-start:url(#Mid);  marker-end:url(#End)"/>
+    </g>
+    <use xlink:href="#linear"  transform="translate(240,  0)"/>
+    <use xlink:href="#linear"  transform="translate(  0, 80)"/>
+    <use xlink:href="#linear"  transform="translate(240, 80)"/>
+
+    <g id="zigzag">
+      <path d="m  50,140 50,20"   style="stroke:none;marker-start:url(#Start);marker-end:url(#Mid)"/>
+      <path d="m 150,140 50,20"   style="stroke:none;marker-start:url(#Mid);  marker-end:url(#End)"/>
+    </g>
+    <use xlink:href="#zigzag"  transform="translate(240,  0)"/>
+    <use xlink:href="#zigzag"  transform="translate(  0, 80)"/>
+    <use xlink:href="#zigzag"  transform="translate(240, 80)"/>
+
+    <g id="step">
+      <path d="m  50,280 50,0"    style="stroke:none;marker-start:url(#Start);marker-end:url(#Mid)"/>
+      <path d="m 100,330 50,0"    style="stroke:none;marker-start:url(#Mid);  marker-end:url(#End)"/>
+    </g>
+    <use xlink:href="#step"  transform="translate(240,  0)"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-011.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-011.svg
new file mode 100644
index 0000000000..b6627f86e8
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-011.svg
@@ -0,0 +1,64 @@
+<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>Markers on Sub-Path (Linear).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-011-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">
+    <path d="m 50,120   50,0  m 50,0     50,0"/>
+    <path d="m 50,140   50,20 m 50,-20   50,20"/>
+
+    <path d="m 50,200 l 50,0  m 50,0   l 50,0"/>
+    <path d="m 50,220 l 50,20 m 50,-20 l 50,20"/>
+
+    <path d="m 50,280 h 50 m 0,50 h 50"/>
+
+    <path d="M 290,120   340,120 M 390,120   440,120"/>
+    <path d="M 290,140   340,160 M 390,140   440,160"/>
+
+    <path d="M 290,200 L 340,200 M 390,200 L 440,200"/>
+    <path d="M 290,220 L 340,240 M 390,220 L 440,240"/>
+
+    <path d="M 290,280 H 340 M 340,330 H 390"/>
+</g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-012-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-012-ref.svg
new file mode 100644
index 0000000000..ad44874cda
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-012-ref.svg
@@ -0,0 +1,70 @@
+<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>Markers on Sub-Path (Bezier).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 50,120  c 20,20 30,-20 50,0 m 50,0 c 20,20 30,-20 50,0"/>
+
+    <path d="m 50,240  q 25,25 50,0  m 50,0  q 25,25 50,0"/>
+
+    <path d="M 290,120 C 310,140 320,100, 340,120 M 390,120 C 410,140 420,100 440,120"/>
+
+    <path d="M 290,240 Q 315,265 340,240  M 390,240  Q 415,265 440,240"/>
+
+    <g id="cubic">
+      <path d="m  50,120 20,20"   style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,120 20,20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,120 20,20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,120 20,20"   style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#cubic"  transform="translate(240,  0)"/>
+
+    <g id="quadratic">
+      <path d="m  50,240 20, 20"  style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,240 20,-20"  style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,240 20, 20"  style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,240 20,-20"  style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#quadratic"  transform="translate(240,  0)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-012.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-012.svg
new file mode 100644
index 0000000000..1586951b1f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-012.svg
@@ -0,0 +1,56 @@
+<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>Markers on Sub-Path (Bezier).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-012-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">
+    <path d="m 50,120  c 20,20 30,-20 50,0 m 50,0 c 20,20 30,-20 50,0"/>
+
+    <path d="m 50,240  q 25,25 50,0  m 50,0  q 25,25 50,0"/>
+
+    <path d="M 290,120 C 310,140 320,100, 340,120 M 390,120 C 410,140 420,100 440,120"/>
+
+    <path d="M 290,240 Q 315,265 340,240  M 390,240  Q 415,265 440,240"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-013-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-013-ref.svg
new file mode 100644
index 0000000000..e03fc4827e
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-013-ref.svg
@@ -0,0 +1,70 @@
+<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>Markers on Sub-Path (Arc).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m  50,120  a 30,20 90 0 0 50,0     m  50,0    a 30,20 90 0 0 50,0"/>
+
+    <path d="m  50,240  a 30,20 90 0 1 50,0     m  50,0    a 30,20 90 0 1 50,0"/>
+
+    <path d="M 290,120  A 30,20 90 0 0 340,120  M 390,120  A 30,20 90 0 0 440,120"/>
+
+    <path d="M 290,240  A 30,20 90 0 1 340,240  M 390,240  A 30,20 90 0 1 440,240"/>
+
+    <g id="down">
+      <path d="m  50,120 0, 20"   style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,120 0,-20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,120 0, 20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,120 0,-20"   style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#down"  transform="translate(240,  0)"/>
+
+    <g id="up">
+      <path d="m  50,240 0,-20"   style="stroke:none;marker-start:url(#Start)"/>
+      <path d="m 100,240 0, 20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 150,240 0,-20"   style="stroke:none;marker-start:url(#Mid)"/>
+      <path d="m 200,240 0, 20"   style="stroke:none;marker-start:url(#End)"/>
+    </g>
+    <use xlink:href="#up"  transform="translate(240,  0)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-013.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-013.svg
new file mode 100644
index 0000000000..e7a44351fa
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-013.svg
@@ -0,0 +1,56 @@
+<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>Markers on Sub-Path (Arc).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-013-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2;marker-start:url(#Start);marker-mid:url(#Mid);marker-end:url(#End)">
+    <path d="m  50,120  a 30,20 90 0 0 50,0     m  50,0    a 30,20 90 0 0 50,0"/>
+
+    <path d="m  50,240  a 30,20 90 0 1 50,0     m  50,0    a 30,20 90 0 1 50,0"/>
+
+    <path d="M 290,120  A 30,20 90 0 0 340,120  M 390,120  A 30,20 90 0 0 440,120"/>
+
+    <path d="M 290,240  A 30,20 90 0 1 340,240  M 390,240  A 30,20 90 0 1 440,240"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-021-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-021-ref.svg
new file mode 100644
index 0000000000..b452ca7325
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-021-ref.svg
@@ -0,0 +1,75 @@
+<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>Markers on Closed Sub-Path (Linear).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 120,100 -40,40 40,40 40,-40 z" />
+    <path d="m 240,100 -40,40 40,40 40,-40 z" />
+    <path d="m 360,100 -40,40 40,40 40,-40 z" />
+
+    <path d="m  60,200 -40,40 40,40 40,-40 z  m 60,60 -40,40 40,40 40,-40 z" />
+    <path d="m 200,200 -40,40 40,40 40,-40 z  m 60,60 -40,40 40,40 40,-40 z" />
+    <path d="m 340,200 -40,40 40,40 40,-40 z  m 60,60 -40,40 40,40 40,-40 z" />
+
+    <!-- Arrows -->
+    <path d="m 120,100 -40,  0"   style="stroke:none;marker-start:url(#Start)"/>
+    <path d="m 200,140   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 240,180  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 280,140   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 360,100 -40,  0"   style="stroke:none;marker-start:url(#End)"/>
+
+    <path d="m  60,200 -40,  0"   style="stroke:none;marker-start:url(#Start)"/>
+
+    <path d="m 160,240   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 200,280  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 240,240   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 200,200 -40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+
+    <path d="m 220,300   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 260,340  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 300,300   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 260,260 -40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+
+    <path d="m 400,260 -40,  0"   style="stroke:none;marker-start:url(#End)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-021.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-021.svg
new file mode 100644
index 0000000000..db4bc629e2
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-021.svg
@@ -0,0 +1,56 @@
+<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>Markers on Closed Sub-Path (Linear).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-021-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 120,100 -40,40 40,40 40,-40 z" style="marker-start:url(#Start)"/>
+    <path d="m 240,100 -40,40 40,40 40,-40 z" style="marker-mid:url(#Mid)"    />
+    <path d="m 360,100 -40,40 40,40 40,-40 z" style="marker-end:url(#End)"    />
+
+    <path d="m  60,200 -40,40 40,40 40,-40 z  m 60,60 -40,40 40,40 40,-40 z" style="marker-start:url(#Start)"/>
+    <path d="m 200,200 -40,40 40,40 40,-40 z  m 60,60 -40,40 40,40 40,-40 z" style="marker-mid:url(#Mid)"    />
+    <path d="m 340,200 -40,40 40,40 40,-40 z  m 60,60 -40,40 40,40 40,-40 z" style="marker-end:url(#End)"    />
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-022-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-022-ref.svg
new file mode 100644
index 0000000000..8abf33f088
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-022-ref.svg
@@ -0,0 +1,75 @@
+<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>Markers on Closed Sub-Path (Bezier).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 120,100 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z"/>
+    <path d="m 240,100 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z"/>
+    <path d="m 360,100 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z"/>
+
+    <path d="m 60,200 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z m 60,60 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z"/>
+    <path d="m 200,200 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z m 60,60 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z"/>
+    <path d="m 340,200 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z m 60,60 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z"/>
+
+    <!-- Arrows -->
+    <path d="m 120,100 -40,  0"   style="stroke:none;marker-start:url(#Start)"/>
+    <path d="m 200,140   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 240,180  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 280,140   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 360,100 -40,  0"   style="stroke:none;marker-start:url(#End)"/>
+
+    <path d="m  60,200 -40,  0"   style="stroke:none;marker-start:url(#Start)"/>
+
+    <path d="m 160,240   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 200,280  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 240,240   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 200,200 -40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+
+    <path d="m 220,300   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 260,340  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 300,300   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 260,260 -40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+
+    <path d="m 400,260 -40,  0"   style="stroke:none;marker-start:url(#End)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-022.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-022.svg
new file mode 100644
index 0000000000..6a2345ab47
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-022.svg
@@ -0,0 +1,56 @@
+<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>Markers on Closed Sub-Path (Bezier).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-022-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m 120,100 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z" style="marker-start:url(#Start)"/>
+    <path d="m 240,100 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z" style="marker-mid:url(#Mid)"/>
+    <path d="m 360,100 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z" style="marker-end:url(#End)"/>
+
+    <path d="m 60,200 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z m 60,60 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z" style="marker-start:url(#Start)"/>
+    <path d="m 200,200 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z m 60,60 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z" style="marker-mid:url(#Mid)"/>
+    <path d="m 340,200 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z m 60,60 c -40,0 -40,0 -40,40 c 0,40 0,40 40,40 c 40,0 40,0 40,-40 c 0,-40 0,-40 -40,-40 z" style="marker-end:url(#End)"/>
+</g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-023-ref.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-023-ref.svg
new file mode 100644
index 0000000000..4bd1c67776
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-023-ref.svg
@@ -0,0 +1,75 @@
+<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>Markers on Closed Sub-Path (Arc).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-reference" style="fill:none;stroke:black;stroke-width:2">
+    <path d="m  120,100  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z"/>
+    <path d="m  240,100  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z"/>
+    <path d="m  360,100  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z"/>
+
+    <path d="m   60,200  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z m 60,60  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z"/>
+    <path d="m  200,200  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z m 60,60  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z"/>
+    <path d="m  340,200  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z m 60,60  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z"/>
+
+    <!-- Arrows -->
+    <path d="m 120,100 -40,  0"   style="stroke:none;marker-start:url(#Start)"/>
+    <path d="m 200,140   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 240,180  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 280,140   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 360,100 -40,  0"   style="stroke:none;marker-start:url(#End)"/>
+
+    <path d="m  60,200 -40,  0"   style="stroke:none;marker-start:url(#Start)"/>
+
+    <path d="m 160,240   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 200,280  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 240,240   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 200,200 -40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+
+    <path d="m 220,300   0, 40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 260,340  40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 300,300   0,-40"   style="stroke:none;marker-start:url(#Mid)"/>
+    <path d="m 260,260 -40,  0"   style="stroke:none;marker-start:url(#Mid)"/>
+
+    <path d="m 400,260 -40,  0"   style="stroke:none;marker-start:url(#End)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-path-023.svg b/testing/web-platform/tests/svg/painting/reftests/marker-path-023.svg
new file mode 100644
index 0000000000..56fe216e2f
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-path-023.svg
@@ -0,0 +1,58 @@
+<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>Markers on Closed Sub-Path (Arc).</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#Markers"/>
+    <html:link rel="match"  href="marker-path-023-ref.svg" />
+  </g>
+
+  <defs>
+    <marker id="Start"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="green">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="Mid"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="orange">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+    <marker id="End"
+            viewBox="0 0 10 10" refX="0" refY="5"
+            markerUnits="strokeWidth"
+            markerWidth="12"
+            markerHeight="9"
+            orient="auto"
+            fill="blue">
+      <path d="M 0 0 L 10 5 L 0 10 z"/>
+    </marker>
+  </defs>
+
+  <g id="test-body-content" style="fill:none;stroke:black;stroke-width:2">
+
+    <path d="m  120,100  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z" style="marker-start:url(#Start)"/>
+    <path d="m  240,100  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z" style="marker-mid:url(#Mid)"/>
+    <path d="m  360,100  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z" style="marker-end:url(#End)"/>
+
+    <path d="m   60,200  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z m 60,60  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z" style="marker-start:url(#Start)"/>
+    <path d="m  200,200  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z m 60,60  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z" style="marker-mid:url(#Mid)"/>
+    <path d="m  340,200  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z m 60,60  a 40,40 0 0 0 -40,40  a  40,40 0 0 0 40,40 a 40,40 0 0 0 40,-40 a 40,40 0 0 0 -40,-40 z" style="marker-end:url(#End)"/>
+
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-units-strokewidth-non-scaling-stroke.svg b/testing/web-platform/tests/svg/painting/reftests/marker-units-strokewidth-non-scaling-stroke.svg
new file mode 100644
index 0000000000..116c61c45e
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-units-strokewidth-non-scaling-stroke.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>Markers: markerUnits=strokeWidth with vector-effect=non-scaling-stroke</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerUnitsAttribute"/>
+  <h:link rel="match" href="../../embedded/reference/green-rect-100x100.svg"/>
+
+  <marker id="m" orient="0" refY="5" markerUnits="strokeWidth"
+          markerWidth="10" markerHeight="10">
+    <rect width="10" height="10" fill="green"/>
+  </marker>
+  <line x2="10" y1="5" y2="5" vector-effect="non-scaling-stroke"
+        stroke="red" stroke-width="10" marker-start="url(#m)"
+        transform="scale(10)"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/marker-units-userspaceonuse-non-scaling-stroke.svg b/testing/web-platform/tests/svg/painting/reftests/marker-units-userspaceonuse-non-scaling-stroke.svg
new file mode 100644
index 0000000000..7c4c5e0fcf
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/marker-units-userspaceonuse-non-scaling-stroke.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>Markers: markerUnits=userSpaceOnUse with vector-effect=non-scaling-stroke</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerUnitsAttribute"/>
+  <h:link rel="match" href="../../embedded/reference/green-rect-100x100.svg"/>
+
+  <marker id="m" orient="0" refY="5" markerUnits="userSpaceOnUse"
+          markerWidth="10" markerHeight="10">
+    <rect width="10" height="10" fill="green"/>
+  </marker>
+  <line x2="10" y1="5" y2="5" vector-effect="non-scaling-stroke"
+        stroke="red" stroke-width="10" marker-start="url(#m)"
+        transform="scale(10)"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/markers-orient-001-ref.svg b/testing/web-platform/tests/svg/painting/reftests/markers-orient-001-ref.svg
new file mode 100644
index 0000000000..871003f3a2
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/markers-orient-001-ref.svg
@@ -0,0 +1,48 @@
+<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>Marker: 'orient'</title>
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <defs>
+    <path id="triangle" d="m 0,0 0,-2.5 10,2.5 -10,2.5 z"/>
+  </defs>
+
+  <g id="test-body-reference" style="fill:black">
+    <path d="m 120,120 120,0 120,0" style="stroke:black;stroke-width:4px"/>
+    <path d="m 120,220 120,0 120,0" style="stroke:black;stroke-width:4px"/>
+    <path d="m 120,320 120,0 120,0" style="stroke:black;stroke-width:4px"/>
+    <use xlink:href="#triangle" transform="translate(120,120) scale(4,4)"/>
+    <use xlink:href="#triangle" transform="translate(240,120) scale(4,4)"/>
+    <use xlink:href="#triangle" transform="translate(360,120) scale(4,4)"/>
+    <use xlink:href="#triangle" transform="translate(120,220) scale(4,4) rotate(45)"/>
+    <use xlink:href="#triangle" transform="translate(240,220) scale(4,4) rotate(45)"/>
+    <use xlink:href="#triangle" transform="translate(360,220) scale(4,4) rotate(45)"/>
+    <use xlink:href="#triangle" transform="translate(120,320) scale(4,4) rotate(180)"/>
+    <use xlink:href="#triangle" transform="translate(240,320) scale(4,4)"/>
+    <use xlink:href="#triangle" transform="translate(360,320) scale(4,4)"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/markers-orient-001.svg b/testing/web-platform/tests/svg/painting/reftests/markers-orient-001.svg
new file mode 100644
index 0000000000..190423f988
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/markers-orient-001.svg
@@ -0,0 +1,68 @@
+<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>Marker: 'orient'</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#OrientAttribute"/>
+    <html:link rel="match"  href="markers-orient-001-ref.svg" />
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+    #reference {
+      display: none;
+    }
+  </style>
+
+  <defs>
+    <path id="triangle" d="m 0,0 0,-2.5 10,2.5 -10,2.5 z"/>
+    <marker id="OrientAuto" style="overflow:visible" markerWidth="5" markerHeight="10">
+      <use xlink:href="#triangle"/>
+    </marker>
+    <marker id="OrientFixed" style="overflow:visible" markerWidth="5" markerHeight="10" orient="45">
+      <use xlink:href="#triangle"/>
+    </marker>
+    <marker id="OrientAutoReverse" style="overflow:visible" markerWidth="5" markerHeight="10" orient="auto-start-reverse">
+      <use xlink:href="#triangle"/>
+    </marker>
+  </defs>
+
+  <g id="reference" style="fill:red">
+      <use xlink:href="#triangle" transform="translate(120,120) scale(4,4)"/>
+      <use xlink:href="#triangle" transform="translate(240,120) scale(4,4)"/>
+      <use xlink:href="#triangle" transform="translate(360,120) scale(4,4)"/>
+      <use xlink:href="#triangle" transform="translate(120,220) scale(4,4) rotate(45)"/>
+      <use xlink:href="#triangle" transform="translate(240,220) scale(4,4) rotate(45)"/>
+      <use xlink:href="#triangle" transform="translate(360,220) scale(4,4) rotate(45)"/>
+      <use xlink:href="#triangle" transform="translate(120,320) scale(4,4) rotate(180)"/>
+      <use xlink:href="#triangle" transform="translate(240,320) scale(4,4)"/>
+      <use xlink:href="#triangle" transform="translate(360,320) scale(4,4)"/>
+  </g>
+  <g id="test-body-content" font-size="16">
+    <path d="m 120,120 120,0 120,0" style="stroke:black;stroke-width:4px;marker:url(#OrientAuto)"/>
+    <path d="m 120,220 120,0 120,0" style="stroke:black;stroke-width:4px;marker:url(#OrientFixed)"/>
+    <path d="m 120,320 120,0 120,0" style="stroke:black;stroke-width:4px;marker:url(#OrientAutoReverse)"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/markers-orient-002.svg b/testing/web-platform/tests/svg/painting/reftests/markers-orient-002.svg
new file mode 100644
index 0000000000..f371784e2a
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/markers-orient-002.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>orient='auto' with 180 degree turns</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#RenderingMarkers"/>
+  <h:link rel="match" href="../../pservers/reftests/reference/green-100x100.svg"/>
+  <marker id="m" markerWidth="100" markerHeight="50" markerUnits="userSpaceOnUse"
+          orient="auto" refX="50" refY="50">
+    <path d="M50,-5L105,50h-110z" fill="green"/>
+  </marker>
+  <g marker-start="url(#m)">
+    <path d="M50,0v50z"/>
+    <path d="M100,50h-50z"/>
+    <path d="M50,100v-50z"/>
+    <path d="M0,50h50z"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/mask-print-ref.svg b/testing/web-platform/tests/svg/painting/reftests/mask-print-ref.svg
new file mode 100644
index 0000000000..4717ac4a27
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/mask-print-ref.svg
@@ -0,0 +1,6 @@
+<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0" y="0" width="200" height="200" fill="green" />
+<rect x="0" y="0" width="100" height="200" fill="red"/>
+<rect x="90" y="0" width="20" height="200" fill="black" />
+<rect x="0" y="0" width="200" height="4" fill="black" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/mask-print.svg b/testing/web-platform/tests/svg/painting/reftests/mask-print.svg
new file mode 100644
index 0000000000..b63ec72054
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/mask-print.svg
@@ -0,0 +1,15 @@
+<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+xmlns:html="http://www.w3.org/1999/xhtml">
+<html:meta name="fuzzy" content="0-1;0-17280" />
+<html:link rel="match"  href="mask-print-ref.svg" />
+<defs>
+<mask id="Mask">
+<rect x="0" y="0" width="100" height="200" fill="white" />
+</mask>
+</defs>
+
+<rect x="0" y="0" width="200" height="200" fill="green" />
+<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+<rect x="90" y="0" width="20" height="200" fill="black" />
+<rect x="0" y="0" width="200" height="4" fill="black" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-001-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-001-ref.svg
new file mode 100644
index 0000000000..99bd8c44cb
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-001-ref.svg
@@ -0,0 +1,44 @@
+<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="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <defs>
+    <rect id="rectangle" width="2" height="2" style="fill:lime;stroke:blue" />
+    <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"/>
+    </marker>
+    <path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/>
+  </defs>
+
+  <g id="test-reference" font-size="16" style="fill:blue;stroke:lime;stroke-width:15px;marker:url(#marker)">
+    <path d="m 120,220 c 120,120 120,-120 240,0"/>
+  </g>
+
+</svg>
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
new file mode 100644
index 0000000000..fd58d9b790
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-001.svg
@@ -0,0 +1,47 @@
+<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'</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint"/>
+    <html:link rel="match"  href="paint-context-001-ref.svg" />
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <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"/>
+    </marker>
+    <path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/>
+  </defs>
+
+  <g id="test-body-content" font-size="16" style="fill:blue;stroke:lime;stroke-width:15px;marker:url(#marker)">
+    <path d="m 120,220 c 120,120 120,-120 240,0"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-context-002-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-002-ref.svg
new file mode 100644
index 0000000000..446e8e3fca
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-002-ref.svg
@@ -0,0 +1,41 @@
+<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="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <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-002.svg b/testing/web-platform/tests/svg/painting/reftests/paint-context-002.svg
new file mode 100644
index 0000000000..8a8a378488
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/paint-context-002.svg
@@ -0,0 +1,44 @@
+<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'</title>
+    <html:link rel="author"
+          title="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint"/>
+    <html:link rel="match"  href="paint-context-002-ref.svg" />
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <defs>
+    <rect id="rectangle" width="120" height="120" style="fill:context-stroke;stroke:context-fill" />
+  </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 xlink:href="#rectangle" transform="translate(300,120)" style="fill:green;stroke:lightblue"/>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-order-001-ref.svg b/testing/web-platform/tests/svg/painting/reftests/paint-order-001-ref.svg
new file mode 100644
index 0000000000..7822a80b94
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/paint-order-001-ref.svg
@@ -0,0 +1,74 @@
+<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="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <defs>
+    <rect id="rectangle" width="2" height="2" style="fill:blue" />
+    <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"/>
+    </marker>
+    <path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/>
+  </defs>
+
+  <g id="test-reference" font-size="16" style="fill:lavender;stroke:green;stroke-width:5px;marker:url(#marker)">
+    <g transform="translate(120,120)">
+      <use xlink:href="#path"/>
+    </g>
+    <g transform="translate(240,120)">
+      <use xlink:href="#path"/>
+    </g>
+    <g transform="translate(360,120)">
+      <use xlink:href="#path"/>
+    </g>
+    <g transform="translate(120,220)">
+      <use xlink:href="#path"/>
+    </g>
+    <g transform="translate(240,220)">
+      <use xlink:href="#path" style="marker:none"/>
+      <use xlink:href="#path" style="stroke:none"/>
+    </g>
+    <g transform="translate(360,220)">
+      <use xlink:href="#path" style="stroke:none"/>
+      <use xlink:href="#path" style="marker:none"/>
+    </g>
+    <g transform="translate(120,320)">
+      <use xlink:href="#path"/>
+    </g>
+    <g transform="translate(240,320)">
+      <use xlink:href="#path"/>
+      <use xlink:href="#path" style="stroke:none;marker:none"/>
+    </g>
+    <g transform="translate(360,320)">
+      <use xlink:href="#path" style="stroke:none"/>
+      <use xlink:href="#path" style="marker:none"/>
+    </g>
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/paint-order-001.svg b/testing/web-platform/tests/svg/painting/reftests/paint-order-001.svg
new file mode 100644
index 0000000000..c8d60bd5bf
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/paint-order-001.svg
@@ -0,0 +1,55 @@
+<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="Tavmjong Bah"
+          href="http://tavmjong.free.fr"/>
+    <html:link rel="help"
+          href="https://www.w3.org/TR/SVG2/painting.html#PaintOrder"/>
+    <html:link rel="match"  href="paint-order-001-ref.svg" />
+  </g>
+
+  <style id="test-font" type="text/css">
+    /* Standard Font (if needed). */
+    @font-face {
+      font-family: FreeSans;
+      src: url("../fonts/FreeSans.woff") format("woff");
+    }
+    text {
+      font-family: FreeSans, sans-serif;
+      text-anchor: middle;
+      fill: black;
+    }
+    #title {
+      font-size: 24px;
+    }
+    .label {
+      font-size: 18px;
+    }
+  </style>
+
+  <defs>
+    <rect id="rectangle" width="2" height="2" style="fill:blue" />
+    <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"/>
+    </marker>
+    <path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/>
+  </defs>
+
+  <g id="test-body-content" font-size="16" style="fill:lavender;stroke:green;stroke-width:5px;marker:url(#marker)">
+    <use xlink:href="#path" transform="translate(120,120)" style="" />
+    <use xlink:href="#path" transform="translate(240,120)" style="paint-order:normal" />
+    <use xlink:href="#path" transform="translate(360,120)" style="paint-order:fill stroke markers" />
+    <use xlink:href="#path" transform="translate(120,220)" style="paint-order:fill" />
+    <use xlink:href="#path" transform="translate(240,220)" style="paint-order:stroke" />
+    <use xlink:href="#path" transform="translate(360,220)" style="paint-order:markers" />
+    <use xlink:href="#path" transform="translate(120,320)" style="paint-order:fill stroke" />
+    <use xlink:href="#path" transform="translate(240,320)" style="paint-order:stroke markers" />
+    <use xlink:href="#path" transform="translate(360,320)" style="paint-order:markers fill" />
+  </g>
+
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/percentage-attribute.svg b/testing/web-platform/tests/svg/painting/reftests/percentage-attribute.svg
new file mode 100644
index 0000000000..d245999db0
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/percentage-attribute.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="svg-root"
+  width="310" height="170" viewBox="0, 0, 620, 340"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Percentages in stroke dimensions</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="percentage-ref.svg" />
+
+  <style>
+    rect {
+      fill: none;
+      stroke: blue;
+    }
+  </style>
+
+  <rect x="62" y="68" width="434" height="204"
+    stroke-width="10%" stroke-dasharray="20% 30%" stroke-dashoffset="-10%" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/percentage-ref.svg b/testing/web-platform/tests/svg/painting/reftests/percentage-ref.svg
new file mode 100644
index 0000000000..610a3ddb2d
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/percentage-ref.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="svg-root"
+  width="310" height="170" viewBox="0, 0, 620, 340"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <style>
+    rect {
+      fill: none;
+      stroke: blue;
+      stroke-width: 50px;
+      stroke-dasharray: 100px 150px;
+      stroke-dashoffset: -50px;
+    }
+  </style>
+
+  <rect x="62" y="68" width="434" height="204" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/reftests/percentage.svg b/testing/web-platform/tests/svg/painting/reftests/percentage.svg
new file mode 100644
index 0000000000..640c1eb450
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/reftests/percentage.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="svg-root"
+  width="310" height="170" viewBox="0, 0, 620, 340"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Percentages in stroke dimensions</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="percentage-ref.svg" />
+
+  <style>
+    rect {
+      fill: none;
+      stroke: blue;
+      stroke-width: 10%;
+      stroke-dasharray: 20% 30%;
+      stroke-dashoffset: -10%;
+    }
+  </style>
+
+  <rect x="62" y="68" width="434" height="204" />
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/scripted/paint-order-computed-value-01.svg b/testing/web-platform/tests/svg/painting/scripted/paint-order-computed-value-01.svg
new file mode 100644
index 0000000000..7ea669f150
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/scripted/paint-order-computed-value-01.svg
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>'paint-order' computed style serialization</title>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <text id="text" x="100" y="100"/>
+  <script><![CDATA[
+    'use strict';
+
+    function make_tests(check, type) {
+      let tests = [
+        // Single keyword
+        ["normal", "normal"],
+        ["fill", "fill"],
+        ["stroke", "stroke"],
+        ["markers", "markers"],
+        // Two keywords
+        ["fill stroke", "fill"],
+        ["fill markers", "fill markers"],
+        ["stroke fill", "stroke"],
+        ["stroke markers", "stroke markers"],
+        ["markers fill", "markers"],
+        ["markers stroke", "markers stroke"],
+        // Three keywords
+        ["fill stroke markers", "fill"],
+        ["fill markers stroke", "fill markers"],
+        ["stroke fill markers", "stroke"],
+        ["stroke markers fill", "stroke markers"],
+        ["markers fill stroke", "markers"],
+        ["markers stroke fill", "markers stroke"],
+        // Invalid
+        ["foo", "normal"],
+        ["fill foo", "normal"],
+        ["stroke foo", "normal"],
+        ["markers foo", "normal"],
+        ["normal foo", "normal"],
+        ["fill markers stroke foo", "normal"],
+      ];
+      for (let [value, expected] of tests) {
+        test(() => {
+          check(value, expected);
+        }, `${document.title}, "${value}" => "${expected}" (${type})`);
+      }
+    }
+
+    const text = document.getElementById("text");
+
+    make_tests((value, expected) => {
+      text.setAttribute("style", "paint-order: " + value);
+      let actual = getComputedStyle(text).paintOrder;
+      text.removeAttribute("style");
+      assert_equals(actual, expected, value);
+    }, "property");
+
+    make_tests((value, expected) => {
+      text.setAttribute("paint-order", value);
+      let actual = getComputedStyle(text).paintOrder;
+      text.removeAttribute("paint-order");
+      assert_equals(actual, expected, value);
+    }, "presentation attribute");
+  ]]>
+  </script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/subpixel-clip-path-transform-ref.html b/testing/web-platform/tests/svg/painting/subpixel-clip-path-transform-ref.html
new file mode 100644
index 0000000000..381b781dc8
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/subpixel-clip-path-transform-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: green"></div>
diff --git a/testing/web-platform/tests/svg/painting/subpixel-clip-path-transform.html b/testing/web-platform/tests/svg/painting/subpixel-clip-path-transform.html
new file mode 100644
index 0000000000..62f07de820
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/subpixel-clip-path-transform.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta name="assert" content="There should be no hairline along the edges of clip-path bounding box">
+<link rel="match" href="subpixel-clip-path-transform-ref.html">
+<style>body { margin: 0 }</style>
+<svg style="background: green" width="200" height="200" viewBox="0 0 150 150">
+  <defs>
+    <clipPath id="clip">
+      <polygon points="130,5.4 132,5.4 132,132 5.4,132 5.4,130 130,130">
+    </clipPath>
+  </defs>
+  <rect style="will-change: transform; clip-path: url(#clip)" fill="red" x="0" y="0" width="200" height="200">
+</svg>
+<!-- cover the non-interesting part which is difficult to match a ref.
+     Overflow clip doesn't work to reproduce the issue. -->
+<div style="position: absolute; background: white; left: 100px; top: 0; width: 100px; height: 200px"></div>
+<div style="position: absolute; background: white; left: 0; top: 100px; width: 200px; height: 100px"></div>
diff --git a/testing/web-platform/tests/svg/painting/support/white-rect-100x100.svg b/testing/web-platform/tests/svg/painting/support/white-rect-100x100.svg
new file mode 100644
index 0000000000..6ee3841974
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/support/white-rect-100x100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" fill="white"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation-ref.html b/testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation-ref.html
new file mode 100644
index 0000000000..0d760d18dc
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 200px; height: 200px; background: green"></div>
diff --git a/testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation.html b/testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation.html
new file mode 100644
index 0000000000..962ba5abeb
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="svg-child-will-change-transform-invalidation-ref.html">
+<svg id="svg" viewBox="0 0 100 100" style="width: 200px; height: 200px; transform: translateZ(0)">
+  <rect id="rect" width="100%" height="100%" fill="red"/>
+</svg>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  rect.style.willChange = 'transform';
+  waitForAtLeastOneFrame().then(() => {
+    rect.setAttribute("fill", "green");
+    waitForAtLeastOneFrame().then(() => {
+      rect.style.willChange = 'initial';
+      takeScreenshot();
+    });
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/svg/painting/svg-with-outline-ref.html b/testing/web-platform/tests/svg/painting/svg-with-outline-ref.html
new file mode 100644
index 0000000000..6729a2595b
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/svg-with-outline-ref.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<title>CSS outline (ref)</title>
+<link rel="stylesheet" href="/fonts/ahem.css"/>
+
+<style>
+body { margin: 0; padding: 0; }
+</style>
+
+<svg height=500>
+  <rect x="8" y="8" width="24" height="24" fill="blue"/>
+  <rect x="10" y="10" width="20" height="20" fill="green"/>
+
+  <rect x="7.5" y="47.5" width="25" height="25" fill="none" stroke="blue"/>
+  <rect x="10" y="50" width="20" height="20" fill="green"/>
+
+  <text id="text" font-family="Ahem" font-size="100px" x="10" y="200">X</text>
+
+  <script>
+    const floatBounds = text.getBBox();
+    const bounds = {
+      x : Math.round(floatBounds.x),
+      y : Math.round(floatBounds.y),
+      width : Math.round(floatBounds.width),
+      height : Math.round(floatBounds.height)
+    };
+
+
+    const outline = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    outline.setAttribute("x", bounds.x - 1);
+    outline.setAttribute("y", bounds.y - 1);
+    outline.setAttribute("width", bounds.width + 2);
+    outline.setAttribute("height", bounds.height + 2);
+    outline.setAttribute("fill", "none");
+    outline.setAttribute("stroke", "blue");
+    outline.setAttribute("stroke-width", "2");
+
+    text.parentNode.insertBefore(outline, text);
+  </script>
+</svg>
diff --git a/testing/web-platform/tests/svg/painting/svg-with-outline.html b/testing/web-platform/tests/svg/painting/svg-with-outline.html
new file mode 100644
index 0000000000..56ed98083a
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/svg-with-outline.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<title>CSS outline</title>
+<link rel="match" href="svg-with-outline-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css"/>
+
+<style>
+body { margin: 0; padding: 0; }
+.test1 {
+  outline: 2px solid blue;
+}
+.test2 {
+  outline: 1px solid blue;
+  outline-offset: 2px;
+}
+</style>
+
+<svg height=500>
+  <rect class="test1" x="10" y="10" width="20" height="20" fill="green"/>
+
+  <rect class="test2" x="10" y="50" width="20" height="20" fill="green"/>
+
+  <text font-family="Ahem" font-size="100px" class="test1" x="10" y="200">X</text>
+</svg>
+
diff --git a/testing/web-platform/tests/svg/painting/text-clip-path-transform-ref.html b/testing/web-platform/tests/svg/painting/text-clip-path-transform-ref.html
new file mode 100644
index 0000000000..83ab09d498
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/text-clip-path-transform-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<div style="position: absolute; background: green; left: 0; top: 0; width: 100px; height: 100px"></div>
+<div style="position: absolute; background: green; left: 100px; top: 100px; width: 100px; height: 100px"></div>
diff --git a/testing/web-platform/tests/svg/painting/text-clip-path-transform.html b/testing/web-platform/tests/svg/painting/text-clip-path-transform.html
new file mode 100644
index 0000000000..cf1a52de8a
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/text-clip-path-transform.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta name="assert" content="There should be no hairline along the edges of clip-path bounding box">
+<link rel="match" href="text-clip-path-transform-ref.html">
+<style>body { margin: 0 }</style>
+<svg style="background: green" width="200" height="200" viewBox="0 0 150 150">
+  <defs>
+    <clipPath id="clip">
+      <text>
+        <tspan x="120" y="25">A</tspan>
+        <tspan x="8" y="140">B</tspan>
+      </text>
+    </clipPath>
+  </defs>
+  <rect style="will-change: transform; clip-path: url(#clip)" fill="red" x="0" y="0" width="200" height="200">
+</svg>
+<!-- cover the non-interesting part which is difficult to match a ref.
+     Overflow clip doesn't work to reproduce the issue. -->
+<div style="position: absolute; background: white; left: 100px; top: 0; width: 100px; height: 100px"></div>
+<div style="position: absolute; background: white; left: 0; top: 100px; width: 100px; height: 100px"></div>
diff --git a/testing/web-platform/tests/svg/painting/text-mask-transform.html b/testing/web-platform/tests/svg/painting/text-mask-transform.html
new file mode 100644
index 0000000000..9d6a7a4767
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/text-mask-transform.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta name="assert" content="There should be no hairline along the edges of mask bounding box">
+<link rel="match" href="text-clip-path-transform-ref.html">
+<style>body { margin: 0 }</style>
+<svg style="background: green" width="200" height="200" viewBox="0 0 150 150">
+  <defs>
+    <mask id="mask">
+      <text fill="white">
+        <tspan x="120" y="25">A</tspan>
+        <tspan x="8" y="140">B</tspan>
+      </text>
+    </mask>
+  </defs>
+  <rect style="will-change: transform; mask: url(#mask)" fill="red" x="0" y="0" width="200" height="200">
+</svg>
+<!-- cover the non-interesting part which is difficult to match a ref.
+     Overflow clip doesn't work to reproduce the issue. -->
+<div style="position: absolute; background: white; left: 100px; top: 0; width: 100px; height: 100px"></div>
+<div style="position: absolute; background: white; left: 0; top: 100px; width: 100px; height: 100px"></div>
diff --git a/testing/web-platform/tests/svg/painting/will-change-under-mask.html b/testing/web-platform/tests/svg/painting/will-change-under-mask.html
new file mode 100644
index 0000000000..feed381d0a
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/will-change-under-mask.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta name="assert" content="will-change descendants should not affect masking">
+<link rel="match" href="../struct/reftests/reference/green-100x100.html">
+<svg width="200" height="200">
+  <mask id="mask">
+    <rect x="0" y="0" width="100" height="50" fill="white"/>
+    <rect x="0" y="50" width="100" height="50" fill="black"/>
+  </mask>
+  <rect x="0" y="0" width="100" height="50" fill="red" />
+  <rect x="0" y="50" width="100" height="50" fill="green" />
+  <g mask="url('#mask')">
+    <rect style="will-change: transform;" x="0" y="0" width="100" height="50" fill="green" />
+    <rect style="will-change: transform;" x="0" y="50" width="100" height="50" fill="red" />
+  </g>
+</svg>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/svg/painting
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip