commit dea522ce628265c9b9b2a6dcb18fb3b7d5ecb5bf
parent b0492f19a4ebdd954e6eb84232fb96ead7677d53
Author: Peng Zhou <zhoupeng.1996@bytedance.com>
Date: Mon, 8 Dec 2025 12:27:19 +0000
Bug 2004116 [wpt PR 56499] - Update paint properties for backdrop-filter when border-radius changes, a=testonly
Automatic update from web-platform-tests
Update paint properties for backdrop-filter when border-radius changes
`backdrop-filter` rendering is clipped by the element’s border radii.
Previously, updates to border-radius did not trigger a paint property
update for elements with non-initial `backdrop-filter`.
This patch adds a check for `BorderRadiusChanged` when the element has a
non-initial `backdrop-filter` and marks the element as needing a paint
property update. This keeps the filter bounds consistent with the visual
clipping.
Bug: 447660343
Change-Id: Ie019a22f54c1cebc9163282645355f74d8e2766d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7223670
Commit-Queue: Peng Zhou <zhoupeng.1996@bytedance.com>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1554162}
--
wpt-commits: 8934df5fa015dc3b57a9b284c51a947db73d53f9
wpt-pr: 56499
Diffstat:
2 files changed, 72 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius-change-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius-change-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Backdrop filter updates correctly when border-radius 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;
+ }
+ .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>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius-change.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius-change.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Backdrop filter updates correctly when border-radius 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-border-radius-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: 75px;
+ }
+ .inline-bg {
+ margin: -100px 0px;
+ }
+ .target-inline {
+ font-size: 100px;
+ background: green;
+ backdrop-filter: blur(5px);
+ border-radius: 5px;
+ }
+</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.borderRadius = '150px';
+ document.querySelector('.target-inline').style.borderRadius = '150px';
+ });
+ });
+ });
+</script>
