| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| </script> |
| |
| <template id=shadow1><slot></slot></template> |
| <template id=shadow2><div><slot></slot></div>text</template> |
| <template id=shadow3><slot><slot-default>text</slot-default></slot></div></template> |
| <template id=shadow4><div shadow=shadow41>text<slot></slot>text</div></template> |
| <template id=shadow41><div><slot></slot></div></template> |
| |
| <template test=1><div shadow=shadow1></div></template> |
| <template test=2><div shadow=shadow1>text</div></template> |
| <template test=3><div shadow=shadow1>text<div></div></div></template> |
| <template test=4><div shadow=shadow1><div>text</div><div>text</div></div></template> |
| |
| <template test=5><div shadow=shadow2></div></template> |
| <template test=6><div shadow=shadow2>text</div></template> |
| <template test=7><div shadow=shadow2>text<div></div></div></template> |
| <template test=8><div shadow=shadow2><div>text</div><div>text</div></div></template> |
| |
| <template test=9><div shadow=shadow3></div></template> |
| <template test=10><div shadow=shadow3>text</div></template> |
| <template test=11><div shadow=shadow3>text<div></div></div></template> |
| <template test=12><div shadow=shadow3><div>text</div><div>text</div></div></template> |
| |
| <template test=13><div shadow=shadow4></div></template> |
| <template test=14><div shadow=shadow4>text</div></template> |
| <template test=15><div shadow=shadow4>text<div></div></div></template> |
| <template test=16><div shadow=shadow4><div>text</div><div>text</div></div></template> |
| |
| <body> |
| <pre id=console></pre> |
| <script> |
| function installShadows(tree) |
| { |
| for (const host of tree.querySelectorAll("[shadow]")) { |
| var shadowId = host.getAttribute("shadow"); |
| var shadowContents = document.querySelector("#"+shadowId).content.cloneNode(true); |
| |
| installShadows(shadowContents); |
| |
| var shadowRoot = host.attachShadow({ mode: "open" }); |
| shadowRoot.appendChild(shadowContents); |
| } |
| } |
| |
| function findSlots(root) |
| { |
| let slots = []; |
| for (const host of root.querySelectorAll("[shadow]")) { |
| for (const slot of host.shadowRoot.querySelectorAll("slot")) |
| slots.push(slot); |
| Array.prototype.push.apply(slots, findSlots(host.shadowRoot)); |
| } |
| return slots; |
| } |
| |
| var console = document.querySelector("#console"); |
| |
| for (const testTemplate of document.querySelectorAll("[test]")) { |
| var test = testTemplate.content.cloneNode(true); |
| installShadows(test); |
| console.innerText += "\nTest " + testTemplate.getAttribute("test") + "\n"; |
| console.innerText += internals.composedTreeAsText(test); |
| console.innerText += "Slot trees:\n"; |
| for (const slot of findSlots(test)) |
| console.innerText += internals.composedTreeAsText(slot) + "\n"; |
| } |
| |
| </script> |
| </body> |
