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
149
150
151
152
153
|
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="match" href="range-boundary-ref.html">
<title></title>
</head>
<style type="text/css">
@keyframes transform {
0% { transform: translateX(25px); }
100% { transform: translateX(50px); }
}
@keyframes background {
0% { background-color: #99f; }
100% { background-color: #9f9; }
}
.scroller {
display: inline-block;
border: 2px solid black;
height: 100px;
width: 100px;
overflow: hidden;
}
.spacer {
height: 300px;
margin: 0;
}
.box {
background: gray;
height: 50px;
width: 50px;
margin: 0;
animation: transform auto, background auto;
animation-timeline: view(), view();
animation-range: entry 0% entry 100%, contain 0% contain 100%;
}
</style>
<body>
<!-- scroll to bottom
top-box:
transform: none (after phase)
bg-color: #9f9 (at active-after boundary with inclusive endpoint)
bottom-box:
transform: 100px (at active-after boundary with inclusive endpoint)
bg-color: #99f (at active-before boundary with inclusive endpoint)
-->
<div id="scroller-1" class="scroller">
<div class="spacer"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- scroll to top
top-box:
transform: none (after phase)
bg-color: gray (at active-after boundary with exclusive endpoint)
bottom-box:
transform: none (at active-after boundary with exclusive endpoint)
bg-color: #99f (at active-before boundary with inclusive endpoint)
-->
<div id="scroller-2" class="scroller">
<div class="box"></div>
<div class="box"></div>
<div class="spacer"></div>
</div>
<br>
<!-- scroll to midpoint
top-box:
transform: none (after phase)
bg-color: gray (at active-after boundary with exclusive endpoint)
bottom-box:
transform: none (at active-after boundary with exclusive endpoint)
bg-color: #99f (at active-before boundary with inclusive endpoint)
-->
<div id="scroller-3" class="scroller">
<div class="spacer"></div>
<div class="box"></div>
<div class="box"></div>
<div class="spacer"></div>
</div>
<!-- scroll to bottom + reverse
top-box:
transform: none (before phase)
bg-color: gray (at active-before boundary with exclusive endpoint)
bottom-box:
transform: none (at active-before boundary with exclusive endpoint)
bg-color: #9f9 (at active-after boundary with inclusive endpoint)
-->
<div id="scroller-4" class="scroller">
<div class="spacer"></div>
<div class="box reverse"></div>
<div class="box reverse"></div>
</div>
<br>
<!-- scroll to top + reverse
top-box:
transform: none (before phase)
bg-color: #99f (at active-before boundary with inclusive endpoint)
bottom-box:
transform: 25px (at active-before boundary with inclusive endpoint)
bg-color: #9f9 (at active-after boundary with inclusive endpoint)
-->
<div id="scroller-5" class="scroller">
<div class="box reverse"></div>
<div class="box reverse"></div>
<div class="spacer"></div>
</div>
<!-- scroll to midpoint + reverse
top-box:
transform: none (before phase)
bg-color: gray (at active-before boundary with exclusive endpoint)
bottom-box:
transform: none (at active-before boundary with exclusive endpoint)
bg-color: #9f9 (at active-before boundary with inclusive endpoint)
-->
<div id="scroller-6" class="scroller">
<div class="spacer"></div>
<div class="box reverse"></div>
<div class="box reverse"></div>
<div class="spacer"></div>
</div>
</body>
<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script>
function scrollTo(scroller_id, relative_offset) {
const scroller = document.getElementById(scroller_id);
const max_scroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = relative_offset * max_scroll;
}
window.onload = async () => {
await waitForCompositorReady();
document.querySelectorAll('.reverse').forEach(elem => {
elem.getAnimations().forEach(anim => {
anim.reverse();
});
});
// Playing forward
scrollTo('scroller-1', 1);
scrollTo('scroller-2', 0);
scrollTo('scroller-3', 0.5);
// Playing reverse
scrollTo('scroller-4', 1);
scrollTo('scroller-5', 0);
scrollTo('scroller-6', 0.5);
await waitForNextFrame();
takeScreenshot();
};
</script>
</html>
|
