commit b54e2d67d45c382c862031a88c0e79457a723293
parent d936831c94d37981d815161d116d4593a720ea6b
Author: Daniil Sakhapov <sakhapov@chromium.org>
Date: Mon, 27 Oct 2025 10:01:18 +0000
Bug 1995730 [wpt PR 55586] - Respect geometry box for border-shape painting, a=testonly
Automatic update from web-platform-tests
Respect geometry box for border-shape painting
This CL updates BorderShapePainter to fully support the geometry box
parameter for both the outer and inner shapes of the border-shape
property.
The reference rectangle for each shape is now computed according to its
specified geometry box by the callers before calling BoxPainterBase.
Bug: 443295354
Change-Id: I3045d2f29d83c4bfaa2f205e5b73d8ef0bc9beee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7041242
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1533460}
--
wpt-commits: 201223c93ff23ff585a97de1961c7c54de1ef098
wpt-pr: 55586
Diffstat:
2 files changed, 109 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box-ref.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<style>
+body {
+ margin: 0;
+}
+.container {
+ display: inline-block;
+}
+svg {
+ display: block;
+}
+</style>
+
+<div class="container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
+ <rect width="160" height="160" fill="palegoldenrod" />
+ <rect x="10" y="10" width="140" height="140" fill="thistle" />
+ <rect x="30" y="30" width="100" height="100" fill="lightblue" />
+ </svg>
+</div>
+
+<div class="container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
+ <rect width="160" height="160" fill="yellow" />
+ <rect x="10" y="10" width="140" height="140" fill="palegoldenrod" />
+ <rect x="20" y="20" width="120" height="120" fill="thistle" />
+ <rect x="30" y="30" width="100" height="100" fill="lightblue" />
+ </svg>
+</div>
+
+<div class="container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
+ <rect width="160" height="160" fill="yellow" />
+ <rect x="10" y="10" width="140" height="140" fill="thistle" />
+ <rect x="20" y="20" width="120" height="120" fill="palegoldenrod" />
+ <rect x="30" y="30" width="100" height="100" fill="lightblue" />
+ </svg>
+</div>
+
+<div class="container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
+ <rect width="160" height="160" fill="palegoldenrod" />
+ <rect x="30" y="30" width="100" height="100" fill="lightblue" />
+ </svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-geometry-box.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>CSS Borders Test: border-shape with geometry box</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
+<link rel="match" href="border-shape-geometry-box-ref.html">
+<style>
+body {
+ margin: 0;
+}
+.container {
+ display: inline-block;
+ background: yellow;
+}
+.test {
+ width: 100px;
+ height: 100px;
+ background: thistle;
+ padding: 10px;
+ margin: 10px;
+ border: 10px solid black;
+ fill: palegoldenrod;
+}
+.contents {
+ width: 100%;
+ height: 100%;
+ background: lightblue;
+}
+#margin-border {
+ border-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%) margin-box polygon(0 0, 100% 0, 100% 100%, 0 100%) border-box;
+}
+#border-padding {
+ border-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%) border-box polygon(0 0, 100% 0, 100% 100%, 0 100%) padding-box;
+}
+#padding-content {
+ border-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%) padding-box polygon(0 0, 100% 0, 100% 100%, 0 100%) content-box;
+}
+#margin-content {
+ border-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%) margin-box polygon(0 0, 100% 0, 100% 100%, 0 100%) content-box;
+}
+</style>
+
+<div class="container">
+ <div class="test" id="margin-border">
+ <div class="contents"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="test" id="border-padding">
+ <div class="contents"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="test" id="padding-content">
+ <div class="contents"></div>
+ </div>
+</div>
+
+<div class="container">
+ <div class="test" id="margin-content">
+ <div class="contents"></div>
+ </div>
+</div>
+
