<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>