OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 </body> | 8 </body> |
9 <script> | 9 <script> |
10 document.body.appendChild( | 10 document.body.appendChild( |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
48 | 48 |
49 // #foo-host in foo's shadow tree cannot match div#foo-host. | 49 // #foo-host in foo's shadow tree cannot match div#foo-host. |
50 shouldBe('fooShadowRoot.querySelectorAll("#foo-host /deep/ span").length', '0'); | 50 shouldBe('fooShadowRoot.querySelectorAll("#foo-host /deep/ span").length', '0'); |
51 | 51 |
52 // :host in foo's shadow tree can match div#foo-host. | 52 // :host in foo's shadow tree can match div#foo-host. |
53 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span").le
ngth', '3'); | 53 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span").le
ngth', '3'); |
54 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[0]
.id', '"not-top"'); | 54 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[0]
.id', '"not-top"'); |
55 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[1]
.id', '"top"'); | 55 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[1]
.id', '"top"'); |
56 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[2]
.id', '"inner-host"'); | 56 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[2]
.id', '"inner-host"'); |
57 | 57 |
58 // :ancestor in foo's shadow tree can match div#foo-host. | 58 // :host-context in foo's shadow tree can match div#foo-host. |
59 shouldBe('fooShadowRoot.querySelectorAll(":ancestor(body) /shadow/ span").length
', '3'); | 59 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span").le
ngth', '3'); |
60 shouldBe('fooShadowRoot.querySelectorAll(":ancestor(body) /shadow/ span")[0].id'
, '"not-top"'); | 60 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span")[0]
.id', '"not-top"'); |
61 shouldBe('fooShadowRoot.querySelectorAll(":ancestor(body) /shadow/ span")[1].id'
, '"top"'); | 61 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span")[1]
.id', '"top"'); |
62 shouldBe('fooShadowRoot.querySelectorAll(":ancestor(body) /shadow/ span")[2].id'
, '"inner-host"'); | 62 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span")[2]
.id', '"inner-host"'); |
63 | 63 |
64 var barHost = fooShadowRoot.getElementById('bar-host'); | 64 var barHost = fooShadowRoot.getElementById('bar-host'); |
65 shouldBe('barHost.querySelectorAll("#bar-host /shadow/ span").length', '1'); | 65 shouldBe('barHost.querySelectorAll("#bar-host /shadow/ span").length', '1'); |
66 shouldBe('barHost.querySelectorAll("#bar-host /shadow/ span")[0].id', '"nested"'
); | 66 shouldBe('barHost.querySelectorAll("#bar-host /shadow/ span")[0].id', '"nested"'
); |
67 shouldBe('barHost.querySelectorAll(":host :scope span").length', '1'); | 67 shouldBe('barHost.querySelectorAll(":host :scope span").length', '1'); |
68 shouldBe('barHost.querySelectorAll(":host :scope span")[0].id', '"inner-host"'); | 68 shouldBe('barHost.querySelectorAll(":host :scope span")[0].id', '"inner-host"'); |
69 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span").length', '1'); | 69 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span").length', '1'); |
70 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span")[0].id', '"inne
r-host"'); | 70 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span")[0].id', '"inne
r-host"'); |
71 | 71 |
72 var barShadowRoot = getNodeInTreeOfTrees('foo-host/bar-host/'); | 72 var barShadowRoot = getNodeInTreeOfTrees('foo-host/bar-host/'); |
73 shouldBe('barShadowRoot.querySelectorAll("* /shadow/ span").length', '0'); | 73 shouldBe('barShadowRoot.querySelectorAll("* /shadow/ span").length', '0'); |
74 shouldBe('barShadowRoot.querySelectorAll("* /deep/ span").length', '0'); | 74 shouldBe('barShadowRoot.querySelectorAll("* /deep/ span").length', '0'); |
75 | 75 |
76 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /shadow/ span").le
ngth', '1'); | 76 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /shadow/ span").le
ngth', '1'); |
77 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /shadow/ span")[0]
.id', '"nested"'); | 77 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /shadow/ span")[0]
.id', '"nested"'); |
78 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span").leng
th', '1'); | 78 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span").leng
th', '1'); |
79 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span")[0].i
d', '"nested"'); | 79 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span")[0].i
d', '"nested"'); |
80 | 80 |
81 shouldBe('barShadowRoot.querySelectorAll(":ancestor(div#foo-host) /shadow/ span"
).length', '1'); | 81 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /shadow/ s
pan").length', '1'); |
82 shouldBe('barShadowRoot.querySelectorAll(":ancestor(div#foo-host) /shadow/ span"
)[0].id', '"nested"'); | 82 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /shadow/ s
pan")[0].id', '"nested"'); |
83 shouldBe('barShadowRoot.querySelectorAll(":ancestor(div#foo-host) /deep/ span").
length', '1'); | 83 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ spa
n").length', '1'); |
84 shouldBe('barShadowRoot.querySelectorAll(":ancestor(div#foo-host) /deep/ span")[
0].id', '"nested"'); | 84 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ spa
n")[0].id', '"nested"'); |
85 </script> | 85 </script> |
86 </html> | 86 </html> |
87 | 87 |
OLD | NEW |