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