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
|
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/">
<link rel="match" href="animation-fill-outside-range-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<meta name="fuzzy" content="maxDifference=0-50; totalPixels=0-300" />
<style>
.scroller {
height: 200px;
width: 500px;
overflow: auto;
position: absolute;
top: 100px;
}
.anim {
position: absolute;
width: 100px;
height: 100px;
background: darkred;
view-timeline: --view;
}
.anim.contain {
background: green;
}
.spacer {
height: 1000px;
}
.before {
top: 450px;
}
.after {
top: 50px;
}
.contain {
top: 250px;
}
@keyframes opaque-before {
0% { opacity: 1; }
0.01% { opacity : 0; }
100% { opacity : 0; }
}
@keyframes opaque-after {
0% { opacity: 0; }
99.9% { opacity : 0; }
100% { opacity : 1; }
}
.indicator {
position: fixed;
top: 50px;
}
.contain .indicator {
top: 100px;
}
.contain .indicator:nth-child(2) {
left: 200px;
}
.after .indicator {
left: 200px;
}
.indicator > div {
display: inline-block;
width: 25px;
height: 25px;
position: relative;
border-radius: 100%;
box-sizing: border-box;
border: 2px solid black;
padding: 3px;
background: lightgray;
background-clip: content-box;
}
.indicator > div > div {
width: 100%;
height: 100%;
border-radius: 100%;
background: green;
opacity: 0;
animation-fill-mode: both;
animation-timeline: --view;
}
.after .indicator > div > div,
.contain .indicator > div > div {
animation-name: opaque-after;
}
.before .indicator > div > div,
.contain .indicator:nth-child(2) > div > div {
animation-name: opaque-before;
}
.contain .indicator > div > div {
animation-range: entry;
}
.contain .indicator:nth-child(2) > div > div {
animation-range: exit;
}
</style>
</head>
<body>
<p>All of the activity indicators should be active as the animations should be filling.</p>
<div class="scroller">
<div class="anim after"><div class="indicator">After cover phase: <div><div></div></div></div></div>
<div class="anim before"><div class="indicator">Before cover phase: <div><div></div></div></div></div>
<div class="anim contain">
<div class="indicator entry">After entry phase: <div><div></div></div></div>
<div class="indicator exit">Before exit phase: <div><div></div></div></div>
</div>
<div class="spacer"></div>
</div>
</body>
<script>
async function run() {
let scroller = document.querySelector('.scroller');
// Scroll such that each animation becomes active.
scroller.scrollTo(0, 0);
await waitForCompositorReady();
scroller.scrollTo({top: 400});
await waitForNextFrame();
// Then scroll between them so that we are before one and after the other.
scroller.scrollTo({top: 200});
await waitForNextFrame();
takeScreenshot();
}
run();
</script>
</html>
|
