<!DOCTYPE html>
<html><body>
<script src="../../../resources/js-test-pre.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.webkitCreateShadowRoot();
shadowRoot11.innerHTML = '<div></div><shadow></shadow>';
var div1 = shadowRoot11.firstChild;
var shadow1 = shadowRoot11.lastChild;

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

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

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

var shadowRoot31 = host3.webkitCreateShadowRoot();
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');
    anotherAddedDiv = document.createElement('div');
    shadow1.appendChild(anotherAddedDiv);
    shouldBe('content.getDistributedNodes().length', '3');
    shouldBe('content.getDistributedNodes().item(0)', 'div1');
    shouldBe('content.getDistributedNodes().item(1)', 'anotherAddedDiv');
    shouldBe('content.getDistributedNodes().item(2)', 'addedDiv');
    debug('');

    debug('Removes the first added div');
    addedDiv.remove();
    shouldBe('content.getDistributedNodes().length', '2');
    shouldBe('content.getDistributedNodes().item(0)', 'div1');
    shouldBe('content.getDistributedNodes().item(1)', 'anotherAddedDiv');
    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>
<script src="../../../resources/js-test-post.js"></script>
</body></html>