diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/clip-path-svg-content')
130 files changed, 2575 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-inset-stroke-001.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-001.svg new file mode 100644 index 0000000000..06c810cd11 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-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: Basic shape without a geometry-box should default to stroke-box</title> + <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-002-ref.svg" /> + <desc class="assert">The spec states: "If no reference box is specified, the + border-box will be used as reference box", and "For SVG elements without + an associated CSS layout box, the used value for ... border-box and margin-box + is stroke-box." In this testcase, no reference box is specified, so the + clip-path of "inset(0)" should be equivalent to "inset(0) stroke-box", and + should not clip out the stroke. You should see a 100x100 green square formed + by a stroked rect.</desc> +</g> +<rect x="75" y="75" width="50" height="50" stroke-width="50" stroke="green" style="clip-path: inset(0)"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-002.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-002.svg new file mode 100644 index 0000000000..bfc60355ba --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-inset-stroke-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 using border-box should use stroke-box</title> + <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-002-ref.svg" /> + <desc class="assert">The spec states: "For SVG elements without an associated + CSS layout box, the used value for ... border-box and margin-box is + stroke-box." In this testcase, border-box is specified, so the + clip-path of "inset(0) border-box" should be equivalent to + "inset(0) stroke-box", and should not clip out the stroke. You should see a + 100x100 green square formed by a stroked rect.</desc> +</g> +<rect x="75" y="75" width="50" height="50" stroke-width="50" stroke="green" style="clip-path: inset(0) border-box"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid-reference.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid-reference.svg new file mode 100644 index 0000000000..714d90ee76 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-invalid-reference.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: clipPath with invalid reference</title> + <html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/> + <html:link rel="match" href="reference/clip-path-green-square-001-ref.svg" /> + <metadata class="flags">svg</metadata> + <desc class="assert">clip-paths are ignored if their + reference doesn't point to a clipPath.</desc> +</g> + <linearGradient id="a" /> + <rect x="50" y="50" width="100" height="100" fill="green" clip-path="url(#a)"/> +</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 <clipPath></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 <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 + <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 <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 + <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-svg-003.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-003.svg new file mode 100644 index 0000000000..01c4a2610e --- /dev/null +++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-004.svg new file mode 100644 index 0000000000..62a020e558 --- /dev/null +++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-on-svg-005.svg new file mode 100644 index 0000000000..c39d266028 --- /dev/null +++ b/testing/web-platform/tests/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> 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..804e1e920a --- /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-70; totalPixels=0-210"/> + <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..83f7eec4fe --- /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-376"/> + <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..bc8a4d810e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-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: 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" /> + <html:meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-200"/> + <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..5e5b189905 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/clip-path-shape-inset-002.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 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"/> + <html:meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-200"/> + <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..397f56d190 --- /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-268"/> + <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..c87fedec4f --- /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-376"/> + <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..624084a07b --- /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-268"/> + <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..f1bfbdda58 --- /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-376"/> + <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-green-square-001-ref.svg b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-green-square-001-ref.svg new file mode 100644 index 0000000000..c83ec87e7b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/clip-path-svg-content/reference/clip-path-green-square-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"/> + <metadata class="flags">svg</metadata> +</g> +<rect x="50" y="50" width="100" height="100" fill="green"/> +</svg> 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> |
