current-time.https.html (2015B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>The current time of a worklet animation</title> 4 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="common.js"></script> 10 11 <div id="box"></div> 12 13 <script> 14 'use strict'; 15 16 function CreateAnimation() { 17 const box = document.getElementById('box'); 18 const effect = new KeyframeEffect( 19 box, 20 { height: ['100px', '50px'] }, 21 10000); 22 23 return new WorkletAnimation('passthrough', effect); 24 } 25 26 setup(setupAndRegisterTests, {explicit_done: true}); 27 28 function setupAndRegisterTests() { 29 registerPassthroughAnimator().then(() => { 30 promise_test(async t => { 31 const animation = CreateAnimation(); 32 animation.play(); 33 34 assert_equals(animation.currentTime, 0, 35 'Current time returns the hold time set when entering the play-pending' + 36 'state'); 37 38 animation.cancel(); 39 }, 'The current time returns the hold time when set'); 40 41 promise_test(async t => { 42 const animation = CreateAnimation(); 43 animation.play(); 44 45 // Allow one async animation frame to pass so that animation is running. 46 await waitForAsyncAnimationFrames(1); 47 assert_equals(animation.playState, "running"); 48 // Allow time to advance so that we have a non-zero current time. 49 await waitForDocumentTimelineAdvance(); 50 const timelineTime = document.timeline.currentTime; 51 assert_greater_than(animation.currentTime, 0); 52 assert_times_equal(animation.currentTime, (timelineTime - animation.startTime)); 53 54 animation.cancel(); 55 }, 'The current time is calculated from the timeline time and start time'); 56 57 done(); 58 }); 59 } 60 61 // TODO(majidvp): Add tests for playbackRate and animations that are not 62 // associated with a timeline once these are supported in WorkletAnimation. 63 // http://crbug.com/833846 64 </script>