[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_animation-finish.html
1 <!doctype html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <meta charset=utf-8>
3 <script src="../../../resources/testharness.js"></script>
4 <script src="../../../resources/testharnessreport.js"></script>
5 <script src="../resources/testcommon.js"></script>
6 <style>
7 @keyframes anim {
8   from { margin-left: 100px; }
9   to { margin-left: 200px; }
10 }
11 </style>
12 <body>
13 <div id="log"></div>
14 <script>
15
16 'use strict';
17
18 const ANIM_PROP_VAL = 'anim 100s';
19 const ANIM_DURATION = 100000; // ms
20
21 test(function(t) {
22   var div = addDiv(t);
23   div.style.animation = ANIM_PROP_VAL;
24   div.style.animationIterationCount = 'infinite';
25   var animation = div.getAnimations()[0];
26
27   var threw = false;
28   try {
29     animation.finish();
30   } catch (e) {
31     threw = true;
32     assert_equals(e.name, 'InvalidStateError',
33                   'Exception should be an InvalidStateError exception when ' +
34                   'trying to finish an infinite animation');
35   }
36   assert_true(threw,
37               'Expect InvalidStateError exception trying to finish an ' +
38               'infinite animation');
39 }, 'Test exceptions when finishing infinite animation');
40
41 async_test(function(t) {
42   var div = addDiv(t);
43   div.style.animation = ANIM_PROP_VAL + ' paused';
44   var animation = div.getAnimations()[0];
45
46   animation.ready.then(t.step_func(function() {
47     animation.finish();
48     assert_equals(animation.playState, 'finished',
49                   'The play state of a paused animation should become ' +
50                   '"finished" after finish() is called');
51     assert_times_equal(animation.startTime,
52                        animation.timeline.currentTime - ANIM_DURATION,
53                        'The start time of a paused animation should be set ' +
54                        'after calling finish()');
55     t.done();
56   }));
57 }, 'Test finish() while paused');
58
59 test(function(t) {
60   var div = addDiv(t);
61   div.style.animation = ANIM_PROP_VAL + ' paused';
62   var animation = div.getAnimations()[0];
63
64   // Update playbackRate so we can test that the calculated startTime
65   // respects it
66   animation.playbackRate = 2;
67
68   // While animation is still pause-pending call finish()
69   animation.finish();
70
71   assert_equals(animation.playState, 'finished',
72                 'The play state of a pause-pending animation should become ' +
73                 '"finished" after finish() is called');
74   assert_times_equal(animation.startTime,
75                      animation.timeline.currentTime - ANIM_DURATION / 2,
76                      'The start time of a pause-pending animation should ' +
77                      'be set after calling finish()');
78 }, 'Test finish() while pause-pending with positive playbackRate');
79
80 test(function(t) {
81   var div = addDiv(t);
82   div.style.animation = ANIM_PROP_VAL + ' paused';
83   var animation = div.getAnimations()[0];
84
85   animation.playbackRate = -2;
86   animation.finish();
87
88   assert_equals(animation.playState, 'finished',
89                 'The play state of a pause-pending animation should become ' +
90                 '"finished" after finish() is called');
91   assert_equals(animation.startTime, animation.timeline.currentTime,
92                 'The start time of a pause-pending animation should be ' +
93                 'set after calling finish()');
94 }, 'Test finish() while pause-pending with negative playbackRate');
95
96 </script>
97 </body>