worklet-animation-get-computed-timing-progress-on-worklet-thread.https.html (3528B)
1 <html> 2 <title>Animation Worklet should update calculated timing whenever localTime changes</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="box"></div> 11 12 <script id="get_computed_timing_animator" type="text/worklet"> 13 registerAnimator('get_computed_timing', class { 14 constructor(options, state) { 15 this.step = state ? state.step : 0; 16 } 17 state() { 18 return { 19 step: 0 20 } 21 } 22 animate(currentTime, effect){ 23 if (this.step === 0){ 24 // check calculated timing values before ever setting effect.localTime 25 effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); 26 this.step = 1; 27 } 28 else if (this.step === 1){ 29 // set effect.localTime, this should be the first time calculated timing values are computed 30 effect.localTime = 420; // 20% of the way through the last iteration 31 32 // using the calculated timing of effect, set effect.localTime. 33 effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); 34 this.step = 2; 35 } 36 else if (this.step === 2){ 37 // set effect.localTime to null 38 effect.localTime = null; 39 effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); 40 this.step = 3; 41 } 42 else if (this.step === 3){ 43 // Check to make sure we can go from null to a valid localTime and that calculated timing values are computed 44 effect.localTime = 350; // 50% of the way through second iteration 45 effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); 46 this.step = 4; 47 } 48 } 49 }); 50 </script> 51 52 <script> 53 promise_test(async t => { 54 await runInAnimationWorklet(document.getElementById('get_computed_timing_animator').textContent); 55 56 const box = document.getElementById("box"); 57 const effect = new KeyframeEffect( 58 box, 59 [ 60 { opacity: 0 }, 61 { opacity: 1 } 62 ], { 63 delay: 200, 64 duration: 100, 65 iterations: 3 66 } 67 ); 68 69 const animation = new WorkletAnimation('get_computed_timing', effect); 70 animation.play(); 71 72 // check calculated timing values before ever setting effect.localTime 73 await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 0)}); 74 75 // Check to make sure initial values can be set for computed timing 76 await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 220)}); 77 78 // Make sure setting effect.localTime to null causes calculated timing values to be computed 79 await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 0)}); 80 81 // Make sure we can go from null to a valid localTime and that calculated timing values are computed 82 await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 150)}); 83 84 // Passes if it doesn't timeout 85 animation.cancel(); 86 }, "WorkletAnimation effect should recompute its calculated timing if its local time changes"); 87 </script>