testing/web-platform/tests/animation-worklet/resources/animator-iframe.html
author Sotaro Ikeda <sotaro.ikeda.g@gmail.com>
Thu, 10 Jul 2025 00:10:09 +0000 (6 hours ago)
changeset 795941 23763b72c35abeead04f63e4503c28abc73d065d
parent 467171 855576c42e4bd1911e71ae61f49ff9fba4b52cdb
permissions -rw-r--r--
Bug 1976135 - Remove nightly only limitation of pref gfx.webrender.layer-compositor r=gfx-reviewers,gw Differential Revision: https://phabricator.services.mozilla.com/D256379
<!DOCTYPE html>
<style>
.greenbox {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
}
</style>
<script src="/web-animations/testcommon.js"></script>
<script src="../common.js"></script>

<script id="iframe_worklet" type="text/worklet">
registerAnimator("iframe_animator", class {
  animate(currentTime, effect) {
    effect.localTime = 600;
  }
});
registerAnimator("duplicate_animator", class {
  animate(currentTime, effect) {
    effect.localTime = 800;
  }
});
</script>

<div id="iframe_target" class="greenbox"></div>

<script>
runInAnimationWorklet(
  document.getElementById('iframe_worklet').textContent
).then(_ => {
  const target = document.getElementById('iframe_target');
  // Only create an animation for iframe_animator.
  const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
  const animation = new WorkletAnimation('iframe_animator', effect);
  animation.play();

  // wait until local times are synced back to the main thread.
  waitForAnimationFrameWithCondition(_ => {
    return getComputedStyle(target).opacity != '1';
  }).then(_ => {
    window.parent.postMessage(getComputedStyle(target).opacity, '*');
  });
 });
</script>