src/third_party/WebKit/LayoutTests/fast/dom/shadow/querySelector-with-shadow-all-and-shadow-deep.html

   1 <!DOCTYPE html>
   2 <script src="resources/shadow-dom.js"></script>
   3 <script src="../../../resources/js-test.js"></script>
   4 <body></body>
   5 <script>
   6 document.body.appendChild(
   7     createDOM('div', {'id': 'foo-host'},
   8         createShadowRoot(
   9             createDOM('div', {},
  10                 createDOM('span', {'id': 'not-top'})),
  11             createDOM('span', {'id': 'top'}),
  12             createDOM('div', {'id': 'bar-host'},
  13                 createShadowRoot(
  14                     createDOM('span', {'id': 'nested'})),
  15                 createDOM('span', {'id': 'inner-host'}))),
  16         createDOM('span', {'id': 'outer-host'})));
  17
  18 description('crbug.com/337616: test for querySelectorAll with ::shadow and /deep/');
  19
  20 shouldBe('document.querySelectorAll("#foo-host::shadow span").length', '3');
  21 shouldBe('document.querySelectorAll("#foo-host::shadow span")[0].id', '"not-top"');
  22 shouldBe('document.querySelectorAll("#foo-host::shadow span")[1].id', '"top"');
  23 shouldBe('document.querySelectorAll("#foo-host::shadow span")[2].id', '"inner-host"');
  24
  25 shouldBe('document.querySelectorAll("#foo-host /deep/ span").length', '5');
  26 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[0].id', '"not-top"');
  27 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[1].id', '"top"');
  28 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[2].id', '"nested"');
  29 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[3].id', '"inner-host"');
  30 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[4].id', '"outer-host"');
  31
  32 // FIXME: after making "*" in shadow tree not to match shadow host, rebaseline.
  33 var fooShadowRoot = getNodeInTreeOfTrees('foo-host/');
  34 shouldBe('fooShadowRoot.querySelectorAll("*::shadow span").length', '1');
  35 shouldBe('fooShadowRoot.querySelectorAll("*::shadow span")[0].id', '"nested"');
  36
  37 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span").length', '3');
  38 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[0].id', '"not-top"');
  39 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[1].id', '"nested"');
  40 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[2].id', '"inner-host"');
  41
  42 // #foo-host in foo's shadow tree cannot match div#foo-host.
  43 shouldBe('fooShadowRoot.querySelectorAll("#foo-host /deep/ span").length', '0');
  44
  45 // :host in foo's shadow tree can match div#foo-host.
  46 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span").length', '3');
  47 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[0].id', '"not-top"');
  48 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[1].id', '"top"');
  49 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[2].id', '"inner-host"');
  50
  51 // :host-context in foo's shadow tree can match div#foo-host.
  52 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span").length', '3');
  53 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[0].id', '"not-top"');
  54 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[1].id', '"top"');
  55 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[2].id', '"inner-host"');
  56
  57 var barHost = fooShadowRoot.getElementById('bar-host');
  58 shouldBe('barHost.querySelectorAll("#bar-host::shadow span").length', '1');
  59 shouldBe('barHost.querySelectorAll("#bar-host::shadow span")[0].id', '"nested"');
  60 shouldBe('barHost.querySelectorAll(":host :scope span").length', '1');
  61 shouldBe('barHost.querySelectorAll(":host :scope span")[0].id', '"inner-host"');
  62 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span").length', '1');
  63 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span")[0].id', '"inner-host"');
  64
  65 var barShadowRoot = getNodeInTreeOfTrees('foo-host/bar-host/');
  66 shouldBe('barShadowRoot.querySelectorAll("*::shadow span").length', '0');
  67 shouldBe('barShadowRoot.querySelectorAll("* /deep/ span").length', '0');
  68
  69 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host)::shadow span").length', '1');
  70 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host)::shadow span")[0].id', '"nested"');
  71 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span").length', '1');
  72 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span")[0].id', '"nested"');
  73
  74 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host)::shadow span").length', '1');
  75 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host)::shadow span")[0].id', '"nested"');
  76 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ span").length', '1');
  77 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ span")[0].id', '"nested"');
  78
  79 // crbug.com/390301
  80 var fooHost = document.getElementById("foo-host");
  81 shouldBe('fooHost.querySelectorAll("::shadow span").length', '3');
  82 shouldBe('fooHost.querySelectorAll("::shadow span")[0].id', '"not-top"');
  83 shouldBe('fooHost.querySelectorAll("::shadow span")[1].id', '"top"');
  84 shouldBe('fooHost.querySelectorAll("::shadow span")[2].id', '"inner-host"');
  85 </script>