Skip to content

Commit 2c1c84e

Browse files
kevers-googlechromium-wpt-export-bot
kevers-google
authored and
chromium-wpt-export-bot
committed
[scoped-vt] Expand check for view-transtion-scope: auto during tag discovery
Bug: 481934462 Change-Id: Ie0afe22c63bacc5b4a91629ee0d1ec6d269a0791 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7559151 Commit-Queue: Kevin Ellis <kevers@chromium.org> Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1584689}
1 parent 1283524 commit 2c1c84e

File tree

3 files changed

+144
-1
lines changed

3 files changed

+144
-1
lines changed

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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://www.w3.org/TR/css-view-transitions-2/">
7+
<title>view-transition-scope: auto + display: contents</title>
8+
</head>
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<style>
12+
#outer {
13+
view-transition-name: outer;
14+
}
15+
16+
#inner {
17+
view-transition-name: inner;
18+
}
19+
20+
.scoped {
21+
view-transition-scope: auto;
22+
}
23+
24+
.display-contents {
25+
display: contents;
26+
}
27+
28+
</style>
29+
<body>
30+
<div id="outer">
31+
<div id="inner"></div>
32+
</div>
33+
</body>
34+
<script>
35+
function capturedNames(prefix) {
36+
const names = document.getAnimations()
37+
.map(a => a.effect.pseudoElement)
38+
.filter(name => name.startsWith(prefix));
39+
return [...new Set(names)].sort();
40+
}
41+
42+
promise_test(async t => {
43+
const outer = document.getElementById('outer');
44+
const inner = document.getElementById('inner');
45+
46+
let vt = document.startViewTransition(() => {
47+
inner.classList.add('scoped');
48+
});
49+
await vt.ready;
50+
assert_array_equals(
51+
capturedNames('::view-transition-old'),
52+
[
53+
"::view-transition-old(inner)",
54+
"::view-transition-old(outer)",
55+
"::view-transition-old(root)"
56+
],
57+
'outer and inner both participate in the capture of the old state');
58+
assert_array_equals(
59+
capturedNames('::view-transition-new'),
60+
["::view-transition-new(outer)", "::view-transition-new(root)"],
61+
'only outer is a participant in the capture of the new state ');
62+
vt.skipTransition();
63+
}, 'Setting view-transition-scope to auto blocks propagation of name ' +
64+
'discovery.');
65+
</script>
66+
</html>

‎css/css-view-transitions/scoped/view-transition-scope-display-contents.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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://www.w3.org/TR/css-view-transitions-2/">
7+
<title>view-transition-scope: auto + display: contents</title>
8+
</head>
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<style>
12+
#outer {
13+
view-transition-name: outer;
14+
}
15+
16+
#inner {
17+
view-transition-name: inner;
18+
}
19+
20+
.scoped {
21+
view-transition-scope: auto;
22+
}
23+
24+
.display-contents {
25+
display: contents;
26+
}
27+
28+
</style>
29+
<body>
30+
<div id="outer">
31+
<div id="middle">
32+
<div id="inner"></div>
33+
</div>
34+
</div>
35+
</body>
36+
<script>
37+
function capturedNames() {
38+
const regexp = /\((?<name>[^\)]+)/;
39+
const names = document.getAnimations()
40+
.map(a => a.effect.pseudoElement)
41+
.map(name => name.match(regexp).groups.name);
42+
return [...new Set(names)].sort();
43+
}
44+
45+
promise_test(async t => {
46+
const outer = document.getElementById('outer');
47+
const middle = document.getElementById('middle');
48+
const inner = document.getElementById('inner');
49+
50+
let vt = document.startViewTransition(() => {});
51+
await vt.ready;
52+
assert_array_equals(
53+
capturedNames(), ['inner', 'outer', 'root'],
54+
'Retrieve all names in absence of view-transition-scope: auto');
55+
vt.skipTransition();
56+
57+
middle.classList.toggle('scoped');
58+
vt = document.startViewTransition(() => {});
59+
await vt.ready;
60+
assert_array_equals(
61+
capturedNames(), ['outer', 'root'],
62+
'view-transition-scope: auto blocks tag discovery in subtree ' +
63+
'even if on a non-positioned element');
64+
vt.skipTransition();
65+
66+
middle.classList.toggle('display-contents');
67+
vt = document.startViewTransition(() => {});
68+
await vt.ready;
69+
assert_array_equals(
70+
capturedNames(), ['outer', 'root'],
71+
'view-transition-scope: auto blocks tag discovery in subtree ' +
72+
'even if display: contents');
73+
vt.skipTransition();
74+
}, 'Setting view-transition-scope to auto blocks propagation of name ' +
75+
'discovery.');
76+
</script>
77+
</html>

css/css-view-transitions/scoped/view-transtion-scope-name-discovery.html renamed to css/css-view-transitions/scoped/view-transition-scope-name-discovery.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
await vt.ready;
4545
assert_array_equals(
4646
capturedNames(), ['inner', 'outer', 'root'],
47-
'Retrieve all names in absence of contain style');
47+
'Retrieve all names in absence of view-transition-scope: auto');
4848
vt.skipTransition();
4949

5050
document.documentElement.classList.toggle('scoped');

0 commit comments

Comments
 (0)