animate-non-accelerated-property.https.html (1525B)
1 <!DOCTYPE html> 2 <title>Animate non-accelerated property using 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 <div id="target2"></div> 12 13 <script> 14 promise_test(async t => { 15 await registerConstantLocalTimeAnimator(1000); 16 const target = document.getElementById("target"); 17 const effect = new KeyframeEffect( 18 target, 19 [ 20 { background: 'green' }, 21 { background: 'blue' }, 22 ], 23 { duration: 2000 } 24 ); 25 26 const target2 = document.getElementById("target2"); 27 const effect2 = new KeyframeEffect( 28 target2, 29 [ 30 { boxShadow: '4px 4px 25px blue' }, 31 { boxShadow: '4px 4px 25px green' } 32 ], 33 { duration: 2000 } 34 ); 35 const animation = new WorkletAnimation('constant_time', effect); 36 animation.play(); 37 const animation2 = new WorkletAnimation('constant_time', effect2); 38 animation2.play(); 39 40 await waitForAsyncAnimationFrames(1); 41 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 64, 128)"); 42 assert_equals(getComputedStyle(target2).boxShadow, "rgb(0, 64, 128) 4px 4px 25px 0px"); 43 }, "Individual worklet animation should output values at specified local time for corresponding targets and effects"); 44 </script>