Import some WebKit SVG clip-path tests (#43687)
Import the following tests:
clip-path-on-svg-003.svg (change root svg clip-path dynamically)
clip-path-on-svg-004.svg (test clip-path on both outer and inner svg)
clip-path-on-svg-005.svg (-webkit-clip-path on root svg)
diff --git a/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg b/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg
new file mode 100644
index 0000000..01c4a26
--- /dev/null
+++ b/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg
@@ -0,0 +1,24 @@
+<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 <svg></title>
+ <html:link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.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
+ <svg> element. This clipPath element can be clipped itself. You
+ should see a green square.</desc>
+</g>
+<clipPath id="clip2">
+ <rect x="50" y="50" width="100" height="100"/>
+</clipPath>
+<clipPath id="clip1">
+ <rect x="25" y="25" width="150" height="150"/>
+</clipPath>
+<rect width="200" height="200" fill="green"/>
+<script>
+ var svg = document.documentElement;
+ svg.setAttribute('clip-path','url(#clip2)');
+</script>
+</svg>
diff --git a/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg b/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg
new file mode 100644
index 0000000..62a020e
--- /dev/null
+++ b/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg
@@ -0,0 +1,22 @@
+<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 <svg></title>
+ <html:link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.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
+ <svg> element. This clipPath element can be clipped itself. 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="175" height="175"/>
+</clipPath>
+<svg clip-path="url(#clip2)">
+ <rect width="200" height="200" fill="green"/>
+</svg>
+</svg>
diff --git a/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg b/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg
new file mode 100644
index 0000000..c39d266
--- /dev/null
+++ b/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" style="-webkit-clip-path: url(#clip1)">
+<g id="testmeta">
+ <title>CSS Masking: clipPath on root <svg></title>
+ <html:link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.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
+ <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>
