| <!DOCTYPE html> |
| <html> |
| <body> |
| <div id="output"></div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| document.addEventListener("DOMContentLoaded", function() { |
| var output = document.querySelector("#output"); |
| // 1. make an element and insert it into the document. |
| // 2. create a shadow root that contains a style element. |
| var f = document.createElement("div"); |
| output.appendChild(f); |
| var fs = f.webkitCreateShadowRoot(); |
| fs.innerHTML = "<style></style><div>Hello from foo.</div>"; |
| // |
| // 3. make another element. |
| // 4. create a shadow root on this element that contains a style element. |
| // 5. create another shadow root on the element. |
| // 6. insert the element into the document. |
| var b = document.createElement("div"); |
| var bs0 = b.webkitCreateShadowRoot(); |
| bs0.innerHTML = "<style></style><div>Hello from bar.</div>"; |
| var bs1 = b.webkitCreateShadowRoot(); |
| bs1.innerHTML = "<shadow></shadow><div>Hello from zot.</div>"; |
| // NOTE: must add to dom after adding shadowRoot to observe problem. |
| output.appendChild(b); |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| </script> |
| </body> |
| </html> |
