commit 8f26660f982f73a6cf82beb538fb7f0a72d4b204
parent c37aee69a6433256105a4aca136ad8dc2fe9f96a
Author: Daniil Sakhapov <sakhapov@chromium.org>
Date: Mon, 27 Oct 2025 10:06:25 +0000
Bug 1996114 [wpt PR 55628] - Add half-border-box geometry box for border-shape, a=testonly
Automatic update from web-platform-tests
Add half-border-box geometry box for border-shape
The half-border-box represents a reference box positioned halfway
between the border-box and padding-box. When used with border-shape,
this centers stroke rendering on the shape path, with half the stroke
extending toward the border edge and half toward the padding edge,
imitating the regular border behaviour.
Change of a default geometry box for two shapes case is for next CL.
Tests can be wrong now.
Fixed: 448653232
Change-Id: I6312752090e6256eb7a4c0a1cfb6b3f83125e3c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7075032
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1534444}
--
wpt-commits: dc38e6c8c954c0742b2336704ad25558a667b914
wpt-pr: 55628
Diffstat:
5 files changed, 151 insertions(+), 3 deletions(-)
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-double-shape-default-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-double-shape-default-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
+<style>
+body {
+ margin: 0;
+}
+.container {
+ display: flex;
+ gap: 40px;
+ padding: 30px;
+}
+.box {
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ border: 20px solid rgba(255, 0, 0, 0.5);
+ fill: rgba(0, 255, 0, 0.3);
+}
+/* Both should be identical with explicit border-box */
+#double-implicit {
+ border-shape: circle(50%) border-box circle(40%) border-box;
+}
+#double-explicit {
+ border-shape: circle(50%) border-box circle(40%) border-box;
+}
+</style>
+<div class="container">
+ <div class="box" id="double-implicit"></div>
+ <div class="box" id="double-explicit"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-double-shape-default.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-double-shape-default.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Borders Test: double-shape border-shape defaults to border-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
+<link rel="match" href="border-shape-double-shape-default-ref.html">
+<style>
+body {
+ margin: 0;
+}
+.container {
+ display: flex;
+ gap: 40px;
+ padding: 30px;
+}
+.box {
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+ border: 20px solid rgba(255, 0, 0, 0.5);
+ fill: rgba(0, 255, 0, 0.3);
+}
+/* Double shape - should default to border-box for both */
+#double-implicit {
+ border-shape: circle(50%) circle(40%);
+}
+/* Explicit border-box should match */
+#double-explicit {
+ border-shape: circle(50%) border-box circle(40%) border-box;
+}
+</style>
+<div class="container">
+ <div class="box" id="double-implicit"></div>
+ <div class="box" id="double-explicit"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-half-border-box-default-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-half-border-box-default-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<style>
+body {
+ margin: 0;
+}
+.container {
+ display: flex;
+ gap: 32px;
+ padding: 20px;
+}
+.target {
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+}
+/* Circle with explicit half-border-box */
+#circle {
+ border: 10px solid red;
+ border-shape: circle(50%) half-border-box;
+}
+/* Ellipse with asymmetric borders and explicit half-border-box */
+#ellipse {
+ border-top: 8px solid green;
+ border-right: 12px solid green;
+ border-bottom: 8px solid green;
+ border-left: 12px solid green;
+ border-shape: ellipse(50% 50%) half-border-box;
+}
+/* Inset with uniform borders and explicit half-border-box */
+#inset {
+ border: 15px solid blue;
+ border-shape: inset(10% round 20%) half-border-box;
+}
+</style>
+<div class="container">
+ <div class="target" id="circle"></div>
+ <div class="target" id="ellipse"></div>
+ <div class="target" id="inset"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-half-border-box-default.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-half-border-box-default.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Borders Test: border-shape defaults to half-border-box for single shape</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
+<link rel="match" href="border-shape-half-border-box-default-ref.html">
+<style>
+body {
+ margin: 0;
+}
+.container {
+ display: flex;
+ gap: 32px;
+ padding: 20px;
+}
+.target {
+ width: 100px;
+ height: 100px;
+ background: lightblue;
+}
+/* Circle with 10px border - shape should be centered in border */
+#circle {
+ border: 10px solid red;
+ border-shape: circle(50%);
+}
+/* Ellipse with asymmetric borders */
+#ellipse {
+ border-top: 8px solid green;
+ border-right: 12px solid green;
+ border-bottom: 8px solid green;
+ border-left: 12px solid green;
+ border-shape: ellipse(50% 50%);
+}
+/* Inset with uniform borders */
+#inset {
+ border: 15px solid blue;
+ border-shape: inset(10% round 20%);
+}
+</style>
+<div class="container">
+ <div class="target" id="circle"></div>
+ <div class="target" id="ellipse"></div>
+ <div class="target" id="inset"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-borders/tentative/parsing/border-shape-computed.html b/testing/web-platform/tests/css/css-borders/tentative/parsing/border-shape-computed.html
@@ -16,10 +16,13 @@ test_computed_value("border-shape", "shape(from 0px 0px, hline to 100px, vline t
test_computed_value("border-shape", "circle() circle()", "circle()");
test_computed_value("border-shape", "circle() polygon(10px 10px, 100px 10px, 10px 100px)");
test_computed_value("border-shape", "circle() content-box");
-test_computed_value("border-shape", "circle() border-box", "circle()");
+test_computed_value("border-shape", "circle() border-box");
test_computed_value("border-shape", "circle() border-box polygon(10px 10px, 100px 10px, 10px 100px) border-box", "circle() polygon(10px 10px, 100px 10px, 10px 100px)");
test_computed_value("border-shape", "circle() padding-box polygon(10px 10px, 100px 10px, 10px 100px) border-box", "circle() padding-box polygon(10px 10px, 100px 10px, 10px 100px)");
test_computed_value("border-shape", "circle() padding-box polygon(10px 10px, 100px 10px, 10px 100px) padding-box", "circle() padding-box polygon(10px 10px, 100px 10px, 10px 100px) padding-box");
test_computed_value("border-shape", "circle() polygon(10px 10px, 100px 10px, 10px 100px) border-box", "circle() polygon(10px 10px, 100px 10px, 10px 100px)");
test_computed_value("border-shape", "circle() polygon(10px 10px, 100px 10px, 10px 100px) content-box", "circle() polygon(10px 10px, 100px 10px, 10px 100px) content-box");
-</script>
-\ No newline at end of file
+test_computed_value("border-shape", "circle() half-border-box", "circle()");
+test_computed_value("border-shape", "circle() half-border-box circle() half-border-box", "circle()");
+test_computed_value("border-shape", "circle() border-box circle() border-box", "circle() border-box");
+</script>
