blob: 5f732276026e56c2a6f4eccd288baee74ebc2523 [file] [log] [blame]
<!DOCTYPE html>
<script src="resources/shadow-dom.js"></script>
<script src="../../../resources/js-test.js"></script>
<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'})));
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"');
shouldBe('document.querySelector("::before, #foo-host /deep/ span").id', '"not-top"');
// FIXME: after making "*" in shadow tree not to match shadow host, rebaseline.
var fooShadowRoot = getNodeInComposedTree('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 = getNodeInComposedTree('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"');
// crbug.com/390301
var fooHost = document.getElementById("foo-host");
shouldBe('fooHost.querySelectorAll("::shadow span").length', '3');
shouldBe('fooHost.querySelectorAll("::shadow span")[0].id', '"not-top"');
shouldBe('fooHost.querySelectorAll("::shadow span")[1].id', '"top"');
shouldBe('fooHost.querySelectorAll("::shadow span")[2].id', '"inner-host"');
// crbug.com/511486
shouldBe('document.querySelectorAll("::shadow span").length', '3');
shouldBe('document.querySelectorAll("::shadow span")[0].id', '"not-top"');
shouldBe('document.querySelectorAll("::shadow span")[1].id', '"top"');
shouldBe('document.querySelectorAll("::shadow span")[2].id', '"inner-host"');
</script>