summaryrefslogtreecommitdiffstats
path: root/dom/animation/test/css-animations/file_animation-finish.html
blob: 996cb2ce7fa7b96e52c3b8afbf430a3c626c18cc (plain)
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
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes anim {
  from { margin-left: 100px; }
  to { margin-left: 200px; }
}
</style>
<body>
<script>

'use strict';

const ANIM_PROP_VAL = 'anim 100s';
const ANIM_DURATION = 100000; // ms

test(function(t) {
  var div = addDiv(t);
  div.style.animation = ANIM_PROP_VAL;
  div.style.animationIterationCount = 'infinite';
  var animation = div.getAnimations()[0];

  var threw = false;
  try {
    animation.finish();
  } catch (e) {
    threw = true;
    assert_equals(e.name, 'InvalidStateError',
                  'Exception should be an InvalidStateError exception when ' +
                  'trying to finish an infinite animation');
  }
  assert_true(threw,
              'Expect InvalidStateError exception trying to finish an ' +
              'infinite animation');
}, 'Test exceptions when finishing infinite animation');

async_test(function(t) {
  var div = addDiv(t);
  div.style.animation = ANIM_PROP_VAL + ' paused';
  var animation = div.getAnimations()[0];

  animation.ready.then(t.step_func(function() {
    animation.finish();
    assert_equals(animation.playState, 'finished',
                  'The play state of a paused animation should become ' +
                  '"finished" after finish() is called');
    assert_approx_equals(animation.startTime,
                         animation.timeline.currentTime - ANIM_DURATION,
                         0.0001,
                         'The start time of a paused animation should be set ' +
                         'after calling finish()');
    t.done();
  }));
}, 'Test finish() while paused');

test(function(t) {
  var div = addDiv(t);
  div.style.animation = ANIM_PROP_VAL + ' paused';
  var animation = div.getAnimations()[0];

  // Update playbackRate so we can test that the calculated startTime
  // respects it
  animation.playbackRate = 2;

  // While animation is still pause-pending call finish()
  animation.finish();

  assert_equals(animation.playState, 'finished',
                'The play state of a pause-pending animation should become ' +
                '"finished" after finish() is called');
  assert_approx_equals(animation.startTime,
                       animation.timeline.currentTime - ANIM_DURATION / 2,
                       0.0001,
                       'The start time of a pause-pending animation should ' +
                       'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');

test(function(t) {
  var div = addDiv(t);
  div.style.animation = ANIM_PROP_VAL + ' paused';
  var animation = div.getAnimations()[0];

  animation.playbackRate = -2;
  animation.finish();

  assert_equals(animation.playState, 'finished',
                'The play state of a pause-pending animation should become ' +
                '"finished" after finish() is called');
  assert_equals(animation.startTime, animation.timeline.currentTime,
                'The start time of a pause-pending animation should be ' +
                'set after calling finish()');
}, 'Test finish() while pause-pending with negative playbackRate');

done();
</script>
</body>