1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: New content is an inline element.</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:bokan@chromium.org">
<link rel="match" href="new-content-is-inline-ref.html">
<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-1000">
<script src="/common/reftest-wait.js"></script>
<style>
body { margin : 0; }
.container {
position: absolute;
left: 100px;
width: 400px;
height: 100px;
background-color: grey;
}
.container.start {
top: 100px;
view-transition-name: container-start;
}
.container.end {
top: 300px;
view-transition-name: container-end;
}
.transitioned .container {
left: 20px;
width: 600px;
transform: translateY(-50px);
}
.inline {
background-color: limegreen;
/* allow small pixel diff in text */
color: rgba(0, 0, 0, 0);
}
.start .inline {
view-transition-name: start;
}
.end .inline {
view-transition-name: end;
}
.transitioned .inline {
background-color: coral;
}
/* Overlay the page with purple to ensure screenshots taken are of the view
* transition. */
:root {
view-transition-name: none;
}
::view-transition {
background-color: rebeccapurple;
}
/* This step function keeps the old snapshots in their initial state for half
* the duration, then the new snapshots in their final state for the last half
* of the duration. */
html::view-transition-group(*),
html::view-transition-new(*),
html::view-transition-old(*) {
animation-timing-function: steps(2, jump-none);
}
/* Set different durations for start and end so the two subtrees can be
* differentiated. The test will manually control animation playback so
* duration doesn't matter. */
html::view-transition-group(container-start),
html::view-transition-group(start),
html::view-transition-new(container-start),
html::view-transition-old(container-start) {
animation-duration: 2s;
}
html::view-transition-group(container-end),
html::view-transition-group(end),
html::view-transition-new(container-end),
html::view-transition-old(container-end) {
animation-duration: 3s;
}
/* Hide the old states for the inlines, they're tested in
* old-content-is-inline.html */
html::view-transition-old(start),
html::view-transition-old(end) {
animation: unset;
opacity: 0;
}
html::view-transition-new(start),
html::view-transition-new(end) {
animation: unset;
opacity: 1;
}
</style>
<!--
This subtree will be held at the animation start to test the old content's
starting position.
-->
<div class="container start">
<span>FILLER FILLER</span>
<span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
<p style="margin-top: 50px">START STATE</p>
</div>
<!--
This subtree will be held at the animation end to test the old content's
ending position.
-->
<div class="container end">
<span>FILLER FILLER</span>
<span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
<p>END STATE</p>
</div>
<script>
if (typeof failIfNot != 'undefined')
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
async function runTest() {
let transition = document.startViewTransition(() => {
document.body.classList.add('transitioned');
});
transition.ready.then(() => {
for (const anim of document.getAnimations()) {
anim.pause();
if (anim.effect.getTiming().duration == 3000) {
// This is an animation for the end subtree. Adjust it to the end
// (without finishing the animation) so we're displaying the final
// position.
anim.currentTime = anim.effect.getTiming().duration - 1;
}
}
requestAnimationFrame(takeScreenshot);
});
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
</script>
|
