commit 3f68aecb816ce452599988b579cfca787e66f426
parent 91903eea095ec9f8ec46adab7d6f7765f0f7a1ab
Author: Kevin Ellis <kevers@google.com>
Date: Thu, 9 Oct 2025 16:28:26 +0000
Bug 1991120 [wpt PR 55094] - [scoped-vt] Fix crash with style update during transition, a=testonly
Automatic update from web-platform-tests
[scoped-vt] Fix crash with style update during transition
SelectionChecker was assuming that any view-transitions are associated
with the documentElement. This code had not been updated for scoped
view-transitions. This patch fixes that oversight.
Bug: 433699862
Change-Id: I95fbde616108177971d1803d87831e3b63ec3089
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6972963
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1521453}
--
wpt-commits: 9ded49549f9bcca4443063537f6ee7b1c6d8835f
wpt-pr: 55094
Diffstat:
2 files changed, 132 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/display-change-during-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/scoped/display-change-during-transition-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+ <style>
+ .box {
+ position: absolute;
+ z-index: 0;
+ will-change: transform;
+ contain: strict;
+ }
+ #scope {
+ position: absolute;
+ background: #eee;
+ left: 40px;
+ top: 40px;
+ width: 490px;
+ height: 190px;
+ }
+ .part {
+ left: 30px;
+ top: 30px;
+ width: 120px;
+ height: 120px;
+ background-color: purple;
+ transform: translateX(150px);
+ outline: 5px solid green;
+ }
+ </style>
+</head>
+<body>
+ <div id=scope class=box>
+ <div class="part box"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scoped/display-change-during-transition.html b/testing/web-platform/tests/css/css-view-transitions/scoped/display-change-during-transition.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+ <link rel="match" href="display-change-during-transition-ref.html">
+ <meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-14400">
+ <style>
+ .tr {
+ view-transition-name: demo;
+ }
+ ::view-transition {
+ pointer-events: none;
+ }
+ ::view-transition-group(demo) {
+ /* freeze animation at midpoint */
+ animation-duration: 10000s;
+ animation-delay: -5000s;
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
+ display: block;
+ outline: 5px solid red;
+ }
+ ::view-trnasition-image-pair(demo),
+ ::view-transition-old(demo),
+ ::view-transtion-new(demo) {
+ /* No cross-fade */
+ animaton: unset;
+ }
+ .box {
+ position: absolute;
+ z-index: 0;
+ will-change: transform;
+ contain: strict;
+ }
+ #scope {
+ position: absolute;
+ background: #eee;
+ left: 40px;
+ top: 40px;
+ width: 490px;
+ height: 190px;
+ }
+ .part {
+ left: 30px;
+ top: 30px;
+ width: 120px;
+ height: 120px;
+ background-color: purple;
+ }
+ .part.state2 {
+ transform: translateX(300px);
+ }
+ </style>
+</head>
+<script src="/common/reftest-wait.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<body>
+ <div id=scope class=box>
+ <div class="part box tr state1"></div>
+ </div>
+</body>
+<script>
+ function animationStartPromise() {
+ return new Promise(resolve => {
+ const listener = event => {
+ document.removeEventListener('animationstart', listener);
+ resolve();
+ };
+ document.addEventListener('animationstart', listener);
+ });
+ }
+
+ window.onload = async () => {
+ const animationStarted = animationStartPromise();
+ const vt = scope.startViewTransition(() => {
+ scope.querySelector('.part').classList.toggle('state2');
+ });
+ await vt.ready;
+ await animationStarted;
+ await waitForNextFrame();
+ await runAndWaitForFrameUpdate(() => {
+ const new_style = document.createElement('style');
+ new_style.innerText =
+ "::view-transition-group(demo):not(:only-child) { " +
+ " display: flex;" +
+ " outline: 5px solid green;" +
+ "}";
+ document.head.appendChild(new_style);
+ });
+ takeScreenshot();
+ };
+</script>
+</html>
