Add support for clip-path <geometry-box> with border-radius

Clip-path <geometry-box> values should honor border-radius, see: https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values. To implement this, ClipPathClipper::LocalReferenceBox has been refactored so that a rounded variant can be added (RoundedReferenceBox). Bug: 694218 Change-Id: I1a95da66da5abf9dfa422ef2b530311d1f3a68b8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4852134 Reviewed-by: Fredrik Söderquist <[email protected]> Commit-Queue: Philip Rogers <[email protected]> Cr-Commit-Position: refs/heads/main@{#1194162}
Tobias710219 · Sep 8, 2023 · e9c64da · e9c64da
1 parent 8ab2594
commit e9c64da
Show file tree

Hide file tree

Showing 15 changed files with 311 additions and 0 deletions.
diff --git a/css/css-masking/clip-path/clip-path-borderBox-1e.html b/css/css-masking/clip-path/clip-path-borderBox-1e.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Masking: clip path with border-box and border-radius</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box">
+<link rel="match" href="reference/green-circle-100x100.html">
+<meta name="fuzzy" content="maxDifference=0-112; totalPixels=0-388">
+<meta name="assert" content="Check that the 'clip-path' property supports border-box with border-radius.">
+
+<style>
+  .clipped {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    clip-path: border-box;
+    border: 25px solid green;
+    border-radius: 50px;
+    /* This outline draws outside the border box and should be clipped. */
+    outline: 8px solid red;
+  }
+</style>
+<div class="clipped"></div>
diff --git a/css/css-masking/clip-path/clip-path-contentBox-1e.html b/css/css-masking/clip-path/clip-path-contentBox-1e.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSS Masking: clip path with content-box and border-radius</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-content-box">
+<link rel="match" href="reference/green-circle-100x100.html">
+<meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-374">
+<meta name="assert" content="Check that the 'clip-path' property supports content-box with border-radius.">
+
+<style>
+  body { margin: 0; }
+  .clipped {
+    display: inline-block;
+    clip-path: content-box;
+    /* This background draws in the padding and should be clipped. */
+    background-color: red;
+    padding: 4px;
+    border-radius: 58px;
+    /* This border draws outside the content box and should be clipped. */
+    border: 4px solid darkred;
+    /* This outline draws outside the content box and should be clipped. */
+    outline: 100px solid maroon;
+  }
+  .content {
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<div class="clipped">
+  <div class="content"></div>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-007-ref.html b/css/css-masking/clip-path/clip-path-inline-007-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    clip-path: circle(50%);
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-007.html b/css/css-masking/clip-path/clip-path-inline-007.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>clip-path on inline with border-box and border-radius</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-border-box">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box">
+<link rel="match" href="clip-path-inline-007-ref.html">
+<meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-325">
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    border-radius: 50px;
+    clip-path: border-box;
+    color: green;
+    /* This outline draws outside the border box and should be clipped. */
+    outline: 8px solid red;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-008-ref.html b/css/css-masking/clip-path/clip-path-inline-008-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    clip-path: circle(50%);
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-008.html b/css/css-masking/clip-path/clip-path-inline-008.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>clip-path on inline with margin-box and border-radius</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box">
+<link rel="match" href="clip-path-inline-008-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-42">
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 50px/1 Ahem;
+    line-height: 50px;
+  }
+  .container > span {
+    margin: 25px;
+    border-radius: 50px;
+    clip-path: margin-box;
+    color: green;
+    /* This outline draws far outside the margin box and should be partially clipped. */
+    outline: 200px solid green;
+    /* Disables margin collapsing. */
+    float: left;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-009-ref.html b/css/css-masking/clip-path/clip-path-inline-009-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    margin-left: 50px;
+    clip-path: circle(50%);
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-009.html b/css/css-masking/clip-path/clip-path-inline-009.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>clip-path on inline with content-box and border-radius</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-content-box">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box">
+<link rel="match" href="clip-path-inline-009-ref.html">
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    padding: 50px;
+    border-radius: 100px;
+    clip-path: content-box;
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-010-ref.html b/css/css-masking/clip-path/clip-path-inline-010-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    clip-path: circle(50%);
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-inline-010.html b/css/css-masking/clip-path/clip-path-inline-010.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>clip-path on inline with padding-box and border-radius</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-padding-box">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box">
+<link rel="match" href="clip-path-inline-010-ref.html">
+<meta name="fuzzy" content="maxDifference=0-43; totalPixels=0-319">
+<meta content="ahem" name="flags">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 100px/1 Ahem;
+    line-height: 100px;
+  }
+  .container > span {
+    margin-left: -8px;
+    border-radius: 58px;
+    clip-path: padding-box;
+    color: green;
+    /* This border draws outside the padding box and should be clipped. */
+    border: 8px solid red;
+  }
+</style>
+<p>Test passes if there is a filled green circle with radius 50px.
+<div class="container">
+  <span>X</span>
+</div>
diff --git a/css/css-masking/clip-path/clip-path-marginBox-1c.html b/css/css-masking/clip-path/clip-path-marginBox-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>CSS Masking: clip path with margin-box and border-radius</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box">
+<link rel="match" href="reference/green-circle-100x100.html">
+<meta name="fuzzy" content="maxDifference=0-98; totalPixels=0-287">
+<meta name="assert" content="Check that the 'clip-path' property supports margin-box with border-radius.">
+
+<style>
+  .clipped {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    clip-path: margin-box;
+    border-radius: 50px;
+    /* This outline draws far outside the margin box and should be partially clipped. */
+    outline: 200px solid green;
+    margin: 25px;
+    /* Disables margin collapsing. */
+    float: left;
+  }
+</style>
+<div class="clipped"></div>
diff --git a/css/css-masking/clip-path/clip-path-marginBox-1d-ref.html b/css/css-masking/clip-path/clip-path-marginBox-1d-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    border-radius: 34.4px;
+    border: 25px solid green;
+  }
+</style>
+<div></div>
diff --git a/css/css-masking/clip-path/clip-path-marginBox-1d.html b/css/css-masking/clip-path/clip-path-marginBox-1d.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSS Masking: clip path with margin-box and border-radius when the ratio of border-radius/margin is less than 1</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-margin-box">
+<link rel="match" href="clip-path-marginBox-1d-ref.html">
+<meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-317">
+<meta name="assert" content="Check that the 'clip-path' property supports margin-box with border-radius.">
+
+<style>
+  .clipped {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    clip-path: margin-box;
+    border-radius: 10px;
+    /* This outline draws far outside the margin box and should be partially clipped. */
+    outline: 200px solid green;
+    margin: 50px;
+    /* Disables margin collapsing. */
+    float: left;
+  }
+</style>
+<!--
+  Spec: If the ratio of border-radius/margin is less than 1, and margin is
+        positive, then the margin box corner radius is
+        border-radius + margin * (1 + (ratio-1)^3).
+
+  This test has a border-radius of 10 and a margin of 50, and should use a
+  margin box corner radius of: 10 + 50 * (1 + (10/50-1)^3) = 34.4
+-->
+<div class="clipped"></div>
diff --git a/css/css-masking/clip-path/clip-path-paddingBox-1e.html b/css/css-masking/clip-path/clip-path-paddingBox-1e.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Masking: clip path with padding-box and border-radius</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-padding-box">
+<link rel="match" href="reference/green-circle-100x100.html">
+<meta name="fuzzy" content="maxDifference=0-62; totalPixels=0-344">
+<meta name="assert" content="Check that the 'clip-path' property supports padding-box with border-radius.">
+
+<style>
+  body { margin: 0; }
+  .clipped {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    clip-path: padding-box;
+    /* This border draws outside the padding box and should be clipped. */
+    border: 8px solid red;
+    border-radius: 58px;
+  }
+</style>
+<div class="clipped"></div>
diff --git a/css/css-masking/clip-path/reference/green-circle-100x100.html b/css/css-masking/clip-path/reference/green-circle-100x100.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green; border-radius: 50px;"></div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!DOCTYPE html>
		<div style="width: 100px; height: 100px; background-color: green; border-radius: 50px;"></div>