commit 03756741ebaeb36695b1470f6c8923ed56c55eb8
parent f37b7bd1f23ffcf5a50bb18efb771d64d9df679d
Author: Peng Zhou <zhoupeng.1996@bytedance.com>
Date: Mon, 8 Dec 2025 12:29:28 +0000
Bug 2004567 [wpt PR 56547] - Add WPT for backdrop-filter invalidation on corner-shape updates, a=testonly
Automatic update from web-platform-tests
Add WPT for backdrop-filter invalidation on corner-shape updates
This CL adds a new test `backdrop-filter-corner-shape-change.html` to
cover the case where changing `corner-shape` should correctly trigger an
update of backdrop-filter rendering.
Bug: 447660343
Change-Id: I6d6e708982ea911e6b676b67f94c69a3af569f8a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7231250
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Peng Zhou <zhoupeng.1996@bytedance.com>
Cr-Commit-Position: refs/heads/main@{#1555080}
--
wpt-commits: e7100e93b2fdc4d6e401ec3595118f5198f4308f
wpt-pr: 56547
Diffstat:
2 files changed, 74 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-corner-shape-change-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-corner-shape-change-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Backdrop filter updates correctly when corner-shape changes</title>
+<link rel="author" href="mailto:zhoupeng.1996@bytedance.com">
+<style>
+ h1 {
+ font-size: 100px;
+ }
+ .target {
+ width: 300px;
+ height: 300px;
+ background: green;
+ transform: translate(50px, -150px);
+ backdrop-filter: blur(5px);
+ border-radius: 150px;
+ corner-shape: scoop;
+ }
+ .inline-bg {
+ margin: -100px 0px;
+ }
+ .target-inline {
+ font-size: 100px;
+ background: green;
+ backdrop-filter: blur(5px);
+ border-radius: 150px;
+ corner-shape: scoop;
+ }
+</style>
+<h1>Hello World</h1>
+<div class="target"></div>
+<h1 class="inline-bg">Hello World</h1>
+<span class="target-inline">Hello World</span>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-corner-shape-change.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-corner-shape-change.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Backdrop filter updates correctly when corner-shape changes</title>
+<link rel="author" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filter-corner-shape-change-ref.html">
+<style>
+ h1 {
+ font-size: 100px;
+ }
+ .target {
+ width: 300px;
+ height: 300px;
+ background: green;
+ transform: translate(50px, -150px);
+ backdrop-filter: blur(5px);
+ border-radius: 150px;
+ }
+ .inline-bg {
+ margin: -100px 0px;
+ }
+ .target-inline {
+ font-size: 100px;
+ background: green;
+ backdrop-filter: blur(5px);
+ border-radius: 150px;
+ }
+</style>
+<h1>Hello World</h1>
+<div class="target"></div>
+<h1 class="inline-bg">Hello World</h1>
+<span class="target-inline">Hello World</span>
+<script>
+ window.addEventListener('load', (e) => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.querySelector('.target').style.cornerShape = 'scoop';
+ document.querySelector('.target-inline').style.cornerShape = 'scoop';
+ });
+ });
+ });
+</script>
