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

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