<!DOCTYPE html>
<html><body>
<script src="../../../resources/js-test.js"></script>

<p>When we modify host children and get distributed nodes in nested ShadowDOM, distribution should occur from the host.</p>

<div id="container">
    <div id="host1"></div>
</div>
<pre id="console"></pre>

<script>
jsTestIsAsync = true;

var shadowRoot11 = host1.createShadowRoot();
shadowRoot11.innerHTML = '<div></div><shadow></shadow>';
var div1 = shadowRoot11.firstChild;
var shadow1 = shadowRoot11.lastChild;

var shadowRoot12 = host1.createShadowRoot();
shadowRoot12.innerHTML = '<div><shadow></shadow></div>';
var host2 = shadowRoot12.firstChild;

var shadowRoot21 = host2.createShadowRoot();
shadowRoot21.innerHTML = '<content></content>';

var shadowRoot22 = host2.createShadowRoot();
shadowRoot22.innerHTML = '<div><shadow></shadow></div>';
var host3 = shadowRoot22.firstChild;

var shadowRoot31 = host3.createShadowRoot();
shadowRoot31.innerHTML = '<content></content>';

var content = shadowRoot31.firstChild;

setTimeout(function() {
    debug('Adds a div to ShadowRoot.');
    addedDiv = document.createElement('div');
    shadowRoot11.appendChild(addedDiv);
    shouldBe('content.getDistributedNodes().length', '2');
    shouldBe('content.getDistributedNodes().item(0)', 'div1');
    shouldBe('content.getDistributedNodes().item(1)', 'addedDiv');
    debug('');


    debug('Adds a div as fallback content, which should not be used.');
    anotherAddedDiv = document.createElement('div');
    shadow1.appendChild(anotherAddedDiv);
    shouldBe('content.getDistributedNodes().length', '2');
    shouldBe('content.getDistributedNodes().item(0)', 'div1');
    shouldBe('content.getDistributedNodes().item(1)', 'addedDiv');
    debug('');

    debug('Removes the first added div');
    addedDiv.remove();
    shouldBe('content.getDistributedNodes().length', '1');
    shouldBe('content.getDistributedNodes().item(0)', 'div1');
    debug('');

    debug('Removes the second added div');
    anotherAddedDiv.remove();
    shouldBe('content.getDistributedNodes().length', '1');
    shouldBe('content.getDistributedNodes().item(0)', 'div1');
    debug('');

    container.innerHTML = "";
    finishJSTest();
}, 0);
</script>
</body></html>