getComputedStyle-detached-subtree.html (2061B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSOM: getComputedStyle returns no style for elements not in the tree</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 <div id="host"> 9 <div id="non-slotted"> 10 <div id="non-slotted-descendant"></div> 11 </div> 12 </div> 13 <iframe srcdoc="<html></html>" style="display: none"></iframe> 14 <script> 15 function testNoComputedStyle(element, description, global) { 16 test(function() { 17 assert_true(!!element); 18 let style = (global ? global : window).getComputedStyle(element); 19 assert_true(!!style); 20 // Note that we avoid assert_equals below to get a stable failure message. 21 assert_true(style.length == 0); 22 assert_equals(style.color, ""); 23 }, `getComputedStyle returns no style for ${description}`); 24 } 25 26 let detached = document.createElement('div'); 27 testNoComputedStyle(detached, "detached element"); 28 29 testNoComputedStyle(document.querySelector('iframe').contentDocument.documentElement, 30 "element in non-rendered iframe (display: none)"); 31 32 testNoComputedStyle(document.querySelector('iframe').contentDocument.documentElement, 33 "element in non-rendered iframe (display: none) from iframe's window", 34 document.querySelector('iframe').contentWindow); 35 36 host.attachShadow({ mode: "open" }); 37 testNoComputedStyle(document.getElementById('non-slotted'), 38 "element outside the flat tree"); 39 40 testNoComputedStyle(document.getElementById('non-slotted-descendant'), 41 "descendant outside the flat tree"); 42 43 let shadowRoot = detached.attachShadow({ mode: "open" }); 44 shadowRoot.innerHTML = ` 45 <div id="detached-shadow-tree-descendant"></div> 46 `; 47 testNoComputedStyle(shadowRoot.getElementById('detached-shadow-tree-descendant'), 48 "shadow tree outside of flattened tree"); 49 </script>