| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| </body> |
| <script> |
| document.body.appendChild( |
| createDOM('div', {'id': 'foo-host'}, |
| createShadowRoot( |
| createDOM('div', {}, |
| createDOM('span', {'id': 'not-top'})), |
| createDOM('span', {'id': 'top'}), |
| createDOM('div', {'id': 'bar-host'}, |
| createShadowRoot( |
| createDOM('span', {'id': 'nested'})), |
| createDOM('span', {'id': 'inner-host'}))), |
| createDOM('span', {'id': 'outer-host'}))); |
| |
| document.body.appendChild( |
| createDOM('pre', {'id': 'console'})); |
| |
| description('crbug.com/337616: test for querySelectorAll with ::shadow and /deep/'); |
| |
| shouldBe('document.querySelectorAll("#foo-host::shadow span").length', '3'); |
| shouldBe('document.querySelectorAll("#foo-host::shadow span")[0].id', '"not-top"'); |
| shouldBe('document.querySelectorAll("#foo-host::shadow span")[1].id', '"top"'); |
| shouldBe('document.querySelectorAll("#foo-host::shadow span")[2].id', '"inner-host"'); |
| |
| shouldBe('document.querySelectorAll("#foo-host /deep/ span").length', '5'); |
| shouldBe('document.querySelectorAll("#foo-host /deep/ span")[0].id', '"not-top"'); |
| shouldBe('document.querySelectorAll("#foo-host /deep/ span")[1].id', '"top"'); |
| shouldBe('document.querySelectorAll("#foo-host /deep/ span")[2].id', '"nested"'); |
| shouldBe('document.querySelectorAll("#foo-host /deep/ span")[3].id', '"inner-host"'); |
| shouldBe('document.querySelectorAll("#foo-host /deep/ span")[4].id', '"outer-host"'); |
| |
| // FIXME: after making "*" in shadow tree not to match shadow host, rebaseline. |
| var fooShadowRoot = getNodeInTreeOfTrees('foo-host/'); |
| shouldBe('fooShadowRoot.querySelectorAll("*::shadow span").length', '1'); |
| shouldBe('fooShadowRoot.querySelectorAll("*::shadow span")[0].id', '"nested"'); |
| |
| shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span").length', '3'); |
| shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[0].id', '"not-top"'); |
| shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[1].id', '"nested"'); |
| shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[2].id', '"inner-host"'); |
| |
| // #foo-host in foo's shadow tree cannot match div#foo-host. |
| shouldBe('fooShadowRoot.querySelectorAll("#foo-host /deep/ span").length', '0'); |
| |
| // :host in foo's shadow tree can match div#foo-host. |
| shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span").length', '3'); |
| shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[0].id', '"not-top"'); |
| shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[1].id', '"top"'); |
| shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[2].id', '"inner-host"'); |
| |
| // :host-context in foo's shadow tree can match div#foo-host. |
| shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span").length', '3'); |
| shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[0].id', '"not-top"'); |
| shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[1].id', '"top"'); |
| shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[2].id', '"inner-host"'); |
| |
| var barHost = fooShadowRoot.getElementById('bar-host'); |
| shouldBe('barHost.querySelectorAll("#bar-host::shadow span").length', '1'); |
| shouldBe('barHost.querySelectorAll("#bar-host::shadow span")[0].id', '"nested"'); |
| shouldBe('barHost.querySelectorAll(":host :scope span").length', '1'); |
| shouldBe('barHost.querySelectorAll(":host :scope span")[0].id', '"inner-host"'); |
| shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span").length', '1'); |
| shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span")[0].id', '"inner-host"'); |
| |
| var barShadowRoot = getNodeInTreeOfTrees('foo-host/bar-host/'); |
| shouldBe('barShadowRoot.querySelectorAll("*::shadow span").length', '0'); |
| shouldBe('barShadowRoot.querySelectorAll("* /deep/ span").length', '0'); |
| |
| shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host)::shadow span").length', '1'); |
| shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host)::shadow span")[0].id', '"nested"'); |
| shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span").length', '1'); |
| shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span")[0].id', '"nested"'); |
| |
| shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host)::shadow span").length', '1'); |
| shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host)::shadow span")[0].id', '"nested"'); |
| shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ span").length', '1'); |
| shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ span")[0].id', '"nested"'); |
| </script> |
| </html> |
| |
