Skip to content

Commit 1a1d4ed

Browse files
noamrchromium-wpt-export-bot
noamr
authored and
chromium-wpt-export-bot
committed
Implement view-transition-name: auto
This allows generating view-transition-names automatically, reducing the burden of inventing unique names from the user, in cases where the element is the same (or has the same ID) between the two states. See spec PR: w3c/csswg-drafts#10922 Change-Id: I1b6c6752acc7106929b08ac6fcdda9578d6402d3 Bug: 365997248 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5878355 Commit-Queue: Noam Rosenthal <[email protected]> Reviewed-by: Khushal Sagar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1364180}
1 parent 7270b19 commit 1a1d4ed

9 files changed

+357
-1
lines changed

‎css/css-view-transitions/auto-name-from-id-shadow.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: auto name should not expose shadow-scoped ID</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="auto-name-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
}
12+
13+
main {
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
18+
.item {
19+
view-transition-name: auto;
20+
}
21+
22+
::part(p2) {
23+
view-transition-name: auto;
24+
background: yellow;
25+
position: relative;
26+
left: 100px;
27+
width: 100px;
28+
height: 100px;
29+
}
30+
31+
main.switch #item1 {
32+
order: 2;
33+
}
34+
35+
#item1 {
36+
background: green;
37+
}
38+
39+
html::view-transition {
40+
background: rebeccapurple;
41+
}
42+
43+
:root { view-transition-name: none; }
44+
html::view-transition-group(*) {
45+
animation-timing-function: steps(2, start);
46+
animation-play-state: paused;
47+
}
48+
html::view-transition-group(item2) {
49+
outline: 10px solid red;
50+
}
51+
52+
html::view-transition-old(*),
53+
html::view-transition-new(*)
54+
{ animation-play-state: paused; }
55+
html::view-transition-old(*) { animation: unset; opacity: 0 }
56+
html::view-transition-new(*) { animation: unset; opacity: 1 }
57+
58+
</style>
59+
60+
<main>
61+
<div class="item" id="item1"></div>
62+
<div>
63+
<template shadowrootmode="open">
64+
<div class="item" id="item2" part="p2"></div>
65+
</template>
66+
</div>
67+
</main>
68+
69+
<script>
70+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
71+
72+
function runTest() {
73+
document.startViewTransition(() => {
74+
document.querySelector("main").classList.toggle("switch");
75+
}).ready.then(takeScreenshot);
76+
}
77+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
78+
</script>
79+
80+
</body>

‎css/css-view-transitions/auto-name-from-id.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: auto name generated from ID</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="auto-name-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
}
12+
13+
main {
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
18+
.item {
19+
view-transition-name: auto;
20+
}
21+
22+
main.switch #item1 {
23+
order: 2;
24+
}
25+
26+
#item1 {
27+
background: green;
28+
}
29+
30+
#item2 {
31+
background: yellow;
32+
position: relative;
33+
left: 100px;
34+
}
35+
36+
html::view-transition {
37+
background: rebeccapurple;
38+
}
39+
40+
:root { view-transition-name: none; }
41+
html::view-transition-group(item1),
42+
html::view-transition-group(item2) {
43+
animation-timing-function: steps(2, start);
44+
animation-play-state: paused;
45+
}
46+
html::view-transition-old(*),
47+
html::view-transition-new(*)
48+
{ animation-play-state: paused; }
49+
html::view-transition-old(*) { animation: unset; opacity: 0 }
50+
html::view-transition-new(*) { animation: unset; opacity: 1 }
51+
52+
</style>
53+
54+
<main>
55+
<div class="item" id="item1"></div>
56+
<div class="item" id="item2"></div>
57+
</main>
58+
59+
<script>
60+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
61+
62+
function runTest() {
63+
document.startViewTransition(() => {
64+
document.querySelector("main").classList.toggle("switch");
65+
}).ready.then(takeScreenshot);
66+
}
67+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
68+
</script>
69+
70+
</body>

‎css/css-view-transitions/auto-name-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+
<title>View transitions: using auto names</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<style>
6+
body {
7+
background: rebeccapurple;
8+
}
9+
10+
div {
11+
width: 100px;
12+
height: 100px;
13+
}
14+
15+
main {
16+
display: flex;
17+
flex-direction: row;
18+
position: relative;
19+
top: 50px;
20+
}
21+
22+
.item1 {
23+
background: green;
24+
}
25+
26+
.item2 {
27+
background: yellow;
28+
}
29+
</style>
30+
<main>
31+
<div class="item1"></div>
32+
<div class="item2"></div>
33+
</main>
34+
35+
</body>

