commit c4bcfa7d94cf219642172f9be718c73258b7ca38
parent 49af6e7c16cf432eddcbf5a18f7db5cb1284bced
Author: Blink WPT Bot <blink-w3c-test-autoroller@chromium.org>
Date: Mon, 27 Oct 2025 10:06:48 +0000
Bug 1989993 [wpt PR 54978] - [BackdropFilter] Create a backdrop root for clip path elements, a=testonly
Automatic update from web-platform-tests
[BackdropFilter] Create a backdrop root for clip path elements (#54978)
Per CSS Filter spec
(https://drafts.fxtf.org/filter-effects-2/#BackdropRootTriggers),
clip-path element should create backdrop roots. This change ensures
correct backdrop-filter sampling by creating effect nodes.
Update the existing WPT test
backdrop-filter-backdrop-root-clip-path.html to use clip-path:
inset(-100%) instead of inset(10%). Since a positive inset value shrinks
the clipping area, it cannot expose issues where the backdrop root is
incorrectly sampled from its parent. Using a negative inset expands the
clipping area, making such issues detectable. Also, add a new WPT test
that applies a clip path to an element with display: inline to ensure
our fix works in that scenario as well.
Bug: 40947850
Change-Id: I16ab10d9ef5ae06e11db1c462be20257a2462668
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6920449
Commit-Queue: Wangsong Jin <wangsongjin@microsoft.com>
Reviewed-by: Claire Chambers <clchambers@microsoft.com>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1518796}
Co-authored-by: Wangsong Jin <wangsongjin@microsoft.com>
--
wpt-commits: 9b7f03e8e781c0172bd5b3d52ff5f0a991568b92
wpt-pr: 54978
Diffstat:
4 files changed, 71 insertions(+), 2 deletions(-)
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-2-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept with clip-path with display: inline (reference)</title>
+<style>
+ .grandparent {
+ background: yellow;
+ padding: 100px;
+ }
+
+ .clipped-container {
+ position: relative;
+ background-color: rgb(0, 255, 0);
+ padding: 100px;
+ display: inline;
+ }
+
+ .child {
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ width: 400px;
+ height: 400px;
+ display: inline;
+ }
+</style>
+
+<div class="grandparent">
+ <div class="clipped-container">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-2.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept with clip-path with display: inline</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
+<link rel="match" href="backdrop-filter-backdrop-root-clip-path-2-ref.html">
+<style>
+ .grandparent {
+ display: block;
+ background: yellow;
+ padding: 100px;
+ }
+
+ .clipped-container {
+ position: relative;
+ clip-path: inset(-50px);
+ background-color: rgb(255, 0, 255);
+ padding: 100px;
+ display: inline;
+ }
+
+ .backdrop-filtered {
+ backdrop-filter: invert(100%);
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ width: 400px;
+ height: 400px;
+ display: inline;
+ }
+</style>
+
+<!-- The backdrop-filter should sample content from the clipped-container (backdrop root),
+ not from layers outside it (like grandparent). -->
+<div class="grandparent">
+ <div class="clipped-container">
+ <div class="backdrop-filtered"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html
@@ -3,7 +3,7 @@
<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css">
<div class=container>
- <div class=testcase style="clip-path: xywh(5px 5px 40px 40px);">
+ <div class=testcase>
<div></div>
<div class="box2" style="background: #00ffff;"></div>
</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html
@@ -11,7 +11,7 @@
- An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
<div class=container>
<div class=testcase>
- <div style="clip-path: inset(10%);"><div></div></div>
+ <div style="clip-path: inset(-100%);"><div></div></div>
</div>
<div class=testcase>
<div style="will-change:clip-path;"><div></div></div>
