cancel-non-accelerated-property.https.html (1387B)
1 <!DOCTYPE html> 2 <title>Cancel 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 <style> 11 #target { 12 background-color: red; 13 } 14 </style> 15 16 <div id="target"></div> 17 18 <script> 19 promise_test(async t => { 20 await registerConstantLocalTimeAnimator(1000); 21 const target = document.getElementById('target'); 22 const effect = new KeyframeEffect( 23 target, 24 [ 25 { background: 'green' }, 26 { background: 'blue' }, 27 ], 28 { 29 duration: 2000, 30 iteration: Infinity 31 } 32 ); 33 const animation = new WorkletAnimation('constant_time', effect); 34 animation.play(); 35 36 await waitForAsyncAnimationFrames(1); 37 // establish that the animation started 38 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 64, 128)"); 39 animation.cancel(); 40 41 await waitForAsyncAnimationFrames(1); 42 // confirm the animation is cancelled 43 assert_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)"); 44 }, "Animation should update the outputs after starting and then return to pre-animated values after being cancelled"); 45 </script>