worklet-animation-creation.https.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 8 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /animation-worklet/worklet-animation-creation.https.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Verify that WorkletAnimation is correctly created</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>

  .scroller {

    height: 100px;

    width: 100px;

    overflow: scroll;

  .content {

    height: 500px;

    width: 500px;

</style>

<script>

function CreateKeyframeEffect(element) {

  return new KeyframeEffect(

      element,

        { transform: 'translateY(0%)' },

        { transform: 'translateY(100%)' }

],

      { duration: 3000, fill: 'forwards' }

);

</script>

<script id="simple_animate" type="text/worklet">

  registerAnimator("test-animator", class {

    animate(currentTime, effect) {}

});

</script>

<div id='element'></div>

<div id='element2'></div>

<div class='scroller'>

  <div class='content'></div>

</div>

<script>

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let effect = CreateKeyframeEffect(document.querySelector('#element'));

    let workletAnimation = new WorkletAnimation('test-animator', effect);

    assert_equals(workletAnimation.playState, 'idle');

    assert_equals(workletAnimation.timeline, document.timeline);

  }, 'WorkletAnimation creation without timeline should use default documentation timeline');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let effect = CreateKeyframeEffect(document.querySelector('#element'));

    let workletAnimation = new WorkletAnimation('test-animator', effect);

    assert_equals(workletAnimation.playState, 'idle');

  }, 'WorkletAnimation creation with timeline should work');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    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_document = iframe.contentDocument;

    let effect = CreateKeyframeEffect(iframe_document.getElementById('iframe_box'));

    let animation_with_main_frame_timeline =

        new WorkletAnimation('test-animator', effect, document.timeline);

    assert_equals(animation_with_main_frame_timeline.timeline, document.timeline);

    let animation_with_iframe_timeline =

        new WorkletAnimation('test-animator', effect, iframe_document.timeline);

    assert_equals(animation_with_iframe_timeline.timeline, iframe_document.timeline);

    let animation_with_default_timeline = new WorkletAnimation('test-animator', effect);

    // The spec says that the default timeline is taken from 'the Document that is

    // associated with the window that is the current global object'. In this case

    // that is the main document's timeline, not the iframe (despite the target

    // being in the iframe).

    assert_equals(animation_with_default_timeline.timeline, document.timeline);

    iframe.remove();

  }, 'WorkletAnimation creation should choose the correct timeline based on the current global object');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let effect = CreateKeyframeEffect(document.querySelector('#element'));

    let options = { my_param: 'foo', my_other_param: true };

    let workletAnimation = new WorkletAnimation(

        'test-animator', effect, document.timeline, options);

    assert_equals(workletAnimation.playState, 'idle');

  }, 'WorkletAnimation creation with timeline and options should work');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let effect = CreateKeyframeEffect(document.querySelector('#element'));

    let scroller = document.querySelector('.scroller');

    let scrollTimeline = new ScrollTimeline(

        { scrollSource: scroller, orientation: 'inline' });

    let workletAnimation = new WorkletAnimation(

        'test-animator', effect, scrollTimeline);

    assert_equals(workletAnimation.playState, 'idle');

  }, 'ScrollTimeline is a valid timeline for a WorkletAnimation');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let constructorFunc = function() { new WorkletAnimation(

        'test-animator', []); };

    assert_throws_dom('NotSupportedError', constructorFunc);

  }, 'If there are no effects specified, object construction should fail');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let effect = CreateKeyframeEffect(document.querySelector('#element'));

    let otherDoc = document.implementation.createHTMLDocument();

    let otherElement = otherDoc.createElement('div');

    otherDoc.body.appendChild(otherElement);

    let otherEffect = CreateKeyframeEffect(otherElement);

    let workletAnimation = new WorkletAnimation(

        'test-animator', [ effect, otherEffect ]);

    assert_equals(workletAnimation.playState, 'idle');

  }, 'Creating animation with effects from different documents is allowed');

  promise_test(async t => {

    await runInAnimationWorklet(document.getElementById('simple_animate').textContent);

    let effect = CreateKeyframeEffect(document.querySelector('#element'));

    let constructorFunc = function() {

        new WorkletAnimation('unregistered-animator', effect);

};

    assert_throws_dom('InvalidStateError', constructorFunc);

  }, 'Constructing worklet animation for unregisested animator should throw');

</script>