test_restyling_xhr_doc.html (4240B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="../testcommon.js"></script> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <div id="log"></div> 7 <script> 8 'use strict'; 9 10 // This test supplements the web-platform-tests in: 11 // 12 // web-animations/interfaces/Animatable/animate-no-browsing-context.html 13 // 14 // Specifically, it covers the case where we have a running animation 15 // targetting an element in a document without a browsing context. 16 // 17 // Currently the behavior in this case is not well-defined. For example, 18 // if we were to simply take an element from such a document, and do: 19 // 20 // const xdoc = xhr.responseXML; 21 // const div = xdoc.getElementById('test'); 22 // div.style.opacity = '0'; 23 // alert(getComputedStyle(div).opacity); 24 // 25 // We'd get '0' in Firefox and Edge, but an empty string in Chrome. 26 // 27 // However, if instead of using the style attribute, we set style in a <style> 28 // element in *either* the document we're calling from *or* the XHR doc and 29 // do the same we get '1' in Firefox and Edge, but an empty string in Chrome. 30 // 31 // That is, no browser appears to apply styles to elements in a document without 32 // a browsing context unless the styles are defined using the style attribute, 33 // and even then Chrome does not. 34 // 35 // There is some prose in CSSOM which says, 36 // 37 // Note: This means that even if obj is in a different document (e.g. one 38 // fetched via XMLHttpRequest) it will still use the style rules associated 39 // with the document that is associated with the global object on which 40 // getComputedStyle() was invoked to compute the CSS declaration block.[1] 41 // 42 // However, this text has been around since at least 2013 and does not appear 43 // to be implemented. 44 // 45 // As a result, it's not really possible to write a cross-browser test for the 46 // behavior for animations in this context since it's not clear what the result 47 // should be. That said, we still want to exercise this particular code path so 48 // we make this case a Mozilla-specific test. The other similar tests cases for 49 // which the behavior is well-defined are covered by web-platform-tests. 50 // 51 // [1] https://drafts.csswg.org/cssom/#extensions-to-the-window-interface 52 53 function getXHRDoc(t) { 54 return new Promise(resolve => { 55 const xhr = new XMLHttpRequest(); 56 xhr.open('GET', 'xhr_doc.html'); 57 xhr.responseType = 'document'; 58 xhr.onload = t.step_func(() => { 59 assert_equals(xhr.readyState, xhr.DONE, 60 'Request should complete successfully'); 61 assert_equals(xhr.status, 200, 62 'Response should be OK'); 63 resolve(xhr.responseXML); 64 }); 65 xhr.send(); 66 }); 67 } 68 69 promise_test(t => { 70 let anim; 71 return getXHRDoc(t).then(xhrdoc => { 72 const div = xhrdoc.getElementById('test'); 73 anim = div.animate({ opacity: [ 0, 1 ] }, 1000); 74 // Give the animation an active timeline and kick-start it. 75 anim.timeline = document.timeline; 76 anim.startTime = document.timeline.currentTime; 77 assert_equals(anim.playState, 'running', 78 'The animation should be running'); 79 // Gecko currently skips applying animation styles to elements in documents 80 // without browsing contexts. 81 assert_not_equals(getComputedStyle(div).opacity, '0', 82 'Style should NOT be updated'); 83 }); 84 }, 'Forcing an animation targetting an element in a document without a' 85 + ' browsing context to play does not cause style to update'); 86 87 promise_test(t => { 88 let anim; 89 return getXHRDoc(t).then(xhrdoc => { 90 const div = addDiv(t); 91 anim = div.animate({ opacity: [ 0, 1 ] }, 1000); 92 assert_equals(getComputedStyle(div).opacity, '0', 93 'Style should be updated'); 94 // Trigger an animation restyle to be queued 95 anim.currentTime = 0.1; 96 // Adopt node into XHR doc 97 xhrdoc.body.appendChild(div); 98 // We should skip applying animation styles to elements in documents 99 // without a pres shell. 100 assert_equals(getComputedStyle(div).opacity, '1', 101 'Style should NOT be updated'); 102 }); 103 }, 'Moving an element with a pending animation restyle to a document without' 104 + ' a browsing context resets animation style'); 105 106 </script>