animation-worklet/worklet-animation-local-time-null-2.https.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>Setting localTime to null means effect does not apply (reftest)</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<link rel="match" href="worklet-animation-local-time-null-2-ref.html">
<meta name="timeout" content="long">

<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: green;
  display: inline-block;
}
</style>

<div>
<div class="box" id="target1"></div>
<div class="box" id="target2"></div>
<div class="box" id="target3"></div>
<div class="box" id="target4"></div>
<div class="box" id="control"></div>
</div>


<script>
runInAnimationWorklet(`
  registerAnimator("blank_animator", class {
    animate(currentTime, effect) {
      // Unset effect.localTime is equivalent to 'null'
    }
  });

  registerAnimator("null_animator", class {
    animate(currentTime, effect) {
      effect.localTime = null;
    }
  });

  registerAnimator("drop_animator", class {
    animate(currentTime, effect) {
      if (currentTime < 500)
        effect.localTime = 500;
      else if (currentTime < 1000)
        effect.localTime = 0;
      else
        effect.localTime = null;
    }
  });

  registerAnimator("add_animator", class {
    animate(currentTime, effect) {
      if (currentTime < 1000)
        effect.localTime = 500;
      else
        effect.localTime = 0;
    }
  });
`).then(() => {

  const start_animation = (animator, targetId, keyframes) => {
    const animation = new WorkletAnimation(animator,
      new KeyframeEffect(
        document.getElementById(targetId),
        keyframes,
        {duration: 1000}
      )
    );
    animation.play();
    return animation;
  };

  start_animation('blank_animator','target1', [
    { transform: 'translateY(100px)' },
    { transform: 'translateY(200px)' }
  ]);

  start_animation('null_animator','target2', [
    { transform: 'translateY(100px)' },
    { transform: 'translateY(200px)' }
  ]);

  start_animation('drop_animator','target3', [
    { transform: 'translateY(100px)' },
    { transform: 'translateY(200px)' }
  ]);

  start_animation('drop_animator','target4', [
    { backgroundColor: 'red' },
    { backgroundColor: 'blue' }
  ]);

  // check that animation worklets are running to stop accidental pass
  const control_anim = start_animation('add_animator','control', [
    { backgroundColor: 'red', transform: 'translateY(100px)' },
    { backgroundColor: 'blue', transform: 'translateY(200px)' }
  ]);

  waitForAnimationFrameWithCondition(() => control_anim.currentTime > 1000)
    // long timeout due to laggy compositor thread on debug build.
    .then(() => waitForAsyncAnimationFrames(120))
    .then(takeScreenshot);
});


</script>