Skip to content

Commit 5317966

Browse files
skobes-chromiumchromium-wpt-export-bot
skobes-chromium
authored and
chromium-wpt-export-bot
committed
ScopedVT: Preserve pseudo layout tree when scope is reattached.
Transition pseudos are special - their layout trees are constructed in a separate step (StyleEngine::RebuildTransitionPseudoLayoutTrees) that runs after the "normal" Element::RebuildLayoutTree descent. That meant that if the scope was rebuilt due to a style change, its pseudos would lose their existing layout objects during the scope's Node::DetachLayoutTree, and RebuildTransitionPseudoLayoutTrees didn't fix it because the pseudos are not marked NeedsReattachLayoutTree(). With this change, the transition pseudos hold on to their layout objects while the scope is running Element::RebuildLayoutTree. Bug: 432502908 Change-Id: I5ce8aa5dc5975eddf63c66124e4374552cfe27b9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6777357 Commit-Queue: Steve Kobes <skobes@chromium.org> Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1491622}
1 parent 8c8776e commit 5317966

1 file changed

Lines changed: 53 additions & 0 deletions

File tree

‎css/css-view-transitions/scoped/display-change.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<head>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="content-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<script src="/web-animations/testcommon.js"></script>
8+
<style>
9+
10+
body { margin: 20px }
11+
#scope {
12+
position: relative; z-index: 0; background: pink;
13+
border: 5px dashed purple; padding: 5px;
14+
width: 180px; height: 120px;
15+
}
16+
#part {
17+
position: relative; z-index: 0; background: lightgrey;
18+
border: 5px solid blue; padding: 5px;
19+
width: 120px; height: 60px;
20+
left: 20px; top: 20px;
21+
view-transition-name: foo;
22+
}
23+
24+
#scope::view-transition { background: yellow; }
25+
#scope::view-transition-group(foo) { animation-play-state: paused; }
26+
#scope::view-transition-new(foo) { animation: unset; opacity: 1; }
27+
#scope::view-transition-old(foo) { animation: unset; opacity: 0; }
28+
29+
</style>
30+
</head>
31+
<body>
32+
<div id=scope>
33+
<div id=part>
34+
PARTICIPANT
35+
</div>
36+
</div>
37+
<script>
38+
39+
const scope = document.querySelector("#scope");
40+
failIfNot(scope.startViewTransition, "Missing element.startViewTransition");
41+
42+
async function runTest() {
43+
await waitForCompositorReady();
44+
scope.startViewTransition(() => {
45+
scope.style.display = "flex";
46+
requestAnimationFrame(takeScreenshot)
47+
});
48+
}
49+
onload = () => runTest();
50+
51+
</script>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)