Skip to content

Commit

Permalink
Move clip-path path reftest into wpt.
Browse files Browse the repository at this point in the history
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
BorisChiou authored and moz-wptsync-bot committed Sep 5, 2018
1 parent ef04d8b commit 2e75f75
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 0 deletions.
23 changes: 23 additions & 0 deletions css/css-masking/clip-path/clip-path-path-001.html
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>
23 changes: 23 additions & 0 deletions css/css-masking/clip-path/clip-path-path-002.html
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 css/css-masking/clip-path/reference/clip-path-path-001-ref.html
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 css/css-masking/clip-path/reference/clip-path-path-002-ref.html
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>

0 comments on commit 2e75f75

Please sign in to comment.