mozilla-release/testing/web-platform/tests/animation-worklet/animation-worklet-inside-iframe.https.html

<!DOCTYPE html>
<title>Test that AnimationWorklet inside frames with different origin causes new global scopes</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>

<style>
.redbox {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
</style>

<div id="target" class="redbox"></div>

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

<script>
async_test(t => {
  // Wait for iframe to load and start its animations.
  window.onmessage = function(msg) {
    window.requestAnimationFrame( _ => {
      run_test(msg.data);
    });
  };

  // Create and load the iframe to avoid racy cases.
  var iframe = document.createElement('iframe');
  iframe.src = 'resources/animator-iframe.html';
  document.body.appendChild(iframe);

  function run_test(data) {
    runInAnimationWorklet(
      document.getElementById('main_worklet').textContent
    ).then(_ => {
      // Create an animation for duplicate animator.
      const target = document.getElementById('target');
      const animation = new WorkletAnimation('duplicate_animator', new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }));
      animation.play();

      assert_equals(data, '0.4');

      // wait until local times are synced back to the main thread.
      waitForAnimationFrameWithCondition(_ => {
        return getComputedStyle(target).opacity != '1';
      }).then(t.step_func_done(() => {
        assert_equals(getComputedStyle(target).opacity, '0.5');
      }));
    });
  }
}, 'Both main frame and iframe should update the opacity of their target');
</script>