Skip to content

Commit cdb2a27

Browse files
vmpstrchromium-wpt-export-bot
vmpstr
authored and
chromium-wpt-export-bot
committed
Nested VT: Ensure that intermediate render passes can be skipped
If there is a render pass between two view transition render passes in the ancestor chain, then previously we wouldn't know to duplicate that render pass and instead end up drawing VT elements into it (for display) and then drawing it into the ancestor VT element (also for display). Later we would capture these as snapshot. Now, we mark the intermediate render pass as possibly having VT contributions and duplicate it as well. That way, for display we still do the same thing, but now we correctly identify that for capture the ancestor VT skips the intermediate pass. Likewise the child passes skip appending into a for-capture intermediate pass. [email protected], [email protected] Bug: 402411245 Change-Id: I26e62825409d70e0da5ef360244f4d30cb941b39 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6344451 Reviewed-by: Kyle Charbonneau <[email protected]> Commit-Queue: Vladimir Levin <[email protected]> Cr-Commit-Position: refs/heads/main@{#1435538}
1 parent b115b67 commit cdb2a27

File tree

2 files changed

+93
-0
lines changed

2 files changed

+93
-0
lines changed

‎css/css-view-transitions/nested/nested-root-capture-with-clip-ref.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Nested View Transitions root capture with border radius (ref)</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="author" href="mailto:[email protected]">
6+
7+
<style>
8+
#clipper {
9+
overflow: clip;
10+
height: 200px;
11+
width: 100px;
12+
border-radius: 50%;
13+
background: rebeccapurple;
14+
}
15+
16+
#i0 {
17+
background: pink;
18+
margin-bottom: 10px;
19+
height: 20px;
20+
}
21+
</style>
22+
23+
<div id=clipper>
24+
<div id=i0 class=item></div>
25+
</div>
26+
</html>

‎css/css-view-transitions/nested/nested-root-capture-with-clip.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>Nested View Transitions root capture with border radius</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="author" href="mailto:[email protected]">
6+
<link rel="match" href="nested-root-capture-with-clip-ref.html">
7+
<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-400">
8+
<script src="/common/reftest-wait.js"></script>
9+
<script src="/dom/events/scrolling/scroll_support.js"></script>
10+
11+
<style>
12+
:root { view-transition-name: none }
13+
#clipper {
14+
view-transition-group: contain;
15+
view-transition-name: clipper;
16+
overflow: clip;
17+
height: 200px;
18+
width: 100px;
19+
border-radius: 50%;
20+
background: rebeccapurple;
21+
}
22+
23+
.item {
24+
view-transition-name: match-element;
25+
view-transition-class: item;
26+
background: pink;
27+
margin-bottom: 10px;
28+
height: 20px;
29+
}
30+
#i0 {
31+
view-transition-name: none;
32+
will-change: transform;
33+
}
34+
::view-transition-group(clipper) {
35+
animation-play-state: pause;
36+
}
37+
::view-transition-new(clipper) {
38+
animation: unset;
39+
opacity: 0;
40+
}
41+
::view-transition-old(clipper) {
42+
animation: unset;
43+
opacity: 1;
44+
}
45+
::view-transition-group(*.item) {
46+
display: none;
47+
}
48+
</style>
49+
50+
<div id=clipper>
51+
<div id=i0 class=item></div>
52+
<div id=i1 class=item></div>
53+
<div id=i2 class=item></div>
54+
<div id=i3 class=item></div>
55+
</div>
56+
57+
<script>
58+
function runTest() {
59+
document.startViewTransition().ready.then(takeScreenshot);
60+
}
61+
62+
onload = async () => {
63+
await waitForCompositorReady();
64+
runTest();
65+
}
66+
</script>
67+
</html>

0 commit comments

Comments
 (0)