| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Animation.playbackRate</title> |
| <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-playbackrate"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <body> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| function assert_playbackrate(animation, |
| previousAnimationCurrentTime, |
| previousTimelineCurrentTime, |
| description) { |
| const animationCurrentTimeDifference = |
| animation.currentTime - previousAnimationCurrentTime; |
| const timelineCurrentTimeDifference = |
| animation.timeline.currentTime - previousTimelineCurrentTime; |
| |
| assert_times_equal(animationCurrentTimeDifference, |
| timelineCurrentTimeDifference * animation.playbackRate, |
| description); |
| } |
| |
| promise_test(t => { |
| const div = createDiv(t); |
| const animation = div.animate(null, 100 * MS_PER_SEC); |
| return animation.ready.then(() => { |
| animation.currentTime = 7 * MS_PER_SEC; // ms |
| animation.playbackRate = 0.5; |
| |
| assert_equals(animation.currentTime, 7 * MS_PER_SEC, |
| 'Reducing Animation.playbackRate should not change the currentTime ' + |
| 'of a playing animation'); |
| animation.playbackRate = 2; |
| assert_equals(animation.currentTime, 7 * MS_PER_SEC, |
| 'Increasing Animation.playbackRate should not change the currentTime ' + |
| 'of a playing animation'); |
| }); |
| }, 'Test the initial effect of setting playbackRate on currentTime'); |
| |
| promise_test(t => { |
| const div = createDiv(t); |
| const animation = div.animate(null, 100 * MS_PER_SEC); |
| animation.playbackRate = 2; |
| let previousTimelineCurrentTime; |
| let previousAnimationCurrentTime; |
| return animation.ready.then(() => { |
| previousAnimationCurrentTime = animation.currentTime; |
| previousTimelineCurrentTime = animation.timeline.currentTime; |
| return waitForAnimationFrames(1); |
| }).then(() => { |
| assert_playbackrate(animation, |
| previousAnimationCurrentTime, |
| previousTimelineCurrentTime, |
| 'animation.currentTime should be 2 times faster than timeline.'); |
| }); |
| }, 'Test the effect of setting playbackRate on currentTime'); |
| |
| promise_test(t => { |
| const div = createDiv(t); |
| const animation = div.animate(null, 100 * MS_PER_SEC); |
| animation.playbackRate = 2; |
| let previousTimelineCurrentTime; |
| let previousAnimationCurrentTime; |
| return animation.ready.then(() => { |
| previousAnimationCurrentTime = animation.currentTime; |
| previousTimelineCurrentTime = animation.timeline.currentTime; |
| animation.playbackRate = 1; |
| return waitForAnimationFrames(1); |
| }).then(() => { |
| assert_equals(animation.playbackRate, 1, |
| 'sanity check: animation.playbackRate is still 1.'); |
| assert_playbackrate(animation, |
| previousAnimationCurrentTime, |
| previousTimelineCurrentTime, |
| 'animation.currentTime should be the same speed as timeline now.'); |
| }); |
| }, 'Test the effect of setting playbackRate while playing animation'); |
| |
| </script> |
| </body> |
