animation-worklet/worklet-animation-with-effects-from-different-frames.https.html

<!DOCTYPE html>
<title>Worklet animation can animate effects from different frames</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="common.js"></script>

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

<script id="simple_animate" type="text/worklet">
  registerAnimator("test_animator", class {
    animate(currentTime, effect) {
      let effects = effect.getChildren();
      effects[0].localTime = 500;
      effects[1].localTime = 750;
    }
  });
</script>

<script>
  promise_test(async t => {
    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);
    const effect = new KeyframeEffect(box, [{ opacity: 0 }], { duration: 1000 });

    let iframe = document.createElement('iframe');
    iframe.src = 'resources/iframe.html';
    document.body.appendChild(iframe);

    await waitForAnimationFrameWithCondition(_ => {
      return iframe.contentDocument.getElementById('iframe_box') != null;
    });
    let iframe_box = iframe.contentDocument.getElementById('iframe_box');
    let iframe_effect = new KeyframeEffect(
        iframe_box, [{ opacity: 0 }], { duration: 1000 }
    );

    const animation = new WorkletAnimation('test_animator', [effect, iframe_effect]);
    animation.play();

    await waitForNotNullLocalTime(animation);
    assert_equals(getComputedStyle(box).opacity, '0.5');
    assert_equals(getComputedStyle(iframe_box).opacity, '0.25');

    iframe.remove();
    animation.cancel();
  }, "Effects from different documents can be animated within one worklet animation");
</script>