| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/polyfill.js"></script> |
| |
| <div id="wrapper"></div> |
| <pre id="console"></pre> |
| |
| <script> |
| function createDivWithId(id) |
| { |
| var div = document.createElement('div'); |
| div.id = id; |
| |
| return div; |
| } |
| |
| description("Tests to ensure ShadowRoot.getElementById works even if a ShadowRoot is orphan."); |
| |
| var host = document.createElement('div'); |
| var shadowRoot = host.webkitCreateShadowRoot(); |
| |
| var shadowChild1 = createDivWithId('child1'); |
| var shadowChild2 = createDivWithId('child2'); |
| var hostChild1 = createDivWithId('child3'); |
| var hostChild2 = createDivWithId('child4'); |
| |
| host.appendChild(hostChild1); |
| host.appendChild(hostChild2); |
| shadowRoot.appendChild(shadowChild1); |
| shadowRoot.appendChild(shadowChild2); |
| |
| shouldBe('shadowRoot.getElementById("child1")', 'shadowChild1'); |
| shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2'); |
| shouldBe('shadowRoot.getElementById("child3")', 'null'); |
| shouldBe('shadowRoot.getElementById("child4")', 'null'); |
| |
| shouldBe('document.getElementById("child1")', 'null'); |
| shouldBe('document.getElementById("child2")', 'null'); |
| shouldBe('document.getElementById("child3")', 'null'); |
| shouldBe('document.getElementById("child4")', 'null'); |
| |
| debug(''); |
| debug('Insert elements having the same id'); |
| |
| var shadowChild2_2 = createDivWithId('child2'); |
| shadowRoot.appendChild(shadowChild2_2); |
| |
| shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2'); |
| |
| var shadowChild2_3 = createDivWithId('child2'); |
| shadowRoot.insertBefore(shadowChild2_3, shadowRoot.firstChild); |
| |
| shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2_3'); |
| |
| debug(''); |
| debug('Make the host in document'); |
| wrapper.appendChild(host); |
| |
| shouldBe('shadowRoot.getElementById("child1")', 'shadowChild1'); |
| shouldBe('shadowRoot.getElementById("child2")', 'shadowChild2_3'); |
| shouldBe('shadowRoot.getElementById("child3")', 'null'); |
| shouldBe('shadowRoot.getElementById("child4")', 'null'); |
| |
| shouldBe('document.getElementById("child1")', 'null'); |
| shouldBe('document.getElementById("child2")', 'null'); |
| shouldBe('document.getElementById("child3")', 'child3'); |
| shouldBe('document.getElementById("child4")', 'child4'); |
| |
| debug(''); |
| debug('Add a child and make the host not in document'); |
| var shadowChild5 = createDivWithId('child5'); |
| shadowRoot.appendChild(shadowChild5); |
| wrapper.removeChild(host); |
| |
| shouldBe('shadowRoot.getElementById("child5")', 'shadowChild5'); |
| |
| debug(''); |
| wrapper.innerHTML = ""; |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
