Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-14 09:55:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-nested-twice.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 996 B

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-005.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-006.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-007.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-008.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-009.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip-rule-010.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-clip.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 902 B

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-clip-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 942 B

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-clip-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1,017 B

24
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-clip-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-invisible.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 953 B

16
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-syling.svg Normal file
View file

@ -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" clip-path="url(#clip1)">
<rect x="50" y="50" width="100" height="100" stroke="black" stroke-wdith="10" stroke-dasharray="10 10" fill="none"/>
</clipPath>
<rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 907 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 927 B

24
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

26
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 991 B

25
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-005.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

26
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-006.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

25
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-content-use-007.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

16
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-css-transform-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 836 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-css-transform-002.svg Normal file
View file

@ -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(2px, 2px);">
<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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-css-transform-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 902 B

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-css-transform-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1,015 B

26
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-dom-child-changes.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

26
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-dom-clippathunits.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

25
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-dom-href.svg Normal file
View file

@ -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)">
<rect width="400" height="400" fill="red"/>
<rect width="200" height="200" fill="green"/>
</g>
<script>
document.getElementsByTagName("g")[0].setAttribute("clip-path", "url(#clip1)");
</script>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 985 B

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-dom-id.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-invalid.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 991 B

40
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-negative-scale.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-no-content-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 760 B

17
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-no-content-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 849 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-no-content-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 979 B

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-no-content-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1,021 B

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-objectboundingbox-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 960 B

17
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-objectboundingbox-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 954 B

17
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-objectboundingbox-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 921 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-objectboundingbox-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-g-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 827 B

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-g-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 906 B

19
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-g-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 852 B

22
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-g-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1,018 B

25
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-g-005.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-marker-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

