LayoutTests/fast/shadow-dom/composed-tree-shadow-child-subtree.html

   1 <html>
   2 <script>
   3 if (window.testRunner)
   4     testRunner.dumpAsText();
   5 </script>
   6
   7 <template id=shadow1><div><slot></slot></div></template>
   8 <template id=shadow2><div>text</div><div><slot></slot></div></template>
   9 <template id=shadow3><div>text<div shadow=shadow1><slot></slot></div></div></template>
  10
  11
  12 <template test=1.1><div shadow=shadow1>text</div></template>
  13 <template test=1.2><div shadow=shadow1><div>text</div></div></template>
  14
  15 <template test=2.1><div shadow=shadow2>text</div></template>
  16 <template test=2.2><div shadow=shadow2><div>text</div></div></template>
  17
  18 <template test=3.1><div shadow=shadow3>text</div></template>
  19 <template test=3.2><div shadow=shadow3><div>text</div></div></template>
  20
  21 <body>
  22 <pre id=console></pre>
  23 <script>
  24 function installShadows(tree)
  25 {
  26     var shadowHosts = tree.querySelectorAll("[shadow]");
  27     for (var i = 0; i < shadowHosts.length; ++i) {
  28         var shadowId = shadowHosts[i].getAttribute("shadow");
  29         var shadowContents = document.querySelector("#"+shadowId).content.cloneNode(true);
  30
  31         installShadows(shadowContents);
  32
  33         var shadowRoot = shadowHosts[i].attachShadow({ mode: "open" });
  34         shadowRoot.appendChild(shadowContents);
  35     }
  36 }
  37
  38 var console = document.querySelector("#console");
  39
  40 var tests = document.querySelectorAll("[test]");
  41 for (var i = 0; i < tests.length; ++i) {
  42     var test = tests[i].content.cloneNode(true);
  43     installShadows(test);
  44     console.innerText += "\nTest " + tests[i].getAttribute("test") + "\n";
  45     console.innerText += internals.composedTreeAsText(test);
  46
  47     var shadowSubtree = test.querySelector("[shadow]");
  48
  49     var children = shadowSubtree.shadowRoot.children;
  50     for (var j = 0; j < children.length; ++j) {
  51         console.innerText += "\nShadow child " + j + " subtree\n"
  52         console.innerText += internals.composedTreeAsText(children[j]);
  53     }
  54 }
  55
  56 </script>
  57 </body>