| <html> |
| <title>Animation Worklet should update calculated timing whenever localTime changes</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="common.js"></script> |
| |
| <div id="box"></div> |
| |
| <script id="get_computed_timing_animator" type="text/worklet"> |
| registerAnimator('get_computed_timing', class { |
| constructor(options, state) { |
| this.step = state ? state.step : 0; |
| } |
| state() { |
| return { |
| step: 0 |
| } |
| } |
| animate(currentTime, effect){ |
| if (this.step === 0){ |
| // check calculated timing values before ever setting effect.localTime |
| effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); |
| this.step = 1; |
| } |
| else if (this.step === 1){ |
| // set effect.localTime, this should be the first time calculated timing values are computed |
| effect.localTime = 420; // 20% of the way through the last iteration |
| |
| // using the calculated timing of effect, set effect.localTime. |
| effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); |
| this.step = 2; |
| } |
| else if (this.step === 2){ |
| // set effect.localTime to null |
| effect.localTime = null; |
| effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); |
| this.step = 3; |
| } |
| else if (this.step === 3){ |
| // Check to make sure we can go from null to a valid localTime and that calculated timing values are computed |
| effect.localTime = 350; // 50% of the way through second iteration |
| effect.localTime = (effect.getComputedTiming().currentIteration * 100) + (effect.getComputedTiming().progress * 100); |
| this.step = 4; |
| } |
| } |
| }); |
| </script> |
| |
| <script> |
| promise_test(async t => { |
| await runInAnimationWorklet(document.getElementById('get_computed_timing_animator').textContent); |
| |
| const box = document.getElementById("box"); |
| const effect = new KeyframeEffect( |
| box, |
| [ |
| { opacity: 0 }, |
| { opacity: 1 } |
| ], { |
| delay: 200, |
| duration: 100, |
| iterations: 3 |
| } |
| ); |
| |
| const animation = new WorkletAnimation('get_computed_timing', effect); |
| animation.play(); |
| |
| // check calculated timing values before ever setting effect.localTime |
| await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 0)}); |
| |
| // Check to make sure initial values can be set for computed timing |
| await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 220)}); |
| |
| // Make sure setting effect.localTime to null causes calculated timing values to be computed |
| await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 0)}); |
| |
| // Make sure we can go from null to a valid localTime and that calculated timing values are computed |
| await waitForAnimationFrameWithCondition(() => {return approxEquals(effect.getComputedTiming().localTime, 150)}); |
| |
| // Passes if it doesn't timeout |
| animation.cancel(); |
| }, "WorkletAnimation effect should recompute its calculated timing if its local time changes"); |
| </script> |