animation-worklet/worklet-animation-get-computed-timing-progress-on-worklet-thread.https.html

<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>