animation-worklet/stateful-animator.https.html

<!DOCTYPE html>
<title>Basic use of stateful animator</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="target"></div>

<script id="stateful_animator_basic" type="text/worklet">
  registerAnimator("stateful_animator_basic", class {
    constructor(options, state = { test_local_time: 0 }) {
      this.test_local_time = state.test_local_time;
    }
    animate(currentTime, effect) {
      effect.localTime = this.test_local_time++;
    }
    state() {
      return {
        test_local_time: this.test_local_time
      };
    }
  });
</script>

<script id="stateless_animator_basic" type="text/worklet">
  registerAnimator("stateless_animator_basic", class {
    constructor(options, state = { test_local_time: 0 }) {
      this.test_local_time = state.test_local_time;
    }
    animate(currentTime, effect) {
      effect.localTime = this.test_local_time++;
    }
    // Unless a valid state function is provided, the animator is considered
    // stateless. e.g. animator with incorrect state function name.
    State() {
      return {
        test_local_time: this.test_local_time
      };
    }
  });
</script>

<script id="stateless_animator_preserves_effect_local_time" type="text/worklet">
  registerAnimator("stateless_animator_preserves_effect_local_time", class {
    animate(currentTime, effect) {
      // The local time will be carried over to the new global scope.
      effect.localTime = effect.localTime ? effect.localTime + 1 : 1;
    }
  });
</script>

<script id="stateless_animator_does_not_copy_effect_object" type="text/worklet">
  registerAnimator("stateless_animator_does_not_copy_effect_object", class {
    animate(currentTime, effect) {
      effect.localTime = effect.localTime ? effect.localTime + 1 : 1;
      effect.foo = effect.foo ? effect.foo + 1 : 1;
      // This condition becomes true once we switch global scope and only preserve local time
      // otherwise these values keep increasing in lock step.
      if (effect.localTime > effect.foo) {
        // This works as long as we switch global scope before 10000 frames.
        // which is a safe assumption.
        effect.localTime = 10000;
      }
    }
  });
</script>

<script id="state_function_returns_empty" type="text/worklet">
  registerAnimator("state_function_returns_empty", class {
    constructor(options, state = { test_local_time: 0 }) {
      this.test_local_time = state.test_local_time;
    }
    animate(currentTime, effect) {
      effect.localTime = this.test_local_time++;
    }
    state() {}
  });
</script>

<script id="state_function_returns_not_serializable" type="text/worklet">
  registerAnimator("state_function_returns_not_serializable", class {
    constructor(options) {
      this.test_local_time = 0;
    }
    animate(currentTime, effect) {
      effect.localTime = this.test_local_time++;
    }
    state() {
      return new Symbol('foo');
    }
  });
</script>

<script>
  const EXPECTED_FRAMES_TO_A_SCOPE_SWITCH = 15;
  async function localTimeDoesNotUpdate(animation) {
    // The local time stops increasing after the animator instance being dropped.
    // e.g. 0, 1, 2, .., n, n, n, n, .. where n is the frame that the global
    // scope switches at.
    let last_local_time = animation.effect.getComputedTiming().localTime;
    let frame_count = 0;
    const FRAMES_WITHOUT_CHANGE = 10;
    do {
      await new Promise(window.requestAnimationFrame);
      let current_local_time = animation.effect.getComputedTiming().localTime;
      if (approxEquals(last_local_time, current_local_time))
        ++frame_count;
      else
        frame_count = 0;
      last_local_time = current_local_time;
    } while (frame_count < FRAMES_WITHOUT_CHANGE);
  }

  async function localTimeResetsToZero(animation) {
    // The local time is reset upon global scope switching. e.g.
    // 0, 1, 2, .., 0, 1, 2, .., 0, 1, 2, .., 0, 1, 2, ...
    let reset_count = 0;
    const LOCAL_TIME_RESET_CHECK = 3;
    do {
      await new Promise(window.requestAnimationFrame);
      if (approxEquals(0, animation.effect.getComputedTiming().localTime))
        ++reset_count;
    } while (reset_count < LOCAL_TIME_RESET_CHECK);
  }

  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('stateful_animator_basic').textContent);
    const target = document.getElementById('target');
    const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
    const animation = new WorkletAnimation('stateful_animator_basic', effect);
    animation.play();

    // effect.localTime should be correctly increased upon global scope
    // switches for stateful animators.
    await waitForAnimationFrameWithCondition(_ => {
      return approxEquals(animation.effect.getComputedTiming().localTime,
          EXPECTED_FRAMES_TO_A_SCOPE_SWITCH);
    });

    animation.cancel();
  }, "Stateful animator can use its state to update the animation. Pass if test does not timeout");

  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('stateless_animator_basic').textContent);
    const target = document.getElementById('target');
    const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
    const animation = new WorkletAnimation('stateless_animator_basic', effect);
    animation.play();

    // The local time should be reset to 0 upon global scope switching for
    // stateless animators.
    await localTimeResetsToZero(animation);

    animation.cancel();
  }, "Stateless animator gets reecreated with 'undefined' state.");

  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('stateless_animator_preserves_effect_local_time').textContent);
    const target = document.getElementById('target');
    const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
    const animation = new WorkletAnimation('stateless_animator_preserves_effect_local_time', effect);
    animation.play();

    await waitForAnimationFrameWithCondition(_ => {
        return approxEquals(animation.effect.getComputedTiming().localTime,
            EXPECTED_FRAMES_TO_A_SCOPE_SWITCH);
    });

    animation.cancel();
  }, "Stateless animator should preserve the local time of its effect.");

  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('stateless_animator_does_not_copy_effect_object').textContent);
    const target = document.getElementById('target');
    const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
    const animation = new WorkletAnimation('stateless_animator_does_not_copy_effect_object', effect);
    animation.play();

    await waitForAnimationFrameWithCondition(_ => {
        return approxEquals(animation.effect.getComputedTiming().localTime, 10000);
    });

    animation.cancel();
  }, "Stateless animator should not copy the effect object.");

  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('state_function_returns_empty').textContent);
    const target = document.getElementById('target');
    const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
    const animation = new WorkletAnimation('state_function_returns_empty', effect);
    animation.play();

    // The local time should be reset to 0 upon global scope switching for
    // stateless animators.
    await localTimeResetsToZero(animation);

    animation.cancel();
  }, "Stateful animator gets recreated with 'undefined' state if state function returns undefined.");

  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('state_function_returns_not_serializable').textContent);
    const target = document.getElementById('target');
    const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000, iteration: Infinity });
    const animation = new WorkletAnimation('state_function_returns_not_serializable', effect);
    animation.play();

    // The local time of an animation increases until the registered animator
    // gets removed.
    await localTimeDoesNotUpdate(animation);

    animation.cancel();
  }, "Stateful Animator instance gets dropped (does not get migrated) if state function is not serializable.");
</script>