Google Git
Sign in
chromium / external / w3c / web-platform-tests / 5fcf49d42ed0b212a392e946e9501a8df1100c25 / . / scroll-animations / setting-playback-rate.html
blob: 5bac2712bfda14b2530eaea70297991b131e6224 [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>
Jordan Taylorc4241ca2021-07-15 20:21:17[diff] [blame]23 'use strict';
24
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]25 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]26 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]27 const scroller = animation.timeline.scrollSource;
28 // this forces a layout which results in an active timeline
29 scroller.scrollTop = 0;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]30 // Wait for new animation frame which allows the timeline to compute new
31 // current time.
32 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]33
34 animation.playbackRate = 0.5;
35 animation.play();
36
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]37 assert_percents_equal(animation.currentTime, 0,
38 'Zero current time is not affected by playbackRate change.');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]39 }, 'Zero current time is not affected by playbackRate set while the ' +
40 'animation is in idle state.');
41
42 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]43 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]44 const scroller = animation.timeline.scrollSource;
45 // this forces a layout which results in an active timeline
46 scroller.scrollTop = 0;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]47 // Wait for new animation frame which allows the timeline to compute new
48 // current time.
49 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]50
51 animation.play();
52 animation.playbackRate = 0.5;
53
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]54 assert_percents_equal(animation.currentTime, 0,
55 'Zero current time is not affected by playbackRate change.');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]56 }, 'Zero current time is not affected by playbackRate set while the ' +
57 'animation is in play-pending state.');
58
59 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]60 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]61 const scroller = animation.timeline.scrollSource;
62 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]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;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]71 assert_percents_equal(animation.currentTime, 10,
72 'Initial current time is scaled by playbackRate change.');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]73 }, 'Initial current time is scaled by playbackRate set while ' +
74 'scroll-linked animation is in running state.');
75
76 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]77 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]78 const scroller = animation.timeline.scrollSource;
79 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]80 const playbackRate = 2;
81
82 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]83 // Wait for new animation frame which allows the timeline to compute new
84 // current time.
85 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]86
87 animation.play();
88 await animation.ready;
89 // Set playback rate while the animation is playing.
90 animation.playbackRate = playbackRate;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]91 assert_percents_equal(animation.currentTime, 20,
92 'The current time should stay unaffected by setting playback rate.');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]93 }, 'The current time is not affected by playbackRate set while the ' +
94 'scroll-linked animation is in play state.');
95
96 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]97 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]98 const scroller = animation.timeline.scrollSource;
99 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]100
101 // Set playback rate while the animation is in 'idle' state.
102 animation.playbackRate = 2;
103 animation.play();
104 await animation.ready;
105 scroller.scrollTop = 0.2 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]106 // Wait for new animation frame which allows the timeline to compute new
107 // current time.
108 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]109
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]110 assert_percents_equal(animation.currentTime, 40,
111 'The current time should increase two times faster ' +
112 'than timeline time.');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]113 }, 'The playback rate set before scroll-linked animation started playing ' +
114 'affects the rate of progress of the current time');
115
116 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]117 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]118 const scroller = animation.timeline.scrollSource;
119 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
120 animation.play();
121
122 await animation.ready;
123
124 animation.playbackRate = 2;
125 scroller.scrollTop = 0.25 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]126 // Wait for new animation frame which allows the timeline to compute new
127 // current time.
128 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]129
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]130 assert_percents_equal(
131 animation.currentTime,
132 animation.timeline.currentTime.value * animation.playbackRate,
133 'The current time should increase two times faster than timeline time');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]134 }, 'The playback rate affects the rate of progress of the current time' +
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]135 ' when scrolling');
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]136
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]137 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]138 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]139 const scroller = animation.timeline.scrollSource;
140 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
141 scroller.scrollTop = 0.25 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]142 // Wait for new animation frame which allows the timeline to compute new
143 // current time.
144 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]145 animation.play();
146
147 animation.playbackRate = 2;
148
149 assert_equals(animation.playState, "running");
150 assert_true(animation.pending);
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]151 assert_percents_equal(
152 animation.currentTime, animation.timeline.currentTime);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]153 }, 'Setting the playback rate while play-pending preserves the current time' +
154 ' from scrollTimeline.');
155
156 test(t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]157 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]158 animation.play();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]159 animation.currentTime = CSSNumericValue.parse("25%");
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]160 animation.playbackRate = 2;
161
162 assert_equals(animation.playState, "running");
163 assert_true(animation.pending);
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]164 assert_percents_equal(animation.currentTime, 25);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]165 }, 'Setting the playback rate while play-pending preserves the set current' +
166 ' time.');
167
168 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]169 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]170 const scroller = animation.timeline.scrollSource;
171 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
172 scroller.scrollTop = 0.25 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]173 // Wait for new animation frame which allows the timeline to compute new
174 // current time.
175 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]176 animation.play();
177
178 await animation.ready;
179 animation.playbackRate = 2;
180
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]181 assert_percents_equal(
182 animation.currentTime, animation.timeline.currentTime);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]183 }, 'Setting the playback rate while playing preserves the current time' +
184 ' from scrollTimeline.');
185
186 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]187 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]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
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]195 animation.currentTime = CSSNumericValue.parse("25%");
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]196 await animation.ready;
197 animation.playbackRate = 2;
198
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]199 assert_percents_equal(animation.currentTime, 25);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]200 }, 'Setting the playback rate while playing preserves the set current time.');
201
202 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]203 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]204 const scroller = animation.timeline.scrollSource;
205 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]206 animation.playbackRate = -1;
207 scroller.scrollTop = 0.3 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]208 // Wait for new animation frame which allows the timeline to compute new
209 // current time.
210 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]211 animation.play();
212
213 await animation.ready;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]214 const expectedCurrentTime = 100 - animation.timeline.currentTime.value;
215 assert_percents_equal(animation.currentTime, expectedCurrentTime);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]216 }, 'Negative initial playback rate should correctly modify initial current' +
217 ' time.');
218
219 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]220 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]221 const scroller = animation.timeline.scrollSource;
222 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
223 scroller.scrollTop = 0.5 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]224 // Wait for new animation frame which allows the timeline to compute new
225 // current time.
226 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]227 animation.play();
228
229 await animation.ready;
230 const startingTimelineTime = animation.timeline.currentTime;
231 const startingCurrentTime = animation.currentTime;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]232 assert_percents_equal(startingCurrentTime, startingTimelineTime);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]233
234 animation.playbackRate = -1;
235
236 scroller.scrollTop = 0.8 * maxScroll;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame]237 await waitForNextFrame();
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]238 // -300 = 500 - 800
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]239 let timelineDiff =
240 startingTimelineTime.value - animation.timeline.currentTime.value;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]241 // 200 = 500 + (-300)
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]242 let expected = startingCurrentTime.value + timelineDiff;
243 assert_percents_equal(animation.currentTime, expected);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]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
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]248 timelineDiff =
249 startingTimelineTime.value - animation.timeline.currentTime.value;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]250 // 800 = 500 + 300
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]251 expected = startingCurrentTime.value + timelineDiff;
252 assert_percents_equal(animation.currentTime, expected);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]253 }, 'Reversing the playback rate while playing correctly impacts current' +
254 ' time during future scrolls');
255
256 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]257 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]258 const scroller = animation.timeline.scrollSource;
259 const maxScroll = scroller.scrollHeight - scroller.clientHeight;
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]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;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]268 assert_percents_equal(animation.currentTime, 0);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]269 }, 'Zero initial playback rate should correctly modify initial current' +
270 ' time.');
271
272 promise_test(async t => {
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]273 const animation = createScrollLinkedAnimation(t);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]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;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]283 assert_percents_equal(animation.currentTime, 20);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]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.
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]289 assert_percents_equal(animation.timeline.currentTime, 50);
290 assert_percents_equal(animation.currentTime, 20);
Jordan Taylor7ae38242020-02-13 01:56:46[diff] [blame]291 }, 'Setting a zero playback rate while running preserves the current time');
292</script>
293</body>