22
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-marker-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-marker-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-svg-001.svg Normal file
View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)">
<g id="testmeta">
<title>CSS Masking: clipPath on root &lt;svg></title>
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
<metadata class="flags">svg</metadata>
<desc class="assert">A clipPath element can be applied to a root
&lt;svg> element. You should see a green square.</desc>
</g>
<clipPath id="clip1">
<rect x="50" y="50" width="100" height="100"/>
</clipPath>
<rect width="200" height="200" fill="green"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 808 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-svg-002.svg Normal file
View file

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" clip-path="url(#clip1)">
<g id="testmeta">
<title>CSS Masking: Clipped clipPath on root &lt;svg></title>
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
<html:link rel="match" href="reference/clip-path-square-002-ref.svg" />
<metadata class="flags">svg</metadata>
<desc class="assert">A clipPath element can be applied to a root
&lt;svg> element. This clipPath element can be clipped itself. You
should see a green square.</desc>
</g>
<clipPath id="clip2">
<rect x="25" y="25" width="150" height="150"/>
</clipPath>
<clipPath id="clip1">
<rect x="50" y="50" width="100" height="100"/>
</clipPath>
<rect width="200" height="200" fill="green" clip-path="url(#clip2)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 968 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-use-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 894 B

24
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-on-use-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

44
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-precision-001.svg Normal file
View file

@ -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-002-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>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

32
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-recursion-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

24
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-recursion-002.svg Normal file
View file

@ -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 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-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>
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

13
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-circle-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 744 B

13
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-circle-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 803 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-circle-003.svg Normal file
View file

@ -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 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" />
<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>
Side by side

After

Width:  |  Height:  |  Size: 884 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-circle-004.svg Normal file
View file

@ -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 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" />
<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>
Side by side

After

Width:  |  Height:  |  Size: 899 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-circle-005.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 863 B

13
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-ellipse-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 749 B

13
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-ellipse-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 815 B

16
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-inset-001.svg Normal file
View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<g id="testmeta">
<title>CSS Masking: Basic shape inset() on SVG rectangle with percentag values</title>
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
<html:link rel="match" href="reference/clip-path-shape-inset-001-ref.svg" />
<metadata class="flags">svg</metadata>
<desc class="assert">A basic shape function inset() applied to an SVG
rectangle. Percentage values are relative to a reference box. If not
reference box was specified the objectBoundingBox is used. The inset used
per side is specified by the first 10% argument. The second 10% specify the
border radius. You should see a green square with rounded corners.</desc>
</g>
<rect width="200" height="200" fill="green" style="clip-path: inset(10% round 10%)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,023 B

15
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-inset-002.svg Normal file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<g id="testmeta">
<title>CSS Masking: Basic shape inset() on SVG rectangle with absolute values</title>
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
<html:link rel="match" href="reference/clip-path-shape-inset-001-ref.svg" />
<metadata class="flags">svg</metadata>
<desc class="assert">A basic shape function inset() applied to an SVG
rectangle. The inset used per side is specified by the first 20px argument.
The second 20px specify the border radius. You should see a green square
with rounded corners.</desc>
</g>
<rect width="200" height="200" fill="green" style="clip-path: inset(20px round 20px)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 908 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-polygon-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 942 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-polygon-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 972 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-shape-polygon-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 953 B

16
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-text-001.svg Normal file
View file

@ -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 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" />
<metadata class="flags">svg</metadata>
<desc class="assert">A clipPath element can contain text. You should
see a green text "CLIP" and nothing else.</desc>
</g>
<clipPath id="clip1">
<text x="20" y="150" style="font-size: 60px; font-weight: bold;">CLIP</text>
</clipPath>
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 826 B

17
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-text-002.svg Normal file
View file

@ -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 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" />
<metadata class="flags">svg</metadata>
<desc class="assert">A clipPath element can contain text. Text styling
should not influence the clipping path. You should see a green text "CLIP"
and nothing else.</desc>
</g>
<clipPath id="clip1">
<text x="20" y="150" style="font-size:60px; font-weight:bold;" stroke="red" stroke-width="10">CLIP</text>
</clipPath>
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 921 B

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-text-003.svg Normal file
View file

@ -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 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" />
<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
text "CLIP" through the hole of a green rectangle.</desc>
</g>
<clipPath id="clip1">
<text x="20" y="150" style="font-size:60px; font-weight:bold;" stroke="red" stroke-width="10">CLIP</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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-text-004.svg Normal file
View file

@ -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 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" />
<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 a green text "CLIP" and nothing else.
</desc>
</g>
<clipPath id="clip1">
<text x="20" y="150" style="font-size:60px; font-weight:bold;"><tspan stroke="red" fill="none">CLIP</tspan></text>
</clipPath>
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 992 B

21
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-text-005.svg Normal file
View file

@ -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: 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>
<desc class="assert">A clipPath element can contain text. The
clipPath element can be clipped itself with the text. You should see
fragments of a green text "CLIP" 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-size:60px; font-weight:bold;">CLIP</text>
</clipPath>
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,011 B

20
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-userspaceonuse-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

17
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-with-opacity.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 893 B

18
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/clip-path-with-transform.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 873 B

40
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

43
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

51
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-003.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

36
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-004.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

35
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-005.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

35
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-006.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

36
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-007.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

44
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-008.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

43
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-009.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

45
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-010.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

48
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-panning-001.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

56
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-nested-clip-path-panning-002.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-objectboundingbox-content-clip-transform.svg Normal file
View file

@ -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: 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" />
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-objectboundingbox-content-clip.svg Normal file
View file

@ -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: 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" />
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg Normal file
View file

@ -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: 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" />
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

23
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/mask-userspaceonuse-content-clip.svg Normal file
View file

@ -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: 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" />
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

10
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-circle-001-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 419 B

8
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-clip-rule-001-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 495 B

8
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-clip-rule-002-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 495 B

8
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-clip-rule-003-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 495 B

12
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-ellipse-001-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 403 B

6
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-invisible-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 241 B

14
tests/wpt/web-platform-tests/css/css-masking-1/clip-path-svg-content/reference/clip-path-negative-scale-ref.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 681 B

Some files were not shown because too many files have changed in this diff Show more