‎css/css-view-transitions/auto-name.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: using auto names</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="auto-name-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
}
12+
13+
main {
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
18+
.item {
19+
view-transition-name: auto;
20+
view-transition-class: item;
21+
}
22+
23+
main.switch .item1 {
24+
order: 2;
25+
}
26+
27+
.item1 {
28+
background: green;
29+
}
30+
31+
.item2 {
32+
background: yellow;
33+
position: relative;
34+
left: 100px;
35+
}
36+
37+
html::view-transition {
38+
background: rebeccapurple;
39+
}
40+
41+
:root { view-transition-name: none; }
42+
html::view-transition-group(.item) {
43+
animation-timing-function: steps(2, start);
44+
animation-play-state: paused;
45+
}
46+
html::view-transition-old(*),
47+
html::view-transition-new(*)
48+
{ animation-play-state: paused; }
49+
html::view-transition-old(*) { animation: unset; opacity: 0 }
50+
html::view-transition-new(*) { animation: unset; opacity: 1 }
51+
52+
</style>
53+
54+
<main>
55+
<div class="item item1"></div>
56+
<div class="item item2"></div>
57+
</main>
58+
59+
<script>
60+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
61+
62+
function runTest() {
63+
document.startViewTransition(() => {
64+
document.querySelector("main").classList.toggle("switch");
65+
}).ready.then(takeScreenshot);
66+
}
67+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
68+
</script>
69+
70+
</body>

‎css/css-view-transitions/navigation/auto-name-from-id-ref.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>View transitions: cross-document navigation with auto name</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<style>
6+
@view-transition { navigation: auto; }
7+
body {
8+
background: rebeccapurple;
9+
margin: 0;
10+
}
11+
#green {
12+
width: 100px;
13+
height: 100px;
14+
position: absolute;
15+
left: 100px;
16+
view-transition-name: auto;
17+
background: green;
18+
contain: layout;
19+
}
20+
</style>
21+
<div id="green"></div>
22+
</html>

‎css/css-view-transitions/navigation/auto-name-from-id.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>View transitions: cross-document navigation with auto name</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="auto-name-from-id-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
@view-transition { navigation: auto; }
9+
body {
10+
background: blue;
11+
margin: 0;
12+
}
13+
#green {
14+
width: 100px;
15+
height: 100px;
16+
view-transition-name: auto;
17+
background: green;
18+
contain: layout;
19+
}
20+
</style>
21+
<div id="green"></div>
22+
<script>
23+
onload = async() => {
24+
await new Promise(resolve => requestAnimationFrame(() => resolve()));
25+
location.href = "resources/auto-name-from-id.html";
26+
};
27+
</script>
28+
</html>

‎css/css-view-transitions/navigation/resources/auto-name-from-id.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>View transitions: cross-document navigation with auto name (new page)</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="auto-name-from-id-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
@view-transition { navigation: auto; }
9+
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
background: grey;
14+
}
15+
16+
html::view-transition {
17+
background: rebeccapurple;
18+
position: absolute;
19+
inset: 0;
20+
}
21+
22+
html::view-transition-group(root) {
23+
display: none;
24+
}
25+
26+
html::view-transition-group(green) {
27+
animation-play-state: paused;
28+
animation-duration: 3s;
29+
animation-timing-function: steps(2, start);
30+
}
31+
32+
#green {
33+
background: green;
34+
width: 100px;
35+
height: 100px;
36+
left: 200px;
37+
position: absolute;
38+
view-transition-name: auto;
39+
}
40+
41+
</style>
42+
<body>
43+
<div id="green"></div>
44+
</body>
45+
<script>
46+
onpagereveal = event => {
47+
event.viewTransition.ready.then(takeScreenshot);
48+
}
49+
</script>
50+
51+
</html>

‎css/css-view-transitions/parsing/view-transition-name-invalid.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
</head>
1313
<body>
1414
<script>
15-
test_invalid_value("view-transition-name", "auto"); // `auto` is excluded.
1615
test_invalid_value("view-transition-name", "default"); // `default` isn't allowed by the `<custom-ident>` syntax.
1716
test_invalid_value("view-transition-name", "none none");
1817
test_invalid_value("view-transition-name", `"none"`);

‎css/css-view-transitions/parsing/view-transition-name-valid.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
test_valid_value("view-transition-name", "foo");
1717
test_valid_value("view-transition-name", "bar");
1818
test_valid_value("view-transition-name", "baz");
19+
test_valid_value("view-transition-name", "auto");
1920
</script>
2021
</body>
2122
</html>

0 commit comments

Comments
 (0)