commit 055836804e701a7f6f6dfd3c3f222cf0f7f98ab9 parent d2f5f00844a6b09e506d38c6126e32ae0311b4b7 Author: Noam Rosenthal <nrosenthal@chromium.org> Date: Fri, 31 Oct 2025 08:55:06 +0000 Bug 1996830 [wpt PR 55709] - Fix inset box-shadow rendering of concave corner-shapes, a=testonly Automatic update from web-platform-tests Fix inset box-shadow rendering of concave corner-shapes As per https://github.com/w3c/csswg-drafts/issues/12961, the inset shadow should follow the border contour. Putting the new behavior behind a flag as it changes behavior of a shipped feature. Bug: 438476063 Change-Id: I17fdaa7c2b473f5e822f95661a89facf6cdfcc93 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7090137 Commit-Queue: Noam Rosenthal <nrosenthal@google.com> Reviewed-by: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/main@{#1536563} -- wpt-commits: 35ae9a5d5675effce19a8495bb8abb394b9fce6a wpt-pr: 55709 Diffstat:
| M | testing/web-platform/tests/css/css-borders/corner-shape/corner-shape-inset-shadow-ref.html | | | 42 | +++++++++++++++++++++++------------------- |
| M | testing/web-platform/tests/css/css-borders/corner-shape/corner-shape-inset-shadow.html | | | 6 | +++--- |
2 files changed, 26 insertions(+), 22 deletions(-)
diff --git a/testing/web-platform/tests/css/css-borders/corner-shape/corner-shape-inset-shadow-ref.html b/testing/web-platform/tests/css/css-borders/corner-shape/corner-shape-inset-shadow-ref.html @@ -2,35 +2,39 @@ <head> <style> .target { - --spread: 7px; - --offset-x: 10px; - --offset-y: 12px; - --width: 200px; - --height: 200px; - --border-width: 5px; - width: var(--width); - height: var(--height); + width: 200px; + height: 200px; box-sizing: border-box; corner-shape: bevel notch squircle scoop; - border-radius: 30%; - border: var(--border-width) solid purple; + border-radius: 20%; overflow: clip; - background: blue; position: relative; } - .target::after { + .target::before { content: " "; display: block; background: green; + border: 30px solid blue; corner-shape: inherit; - border-radius: 48px; - position: relative; - box-sizing: inherit; - left: calc(var(--offset-x) + var(--spread)); - top: calc(var(--offset-y) + var(--spread)); - width: calc(var(--width) - var(--spread) * 2 - var(--border-width) * 2); - height: calc(var(--height) - var(--spread) * 2 - var(--border-width) * 2); + border-radius: inherit; + position: absolute; + left: -5px; + top: 5px; + width: 100%; + height: 100%; + box-sizing: border-box; + } + + .target::after { + content: " "; + display: block; + border: 20px solid purple; + corner-shape: inherit; + border-radius: inherit; + position: absolute; + inset: 0; + box-sizing: border-box; } </style> </head> diff --git a/testing/web-platform/tests/css/css-borders/corner-shape/corner-shape-inset-shadow.html b/testing/web-platform/tests/css/css-borders/corner-shape/corner-shape-inset-shadow.html @@ -9,10 +9,10 @@ height: 200px; box-sizing: border-box; corner-shape: bevel notch squircle scoop; - border-radius: 30%; + border-radius: 20%; background: green; - border: 5px solid purple; - box-shadow: 10px 12px 0 7px blue inset; + border: 20px solid purple; + box-shadow: -5px 5px 0 10px blue inset; } </style> </head>