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

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /animation-worklet/worklet-animation-with-effects-from-different-frames.https.html - WPT Dashboard Interop Dashboard

<!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>