93451c0d1c79c517a23a376c6f1039499c53c6bd
[WebKit-https.git] / LayoutTests / imported / mozilla / css-transitions / test_animation-pausing.html
1 <!doctype html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=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 <body>
7 <div id="log"></div>
8 <script>
9 'use strict';
10
11 async_test(function(t) {
12   var div = addDiv(t);
13   var cs = getComputedStyle(div);
14
15   div.style.marginLeft = '0px';
16   cs.marginLeft; // Flush style to set up transition start point
17   div.style.transition = 'margin-left 100s';
18   div.style.marginLeft = '10000px';
19   cs.marginLeft;
20
21   var animation = div.getAnimations()[0];
22   var previousProgress = animation.effect.getComputedTiming().progress;
23   assert_equals(previousProgress, 0, 'Initial value of progress is zero');
24
25   animation.ready.then(waitForNextFrame).then(t.step_func(function() {
26     assert_greater_than(animation.effect.getComputedTiming().progress,
27                         previousProgress,
28                         'Iteration progress is initially increasing');
29     animation.pause();
30     return animation.ready;
31   })).then(t.step_func(function() {
32     previousProgress = animation.effect.getComputedTiming().progress;
33     return waitForNextFrame();
34   })).then(t.step_func(function() {
35     assert_equals(animation.effect.getComputedTiming().progress,
36                   previousProgress,
37                   'Iteration progress does not increase after calling pause()');
38     previousProgress = animation.effect.getComputedTiming().progress;
39     animation.play();
40     return animation.ready.then(waitForNextFrame);
41   })).then(t.step_func(function() {
42     assert_greater_than(animation.effect.getComputedTiming().progress,
43                         previousProgress,
44                         'Iteration progress increases after calling play()');
45     t.done();
46   }));
47 }, 'pause() and play() a transition');
48
49 </script>
50 </body>