worklet-animation-without-target.https.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /animation-worklet/worklet-animation-without-target.https.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Verify that effect without target is supported</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>

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

<script>

setup(setupAndRegisterTests, {explicit_done: true});

async function setupAndRegisterTests() {

  await registerPassthroughAnimator();

  promise_test(async t => {

    const effect = new KeyframeEffect(null,

      { transform: ['translateY(100px)', 'translateY(200px)'] },

      { duration: Infinity, iterations: 1 }

);

    const animation = new WorkletAnimation('passthrough', effect);

    animation.play();

    // Allow one async animation frame to pass so that animation is running.

    await waitForAsyncAnimationFrames(1);

    assert_equals(animation.playState, "running");

    // Allow time to advance so that we have a non-zero current time.

    await waitForDocumentTimelineAdvance();

    const t0 = document.timeline.currentTime;

    assert_greater_than(animation.currentTime, 0);

    assert_times_equal(animation.currentTime, (t0 - animation.startTime));

    assert_equals(animation.playState, "running");

    animation.cancel();

  }, 'Animating effect with no target should work.');

  promise_test(async t => {

    const effect = new KeyframeEffect(document.getElementById('box'),

      { transform: ['translateY(100px)', 'translateY(200px)'] },

      { duration: Infinity, iterations: 1 }

);

    const animation = new WorkletAnimation('passthrough', effect);

    animation.play();

    // Allow one async animation frame to pass so that animation is running.

    await waitForAsyncAnimationFrames(1);

    assert_equals(animation.playState, "running");

    // Allow time to advance so that we have a non-zero current time.

    await waitForDocumentTimelineAdvance();

    const t0 = document.timeline.currentTime;

    assert_greater_than(animation.currentTime, 0);

    assert_times_equal(animation.currentTime, (t0 - animation.startTime));

    assert_equals(animation.playState, "running");

    await waitForDocumentTimelineAdvance();

    animation.effect.target = null;

    const t1 = document.timeline.currentTime;

    assert_times_equal(animation.currentTime, (t1 - animation.startTime));

    assert_equals(animation.playState, "running");

    await waitForDocumentTimelineAdvance();

    animation.effect.target = document.getElementById('box');

    const t2 = document.timeline.currentTime;

    assert_times_equal(animation.currentTime, (t2 - animation.startTime));

    assert_equals(animation.playState, "running");

    animation.cancel();

  }, 'The existence of a target does not affect the animation.');

  done();

</script>