OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> |
| 3 <title>Animation.playbackRate</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playb
ackrate"> |
| 5 <script src="../../../../resources/testharness.js"></script> |
| 6 <script src="../../../../resources/testharnessreport.js"></script> |
| 7 <script src="../testcommon.js"></script> |
| 8 <link rel="stylesheet" href="../../../../resources/testharness.css"> |
| 9 <body> |
| 10 <div id="log"></div> |
| 11 <script> |
| 12 "use strict"; |
| 13 |
| 14 var keyFrames = { 'marginLeft': ['100px', '200px'] }; |
| 15 |
| 16 function assert_playbackrate(animation, |
| 17 previousAnimationCurrentTime, |
| 18 previousTimelineCurrentTime, |
| 19 description) { |
| 20 var accuracy = 0.001; /* accuracy of DOMHighResTimeStamp */ |
| 21 var animationCurrentTimeDifference = |
| 22 animation.currentTime - previousAnimationCurrentTime; |
| 23 var timelineCurrentTimeDifference = |
| 24 animation.timeline.currentTime - previousTimelineCurrentTime; |
| 25 |
| 26 assert_approx_equals(animationCurrentTimeDifference, |
| 27 timelineCurrentTimeDifference * animation.playbackRate, |
| 28 accuracy, |
| 29 description); |
| 30 } |
| 31 |
| 32 promise_test(function(t) { |
| 33 var div = createDiv(t); |
| 34 var animation = div.animate({keyFrames}, 100 * MS_PER_SEC); |
| 35 return animation.ready.then(function() { |
| 36 animation.currentTime = 7 * MS_PER_SEC; // ms |
| 37 animation.playbackRate = 0.5; |
| 38 |
| 39 assert_equals(animation.currentTime, 7 * MS_PER_SEC, |
| 40 'Reducing Animation.playbackRate should not change the currentTime ' + |
| 41 'of a playing animation'); |
| 42 animation.playbackRate = 2; |
| 43 assert_equals(animation.currentTime, 7 * MS_PER_SEC, |
| 44 'Increasing Animation.playbackRate should not change the currentTime ' + |
| 45 'of a playing animation'); |
| 46 }); |
| 47 }, 'Test the initial effect of setting playbackRate on currentTime'); |
| 48 |
| 49 promise_test(function(t) { |
| 50 var div = createDiv(t); |
| 51 var animation = div.animate({keyFrames}, 100 * MS_PER_SEC); |
| 52 animation.playbackRate = 2; |
| 53 var previousTimelineCurrentTime; |
| 54 var previousAnimationCurrentTime; |
| 55 return animation.ready.then(function() { |
| 56 previousAnimationCurrentTime = animation.currentTime; |
| 57 previousTimelineCurrentTime = animation.timeline.currentTime; |
| 58 return waitForAnimationFrames(1); |
| 59 }).then(function() { |
| 60 assert_playbackrate(animation, |
| 61 previousAnimationCurrentTime, |
| 62 previousTimelineCurrentTime, |
| 63 'animation.currentTime should be 2 times faster than timeline.'); |
| 64 }); |
| 65 }, 'Test the effect of setting playbackRate on currentTime'); |
| 66 |
| 67 promise_test(function(t) { |
| 68 var div = createDiv(t); |
| 69 var animation = div.animate({keyFrames}, 100 * MS_PER_SEC); |
| 70 animation.playbackRate = 2; |
| 71 var previousTimelineCurrentTime; |
| 72 var previousAnimationCurrentTime; |
| 73 return animation.ready.then(function() { |
| 74 previousAnimationCurrentTime = animation.currentTime; |
| 75 previousTimelineCurrentTime = animation.timeline.currentTime; |
| 76 animation.playbackRate = 1; |
| 77 return waitForAnimationFrames(1); |
| 78 }).then(function() { |
| 79 assert_equals(animation.playbackRate, 1, |
| 80 'sanity check: animation.playbackRate is still 1.'); |
| 81 assert_playbackrate(animation, |
| 82 previousAnimationCurrentTime, |
| 83 previousTimelineCurrentTime, |
| 84 'animation.currentTime should be the same speed as timeline now.'); |
| 85 }); |
| 86 }, 'Test the effect of setting playbackRate while playing animation'); |
| 87 |
| 88 </script> |
| 89 </body> |
OLD | NEW |