-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move clip-path path reftest into wpt.
Move the reftests of path() into wpt. For the rest reftests of clip-path, we could move them into wpt in a separate bug. Depends on D4965 Differential Revision: https://phabricator.services.mozilla.com/D4968 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1487838 gecko-commit: 5f85f154f4e8bf1896f6fbdfe01102cdb018bbf4 gecko-integration-branch: autoland gecko-reviewers: xidorn
- Loading branch information
1 parent
ef04d8b
commit 2e75f75
Showing
4 changed files
with
104 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Masking: Test clip-path property and path function with nonzero fill</title> | ||
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> | ||
<link rel="match" href="reference/clip-path-path-001-ref.html"> | ||
<meta name="assert" content="The clip-path property takes the basic shape | ||
'path()' for clipping. Test nonzero path function. On pass you should | ||
see a green square."> | ||
</head> | ||
<style> | ||
#rect { | ||
width: 100px; | ||
height: 100px; | ||
background-color: green; | ||
clip-path: path(nonzero, 'M10,10h80v80h-80zM25,25h50v50h-50z'); | ||
} | ||
</style> | ||
<body> | ||
<p>The test passes if there are a green filled rect.</p> | ||
<div id="rect"></div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Masking: Test clip-path property and path function with evenodd fill</title> | ||
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> | ||
<link rel="match" href="reference/clip-path-path-002-ref.html"> | ||
<meta name="assert" content="The clip-path property takes the basic shape | ||
'path()' for clipping. Test evenodd path function. On pass you should | ||
see a hollow green square."> | ||
</head> | ||
<style> | ||
#rect { | ||
width: 100px; | ||
height: 100px; | ||
background-color: green; | ||
clip-path: path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z'); | ||
} | ||
</style> | ||
<body> | ||
<p>The test passes if there are a green hollow rect.</p> | ||
<div id="rect"></div> | ||
</body> | ||
</html> |
29 changes: 29 additions & 0 deletions
29
css/css-masking/clip-path/reference/clip-path-path-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!-- | ||
Any copyright is dedicated to the Public Domain. | ||
http://creativecommons.org/publicdomain/zero/1.0/ | ||
--> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Masking: Reference for clip-path's path function with nonzero</title> | ||
<style type="text/css"> | ||
#rect { | ||
width: 100px; | ||
height: 100px; | ||
background-color: green; | ||
clip-path: url("#clip"); | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p>The test passes if there are a green filled rect.</p> | ||
<div id="rect"></div> | ||
<svg height="0" width="0"> | ||
<defs> | ||
<clipPath id="clip"> | ||
<path clip-rule="nonzero" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> | ||
</clipPath> | ||
</defs> | ||
</svg> | ||
</body> | ||
</html> |
29 changes: 29 additions & 0 deletions
29
css/css-masking/clip-path/reference/clip-path-path-002-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!-- | ||
Any copyright is dedicated to the Public Domain. | ||
http://creativecommons.org/publicdomain/zero/1.0/ | ||
--> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Masking: Reference for clip-path's path function with evenodd</title> | ||
<style type="text/css"> | ||
#rect { | ||
width: 100px; | ||
height: 100px; | ||
background-color: green; | ||
clip-path: url("#clip"); | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p>The test passes if there are a green hollow rect.</p> | ||
<div id="rect"></div> | ||
<svg height="0" width="0"> | ||
<defs> | ||
<clipPath id="clip"> | ||
<path clip-rule="evenodd" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> | ||
</clipPath> | ||
</defs> | ||
</svg> | ||
</body> | ||
</html> |