Skip to content

Commit f82bcac

Browse files
kevers-googlechromium-wpt-export-bot
kevers-google
authored and
chromium-wpt-export-bot
committed
[scoped-vt] Apply vt-scope: auto during transition
Bug: 480860018 Change-Id: I60c01be553f2b68f240836565e4090a2cc0e4d27 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7547092 Commit-Queue: Kevin Ellis <kevers@chromium.org> Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1581067}
1 parent f2ddc7b commit f82bcac

File tree

3 files changed

+188
-0
lines changed

3 files changed

+188
-0
lines changed

‎css/css-view-transitions/scoped/scope-during-transition-1.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
7+
<title>Apply view-transition-scope: auto during transition</title>
8+
</head>
9+
<style>
10+
#scope {
11+
background-color: green;
12+
height: 100px;
13+
width: 100px;
14+
}
15+
16+
.explicit-auto {
17+
view-transition-scope: auto;
18+
}
19+
</style>
20+
<script src="/resources/testharness.js"></script>
21+
<script src="/resources/testharnessreport.js"></script>
22+
<body>
23+
<div id="scope"></div>
24+
</body>
25+
<script>
26+
27+
function assert_scope(expected_value, message) {
28+
const value = getComputedStyle(scope).viewTransitionScope;
29+
assert_equals(value, expected_value, message);
30+
}
31+
32+
async function finish_transition(transition) {
33+
await transition.ready;
34+
scope.getAnimations().forEach(a => a.finish());
35+
return transition.finished;
36+
}
37+
38+
async function skip_transition(test, transition) {
39+
try {
40+
transition.skipTransition();
41+
} catch (e) {}
42+
return transition.finished;
43+
}
44+
45+
promise_test(async t => {
46+
assert_scope('none', 'before transition');
47+
const vt = scope.startViewTransition();
48+
assert_scope('auto', 'during transition');
49+
await finish_transition(vt);
50+
assert_scope('none', 'after finishing transition');
51+
}, 'view-transition-scope updated to auto during transition and reset after ' +
52+
'finishing the transition');
53+
54+
promise_test(async t => {
55+
assert_scope('none', 'before transition');
56+
const vt = scope.startViewTransition();
57+
assert_scope('auto', 'during transition');
58+
await skip_transition(t, vt);
59+
assert_scope('none', 'after aborted transition');
60+
}, 'view-transition-scope updated to auto during transition and reset after ' +
61+
'aborting the transition');
62+
63+
promise_test(async t => {
64+
scope.classList.add('explicit-auto');
65+
t.add_cleanup(() => {
66+
scope.classList.remove('explicit-auto');
67+
});
68+
assert_scope('auto', 'before transition');
69+
const vt = scope.startViewTransition();
70+
assert_scope('auto', 'during transition');
71+
await finish_transition(t, vt);
72+
assert_scope('auto', 'after transition');
73+
}, 'Auto-reset of "view-transition-scope: auto" does not clobber an ' +
74+
'explicitly set value');
75+
</script>
76+
</html>

‎css/css-view-transitions/scoped/scope-during-transition-2-ref.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
</head>
7+
<style>
8+
#outer {
9+
box-sizing: border-box;
10+
border: 5px solid black;
11+
background-color: green;
12+
height: 300px;
13+
width: 300px;
14+
position: relative;
15+
view-transition-name: outer;
16+
}
17+
18+
#inner {
19+
box-sizing: border-box;
20+
border: 5px solid black;
21+
background-color: rebeccapurple;
22+
height: 100px;
23+
width: 100px;
24+
position: absolute;
25+
left: 100px;
26+
top: 100px;
27+
view-transition-name: inner;
28+
}
29+
</style>
30+
<body>
31+
<div id="outer">
32+
<div id="inner"></div>
33+
</div>
34+
</body>
35+
</html>

‎css/css-view-transitions/scoped/scope-during-transition-2.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="match" href="scope-during-transition-2-ref.html">
7+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
8+
<title>View-transition-scope: auto applied during view transition</title>
9+
</head>
10+
<script src="/common/reftest-wait.js"></script>
11+
<script src="/web-animations/testcommon.js"></script>
12+
<style>
13+
#outer {
14+
box-sizing: border-box;
15+
border: 5px solid black;
16+
height: 300px;
17+
width: 300px;
18+
position: relative;
19+
view-transition-name: outer;
20+
z-index: 0;
21+
}
22+
23+
#inner {
24+
box-sizing: border-box;
25+
border: 5px solid black;
26+
height: 100px;
27+
width: 100px;
28+
position: absolute;
29+
left: 100px;
30+
top: 100px;
31+
view-transition-name: inner;
32+
z-index: 1;
33+
}
34+
35+
::view-transition-group(*) {
36+
animation-timing-function: steps(1, jump-start);
37+
animation-play-state: paused;
38+
}
39+
40+
#outer::view-transition {
41+
background-color: green;
42+
}
43+
44+
#inner::view-transition {
45+
background-color: rebeccapurple;
46+
}
47+
48+
/*
49+
* This rule should not apply since there will be an active view-transition on
50+
* inner, when the view-transition on outer starts.
51+
*/
52+
#outer::view-transition-group(inner) {
53+
background-color: red;
54+
}
55+
56+
</style>
57+
<body>
58+
<div id="outer">
59+
<div id="inner"></div>
60+
</div>
61+
</body>
62+
<script>
63+
window.onload = async () => {
64+
await waitForCompositorReady();
65+
const vt1 = inner.startViewTransition();
66+
await vt1.ready;
67+
const animations = document.getAnimations();
68+
const vt2 = outer.startViewTransition();
69+
await vt2.ready;
70+
// The inner element no longer has "view-transition-scope: auto". but
71+
// as the VT on outer has already started, the VT names are locked in
72+
// place. Ensure that an "inner" transition group was not created for
73+
// the VT on outer.
74+
takeScreenshotOnAnimationsReady();
75+
};
76+
</script>
77+
</html>

0 commit comments

Comments
 (0)