OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <meta charset=utf-8> | |
3 <title>Tests for discrete animation</title> | |
4 <link rel="help" href="https://w3c.github.io/web-animations/#play-state"> | |
5 <script src="../resources/testharness.js"></script> | |
6 <script src="../resources/testharnessreport.js"></script> | |
7 <script src="../external/wpt/web-animations/testcommon.js"></script> | |
8 <body> | |
9 <script> | |
10 'use strict'; | |
11 function createIdleAnimation(t) { | |
12 var animation = createDiv(t).animate([], 100000); | |
13 animation.cancel(); | |
14 return animation; | |
15 } | |
16 | |
17 function createRunningAnimation(t) { | |
18 var animation = createIdleAnimation(t); | |
19 animation.play(); | |
20 animation.startTime = document.timeline.currentTime; | |
21 return animation; | |
22 } | |
23 | |
24 function createPendingStartTimeAnimation(t) { | |
25 var animation = createIdleAnimation(t); | |
26 animation.play(); | |
27 return animation; | |
28 } | |
29 | |
30 function createPausedAnimation(t) { | |
31 var animation = createIdleAnimation(t); | |
32 animation.pause(); | |
33 animation.currentTime = 0; | |
34 return animation; | |
35 } | |
36 | |
37 function createFinishedAnimation(t) { | |
38 var animation = createIdleAnimation(t); | |
39 animation.play(); | |
40 animation.finish(); | |
41 return animation; | |
42 } | |
43 | |
44 // Initial animation states | |
45 test(function(t) { | |
46 var animation = createIdleAnimation(t); | |
47 assert_equals(animation.startTime, null); | |
48 assert_equals(animation.currentTime, null); | |
49 assert_equals(animation.playState, 'idle'); | |
50 }, "Play state is idle after cancelling an animation"); | |
51 | |
52 test(function(t) { | |
53 var animation = createPendingStartTimeAnimation(t); | |
54 assert_equals(animation.startTime, null); | |
55 assert_equals(animation.currentTime, 0); | |
56 assert_equals(animation.playState, 'pending'); | |
57 }, "Play state is pending after playing a cancelled animation"); | |
58 | |
59 test(function(t) { | |
60 var animation = createRunningAnimation(t); | |
61 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
62 assert_equals(animation.currentTime, 0); | |
63 assert_equals(animation.playState, 'running'); | |
64 }, "Play state is running after playing and setting start time of a cancelled an
imation"); | |
65 | |
66 test(function(t) { | |
67 var animation = createPausedAnimation(t); | |
68 assert_equals(animation.startTime, null); | |
69 assert_equals(animation.currentTime, 0); | |
70 assert_equals(animation.playState, 'paused'); | |
71 }, "Play state is paused after pausing and setting current time of a cancelled a
nimation"); | |
72 | |
73 test(function(t) { | |
74 var animation = createFinishedAnimation(t); | |
75 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
76 assert_equals(animation.currentTime, 100000); | |
77 assert_equals(animation.playState, 'finished'); | |
78 }, "Play state is finished after playing and finishing a cancelled animation"); | |
79 | |
80 // Changed animation states | |
81 test(function(t) { | |
82 var animation = createIdleAnimation(t); | |
83 animation.play(); | |
84 assert_equals(animation.startTime, null); | |
85 assert_equals(animation.currentTime, 0); | |
86 assert_equals(animation.playState, 'pending'); | |
87 }, "Calling play() on an idle animation"); | |
88 | |
89 test(function(t) { | |
90 var animation = createIdleAnimation(t); | |
91 animation.pause(); | |
92 assert_equals(animation.startTime, null); | |
93 assert_equals(animation.currentTime, 0); | |
94 assert_equals(animation.playState, 'pending'); | |
95 }, "Calling pause() on an idle animation"); | |
96 | |
97 test(function(t) { | |
98 var animation = createIdleAnimation(t); | |
99 animation.cancel(); | |
100 assert_equals(animation.startTime, null); | |
101 assert_equals(animation.currentTime, null); | |
102 assert_equals(animation.playState, 'idle'); | |
103 }, "Calling cancel() on an idle animation"); | |
104 | |
105 test(function(t) { | |
106 var animation = createIdleAnimation(t); | |
107 animation.finish(); | |
108 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
109 assert_equals(animation.currentTime, 100000); | |
110 assert_equals(animation.playState, 'finished'); | |
111 }, "Calling finish() on an idle animation"); | |
112 | |
113 test(function(t) { | |
114 var animation = createIdleAnimation(t); | |
115 animation.reverse(); | |
116 assert_equals(animation.startTime, null); | |
117 assert_equals(animation.currentTime, 100000); | |
118 assert_equals(animation.playState, 'pending'); | |
119 }, "Calling reverse() on an idle animation"); | |
120 | |
121 test(function(t) { | |
122 var animation = createIdleAnimation(t); | |
123 animation.currentTime = 1000; | |
124 assert_equals(animation.startTime, null); | |
125 assert_equals(animation.currentTime, 1000); | |
126 assert_equals(animation.playState, 'paused'); | |
127 }, "Setting currentTime on an idle animation"); | |
128 | |
129 test(function(t) { | |
130 var animation = createIdleAnimation(t); | |
131 animation.startTime = document.timeline.currentTime - 1000; | |
132 assert_equals(animation.startTime, document.timeline.currentTime - 1000); | |
133 assert_equals(animation.currentTime, 1000); | |
134 assert_equals(animation.playState, 'running'); | |
135 }, "Setting startTime on an idle animation"); | |
136 | |
137 test(function(t) { | |
138 var animation = createPendingStartTimeAnimation(t); | |
139 animation.play(); | |
140 assert_equals(animation.startTime, null); | |
141 assert_equals(animation.currentTime, 0); | |
142 assert_equals(animation.playState, 'pending'); | |
143 }, "Calling play() on a pending starttime animation"); | |
144 | |
145 test(function(t) { | |
146 var animation = createPendingStartTimeAnimation(t); | |
147 animation.pause(); | |
148 assert_equals(animation.startTime, null); | |
149 assert_equals(animation.currentTime, 0); | |
150 assert_equals(animation.playState, 'pending'); | |
151 }, "Calling pause() on a pending starttime animation"); | |
152 | |
153 test(function(t) { | |
154 var animation = createPendingStartTimeAnimation(t); | |
155 animation.cancel(); | |
156 assert_equals(animation.startTime, null); | |
157 assert_equals(animation.currentTime, null); | |
158 assert_equals(animation.playState, 'idle'); | |
159 }, "Calling cancel() on a pending starttime animation"); | |
160 | |
161 test(function(t) { | |
162 var animation = createPendingStartTimeAnimation(t); | |
163 animation.finish(); | |
164 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
165 assert_equals(animation.currentTime, 100000); | |
166 assert_equals(animation.playState, 'finished'); | |
167 }, "Calling finish() on a pending starttime animation"); | |
168 | |
169 test(function(t) { | |
170 var animation = createPendingStartTimeAnimation(t); | |
171 animation.reverse(); | |
172 assert_equals(animation.startTime, null); | |
173 assert_equals(animation.currentTime, 100000); | |
174 assert_equals(animation.playState, 'pending'); | |
175 }, "Calling reverse() on a pending starttime animation"); | |
176 | |
177 test(function(t) { | |
178 var animation = createPendingStartTimeAnimation(t); | |
179 animation.currentTime = 1000; | |
180 assert_equals(animation.startTime, null); | |
181 assert_equals(animation.currentTime, 1000); | |
182 assert_equals(animation.playState, 'pending'); | |
183 }, "Setting currentTime on a pending starttime animation"); | |
184 | |
185 test(function(t) { | |
186 var animation = createPendingStartTimeAnimation(t); | |
187 animation.startTime = document.timeline.currentTime - 1000; | |
188 assert_equals(animation.startTime, document.timeline.currentTime - 1000); | |
189 assert_equals(animation.currentTime, 1000); | |
190 assert_equals(animation.playState, 'running'); | |
191 }, "Setting startTime on a pending starttime animation"); | |
192 | |
193 test(function(t) { | |
194 var animation = createRunningAnimation(t); | |
195 var startTime = animation.startTime; | |
196 var currentTime = animation.currentTime; | |
197 animation.play(); | |
198 assert_equals(animation.startTime, startTime); | |
199 assert_equals(animation.currentTime, currentTime); | |
200 assert_equals(animation.playState, 'running'); | |
201 }, "Setting play() on a running animation"); | |
202 | |
203 test(function(t) { | |
204 var animation = createRunningAnimation(t); | |
205 animation.pause(); | |
206 assert_equals(animation.startTime, null); | |
207 assert_equals(animation.currentTime, 0); | |
208 assert_equals(animation.playState, 'pending'); | |
209 }, "Setting pause() on a running animation"); | |
210 | |
211 test(function(t) { | |
212 var animation = createRunningAnimation(t); | |
213 animation.cancel(); | |
214 assert_equals(animation.startTime, null); | |
215 assert_equals(animation.currentTime, null); | |
216 assert_equals(animation.playState, 'idle'); | |
217 }, "Setting cancel() on a running animation"); | |
218 | |
219 test(function(t) { | |
220 var animation = createRunningAnimation(t); | |
221 animation.finish(); | |
222 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
223 assert_equals(animation.currentTime, 100000); | |
224 assert_equals(animation.playState, 'finished'); | |
225 }, "Setting finish() on a running animation"); | |
226 | |
227 test(function(t) { | |
228 var animation = createRunningAnimation(t); | |
229 animation.reverse(); | |
230 assert_equals(animation.startTime, null); | |
231 assert_equals(animation.currentTime, 100000); | |
232 assert_equals(animation.playState, 'pending'); | |
233 }, "Setting reverse() on a running animation"); | |
234 | |
235 | |
236 test(function(t) { | |
237 var animation = createRunningAnimation(t); | |
238 animation.currentTime = 1000; | |
239 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
240 assert_equals(animation.currentTime, 1000); | |
241 assert_equals(animation.playState, 'running'); | |
242 }, "Setting currentTime on a running animation"); | |
243 | |
244 test(function(t) { | |
245 var animation = createRunningAnimation(t); | |
246 animation.startTime = document.timeline.currentTime - 1000; | |
247 assert_equals(animation.startTime, document.timeline.currentTime - 1000); | |
248 assert_equals(animation.currentTime, 1000); | |
249 assert_equals(animation.playState, 'running'); | |
250 }, "Setting startTime on a running animation"); | |
251 | |
252 test(function(t) { | |
253 var animation = createPausedAnimation(t); | |
254 animation.play(); | |
255 assert_equals(animation.startTime, null); | |
256 assert_equals(animation.currentTime, 0); | |
257 assert_equals(animation.playState, 'pending'); | |
258 }, "Calling play() on a paused animation"); | |
259 | |
260 test(function(t) { | |
261 var animation = createPausedAnimation(t); | |
262 animation.pause(); | |
263 assert_equals(animation.startTime, null); | |
264 assert_equals(animation.currentTime, 0); | |
265 assert_equals(animation.playState, 'paused'); | |
266 }, "Calling pause() on a paused animation"); | |
267 | |
268 test(function(t) { | |
269 var animation = createPausedAnimation(t); | |
270 animation.cancel(); | |
271 assert_equals(animation.startTime, null); | |
272 assert_equals(animation.currentTime, null); | |
273 assert_equals(animation.playState, 'idle'); | |
274 }, "Calling cancel() on a paused animation"); | |
275 | |
276 test(function(t) { | |
277 var animation = createPausedAnimation(t); | |
278 animation.finish(); | |
279 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
280 assert_equals(animation.currentTime, 100000); | |
281 assert_equals(animation.playState, 'finished'); | |
282 }, "Calling finish() on a paused animation"); | |
283 | |
284 test(function(t) { | |
285 var animation = createPausedAnimation(t); | |
286 animation.reverse(); | |
287 assert_equals(animation.startTime, null); | |
288 assert_equals(animation.currentTime, 100000); | |
289 assert_equals(animation.playState, 'pending'); | |
290 }, "Calling reverse() on a paused animation"); | |
291 | |
292 test(function(t) { | |
293 var animation = createPausedAnimation(t); | |
294 animation.currentTime = 1000; | |
295 assert_equals(animation.startTime, null); | |
296 assert_equals(animation.currentTime, 1000); | |
297 assert_equals(animation.playState, 'paused'); | |
298 }, "Setting currentTime on a paused animation"); | |
299 | |
300 test(function(t) { | |
301 var animation = createPausedAnimation(t); | |
302 animation.startTime = document.timeline.currentTime - 1000; | |
303 assert_equals(animation.startTime, document.timeline.currentTime - 1000); | |
304 assert_equals(animation.currentTime, 1000); | |
305 assert_equals(animation.playState, 'running'); | |
306 }, "Setting startTime on a paused animation"); | |
307 | |
308 test(function(t) { | |
309 var animation = createFinishedAnimation(t); | |
310 animation.play(); | |
311 assert_equals(animation.startTime, null); | |
312 assert_equals(animation.currentTime, 0); | |
313 assert_equals(animation.playState, 'pending'); | |
314 }, "Calling play() on a finished animation"); | |
315 | |
316 test(function(t) { | |
317 var animation = createFinishedAnimation(t); | |
318 animation.pause(); | |
319 assert_equals(animation.startTime, null); | |
320 assert_equals(animation.currentTime, 100000); | |
321 assert_equals(animation.playState, 'pending'); | |
322 }, "Calling pause() on a finished animation"); | |
323 | |
324 test(function(t) { | |
325 var animation = createFinishedAnimation(t); | |
326 animation.cancel(); | |
327 assert_equals(animation.startTime, null); | |
328 assert_equals(animation.currentTime, null); | |
329 assert_equals(animation.playState, 'idle'); | |
330 }, "Calling cancel() on a finished animation"); | |
331 | |
332 test(function(t) { | |
333 var animation = createFinishedAnimation(t); | |
334 animation.finish(); | |
335 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
336 assert_equals(animation.currentTime, 100000); | |
337 assert_equals(animation.playState, 'finished'); | |
338 }, "Calling finish() on a finished animation"); | |
339 | |
340 test(function(t) { | |
341 var animation = createFinishedAnimation(t); | |
342 animation.reverse(); | |
343 assert_equals(animation.startTime, null); | |
344 assert_equals(animation.currentTime, 100000); | |
345 assert_equals(animation.playState, 'pending'); | |
346 }, "Calling reverse() on a finished animation"); | |
347 | |
348 test(function(t) { | |
349 var animation = createFinishedAnimation(t); | |
350 animation.currentTime = 1000; | |
351 assert_equals(animation.startTime, document.timeline.currentTime - animation.c
urrentTime); | |
352 assert_equals(animation.currentTime, 1000); | |
353 assert_equals(animation.playState, 'running'); | |
354 }, "Setting currentTime on a finished animation"); | |
355 | |
356 async_test(function(t) { | |
357 var animation = createIdleAnimation(t); | |
358 animation.play(); | |
359 var animationCurrentTime = animation.currentTime; | |
360 var timelineCurrentTime = document.timeline.currentTime; | |
361 animation.ready.then(() => { | |
362 t.step(() => { | |
363 assert_equals(animation.playState, 'running'); | |
364 assert_greater_than_equal(animation.startTime, timelineCurrentTime); | |
365 assert_greater_than_equal(animation.currentTime, animationCurrentTime); | |
366 }); | |
367 t.done(); | |
368 }); | |
369 }, "PlayState is 'running' while playing a cancelled animation"); | |
370 | |
371 async_test(function(t) { | |
372 let animation = createRunningAnimation(t); | |
373 animation.pause(); | |
374 let animationCurrentTime = animation.currentTime; | |
375 animation.ready.then(() => { | |
376 t.step(() => { | |
377 assert_equals(animation.playState, 'paused'); | |
378 assert_equals(animation.startTime, null); | |
379 assert_greater_than_equal(animation.currentTime, animationCurrentTime); | |
380 }); | |
381 t.done(); | |
382 }); | |
383 }, "PlayState is 'running' while pausing a running animation"); | |
384 </script> | |
OLD | NEW |