Google Git
Sign in
chromium / external / w3c / web-platform-tests / ef0384e03e74d228dcc8970eec175426b208c0c2 / . / scroll-animations / setting-playback-rate.html
blob: e71d933be1a8e494f4cd556184e974c8635b5d28 [file] [log] [blame]
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]1<!DOCTYPE html>
2<meta charset=utf-8>
3<title>Setting the playback rate of an animation that is using a ScrollTimeline</title>
4<link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-playback-rate-of-an-animation">
5<script src="/resources/testharness.js"></script>
6<script src="/resources/testharnessreport.js"></script>
7<script src="/web-animations/testcommon.js"></script>
8<script src="testcommon.js"></script>
9<style>
10.scroller {
11 overflow: auto;
12 height: 100px;
13 width: 100px;
Yi Gu4a7093f2020-05-21 20:48:38[diff] [blame]14 will-change: transform;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]15}
16.contents {
17 height: 1000px;
18 width: 100%;
19}
20</style>
21<body>
22<script>
23'use strict';
24 promise_test(async t => {
25 const animation = createScrollLinkedAnimation(t);
26 const scroller = animation.timeline.scrollSource;
27 // this forces a layout which results in an active timeline
28 scroller.scrollTop = 0;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]29 // Wait for new animation frame which allows the timeline to compute new
30 // current time.
31 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]32
33 animation.playbackRate = 0.5;
34 animation.play();
35
36 assert_equals(animation.currentTime, 0,
37 'Zero current time is not affected by playbackRate change.');
38 }, 'Zero current time is not affected by playbackRate set while the ' +
39 'animation is in idle state.');
40
41 promise_test(async t => {
42 const animation = createScrollLinkedAnimation(t);
43 const scroller = animation.timeline.scrollSource;
44 // this forces a layout which results in an active timeline
45 scroller.scrollTop = 0;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]46 // Wait for new animation frame which allows the timeline to compute new
47 // current time.
48 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]49
50 animation.play();
51 animation.playbackRate = 0.5;
52
53 assert_equals(animation.currentTime, 0,
54 'Zero current time is not affected by playbackRate change.');
55 }, 'Zero current time is not affected by playbackRate set while the ' +
56 'animation is in play-pending state.');
57
58 promise_test(async t => {
59 const animation = createScrollLinkedAnimation(t);
60 const scroller = animation.timeline.scrollSource;
61 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
62 const timeRange = animation.timeline.timeRange;
63 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]64 // Wait for new animation frame which allows the timeline to compute new
65 // current time.
66 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]67
68 animation.playbackRate = 0.5;
69 animation.play();
70 await animation.ready;
71 assert_equals(animation.currentTime, 0.2 * timeRange * 0.5,
72 'Initial current time is scaled by playbackRate change.');
73 }, 'Initial current time is scaled by playbackRate set while ' +
74 'scroll-linked animation is in running state.');
75
76 promise_test(async t => {
77 const animation = createScrollLinkedAnimation(t);
78 const scroller = animation.timeline.scrollSource;
79 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
80 const timeRange = animation.timeline.timeRange;
81 const playbackRate = 2;
82
83 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]84 // Wait for new animation frame which allows the timeline to compute new
85 // current time.
86 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]87
88 animation.play();
89 await animation.ready;
90 // Set playback rate while the animation is playing.
91 animation.playbackRate = playbackRate;
92 assert_times_equal(animation.currentTime, 0.2 * timeRange,
93 'The current time should stay unaffected by setting playback rate.');
94 }, 'The current time is not affected by playbackRate set while the ' +
95 'scroll-linked animation is in play state.');
96
97 promise_test(async t => {
98 const animation = createScrollLinkedAnimation(t);
99 const scroller = animation.timeline.scrollSource;
100 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
101 const timeRange = animation.timeline.timeRange;
102
103 // Set playback rate while the animation is in 'idle' state.
104 animation.playbackRate = 2;
105 animation.play();
106 await animation.ready;
107 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]108 // Wait for new animation frame which allows the timeline to compute new
109 // current time.
110 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]111
112 assert_times_equal(animation.currentTime, 0.2 * timeRange * 2,
113 'The current time should increase two times faster than timeline time.');
114 }, 'The playback rate set before scroll-linked animation started playing ' +
115 'affects the rate of progress of the current time');
116
117 promise_test(async t => {
118 const animation = createScrollLinkedAnimation(t);
119 const scroller = animation.timeline.scrollSource;
120 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
121 animation.play();
122
123 await animation.ready;
124
125 animation.playbackRate = 2;
126 scroller.scrollTop = 0.25 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]127 // Wait for new animation frame which allows the timeline to compute new
128 // current time.
129 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]130
131 assert_times_equal(
132 animation.currentTime,
133 animation.timeline.currentTime * animation.playbackRate,
134 'The current time should increase two times faster than timeline time'
135 );
136 }, 'The playback rate affects the rate of progress of the current time' +
137 ' when scrolling');
138
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]139 promise_test(async t => {
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]140 const animation = createScrollLinkedAnimation(t);
141 const scroller = animation.timeline.scrollSource;
142 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
143 scroller.scrollTop = 0.25 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]144 // Wait for new animation frame which allows the timeline to compute new
145 // current time.
146 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]147 animation.play();
148
149 animation.playbackRate = 2;
150
151 assert_equals(animation.playState, "running");
152 assert_true(animation.pending);
153 assert_times_equal(animation.currentTime, animation.timeline.currentTime);
154 }, 'Setting the playback rate while play-pending preserves the current time' +
155 ' from scrollTimeline.');
156
157 test(t => {
158 const animation = createScrollLinkedAnimation(t);
159 animation.play();
160 animation.currentTime = 250;
161 animation.playbackRate = 2;
162
163 assert_equals(animation.playState, "running");
164 assert_true(animation.pending);
165 assert_times_equal(animation.currentTime, 250);
166 }, 'Setting the playback rate while play-pending preserves the set current' +
167 ' time.');
168
169 promise_test(async t => {
170 const animation = createScrollLinkedAnimation(t);
171 const scroller = animation.timeline.scrollSource;
172 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
173 scroller.scrollTop = 0.25 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]174 // Wait for new animation frame which allows the timeline to compute new
175 // current time.
176 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]177 animation.play();
178
179 await animation.ready;
180 animation.playbackRate = 2;
181
182 assert_times_equal(animation.currentTime, animation.timeline.currentTime);
183 }, 'Setting the playback rate while playing preserves the current time' +
184 ' from scrollTimeline.');
185
186 promise_test(async t => {
187 const animation = createScrollLinkedAnimation(t);
188
189 /* Wait for animation frame is here for now to avoid a renderer crash
190 caused by crbug.com/1042924. Once that is fixed, these can be removed */
191 await waitForAnimationFrames(2);
192
193 animation.play();
194
195 animation.currentTime = 250;
196 await animation.ready;
197 animation.playbackRate = 2;
198
199 assert_times_equal(animation.currentTime, 250);
200 }, 'Setting the playback rate while playing preserves the set current time.');
201
202 promise_test(async t => {
203 const animation = createScrollLinkedAnimation(t);
204 const scroller = animation.timeline.scrollSource;
205 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
206 const range = animation.timeline.timeRange;
207 animation.playbackRate = -1;
208 scroller.scrollTop = 0.3 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]209 // Wait for new animation frame which allows the timeline to compute new
210 // current time.
211 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]212 animation.play();
213
214 await animation.ready;
215 const expectedCurrentTime = range - animation.timeline.currentTime;
216 assert_times_equal(animation.currentTime, expectedCurrentTime);
217 }, 'Negative initial playback rate should correctly modify initial current' +
218 ' time.');
219
220 promise_test(async t => {
221 const animation = createScrollLinkedAnimation(t);
222 const scroller = animation.timeline.scrollSource;
223 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
224 scroller.scrollTop = 0.5 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]225 // Wait for new animation frame which allows the timeline to compute new
226 // current time.
227 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]228 animation.play();
229
230 await animation.ready;
231 const startingTimelineTime = animation.timeline.currentTime;
232 const startingCurrentTime = animation.currentTime;
233 assert_times_equal(startingCurrentTime, startingTimelineTime);
234
235 animation.playbackRate = -1;
236
237 scroller.scrollTop = 0.8 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]238 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]239 // -300 = 500 - 800
240 let timelineDiff = startingTimelineTime - animation.timeline.currentTime;
241 // 200 = 500 + (-300)
242 let expected = startingCurrentTime + timelineDiff;
243 assert_times_equal(animation.currentTime, expected);
244
245 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]246 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]247 // 300 = 500 - 200
248 timelineDiff = startingTimelineTime - animation.timeline.currentTime;
249 // 800 = 500 + 300
250 expected = startingCurrentTime + timelineDiff;
251 assert_times_equal(animation.currentTime, expected);
252 }, 'Reversing the playback rate while playing correctly impacts current' +
253 ' time during future scrolls');
254
255 promise_test(async t => {
256 const animation = createScrollLinkedAnimation(t);
257 const scroller = animation.timeline.scrollSource;
258 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
259 const range = animation.timeline.timeRange;
260 animation.playbackRate = 0;
261 scroller.scrollTop = 0.3 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]262 // Wait for new animation frame which allows the timeline to compute new
263 // current time.
264 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]265 animation.play();
266
267 await animation.ready;
268 assert_times_equal(animation.currentTime, 0);
269 }, 'Zero initial playback rate should correctly modify initial current' +
270 ' time.');
271
272 promise_test(async t => {
273 const animation = createScrollLinkedAnimation(t);
274 const scroller = animation.timeline.scrollSource;
275 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
276 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]277 // Wait for new animation frame which allows the timeline to compute new
278 // current time.
279 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]280 animation.play();
281
282 await animation.ready;
283 assert_times_equal(animation.currentTime, 200);
284 animation.playbackRate = 0;
285 scroller.scrollTop = 0.5 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]286 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]287
288 // Ensure that current time does not change.
289 assert_time_equals_literal(animation.timeline.currentTime, 500);
290 assert_time_equals_literal(animation.currentTime, 200);
291 }, 'Setting a zero playback rate while running preserves the current time');
292</script>
293</body>