<!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>
Codebase Browser
chromium