Render clip-path:shape().

Update clip-path-shape-003.html and clip-path-shape-004.html because 1. Per SVG2 spec, we don't accept comma among commands, so I remove them. 2. Basically, these two tests want to test the result of `shape()` should be identical to the result of `path()`. However, I noticed the original tests which put a `clip-path:path()` with `position:absolutely` may have a fuzzy result if the path has some curves there. This may be caused by anti-alias together with absoultely positioned element (note: perhaps there are some floating point calculation in layout for this, so the final rendering coordinates may have some fractions). Therefore, I drop the absolutely positioned element, and just test that if the result of `shape()` is identical to the result of `path()`. Also, add two more tests for different reference-boxes together with the usage of `shape()` (to make sure we resolve percentage values properly). Differential Revision: https://phabricator.services.mozilla.com/D202884 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1823463 gecko-commit: 27f7a56246fb95d10fb9df851d1b13cbdcfced87 gecko-reviewers: emilio
BruceDai · Mar 25, 2024 · a0d42c9 · a0d42c9
1 parent deae7cc
commit a0d42c9
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 34 deletions.
diff --git a/css/css-masking/clip-path/clip-path-shape-003.html b/css/css-masking/clip-path/clip-path-shape-003.html
@@ -8,15 +8,6 @@
 	'shape()' for clipping. Test curves.">
 </head>
 <style>
-  div {
-    width: 100px;
-    height: 100px;
-  }
-  #ref {
-    clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10");
-    background-color: red;
-    position: absolute;
-  }
   #rect {
     width: 100px;
     height: 100px;
@@ -29,8 +20,6 @@
   }
 </style>
 <body>
-  <p>You should see no red.</p>
-  <div id="ref"></div>
   <div id="rect"></div>
 </body>
 </html>
diff --git a/css/css-masking/clip-path/clip-path-shape-004.html b/css/css-masking/clip-path/clip-path-shape-004.html
@@ -8,15 +8,6 @@
 	'shape()' for clipping. Test arcs.">
 </head>
 <style>
-  div {
-    width: 100px;
-    height: 100px;
-  }
-  #ref {
-    clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20");
-    background-color: red;
-    position: absolute;
-  }
   #rect {
     width: 100px;
     height: 100px;
@@ -28,8 +19,6 @@
   }
 </style>
 <body>
-  <p>You should see no red.</p>
-  <div id="ref"></div>
   <div id="rect"></div>
 </body>
 </html>
diff --git a/css/css-masking/clip-path/clip-path-shape-005.html b/css/css-masking/clip-path/clip-path-shape-005.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and shape function with padding-box</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+  <link rel="match" href="reference/clip-path-path-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+	'shape()' for clipping. Test the usage of the reference box. On pass you
+    should see a green square.">
+</head>
+<style>
+  #rect {
+    /* The size of the padding-box is 100x100. */
+    width: 120px;
+    height: 120px;
+    padding: 10px;
+    border: 10px solid red;
+    box-sizing: border-box;
+    background-color: green;
+    clip-path: shape(from 0px 0px,
+                     hline by 80px, vline by 80%, hline by -80%, close)
+               padding-box;
+  }
+</style>
+<body>
+  <p>The test passes if there are a green filled rect.</p>
+  <div id="rect"></div>
+</body>
+</html>
diff --git a/css/css-masking/clip-path/clip-path-shape-006.html b/css/css-masking/clip-path/clip-path-shape-006.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and shape function with content-box</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+  <link rel="match" href="reference/clip-path-path-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+	'shape()' for clipping. Test the usage of the reference box. On pass you
+    should see a green square.">
+</head>
+<style>
+  #rect {
+    width: 140px;
+    height: 140px;
+    padding: 10px;
+    border: 10px solid red;
+    box-sizing: border-box;
+    background-color: green;
+    /* The size of the content-box is 100x100. */
+    clip-path: shape(from -10px -10%,
+                     hline by 80px, vline by 80%, hline by -80%, close)
+               content-box;
+  }
+</style>
+<body>
+  <p>The test passes if there are a green filled rect.</p>
+  <div id="rect"></div>
+</body>
+</html>
diff --git a/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html b/css/css-masking/clip-path/reference/clip-path-shape-003-ref.html
@@ -5,18 +5,14 @@
   <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
 </head>
 <style>
-  div {
+  #ref {
     width: 100px;
     height: 100px;
-  }
-  #ref {
     background-color: green;
-    clip-path: path(nonzero, "M 10 10, Q 40 0 60 20, T 90 0, c 10 40 20 20 -20 60, s -10 70 -40 -10");
-    position: absolute;
+    clip-path: path(nonzero, "M 10 10 Q 40 0 60 20 T 90 0 c 10 40 20 20 -20 60 s -10 70 -40 -10");
   }
 </style>
 <body>
-  <p>You should see no red.</p>
   <div id="ref"></div>
 </body>
 </html>
diff --git a/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html b/css/css-masking/clip-path/reference/clip-path-shape-004-ref.html
@@ -5,18 +5,14 @@
   <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
 </head>
 <style>
-  div {
+  #ref {
     width: 100px;
     height: 100px;
-  }
-  #ref {
     background-color: green;
-    clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20, a 33 33 120 1 1 -40 50, A 20 25 0 0 0 20 20");
-    position: absolute;
+    clip-path: path(nonzero, "M 20 20 A 25 12 0 0 1 80 20 a 33 33 120 1 1 -40 50 A 20 25 0 0 0 20 20");
   }
 </style>
 <body>
-  <p>You should see no red.</p>
   <div id="ref"></div>
 </body>
 </html>