blob: 2b783a69148343c6dceff93cd90cdf9ba06a7bf8 [file] [log] [blame]
<!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>