Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

123 files changed, 2461 insertions, 0 deletions

diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg
new file mode 100644
index 0000000000..269e8feed2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath element nested twice</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Check deep referencing of content of one clipPath
+	element to another clipPath element. A green square should be visible.
+	</desc>
+</g>
+<clipPath id="clip3">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip2" clip-path="url(#clip3)">
+	<circle cx="100" cy="100" r="75"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<circle cx="100" cy="100" r="100"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-001.svg
new file mode 100644
index 0000000000..e5b972ff0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-001.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clip-rule property - evenodd</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-square-hole-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Check if the clip-rule 'evenodd' applies to a content
+	polygon element of clipPath element. A green square with a
+	rectangular hole should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" clip-rule="evenodd" />
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-002.svg
new file mode 100644
index 0000000000..7729f79731
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-002.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clip-rule property - nonzero</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-square-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Check if the clip-rule 'nonzero' applies to a content
+	polygon element of clipPath element. A green square should be
+	visible.</desc>
+</g>
+<clipPath id="clip1">
+	<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" clip-rule="nonzero" />
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-003.svg
new file mode 100644
index 0000000000..c4f2bf42b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-003.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clip-rule property - evenodd nested clip</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-square-hole-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Check if the clip-rule 'evenodd' applies to a content
+	polygon element of clipPath element. A green square with a
+	rectangular hole should be visible.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="25" y="25" width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="evenodd" />
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-004.svg
new file mode 100644
index 0000000000..2ea618602a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-004.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clip-rule property - nonzero nested clip</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-square-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Check that clip-rule 'nonzero' applies to
+	clipPath element and a second clipPath element can be applied to
+	the first one. A green square should be visible.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="25" y="25" width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="nonzero" />
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-005.svg
new file mode 100644
index 0000000000..ca492583cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-005.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath clip-rule evenodd nonzero</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-clip-rule-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Test two different clip-rules on two different content
+	elements. You should see two green rectangles. The one on the top left
+	should have a hole, the shifted one shouldn't.</desc>
+</g>
+<clipPath id="clip1">
+	<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="evenodd"/>
+	<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="nonzero"/>
+</clipPath>
+<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-006.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-006.svg
new file mode 100644
index 0000000000..da9d1010d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-006.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath clip-rule nonzero nonzero</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-clip-rule-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Test two equal clip-rules 'nonzero' on two different
+	content elements. You should see two solid green rectangles. The first one
+	on the top left, the second one slightly shifted to the bottom right.
+	</desc>
+</g>
+<clipPath id="clip1">
+	<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="nonzero"/>
+	<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="nonzero"/>
+</clipPath>
+<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-007.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-007.svg
new file mode 100644
index 0000000000..d1edb6cd9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-007.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath clip-rule nonzero evenodd</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-clip-rule-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Test two different clip-rules on two different content
+	elements. You should see two green rectangles. The one on the top left
+	shouldn't have a hole, the shifted one should have.</desc>
+</g>
+<clipPath id="clip1">
+	<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="nonzero"/>
+	<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="evenodd"/>
+</clipPath>
+<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg
new file mode 100644
index 0000000000..66ad9b5cb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath clip-rule evenodd evenodd</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-clip-rule-004-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Test two equal clip-rules 'evenodd' on two different
+	content elements. You should see two green rectangles with a hole. The
+	first one on the top left, the second one slightly shifted to the bottom
+	right.</desc>
+</g>
+<clipPath id="clip1">
+	<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" clip-rule="evenodd"/>
+	<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="evenodd"/>
+</clipPath>
+<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-009.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-009.svg
new file mode 100644
index 0000000000..69d70b4e3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-009.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath fill-rule</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-square-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The fill-rule must not affect the winding rule for
+	clipping. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<!-- fill-rule must not affect the winding rule for clipping -->
+	<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" fill-rule="evenodd"/>
+</clipPath>
+<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-010.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-010.svg
new file mode 100644
index 0000000000..594e3097c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip-rule-010.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath clip-rule inheritance</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-rule"/>
+	<html:link rel="match" href="reference/clip-path-clip-rule-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">inheritance and overriding of inheritance. The one on
+	the top left should have a hole, the shifted one shouldn't.</desc>
+</g>
+<clipPath id="clip1" clip-rule="evenodd">
+	<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25"/>
+	<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" clip-rule="nonzero"/>
+</clipPath>
+<rect x="0" y="0" height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip.svg
new file mode 100644
index 0000000000..530fd014d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-clip.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath references clipPath</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element references another
+	clipPath element. A green square should be visible.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<circle cx="100" cy="100" r="100"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-001.svg
new file mode 100644
index 0000000000..9991f16476
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-001.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: content of clipPath clipped 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Content element of clipPath references second
+	clipPath element and should be clipped by it. A green square should
+	be visible.
+	</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip1">
+	<circle cx="100" cy="100" r="100" clip-path="url(#clip2)"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-002.svg
new file mode 100644
index 0000000000..7677e3f19a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-002.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: content of clipPath clipped 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">One content element of clipPath references second
+	clipPath element and should be clipped by it. Second content element
+	isn't clipped. A green square should be visible.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip1">
+	<circle cx="100" cy="100" r="50"/>
+	<circle cx="100" cy="100" r="75" clip-path="url(#clip2)"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-003.svg
new file mode 100644
index 0000000000..fd1b291625
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-003.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: content of clipPath clipped 3</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Both content elements of clipPath reference
+	different other clipPath elements and should be clipped by them. A
+	green square should be visible.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip3">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip1">
+	<circle cx="100" cy="100" r="75" clip-path="url(#clip2)"/>
+	<circle cx="100" cy="100" r="75" clip-path="url(#clip3)"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-004.svg
new file mode 100644
index 0000000000..2317842e5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-clip-004.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+  <g id="testmeta">
+    <title>CSS Masking: clip-path applied to an element in a clipPath with objectBoundingBox units</title>
+    <html:link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/>
+    <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+    <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+    <html:link rel="match" href="reference/clip-path-content-clip-004-ref.svg" />
+    <metadata class="flags">svg</metadata>
+    <desc class="assert">
+      When a clipPath establishes a coordinate system using objectBoundingBox
+      units, any other clipPath referenced through the clip-path property on
+      the first clipPath's children must use that same coordinate system if
+      it is using userSpaceOnUse units.
+    </desc>
+  </g>
+  <defs>
+    <clipPath id="inner">
+      <rect width="0.25" height="0.25"/>
+    </clipPath>
+    <clipPath id="outer" clipPathUnits="objectBoundingBox">
+      <rect width="0.5" height="0.5" clip-path="url(#inner)"/>
+    </clipPath>
+  </defs>
+  <rect width="100" height="100" fill="red"/>
+  <g clip-path="url(#outer)">
+    <rect width="400" height="400" fill="red"/>
+    <rect width="100" height="100" fill="green"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-invisible.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-invisible.svg
new file mode 100644
index 0000000000..0696d4b09f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-invisible.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Content of clipPath with visibility: hidden</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">From the spec: "If a child element is made invisible
+	by display or visibility it does not contribute to the clipping path."
+	clipPath without content hides the clipped element. Nothing should be
+	visible.
+	</desc>
+</g>
+<clipPath id="clip1">
+	<rect width="100" height="100" style="visibility: hidden;"/>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-syling.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-syling.svg
new file mode 100644
index 0000000000..5fb527d1e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-syling.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath content styling</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Style properties on content elements of clipPath
+	must be ignored. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="10" stroke-dasharray="10 10" fill="none"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-001.svg
new file mode 100644
index 0000000000..b70cdde683
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-001.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Reference content clip shape with use element from
+	defs section. A green square should be visible.</desc>
+</g>
+<defs>
+	<rect id="circle" x="50" y="50" width="100" height="100"/>
+</defs>
+<clipPath id="clip1">
+	<use xlink:href="#circle"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-002.svg
new file mode 100644
index 0000000000..0596d21cfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-002.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Reference content clip shape with use element from
+	defs section. Afterwards, the clipPath element gets clipped.
+	A green square should be visible.</desc>
+</g>
+<defs>
+	<rect id="rect" x="50" y="50" width="150" height="150"/>
+</defs>
+<clipPath id="clip2">
+	<rect width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<use xlink:href="#rect"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-003.svg
new file mode 100644
index 0000000000..79354679cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-003.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 3</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Reference content clip shape with use element from
+	defs section. Afterwards, the clipPath element gets clipped.
+	The second clipPath element references the content element with
+	use as well. A green square should be visible.</desc>
+</g>
+<defs>
+	<rect id="rect1" x="50" y="50" width="150" height="150"/>
+	<rect id="rect2" width="150" height="150"/>
+</defs>
+<clipPath id="clip2">
+	<use xlink:href="#rect2"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<use xlink:href="#rect1"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-004.svg
new file mode 100644
index 0000000000..8e2e7a67ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-004.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 4</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Reference content clip shape with use element from
+	defs section. Furthermore, the referenced shape gets transformed. A
+	green square should be visible.</desc>
+</g>
+<defs>
+	<rect id="rect" width="100" height="100"/>
+</defs>
+<clipPath id="clip1">
+	<use xlink:href="#rect" transform="translate(50, 50)"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-005.svg
new file mode 100644
index 0000000000..c7d5ec8390
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-005.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 5</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The clipPath elements reference the same content
+	clip shape with use. One use reference gets transformed. The one
+	clipPath element gets clipped by the other one. A green square should
+	be visible.</desc>
+</g>
+<defs>
+	<rect id="rect" width="150" height="150"/>
+</defs>
+<clipPath id="clip2">
+	<use xlink:href="#rect"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<use xlink:href="#rect" transform="translate(50, 50)"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-006.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-006.svg
new file mode 100644
index 0000000000..6f9d7e0673
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-006.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 6</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The clipPath elements reference two different
+	content clip shapes with use. One use reference gets transformed.
+	The one clipPath element gets clipped by the other one. A green square
+	should be visible.</desc>
+</g>
+<defs>
+	<rect id="rect1" width="150" height="150"/>
+	<rect id="rect2" width="150" height="150"/>
+</defs>
+<clipPath id="clip2">
+	<use xlink:href="#rect1"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<use xlink:href="#rect2" transform="translate(50, 50)"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-007.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-007.svg
new file mode 100644
index 0000000000..7cf0fa08e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-content-use-007.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath reference content with use 7</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The clipPath element has a content use
+	element which references another use element which references a shape.
+	A green square should be visible.</desc>
+</g>
+<defs>
+	<rect width="200" height="200" id="rect"/>
+	<use id="use" xlink:href="#rect"/>
+</defs>
+<clipPath id="clip1">
+	<use xlink:href="#use" />
+</clipPath>
+
+<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/>
+<rect width="200" height="200" fill="green" />
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-001.svg
new file mode 100644
index 0000000000..35b21f5f1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-001.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with CSS Transforms</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">CSS Transforms must apply on the clipPath
+	element. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1" style="transform: scale(10) translate(5px, 5px);">
+	<rect width="10" height="10"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg
new file mode 100644
index 0000000000..78b57628ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with CSS Transforms and 2nd content element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">CSS Transforms must apply on the clipPath
+	element. This example adds a second content element since that may
+	cause masking in some implementations. A green square should be
+	visible.</desc>
+</g>
+<clipPath id="clip1" style="transform: scale(10) translate(5px, 5px);">
+	<rect width="10" height="10"/>
+	<!-- Second rect may cause masking -->
+	<rect width="5" height="4"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-003.svg
new file mode 100644
index 0000000000..8f2713d276
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-003.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with CSS Transforms on content element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">CSS Transforms must apply on content element of the
+	clipPath element. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<rect width="400" height="400" style="transform: scale(.5);"/>
+</clipPath>
+<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/>
+<rect width="200" height="200" fill="green"/>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-004.svg
new file mode 100644
index 0000000000..d290fe13a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-css-transform-004.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with CSS Transforms on both content elements</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">CSS Transforms must apply on both content elements of
+	the clipPath element. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<rect width="400" height="400" style="transform: scale(.5)"/>
+	<!-- Second rect may cause masking. -->
+	<rect width="400" height="400" style="transform: scale(.5)"/>
+</clipPath>
+<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/>
+<rect width="200" height="200" fill="green"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-child-changes.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-child-changes.svg
new file mode 100644
index 0000000000..611fb3fcf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-child-changes.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Dynamic transform on clipPath content element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A transformation is applied on the content element of
+	clipPath. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<rect width="400" height="400"/>
+</clipPath>
+
+<g clip-path="url(#clip1)">
+	<rect width="400" height="400" fill="red"/>
+	<rect width="200" height="200" fill="green"/>
+</g>
+
+<script>
+var clip = document.getElementById("clip1");
+var rect = clip.firstChild.nextSibling;
+rect.setAttribute("transform", "scale(0.5)");
+</script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-clippathunits.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-clippathunits.svg
new file mode 100644
index 0000000000..edfccbd83f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-clippathunits.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Dynamic change of clipPathUnits on clipPath</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The clipPathUnits attribute on the clipPath
+	element gets changed dynamically from objectBoundingBox to userSpaceOnUse.
+	This reduces the clipping area from a size much bigger than the document to
+	the size of the green rectangle. A green square should be visible.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect width="200" height="200"/>
+</clipPath>
+
+<rect width="400" height="400" fill="red" clip-path="url(#clip1)"/>
+<rect width="200" height="200" fill="green"/>
+
+<script>
+var clip = document.getElementById("clip1");
+var enumeration = clip.clipPathUnits;
+enumeration.baseVal = 1; // Switch to userSpaceOnUse!
+</script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg
new file mode 100644
index 0000000000..748ff2cc5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Dynamic reference of clipPath element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The clip-path property gets applied to the later
+	clipped rectangle dynamically. A green square should be visible.</desc>
+</g>
+
+<clipPath id="clip1">
+	<rect width="200" height="200"/>
+</clipPath>
+
+<g clip-path="url(#noclip)" id="target">
+	<rect width="400" height="400" fill="red"/>
+	<rect width="200" height="200" fill="green"/>
+</g>
+
+<script>
+document.getElementById("target").setAttribute("clip-path", "url(#clip1)");
+</script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-id.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-id.svg
new file mode 100644
index 0000000000..e8ad7daecc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-dom-id.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Dynamic change of clipPath id</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The id of a clipPath element is changed
+	dynamically. This makes the previous invalid clip path reference
+	of the group valid. A green square should be visible.</desc>
+</g>
+<clipPath id="oldclip" clipPathUnits="userSpaceOnUse">
+	<rect width="200" height="200"/>
+</clipPath>
+<g clip-path="url(#newclip)">
+	<rect width="400" height="400" fill="red"/>
+	<rect width="200" height="200" fill="green"/>
+</g>
+<script>
+document.getElementsByTagName("clipPath")[0].setAttribute("id", "newclip");
+</script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid.svg
new file mode 100644
index 0000000000..85aa3a825b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath invalid content element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">clipPath elements get invalid if the content
+	element is not a basic shape or a reference to a basic shape.
+	Invalid clipPath elements let the clipped element disappear.
+	Nothing should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<!-- nothing should be visible, containers are not allowed in clipPath -->
+	<g>
+	<rect width="100" height="100"/>
+	</g>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-negative-scale.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-negative-scale.svg
new file mode 100644
index 0000000000..33d6a78c7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-negative-scale.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath negative scale</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-negative-scale-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Negative scale factors on clipped elements should
+	be handled correctly by clipPath elements. First clipped, then
+	scaled.</desc>
+</g>
+<defs>
+<g id="img" transform="translate(10,10)">
+	<rect width="200" height="200" fill="red"/>
+	<rect width="100" height="100" fill="green"/>
+	<rect width="50" height="50" fill="blue"/>
+</g>
+</defs>
+
+<clipPath id="clip">
+	<rect x="10" y="10" height="90" width="90"/>
+</clipPath>
+
+<g transform="translate(200, 200)">
+<g transform="matrix(1 0 0 1 -100 -100)" clip-path="url(#clip)">
+	<use xlink:href="#img"/>
+</g>
+<g transform="matrix(-1 0 0 -1 -100 -100)" clip-path="url(#clip)">
+	<use xlink:href="#img"/>
+</g>
+<g transform="matrix(-1 0 0 1 -100 -100)" clip-path="url(#clip)">
+	<use xlink:href="#img"/>
+</g>
+<g transform="matrix(1 0 0 -1 -100 -100)" clip-path="url(#clip)">
+	<use xlink:href="#img"/>
+</g>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-001.svg
new file mode 100644
index 0000000000..f7943c615d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-001.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath without content</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">clipPath element without content make the clipped
+	element disappear. Nothing should be visible.</desc>
+</g>
+<clipPath id="clip1">
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-002.svg
new file mode 100644
index 0000000000..65df6176ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-002.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath without content 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">clipPath element where the clip shape does not
+	intersect with the clipped element make the clipped element disappear.
+	Nothing should be visible.</desc>
+</g>
+<clipPath id="clip1">
+	<circle cx="400" cy="400" r="100"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-003.svg
new file mode 100644
index 0000000000..afd8f702ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-003.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and clipPath without intersection</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">If a clipPath element get clipped and there is no
+	intersection with the second clipPath element, the originally clipped
+	element disappears. Nothing should be visible.</desc>
+</g>
+<clipPath id="clip2">
+	<circle cx="400" cy="400" r="100"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<rect width="200" height="200"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-004.svg
new file mode 100644
index 0000000000..92b27af017
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-004.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with invalid/empty content</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">If a clipPath element has an invalid or empty
+	basic shape the clipped element disappears. Nothing should be visible.
+	</desc>
+</g>
+<!--It tests that an empty clip path clips the referencing graphic. Bug 15289.-->
+<clipPath id="nothing">
+</clipPath>
+<clipPath id="emptyrect">
+	<rect width="0" height="0"/>
+</clipPath>
+
+<rect width="200" height="200" fill="red" clip-path="url(#nothing)"/>
+<rect width="200" height="200" fill="red" clip-path="url(#emptyrect)"/>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-005.svg
new file mode 100644
index 0000000000..e0c03d28cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-no-content-005.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"
+     class="reftest-wait">
+  <title>Removing a clip-path attribute pointing to an empty &#x3c;clipPath&#x3e;</title>
+  <h:link rel="help" href="https://drafts.fxtf.org/css-masking-1/#ClipPathElement"/>
+  <h:link rel="match" href="reference/clip-path-square-003-ref.svg"/>
+  <h:script src="/common/reftest-wait.js"/>
+  <h:script src="/common/rendering-utils.js"/>
+
+  <clipPath id="empty"/>
+  <g clip-path='url("#empty")'>
+    <rect width="200" height="200" fill="green"/>
+  </g>
+  <script>
+    waitForAtLeastOneFrame().then(() => {
+      document.querySelector('svg > g').removeAttribute('clip-path');
+      takeScreenshot();
+    });
+  </script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-001.svg
new file mode 100644
index 0000000000..d5ef03ac01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-001.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with objectBoundingBox</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">clipPathUnits="objectBoundingBox" changes the
+	behavior of non-percentage values. The dimension of the clipped
+	element is equal to one unit for the content of clipPath.
+	You should see a green square.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.25" y="0.25" width="0.5" height="0.5"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-002.svg
new file mode 100644
index 0000000000..8180ddf9f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-002.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="400" height="400">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with objectBoundingBox and percentage</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">clipPathUnits="objectBoundingBox" changes the
+	behavior of percentage values. The behavior is specified by SVG.
+	You should see a green square.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.0625%" y="0.0625%" width="0.125%" height="0.125%"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-003.svg
new file mode 100644
index 0000000000..8a7aa0ff5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-003.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with objectBoundingBox and scaled clipped element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The clipped element has a transform. The transform
+	should apply "after" the clipping. You should see a full green circle.
+	</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<circle cx="0.25" cy="0.25" r="0.25"/>
+</clipPath>
+<rect width="10" height="10" fill="green" transform="scale(20 20)" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-004.svg
new file mode 100644
index 0000000000..215d253618
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-objectboundingbox-004.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Nested clipPath with different clipPathUnits</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The first clipPath element has
+	clipPathUnits="objectBoundingBox", the second userSpaceOnUse (default).
+	Both should be handled accordingly. You should see a green square.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox" clip-path="url(#clip2)">
+	<rect width="0.75" height="0.75"/>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-001.svg
new file mode 100644
index 0000000000..6d837af68b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-001.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on g element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element on a g element should clip the
+	group with it's content. You should see a green square.</desc>
+</g>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<g clip-path="url(#clip1)">
+	<rect width="200" height="200" fill="green"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-002.svg
new file mode 100644
index 0000000000..a14287cbc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-002.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on g element and child</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element on a g element and it's child
+	element should clip the child first, then the group with it's content.
+	You should see a green square.</desc>
+</g>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<g clip-path="url(#clip1)">
+	<rect width="200" height="200" fill="green" clip-path="url(clip1)"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-003.svg
new file mode 100644
index 0000000000..b3eead8ac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-003.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on child of g element</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element on a child of g element should
+	just clip the child and not the group. You should see a green square.
+	</desc>
+</g>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<g>
+	<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-004.svg
new file mode 100644
index 0000000000..32eaf00369
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-004.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Two different clipPaths on g element and child</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element on a child and a differnt
+	clipPath element on g element should clip their targets independent of
+	each other but the child first. You should see a green square.</desc>
+</g>
+<clipPath id="clip2">
+	<rect width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="150" height="150"/>
+</clipPath>
+<g clip-path="url(#clip1)">
+	<rect width="200" height="200" fill="green" clip-path="url(#clip2)"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-005.svg
new file mode 100644
index 0000000000..c621d91c3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-g-005.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Two different clipPaths with objectBoundingBox on g element and child</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element on a child and a differnt
+	clipPath element on g element should clip their targets independent of
+	each other but the child first. When both have
+	clipPathUnits="objectBoundingBox", then the bounding box of each element is
+	taken. Note that clipping on the child influences the bounding box of the
+	group. You should see a green square.</desc>
+</g>
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect width="0.75" height="0.75"/>
+</clipPath>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.25" y="0.25" width="0.75" height="0.75"/>
+</clipPath>
+<g clip-path="url(#clip1)">
+	<rect width="200" height="200" fill="green" clip-path="url(#clip2)"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-001.svg
new file mode 100644
index 0000000000..ae5df003fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-001.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on element with marker</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-on-marker-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element with marker is clipped as a
+	whole. Note that a marker does not influence the bounding box of an
+	element. You should see a green square with a blur square in it on the top
+	left.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect width="1" height="1"/>
+</clipPath>
+<marker id="marker1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="100" markerHeight="100">
+	<rect width="10" height="10" fill="blue"/>
+</marker>
+<path d="M50,50 L150,50 L150,150 L50,150 z" marker-start="url(#marker1)" clip-path="url(#clip1)" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-002.svg
new file mode 100644
index 0000000000..4f2ffa4c7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-002.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on element with marker</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-on-marker-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element with marker is clipped as a
+	whole. Note that a marker does not influence the bounding box of an
+	element. The clipping region includes the whole canvas. Nothing gets
+	clipped. You should see a green square with a blur square on top of it,
+	slightly shifted to the top left.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="userSpaceOnUse">
+	<rect width="100%" height="100%"/>
+</clipPath>
+<marker id="marker1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="100" markerHeight="100">
+	<rect width="10" height="10" fill="blue"/>
+</marker>
+<path d="M50,50 L150,50 L150,150 L50,150 z" marker-start="url(#marker1)" clip-path="url(#clip1)" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-003.svg
new file mode 100644
index 0000000000..45fc0fbd37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-marker-003.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with objectBoundingBox on element with marker</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-on-marker-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element with marker is clipped as a
+	whole. Note that a marker does not influence the bounding box of an
+	element. You should see a green square with a blur square in it on the top
+	left.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect width="1" height="1"/>
+</clipPath>
+<marker id="marker1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="100" markerHeight="100">
+	<rect width="10" height="10" fill="blue"/>
+</marker>
+<path d="M50,50 L150,50 L150,150 L50,150 z" marker-end="url(#marker1)" clip-path="url(#clip1)" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-001.svg
new file mode 100644
index 0000000000..e92ce1d10f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-001.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on root &lt;svg></title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element can be applied to a root
+	&lt;svg> element. You should see a green square.</desc>
+</g>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<rect width="200" height="200" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-002.svg
new file mode 100644
index 0000000000..94067d4ba3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-002.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)">
+<g id="testmeta">
+	<title>CSS Masking: Clipped clipPath on root &lt;svg></title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element can be applied to a root
+	&lt;svg> element. This clipPath element can be clipped itself. You
+	should see a green square.</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="25" y="25" width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip2)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-001.svg
new file mode 100644
index 0000000000..8a2cf81c51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-001.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath on use</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A use element can be clipped by an clipPath
+	element as well. You should see a green square.</desc>
+</g>
+<defs>
+	<rect id="rect" width="200" height="200" fill="green"/>
+</defs>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<use xlink:href="#rect" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-002.svg
new file mode 100644
index 0000000000..22e5ab7151
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-use-002.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: Clipped clipPath on use</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A use element can be clipped by an clipPath
+	element. The clipPath element can be clipped as well. You should see a
+	green square.</desc>
+</g>
+<defs>
+	<rect id="rect" width="200" height="200" fill="green" clip-path="url(#clip2)"/>
+</defs>
+<clipPath id="clip2">
+	<rect width="150" height="150"/>
+</clipPath>
+<clipPath id="clip1">
+	<rect x="50" y="50" width="150" height="150"/>
+</clipPath>
+<use xlink:href="#rect" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-precision-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-precision-001.svg
new file mode 100644
index 0000000000..aa8e5ba7e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-precision-001.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath precision</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/clip-path-precision-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Various comma values should no influence the precision
+	of the clipPath element. The test should not show any red outlines
+	around the boxes.</desc>
+</g>
+<defs>
+	<g id="paths">
+	<path d="M10 10 h20 v20 h-20 v-20 m1 1 v18 h18 v-18 h-18"/>
+	<rect x="19" y="19" width="2" height="2" />
+	<rect x="5.51" y="0.51" width="2" height="32.3" fill="white"/>
+	<rect x="35.4" y="0.51" width="2" height="32.3" fill="white"/>
+	</g>
+</defs>
+<mask id="mask">
+<use xlink:href="#paths" fill="white" x="60" />
+</mask>
+
+<clipPath id="clipper">
+	<path d="M40 10 h20 v20 h-20 v-20 m1 1 v18 h18 v-18 h-18"/>
+	<rect x="49" y="19" width="2" height="2" />
+	<rect x="35.51" y="0.51" width="2" height="32.3" />
+	<rect x="65.4" y="0.51" width="2" height="32.3" />
+</clipPath>
+
+<use xlink:href="#paths" fill="green" />
+<g clip-path="url(#clipper)">
+	<rect fill="red" x="38" y="8" width="24" height="24" />
+	<use xlink:href="#paths" fill="green" x="30" />
+</g>
+<g mask="url(#mask)">
+	<rect fill="red" x="68" y="8" width="24" height="24" />
+	<use xlink:href="#paths" fill="green" x="60" />
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-001.svg
new file mode 100644
index 0000000000..5d4b7c2710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-001.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath recursion 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/clip-path-invisible-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath recursion counts as invalid clipping
+	path and makes the element disappear. You should see nothing.</desc>
+</g>
+<defs>
+<clipPath id="clip0">
+	<rect width="1" height="1" clip-path="url(#clip)" />
+</clipPath>
+
+<clipPath id="clip2">
+	<rect width="100" height="100" clip-path="url(#clip0)"/>
+</clipPath>
+
+<clipPath id="clip">
+	<rect width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect width="1" height="1" clip-path="url(#clip)" />
+</mask>
+</defs>
+<circle r="500" mask="url(#mask1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-002.svg
new file mode 100644
index 0000000000..7d921ee67d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-recursion-002.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: clipPath recursion 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-recursion-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+  <desc class="assert">
+    A clipPath recursion counts as invalid clipping path.
+  </desc>
+</g>
+<defs>
+	<rect x="50" y="150" width="50" height="50" id="rect" fill="none" clip-path="url(#clipPath_1)"/>
+</defs>
+<clipPath id="clipPath_0">
+	<rect x="50" width="50" height="50" clip-path="url(#clipPath_0)"/>
+</clipPath>
+<clipPath id="clipPath_1">
+	<use xlink:href="#rect"/>
+</clipPath>
+<rect x="50" width="100" height="100" fill="red" clip-path="url(#clipPath_0)"/>
+<rect x="50" y="150" width="100" height="100" fill="red" clip-path="url(#clipPath_1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-001.svg
new file mode 100644
index 0000000000..873947943c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-001.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape circle() on SVG rectangle</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function circle() applied to an SVG
+	rectangle. You should see a full green circle.</desc>
+</g>
+<rect width="100" height="100" fill="green" style="clip-path: circle()"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-002.svg
new file mode 100644
index 0000000000..dca307dd91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-002.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape circle() on SVG rectangle with absolute values</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function circle() with absolute values
+	applied to an SVG rectangle. You should see a full green circle.</desc>
+</g>
+<rect width="400" height="400" fill="green" style="clip-path: circle(50px at 50px 50px)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg
new file mode 100644
index 0000000000..0a0432c116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape circle() on SVG rectangle with fill-box</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
+	<html:meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-184"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function circle() applied to an SVG
+	rectangle. The specified keyword fill-box defines the reference box
+	(here objectBoundingBox). You should see a full green circle.</desc>
+</g>
+<rect width="100" height="100" fill="green" stroke="green" stroke-width="10" style="clip-path: circle() fill-box;"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-004.svg
new file mode 100644
index 0000000000..044b2ecc9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-004.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape circle() on SVG rectangle with stroke-box</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
+	<html:meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-76"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function circle() applied to an SVG
+	rectangle. The specified keyword stroke-box defines the reference box
+	stroking bounding box. You should see a full green circle.</desc>
+</g>
+<rect x="10" y="10" width="80" height="80" fill="green" stroke="green" stroke-width="20" style="clip-path: circle() stroke-box;"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-005.svg
new file mode 100644
index 0000000000..90a57e7c15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-circle-005.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="100" height="100">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape circle() on SVG rectangle with view-box</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function circle() applied to an SVG
+	rectangle. The specified keyword view-box defines the viewport as reference
+	box. You should see a full green circle.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: circle() view-box;"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-001.svg
new file mode 100644
index 0000000000..511a197644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-001.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape ellipse() on SVG rectangle</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-ellipse-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function ellipse() applied to an SVG
+	rectangle. You should see a full green ellipse.</desc>
+</g>
+<rect width="200" height="150" fill="green" style="clip-path: ellipse()"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-002.svg
new file mode 100644
index 0000000000..08bdc3e19e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-ellipse-002.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape ellipse() on SVG rectangle with absolute values</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-ellipse-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function ellipse() with absolute values
+	applied to an SVG rectangle. You should see a full green ellipse.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: ellipse(100px 75px at 100px 75px)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-001.svg
new file mode 100644
index 0000000000..8176766a61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-001.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape inset() on SVG rectangle with percentag values</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-shape-inset-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function inset() applied to an SVG
+	rectangle. Percentage values are relative to a reference box. If not
+	reference box was specified the objectBoundingBox is used. The inset used
+	per side is specified by the first 10% argument. The second 10% specify the
+	border radius. You should see a green square with rounded corners.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: inset(10% round 10%)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.svg
new file mode 100644
index 0000000000..2793eda899
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape inset() on SVG rectangle with absolute values</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-shape-inset-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function inset() applied to an SVG
+	rectangle. The inset used per side is specified by the first 20px argument.
+	The second 20px specify the border radius. You should see a green square
+	with rounded corners.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: inset(20px round 20px)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-001.svg
new file mode 100644
index 0000000000..f474b1264d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-001.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape polygon() on SVG rectangle with nonzero</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-square-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function polygon() with absolute values
+	applied to an SVG rectangle. The clip-rule is specified with nonzero. You
+	should see a green square.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: polygon(nonzero, 25px 25px, 175px 25px, 175px 175px, 25px 175px, 25px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 50px, 25px 50px)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-002.svg
new file mode 100644
index 0000000000..0fd8b1bec1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-002.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape polygon() on SVG rectangle with evenodd</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-square-hole-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function polygon() with absolute values
+	applied to an SVG rectangle. The clip-rule is specified with evenodd. You
+	should see a green square with an rectangular hole.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: polygon(evenodd, 25px 25px, 175px 25px, 175px 175px, 25px 175px, 25px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 50px, 25px 50px)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-003.svg
new file mode 100644
index 0000000000..91ee3d0576
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-polygon-003.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Basic shape polygon() on SVG rectangle with no clip rule</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
+	<html:link rel="match" href="reference/clip-path-square-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A basic shape function polygon() with absolute values
+	applied to an SVG rectangle. The clip-rule is not specified and defaults to
+	nonzero. You should see a green square.</desc>
+</g>
+<rect width="200" height="200" fill="green" style="clip-path: polygon(25px 25px, 175px 25px, 175px 175px, 25px 175px, 25px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 50px, 25px 50px)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-001.svg
new file mode 100644
index 0000000000..6d850b993a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-001.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with text</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-text-001-ref.svg" />
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element can contain text. You should
+	see four adjacent 40x40 green squares and nothing else.</desc>
+</g>
+<clipPath id="clip1">
+	<text x="20" y="150" style="font: 40px/1 Ahem">XXXX</text>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-002.svg
new file mode 100644
index 0000000000..f40d13c40d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-002.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and text with styling</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-text-001-ref.svg" />
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element can contain text. Text styling
+	(e.g. stroke/stroke-width) should not influence the clipping path.
+	You should see four adjacent 40x40 green squares and nothing else.
+	</desc>
+</g>
+<clipPath id="clip1">
+	<text x="20" y="150" style="font: 40px/1 Ahem" stroke="red" stroke-width="10">XXXX</text>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-003.svg
new file mode 100644
index 0000000000..7a5e9e7d82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-003.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with text and a polygon</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-text-002-ref.svg" />
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element can contain text. Text can be
+	combined with other clipping shapes like polygons. You should see a green
+	stripe through the hole of a green rectangle.</desc>
+</g>
+<clipPath id="clip1">
+	<text x="20" y="120" style="font: 40px/1 Ahem" stroke="red" stroke-width="10">XXXX</text>
+	<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="evenodd" />
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-004.svg
new file mode 100644
index 0000000000..2389320677
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-004.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and tspan element with styling</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-text-001-ref.svg" />
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element can contain text in a
+	tspan element. Text styling on text element or tspan element should
+	not influence the clipping path. You should see four adjacent 40x40
+	green squares and nothing else.</desc>
+</g>
+<clipPath id="clip1">
+	<text x="20" y="150" style="font: 40px/1 Ahem"><tspan stroke="red" fill="none">XXXX</tspan></text>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-005.svg
new file mode 100644
index 0000000000..487e2fead8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-text-005.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Clipped clipPath with text</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-text-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+	<desc class="assert">A clipPath element can contain text. The
+	clipPath element can be clipped itself with the text. You should see
+	fragments of four adjacent 40x40 green squares and nothing else.
+	</desc>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<text x="20" y="150" style="font: 40px/1 Ahem">XXXX</text>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-userspaceonuse-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-userspaceonuse-001.svg
new file mode 100644
index 0000000000..1a3d769089
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-userspaceonuse-001.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Two clipPath elements with different clipPathUnits</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">A clipPath element with clipPathUnits
+	userSpaceOnUse gets clipped by a clipPath element with cliPathUnits
+	objectBoundingBox. You should see a green square.</desc>
+</g>
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect width="0.75" height="0.75"/>
+</clipPath>
+<clipPath id="clip1" clip-path="url(#clip2)">
+	<rect x="50" y="50" width="150" height="150"/>
+</clipPath>
+<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-opacity.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-opacity.svg
new file mode 100644
index 0000000000..ac944beaff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-opacity.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath child with opacity style</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The opacit on the child of the clipPath should
+	not influence the clipping path. You should see a green square.</desc>
+</g>
+<clipPath id="clip">
+	<rect x="50" y="50" width="100" height="100" opacity=".4"/>
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-transform.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-transform.svg
new file mode 100644
index 0000000000..b3c3b25d50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-with-transform.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath with transformed child</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The child of the clipPath element has a transform
+	that influences the size of the clipping path. You should see a green
+	square.</desc>
+</g>
+<clipPath id="clip1">
+	<rect width="10" height="10" transform="scale(10) translate(5, 5)"/>
+</clipPath>
+<rect width="400" height="400" fill="green" clip-path="url(#clip1)"/>
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg
new file mode 100644
index 0000000000..725f955752
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:link rel="help" href="https://www.w3.org/TR/css-masking-1/"/>
+  <html:link rel="help" href="https://crbug.com/1155384"/>
+  <html:link rel="match" href="reference/mask-and-nested-clip-path-ref.svg"/>
+  <mask id="mask">
+    <rect x="0" y="0" width="200" height="200" fill="white" />
+  </mask>
+  <clipPath id="nested-clip-path">
+    <rect x="100" y="0" width="300" height="300" />
+  </clipPath>
+  <clipPath id="clip-path" clip-path="url(#nested-clip-path)">
+    <rect x="0" y="100" width="300" height="300" />
+  </clipPath>
+  <rect x="0" y="0" width="300" height="300" fill="red" mask="url(#mask)" clip-path="url(#clip-path)"/>
+  <rect x="100" y="100" width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg
new file mode 100644
index 0000000000..0dc0f7c0f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see a green square with 4 equally
+	sized and positioned white squares in it.</desc>
+</g>
+<clipPath id="clip0" clipPathUnits="userSpaceOnUse">
+	<rect x="60" y="60" width="30" height="30"/>
+</clipPath>
+
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="userSpaceOnUse">
+	<rect x="60" y="10" width="30" height="30" transform="scale(0.01 0.01)"/>
+	<rect x="0" y="0" width="100" height="100" transform="scale(0.01 0.01)" clip-path="url(#clip0)"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-002.svg
new file mode 100644
index 0000000000..2e611feb8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-002.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see a green square with 4 equally
+	sized and positioned white squares in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" />
+</mask>
+
+<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" />
+</mask>
+
+<g mask="url(#mask1a)">
+	<rect width="200" height="200" fill="green" mask="url(#mask1b)"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-003.svg
new file mode 100644
index 0000000000..622125318c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-003.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 3</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see a green square with 4 equally
+	sized and positioned white squares in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" />
+</mask>
+
+<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" />
+</mask>
+
+<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1a)"/>
+</mask>
+
+<mask id="mask3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1b)"/>
+</mask>
+
+<g mask="url(#mask3)">
+	<rect width="200" height="200" fill="green" mask="url(#mask2)"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-004.svg
new file mode 100644
index 0000000000..66bb3b7ea4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-004.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 4</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see a green square with 4 equally
+	sized and positioned white squares in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-005.svg
new file mode 100644
index 0000000000..9317ce4ed0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-005.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 5</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see 4 equally sized and positioned green
+	squares.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask2)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-006.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-006.svg
new file mode 100644
index 0000000000..6ab2a20f4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-006.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 6</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see 4 equally sized and positioned green
+	squares.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask2)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-007.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-007.svg
new file mode 100644
index 0000000000..27f372494f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-007.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 7</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see a green square with 4 equally
+	sized and positioned white squares in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-008.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-008.svg
new file mode 100644
index 0000000000..b3f33e1999
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-008.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 8</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see a green square with 4 equally
+	sized and positioned white squares in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip3" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip4" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip3)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip4)"/>
+</clipPath>
+
+<mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-009.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-009.svg
new file mode 100644
index 0000000000..955edd3389
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-009.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 9</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-002-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see 4 equally sized and positioned green
+	squares.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip3" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip4" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip3)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip4)"/>
+</clipPath>
+
+<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" clip-path="url(#clip)" />
+</mask>
+
+<rect width="200" height="200" fill="green" mask="url(#mask2)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-010.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-010.svg
new file mode 100644
index 0000000000..dc1040e51d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-010.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="10000" height="400">
+<g id="testmeta">
+	<title>CSS Masking: clipPath and mask nesting 10</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-003-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. You should see 2 equally sized and positioned green
+	squares next to each other.</desc>
+</g>
+<defs>
+<mask id="mask">
+	<!-- forcing a repaintRect offset -->
+	<rect x="100" width="1" height="1" fill="black"/>
+	<rect x="200" width="8092" height="100" fill="white"/>
+</mask>
+
+<clipPath id="clip1">
+	<!-- forcing clipping via masking -->
+	<path d="M 0 0 V 100 H 10000 V 0 Z"/>
+</clipPath>
+
+<clipPath id="clip2" clip-path="url(#clip1)">
+	<path d="M 100 0 H 200 V 200 H 8292 V 0 Z"/>
+</clipPath>
+
+<mask id="crop">
+	<rect width="300" height="100" fill="white"/>
+</mask>
+</defs>
+
+<g mask="url(#crop)" transform="translate(-100, 0)">
+	<rect width="10000" height="400" fill="red" mask="url(#mask)"/>
+	<rect x="199" width="101" height="100" fill="green"/>
+</g>
+
+<g mask="url(#crop)" transform="translate(100, 0)">
+	<rect width="10000" height="400" fill="red" clip-path="url(#clip2)"/>
+	<rect x="199" width="101" height="100" fill="green"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-001.svg
new file mode 100644
index 0000000000..16890a5859
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-001.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Panning with clipPath and mask nesting 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. The current viewport gets translated by panning. You
+	should see a green square with 4 equally sized and positioned white squares
+	in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" />
+</mask>
+
+<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" />
+</mask>
+
+<g mask="url(#mask1a)" transform="translate(75, 0)">
+	<rect width="200" height="200" fill="green" mask="url(#mask1b)"/>
+</g>
+<script>
+var translate = document.getElementsByTagName('svg')[0].currentTranslate;
+translate.x = -75;
+</script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-002.svg
new file mode 100644
index 0000000000..e5e426789f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-nested-clip-path-panning-002.svg
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Panning with clipPath and mask nesting 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-nested-clip-path-001-ref.svg" />
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">Multiple references between clipPath and
+	mask elements. The current viewport gets translated by panning. You
+	should see a green square with 4 equally sized and positioned white squares
+	in it.</desc>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<rect x="0.1" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.1" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip2" clipPathUnits="objectBoundingBox">
+	<rect x="0.6" y="0.1" width="0.3" height="0.3"/>
+	<rect x="0.6" y="0.6" width="0.3" height="0.3"/>
+</clipPath>
+
+<clipPath id="clip" clipPathUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip1)"/>
+	<rect x="0" y="0" width="1" height="1" clip-path="url(#clip2)"/>
+</clipPath>
+
+<mask id="mask1a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip1)" />
+</mask>
+
+<mask id="mask1b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white"/>
+	<rect x="0" y="0" width="1" height="1" fill="black" clip-path="url(#clip2)" />
+</mask>
+
+<mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1a)"/>
+</mask>
+
+<mask id="mask3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0" y="0" width="1" height="1" fill="white" mask="url(#mask1b)"/>
+</mask>
+
+<g mask="url(#mask3)" transform="translate(75, 0)">
+	<rect width="200" height="200" fill="green" mask="url(#mask2)"/>
+</g>
+<script>
+var translate = document.getElementsByTagName('svg')[0].currentTranslate;
+translate.x = -75;
+</script>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg
new file mode 100644
index 0000000000..e3ca1fbdba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: mask with objectBoundingBox gets clipped 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-content-clip-002-ref.svg" />
+	<html:meta name="fuzzy" content="0-38; 0-200"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The mask element with
+	maskContentUnits="objectBoundingBox" gets clipped. The clipping path has a
+	transform that scales the content down. You should see a full green circle.
+	</desc>
+</g>
+<clipPath id="clip">
+	<circle cx="50" cy="50" r="25" transform="scale(0.01 0.01)"/>
+</clipPath>
+<mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/>
+</mask>
+<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip.svg
new file mode 100644
index 0000000000..47cf900697
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-objectboundingbox-content-clip.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: mask with objectBoundingBox gets clipped 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-content-clip-001-ref.svg" />
+	<html:meta name="fuzzy" content="0-38; 0-200"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The mask element with
+	maskContentUnits="objectBoundingBox" gets clipped. The clipping path has a
+	coordinates in the mask's user space. You should see a full green circle.
+	</desc>
+</g>
+<clipPath id="clip">
+	<circle cx="0.5" cy="0.5" r="0.25"/>
+</clipPath>
+<mask id="mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+	<rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/>
+</mask>
+<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg
new file mode 100644
index 0000000000..03310225e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: mask with userSpaceOnUse gets clipped 1</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-content-clip-002-ref.svg" />
+	<html:meta name="fuzzy" content="0-38; 0-200"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The mask element with
+	maskContentUnits="userSpaceOnUse" gets clipped. The clipping path has a
+	transform that scales the content down. You should see a full green circle.
+	</desc>
+</g>
+<clipPath id="clip" clipPathUnits="userSpaceOnUse">
+	<circle cx="50" cy="50" r="25" transform="scale(0.01 0.01)"/>
+</clipPath>
+<mask id="mask" x="0" y="0" width="200" height="200" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox">
+	<rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/>
+</mask>
+<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip.svg
new file mode 100644
index 0000000000..09eb2dfcd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: mask with userSpaceOnUse gets clipped 2</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-masks"/>
+	<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#MaskElement"/>
+	<html:link rel="match" href="reference/mask-content-clip-001-ref.svg" />
+	<html:meta name="fuzzy" content="0-38; 0-200"/>
+	<metadata class="flags">svg</metadata>
+	<desc class="assert">The mask element with
+	maskContentUnits="userSpaceOnUse" gets clipped. The clipping path has a
+	coordinates in the mask's user space. You should see a full green circle.
+	</desc>
+</g>
+<clipPath id="clip" clipPathUnits="userSpaceOnUse">
+	<circle cx="0.5" cy="0.5" r="0.25"/>
+</clipPath>
+<mask id="mask" x="0" y="0" width="200" height="200" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox">
+	<rect x="0.25" y="0.25" width="0.5" height="0.5" fill="white" clip-path="url(#clip)"/>
+</mask>
+<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg
new file mode 100644
index 0000000000..56b7fbeef0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<clipPath id="clip1" clipPathUnits="objectBoundingBox">
+	<circle cx="0.25" cy="0.25" r="0.25"/>
+</clipPath>
+<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg
new file mode 100644
index 0000000000..eaeb6b2b56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="evenodd" fill="green"/>
+<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="nonzero" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg
new file mode 100644
index 0000000000..d6c87cd139
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="nonzero" fill="green"/>
+<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="nonzero" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg
new file mode 100644
index 0000000000..3247b87a6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="nonzero" fill="green"/>
+<polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="evenodd" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg
new file mode 100644
index 0000000000..8a25ffebe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="evenodd" fill="green"/>
+  <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="evenodd" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-content-clip-004-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-content-clip-004-ref.svg
new file mode 100644
index 0000000000..269d289b4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-content-clip-004-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+  <g id="testmeta">
+    <title>CSS Reference</title>
+    <html:link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/>
+    <metadata class="flags">svg</metadata>
+  </g>
+  <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg
new file mode 100644
index 0000000000..2532eb3c1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<defs>
+<clipPath id="clip">
+	<ellipse cx="100" cy="75" rx="100" ry="75"/>
+</clipPath>
+</defs>
+<rect width="200" height="150" fill="green" clip-path="url(#clip)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-invisible-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-invisible-ref.svg
new file mode 100644
index 0000000000..15cfd5fdca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-invisible-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg
new file mode 100644
index 0000000000..be24efa8e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect width="90" height="90" fill="green"/>
+<rect x="40" y="40" width="50" height="50" fill="blue"/>
+<rect x="110" width="90" height="90" fill="green"/>
+<rect x="110" y="40" width="50" height="50" fill="blue"/>
+<rect y="110" width="90" height="90" fill="green"/>
+<rect x="40" y="110" width="50" height="50" fill="blue"/>
+<rect x="110" y="110" width="90" height="90" fill="green"/>
+<rect x="110" y="110" width="50" height="50" fill="blue"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-001-ref.svg
new file mode 100644
index 0000000000..693c72e429
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-001-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect x="50" y="50" width="100" height="100" fill="green"/>
+<rect x="50" y="50" width="50" height="50" fill="blue"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-002-ref.svg
new file mode 100644
index 0000000000..21cf9cd7cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-on-marker-002-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect x="50" y="50" width="100" height="100" fill="green"/>
+<rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-precision-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-precision-001-ref.svg
new file mode 100644
index 0000000000..4c83c9def7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-precision-001-ref.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<defs>
+	<g id="paths">
+	<path d="M10 10 h20 v20 h-20 v-20 m1 1 v18 h18 v-18 h-18"/>
+	<rect x="19" y="19" width="2" height="2" />
+	<rect x="5.51" y="0.51" width="2" height="32.3" fill="white"/>
+	<rect x="35.4" y="0.51" width="2" height="32.3" fill="white"/>
+	</g>
+</defs>
+<use xlink:href="#paths" fill="green"/>
+<use xlink:href="#paths" fill="green" x="30"/>
+<use xlink:href="#paths" fill="green" x="60"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-recursion-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-recursion-002-ref.svg
new file mode 100644
index 0000000000..6eb3cb155c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-recursion-002-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
+	 xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="50" width="50" height="50" fill="red" />
+<rect x="50" y="150" width="50" height="50" fill="red"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-shape-inset-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-shape-inset-001-ref.svg
new file mode 100644
index 0000000000..e458ad994a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-shape-inset-001-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<defs>
+<clipPath id="clip">
+	<rect x="20" y="20" width="160" height="160" rx="20" ry="20"/>
+</clipPath>
+</defs>
+<rect width="200" height="200" fill="green" clip-path="url(#clip)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-001-ref.svg
new file mode 100644
index 0000000000..8ddfdaa723
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-001-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" fill-rule="nonzero" fill="green"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-002-ref.svg
new file mode 100644
index 0000000000..e8e03bf051
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-002-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect x="50" y="50" width="100" height="100" fill="green"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-003-ref.svg
new file mode 100644
index 0000000000..e7709d44b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-003-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect width="200" height="200" fill="green" />
+</svg>
+
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-hole-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-hole-001-ref.svg
new file mode 100644
index 0000000000..7e1cb1b394
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-square-hole-001-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<polygon points="25 25, 175 25, 175 175, 25 175, 25 50, 150 50, 150 150, 50 150, 50 50, 25 50" fill-rule="evenodd" fill="green"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-001-ref.svg
new file mode 100644
index 0000000000..f13bb8ba44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-001-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+</g>
+<text x="20" y="150" fill="green" style="font: 40px/1 Ahem">XXXX</text>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-002-ref.svg
new file mode 100644
index 0000000000..d51fd55b4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-002-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+</g>
+<text x="20" y="120" fill="green" style="font: 40px/1 Ahem">XXXX</text>
+<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" fill-rule="evenodd" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-003-ref.svg
new file mode 100644
index 0000000000..254f361d3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-text-003-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+	<html:link rel="stylesheet" href="/fonts/ahem.css"/>
+</g>
+<clipPath id="clip2">
+	<rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<text x="20" y="150" style="font: 40px/1 Ahem" clip-path="url(#clip2)" fill="green">XXXX</text>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg
new file mode 100644
index 0000000000..8aed79967e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="100" y="100" width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-001-ref.svg
new file mode 100644
index 0000000000..0aa5233304
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-001-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<mask id="mask" x="0" y="0" width="1" height="1">
+	<circle cx="100" cy="100" r="50" fill="white"/>
+</mask>
+<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-002-ref.svg
new file mode 100644
index 0000000000..4da47823b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-content-clip-002-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<mask id="mask" x="0" y="0" width="1" height="1">
+	<circle cx="10000" cy="10000" r="5000" fill="white" transform="scale(0.01 0.01)"/>
+</mask>
+<rect x="0" y="0" height="200" width="200" fill="green" mask="url(#mask)"/>
+</svg>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-001-ref.svg
new file mode 100644
index 0000000000..e080c95e18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-001-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect width="200" height="200" fill="green"/>
+<rect x="20" y="20" width="60" height="60" fill="white"/>
+<rect x="120" y="20" width="60" height="60" fill="white"/>
+<rect x="20" y="120" width="60" height="60" fill="white"/>
+<rect x="120" y="120" width="60" height="60" fill="white"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-002-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-002-ref.svg
new file mode 100644
index 0000000000..7b54566651
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-002-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect x="20" y="20" width="60" height="60" fill="green"/>
+<rect x="120" y="20" width="60" height="60" fill="green"/>
+<rect x="20" y="120" width="60" height="60" fill="green"/>
+<rect x="120" y="120" width="60" height="60" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-003-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-003-ref.svg
new file mode 100644
index 0000000000..01330054c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/mask-nested-clip-path-003-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="10000" height="400">
+<g id="testmeta">
+	<title>CSS Masking: Reftest reference</title>
+	<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
+</g>
+<rect x="99" width="101" height="100" fill="green"/>
+<rect x="299" width="101" height="100" fill="green"/>
+</svg>