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