commit 2f48aa8c2bc8c3d21f1429a726cd146358772590
parent 683d92f04a4cb336530dadf09d4866507717aa9d
Author: Steve Kobes <skobes@chromium.org>
Date: Wed, 15 Oct 2025 08:21:15 +0000
Bug 1993473 [wpt PR 55308] - ScopedVT: Pause rendering inside the scope during the callback., a=testonly
Automatic update from web-platform-tests
ScopedVT: Pause rendering inside the scope during the callback.
This patch implements the pausing by painting a ForeignLayerDisplayItem
which refers to the snapshot layer that crrev.com/c/6714325 created.
This essentially replicates the approach taken by crbug.com/330920521
for document transitions in same-site iframes.
Bug: 405117383
Change-Id: Icaa2c4e9274131d87d0e0ec6470086369a34361a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6967476
Reviewed-by: Vladimir Levin <vmpstr@chromium.org>
Commit-Queue: Steve Kobes <skobes@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1526929}
--
wpt-commits: 1878e354c2d68321a1980de5c76664ba9cd87ec6
wpt-pr: 55308
Diffstat:
2 files changed, 92 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/pause-rendering-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/pause-rendering-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+* { box-sizing: border-box; }
+div { position: relative; z-index: 0; contain: strict;
+ display: inline-block; background: green;
+ left: 30px; top: 30px; width: 120px; height: 120px; }
+#scope { background: #eee;
+ left: 40px; top: 40px; width: 490px; height: 190px; }
+#tr { background: orange; left: 60px; }
+p { position: absolute; left: 100px; top: 5px; font-size: 30px; }
+
+</style>
+</head>
+<body>
+<div id=scope>
+ <div></div><div id=tr></div>
+</div>
+<p id=outside>TRANSITIONING</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/pause-rendering.html b/testing/web-platform/tests/css/css-view-transitions/scoped/pause-rendering.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<head>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="pause-rendering-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+
+#scope { view-transition-name: none; }
+::view-transition-group(*),
+::view-transition-old(*),
+::view-transition-new(*) { animation-play-state: paused; }
+#tr { view-transition-name: foo; }
+
+* { box-sizing: border-box; }
+div { position: relative; z-index: 0; contain: strict;
+ display: inline-block; background: green;
+ left: 30px; top: 30px; width: 120px; height: 120px; }
+#scope { background: #eee;
+ left: 40px; top: 40px; width: 490px; height: 190px; }
+#tr { background: orange; left: 60px; }
+p { position: absolute; left: 100px; top: 5px; font-size: 30px; }
+
+#bad { background: red; left: 90px; visibility: hidden; }
+
+</style>
+</head>
+<body>
+<div id=scope>
+ <div></div><div id=tr></div><div id=bad></div>
+</div>
+<p id=outside>OVERLAY</p>
+<script>
+
+const scope = document.querySelector("#scope");
+failIfNot(scope.startViewTransition, "Missing element.startViewTransition");
+
+async function raf() {
+ await new Promise(r => { requestAnimationFrame(r); });
+}
+
+async function runTest() {
+ await waitForCompositorReady();
+ await new Promise(finish => {
+ scope.startViewTransition(async () => {
+ // Scope's rendering should be frozen during callback.
+ // Scope is not self-participating, and contains
+ // (1) a pre-existing non-participant child,
+ // (2) a participant that changes color, and
+ // (3) a non-participant that becomes visible.
+ bad.style.visibility = "visible";
+ tr.style.background = "red";
+ outside.innerText = "TRANSITIONING";
+
+ await raf();
+ takeScreenshot();
+
+ // Finish test, transition never starts.
+ finish();
+ await new Promise(r => {});
+ });
+ })
+}
+onload = () => runTest();
+
+</script>
+</body>
+</html>
