commit ffbfe7ec8ba357205fd55fa69799fff53a83c29d
parent bcd74288394835dc01c95da7144ae5e918bc652d
Author: Vladimir Levin <vmpstr@chromium.org>
Date: Fri, 31 Oct 2025 08:52:50 +0000
Bug 1996597 [wpt PR 55658] - VT: Hoist the backdrop filter from effect to vt effect when capturing., a=testonly
Automatic update from web-platform-tests
VT: Hoist the backdrop filter from effect to vt effect when capturing.
This patch lifts the backdrop filter effect from the effect node on
a participating view transition node to the view transition effect node
in order to still apply during the capture phase.
The capture phase is the only phase that needs this adjustment since
backdrop filter is applied to the ::view-transition-group(*) pseudos
during animation (per spec).
Without this change, the view transition effect node which generates
a render pass causes an inadvertent backdrop filter root-like behavior
prevent the backdrop filter from applying to the ancestor render pass.
R=pdr@chromium.org
Bug: 425634679
Change-Id: Idece98fed98e84449cf7bf92f367c3ae3bb628c9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7049498
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Reviewed-by: Stefan Zager <szager@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1535932}
--
wpt-commits: 6186867f5f7e6a6545010f75d3a2bd0234adfa80
wpt-pr: 55658
Diffstat:
4 files changed, 85 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-while-promise-pending-ref.html b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-while-promise-pending-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+body {
+ background: lightblue;
+}
+iframe {
+ border: none;
+}
+</style>
+<iframe src="support/backdrop-filter-while-promise-pending-iframe-ref.html"></iframe>
diff --git a/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-while-promise-pending.html b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-while-promise-pending.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: backdrop filter while promise pending</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="backdrop-filter-while-promise-pending-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+ background: lightblue;
+}
+iframe {
+ border: none;
+}
+</style>
+<iframe src="support/backdrop-filter-while-promise-pending-iframe.html"></iframe>
+<script>
+ window.addEventListener("message", (e) => {
+ if (e.data === "capture") {
+ document.querySelector("iframe").contentWindow.postMessage("start", "*");
+ window.addEventListener("message", (e) => {
+ if (e.data === "promise_pending") {
+ takeScreenshot();
+ }
+ });
+ }
+ });
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/backdrop-filter-while-promise-pending-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/support/backdrop-filter-while-promise-pending-iframe-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<style>
+body {
+ background: green;
+ margin: 0;
+}
+
+.backdrop-filter {
+ width: 100px;
+ height: 100px;
+ border: 1px solid white;
+ backdrop-filter: invert(1);
+}
+</style>
+
+<div class="backdrop-filter"></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/backdrop-filter-while-promise-pending-iframe.html b/testing/web-platform/tests/css/css-view-transitions/support/backdrop-filter-while-promise-pending-iframe.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<style>
+body {
+ background: green;
+ margin: 0;
+}
+
+.backdrop-filter {
+ width: 100px;
+ height: 100px;
+ border: 1px solid white;
+ backdrop-filter: invert(1);
+ view-transition-name: foo;
+}
+</style>
+
+
+<div class="backdrop-filter"></div>
+
+<script>
+window.addEventListener("message", (e) => {
+ if (e.data === "start") {
+ document.startViewTransition(async () => {
+ window.parent.postMessage("promise_pending", "*");
+ // Don't ever resolve.
+ await new Promise(() => {});
+ });
+ }
+});
+window.parent.postMessage("capture", "*");
+</script>
