[cssom] Test detached elements, elements outside the flattened tree, …

…and hidden frames. This tests resolutions from w3c/csswg-drafts#1548.
emilio · Apr 11, 2018 · 6550c8e · 6550c8e
1 parent 21380d0
commit 6550c8e
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/css/cssom/getComputedStyle-detached-subtree.html b/css/cssom/getComputedStyle-detached-subtree.html
@@ -0,0 +1,43 @@
+<!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) {
+  test(function() {
+    assert_true(!!element);
+    let style = getComputedStyle(element);
+    assert_true(!!style);
+    assert_equals(style.color, "");
+  }, `getComputedStyle returns no style for ${description}`);
+}
+
+let detached = document.createElement('div');
+testNoComputedStyle(detached, "detached element");
+
+testNoComputedStyle(document.querySelector('iframe'),
+                    "element in non-rendered iframe (display: none)");
+
+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>