Input elements don't work inside shadow tree
[WebKit-https.git] / LayoutTests / fast / shadow-dom / composed-tree-shadow-child-subtree.html
1 <html>
2 <script>
3 if (window.testRunner)
4     testRunner.dumpAsText();
5 </script>
6
7 <template id=shadow1><div><slot></slot></div></template>
8 <template id=shadow2><div>text</div><div><slot></slot></div></template>
9 <template id=shadow3><div>text<div shadow=shadow1><slot></slot></div></div></template>
10
11
12 <template test=1.1><div shadow=shadow1>text</div></template>
13 <template test=1.2><div shadow=shadow1><div>text</div></div></template>
14
15 <template test=2.1><div shadow=shadow2>text</div></template>
16 <template test=2.2><div shadow=shadow2><div>text</div></div></template>
17
18 <template test=3.1><div shadow=shadow3>text</div></template>
19 <template test=3.2><div shadow=shadow3><div>text</div></div></template>
20
21 <body>
22 <pre id=console></pre>
23 <script>
24 function installShadows(tree)
25 {
26     var shadowHosts = tree.querySelectorAll("[shadow]");
27     for (var i = 0; i < shadowHosts.length; ++i) {
28         var shadowId = shadowHosts[i].getAttribute("shadow");
29         var shadowContents = document.querySelector("#"+shadowId).content.cloneNode(true);
30
31         installShadows(shadowContents);
32
33         var shadowRoot = shadowHosts[i].attachShadow({ mode: "open" });
34         shadowRoot.appendChild(shadowContents);
35     }
36 }
37
38 var console = document.querySelector("#console");
39
40 var tests = document.querySelectorAll("[test]");
41 for (var i = 0; i < tests.length; ++i) {
42     var test = tests[i].content.cloneNode(true);
43     installShadows(test);
44     console.innerText += "\nTest " + tests[i].getAttribute("test") + "\n";
45     console.innerText += internals.composedTreeAsText(test);
46
47     var shadowSubtree = test.querySelector("[shadow]");
48
49     var children = shadowSubtree.shadowRoot.children;
50     for (var j = 0; j < children.length; ++j) {
51         console.innerText += "\nShadow child " + j + " subtree\n"
52         console.innerText += internals.composedTreeAsText(children[j]);
53     }
54 }
55
56 </script>
57 </body>