worklet-animation-play.https.html (1610B)
1 <!DOCTYPE html> 2 <title>Basic use of Worklet Animation</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="common.js"></script> 9 10 <div id="target"></div> 11 12 <script> 13 promise_test(async t => { 14 await registerConstantLocalTimeAnimator(500); 15 const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); 16 const animation = new WorkletAnimation('constant_time', effect); 17 animation.play(); 18 19 // wait until local times are synced back to the main thread. 20 await waitForAnimationFrameWithCondition(_ => { 21 return getComputedStyle(target).opacity != '1'; 22 }); 23 assert_equals(getComputedStyle(target).opacity, "0.5"); 24 25 animation.cancel(); 26 }, "A running worklet animation should output values at specified local time."); 27 28 promise_test(async t => { 29 await registerConstantLocalTimeAnimator(500); 30 const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); 31 const animation = new WorkletAnimation('constant_time', effect); 32 animation.play(); 33 34 await waitForAnimationFrameWithCondition(_=> { 35 return animation.playState == "running" 36 }); 37 38 const prevCurrentTime = animation.currentTime; 39 animation.play(); 40 assert_equals(animation.playState, "running"); 41 assert_equals(animation.currentTime, prevCurrentTime) 42 43 animation.cancel(); 44 }, "Playing a running animation should be a no-op."); 45 </script>