web-animations/interfaces/Animatable/animate-no-browsing-context.html - external/github.com/web-platform-tests/wpt.git - Git at Google

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