animator-with-options.https.html (1367B)
1 <!DOCTYPE html> 2 <title>Worklet Animation with options</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 id="animate_with_options" type="text/worklet"> 13 registerAnimator("test_animator", class { 14 constructor(options) { 15 this.time_ = options.time; 16 } 17 animate(currentTime, effect) { 18 effect.localTime = this.time_; 19 } 20 }); 21 </script> 22 23 <script> 24 promise_test(async t => { 25 await runInAnimationWorklet(document.getElementById('animate_with_options').textContent); 26 const target = document.getElementById('target'); 27 const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); 28 const options = {'time': 500}; 29 const animation = new WorkletAnimation('test_animator', effect, document.timeline, options); 30 animation.play(); 31 32 // wait until local times are synced back to the main thread. 33 await waitForAnimationFrameWithCondition(_ => { 34 return getComputedStyle(target).opacity != '1'; 35 }); 36 assert_equals(getComputedStyle(target).opacity, "0.5"); 37 }, "Animator should be able to use options to update the animation"); 38 </script>