visual-update.html | Explore in Territory

<!DOCTYPE html>
<style>
#box {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
}

#covered {
  width: 100px;
  height: 100px;
  background-color: #ff8080;
}
</style>

<div id="box"></div>
<div id="covered"></div>

<script id="visual_update"  type="text/worklet">
registerAnimator("test_animator", class {
  animate(currentTime, effect) {
    effect.localTime = 500;
  }
});
</script>

<script src="resources/animation-worklet-tests.js"></script>
<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}

runInAnimationWorklet(
  document.getElementById('visual_update').textContent
).then(()=>{
  const $box = document.getElementById('box');
  const effect = new KeyframeEffect($box,
    [
     { transform: 'translateY(0)', opacity: 1},
     { transform: 'translateY(200px)', opacity: 0}
    ], {
      duration: 1000
    }
  );

  const animation = new WorkletAnimation('test_animator', [effect], document.timeline, {});
  animation.play();

  if (window.testRunner) {
    waitForAnimationFrames(3, _ => {
      testRunner.notifyDone();
    });
  }
});
</script>

chromium/third_party/blink/web_tests/animations/animationworklet/visual-update.html