animate-no-browsing-context.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:
- /web-animations/interfaces/Animatable/animate-no-browsing-context.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset=utf-8>

<title>Animatable.animate in combination with elements in documents

       without a browsing context</title>

<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animatable-animate">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="../../testcommon.js"></script>

<div id="log"></div>

<script>

'use strict';

//

// The following tests relate to animations on elements in documents without

// a browsing context. This is NOT the same as documents that are not bound to

// a document tree.

//

function getXHRDoc(t) {

  return new Promise(resolve => {

    const xhr = new XMLHttpRequest();

    xhr.open('GET', '../../resources/xhr-doc.py');

    xhr.responseType = 'document';

    xhr.onload = t.step_func(() => {

      assert_equals(xhr.readyState, xhr.DONE,

                    'Request should complete successfully');

      assert_equals(xhr.status, 200,

                    'Response should be OK');

      resolve(xhr.responseXML);

});

    xhr.send();

});

promise_test(t => {

  return getXHRDoc(t).then(xhrdoc => {

    const div = xhrdoc.getElementById('test');

    const anim = div.animate(null);

    assert_class_string(anim.timeline, 'DocumentTimeline',

                        'Animation should have a timeline');

    assert_equals(anim.timeline, xhrdoc.timeline,

                  'Animation timeline should be the default document timeline'

                  + ' of the XHR doc');

    assert_not_equals(anim.timeline, document.timeline,

                      'Animation timeline should NOT be the same timeline as'

                      + ' the default document timeline for the current'

                      + ' document');

});

}, 'Element.animate() creates an animation with the correct timeline'

   + ' when called on an element in a document without a browsing context');

//

// The following tests are cross-cutting tests that are not specific to the

// Animatable.animate() interface. Instead, they draw on assertions from

// various parts of the spec. These assertions are tested in other tests

// but are repeated here to confirm that user agents are not doing anything

// different in the particular case of document without a browsing context.

//

promise_test(t => {

  return getXHRDoc(t).then(xhrdoc => {

    const div = xhrdoc.getElementById('test');

    const anim = div.animate(null);

    // Since a document from XHR will not be active by itself, its document

    // timeline will also be inactive.

    assert_equals(anim.timeline.currentTime, null,

                  'Document timeline time should be null');

});

}, 'The timeline associated with an animation trigger on an element in'

   + ' a document without a browsing context is inactive');

promise_test(t => {

  let anim;

  return getXHRDoc(t).then(xhrdoc => {

    const div = xhrdoc.getElementById('test');

    anim = div.animate(null);

    anim.timeline = document.timeline;

    assert_true(anim.pending, 'The animation should be initially pending');

    return waitForAnimationFrames(2);

  }).then(() => {

    // Because the element is in a document without a browsing context, it will

    // not be rendered and hence the user agent will never deem it ready to

    // animate.

    assert_true(anim.pending,

                'The animation should still be pending after replacing'

                + ' the document timeline');

});

}, 'Replacing the timeline of an animation targetting an element in a'

   + ' document without a browsing context leaves it in the pending state');

promise_test(t => {

  let anim;

  return getXHRDoc(t).then(xhrdoc => {

    const div = xhrdoc.getElementById('test');

    anim = div.animate({ opacity: [ 0, 1 ] }, 1000);

    anim.timeline = document.timeline;

    document.body.appendChild(div);

    assert_equals(getComputedStyle(div).opacity, '0',

                  'Style should be updated');

});

}, 'Replacing the timeline of an animation targetting an element in a'

   + ' document without a browsing context and then adopting that element'

   + ' causes it to start updating style');

</script>

</body>