animate-no-browsing-context.html (4161B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Animatable.animate in combination with elements in documents 4 without a browsing context</title> 5 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animatable-animate"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 // 14 // The following tests relate to animations on elements in documents without 15 // a browsing context. This is NOT the same as documents that are not bound to 16 // a document tree. 17 // 18 19 function getXHRDoc(t) { 20 return new Promise(resolve => { 21 const xhr = new XMLHttpRequest(); 22 xhr.open('GET', '../../resources/xhr-doc.py'); 23 xhr.responseType = 'document'; 24 xhr.onload = t.step_func(() => { 25 assert_equals(xhr.readyState, xhr.DONE, 26 'Request should complete successfully'); 27 assert_equals(xhr.status, 200, 28 'Response should be OK'); 29 resolve(xhr.responseXML); 30 }); 31 xhr.send(); 32 }); 33 } 34 35 promise_test(t => { 36 return getXHRDoc(t).then(xhrdoc => { 37 const div = xhrdoc.getElementById('test'); 38 const anim = div.animate(null); 39 assert_class_string(anim.timeline, 'DocumentTimeline', 40 'Animation should have a timeline'); 41 assert_equals(anim.timeline, xhrdoc.timeline, 42 'Animation timeline should be the default document timeline' 43 + ' of the XHR doc'); 44 assert_not_equals(anim.timeline, document.timeline, 45 'Animation timeline should NOT be the same timeline as' 46 + ' the default document timeline for the current' 47 + ' document'); 48 49 }); 50 }, 'Element.animate() creates an animation with the correct timeline' 51 + ' when called on an element in a document without a browsing context'); 52 53 // 54 // The following tests are cross-cutting tests that are not specific to the 55 // Animatable.animate() interface. Instead, they draw on assertions from 56 // various parts of the spec. These assertions are tested in other tests 57 // but are repeated here to confirm that user agents are not doing anything 58 // different in the particular case of document without a browsing context. 59 // 60 61 promise_test(t => { 62 return getXHRDoc(t).then(xhrdoc => { 63 const div = xhrdoc.getElementById('test'); 64 const anim = div.animate(null); 65 // Since a document from XHR will not be active by itself, its document 66 // timeline will also be inactive. 67 assert_equals(anim.timeline.currentTime, null, 68 'Document timeline time should be null'); 69 }); 70 }, 'The timeline associated with an animation trigger on an element in' 71 + ' a document without a browsing context is inactive'); 72 73 promise_test(t => { 74 let anim; 75 return getXHRDoc(t).then(xhrdoc => { 76 const div = xhrdoc.getElementById('test'); 77 anim = div.animate(null); 78 anim.timeline = document.timeline; 79 assert_true(anim.pending, 'The animation should be initially pending'); 80 return waitForAnimationFrames(2); 81 }).then(() => { 82 // Because the element is in a document without a browsing context, it will 83 // not be rendered and hence the user agent will never deem it ready to 84 // animate. 85 assert_true(anim.pending, 86 'The animation should still be pending after replacing' 87 + ' the document timeline'); 88 }); 89 }, 'Replacing the timeline of an animation targetting an element in a' 90 + ' document without a browsing context leaves it in the pending state'); 91 92 promise_test(t => { 93 let anim; 94 return getXHRDoc(t).then(xhrdoc => { 95 const div = xhrdoc.getElementById('test'); 96 anim = div.animate({ opacity: [ 0, 1 ] }, 1000); 97 anim.timeline = document.timeline; 98 document.body.appendChild(div); 99 assert_equals(getComputedStyle(div).opacity, '0', 100 'Style should be updated'); 101 }); 102 }, 'Replacing the timeline of an animation targetting an element in a' 103 + ' document without a browsing context and then adopting that element' 104 + ' causes it to start updating style'); 105 106 </script> 107 </body>