src/third_party/WebKit/LayoutTests/fast/dom/shadow/shadow-root-js-api.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <div id="console"></div>
   8 <!-- These elements should not be selected in ShadowRoot's querySelector. -->
   9 <div id="foo"></div>
  10 <div class="foo"></div>
  11 <foo></foo>
  12 <script>
  13 description("Tests for ShadowRoot JS APIs. Can only run within DRT");
  14
  15 if (window.testRunner)
  16     testRunner.dumpAsText();
  17
  18 // (which is always enabled in testing).
  19 shouldBeDefined("window.ShadowRoot");
  20 shouldThrow("new window.ShadowRoot(document.createElement('div'))");
  21
  22 var shadowHost = document.createElement('div');
  23 document.body.appendChild(shadowHost);
  24 var shadowRoot = shadowHost.createShadowRoot();
  25
  26 shouldBeTrue("shadowRoot instanceof window.ShadowRoot");
  27
  28 var div1 = document.createElement("div");
  29 div1.setAttribute("id", "div1");
  30 shadowRoot.appendChild(div1);
  31
  32 var div2 = document.createElement("div");
  33 div2.setAttribute("id", "div2");
  34 div2.classList.add("class2");
  35 shadowRoot.appendChild(div2);
  36
  37 // Tests for Document should cover most cases for the following APIs.
  38 // We have basic tests here. More tests are welcome, but we should avoid unnecssary duplications.
  39 shouldBe("shadowRoot.getElementById('div1')", "div1");
  40 shouldBeNull("shadowRoot.getElementById('foo')");
  41
  42 shouldBe("shadowRoot.getElementsByClassName('class2')", "[div2]");
  43 shouldBe("shadowRoot.getElementsByClassName('foo')", "[]");
  44
  45 shouldBe("shadowRoot.getElementsByTagName('div')", "[div1, div2]");
  46 shouldBe("shadowRoot.getElementsByTagName('foo')", "[]");
  47
  48 // FIXME: Add more tests using XML documents.
  49 shouldBe("shadowRoot.getElementsByTagNameNS('*', 'div')", "[div1, div2]");
  50 shouldBe("shadowRoot.getElementsByTagNameNS('', 'div')", "[]");
  51 shouldBe("shadowRoot.getElementsByTagNameNS('*', 'foo')", "[]");
  52
  53 shouldBe("shadowRoot.querySelector('#div1')", "div1");
  54 shouldBeNull("shadowRoot.querySelector('#foo')");
  55 shouldBe("shadowRoot.querySelector('.class2')", "div2");
  56 shouldBeNull("shadowRoot.querySelector('.foo')");
  57 shouldBe("shadowRoot.querySelectorAll('div')", "[div1, div2]");
  58 shouldBe("shadowRoot.querySelectorAll('foo')", "[]");
  59
  60 var youngerShadowRoot = shadowHost.createShadowRoot();
  61 shouldNotBe("youngerShadowRoot", "shadowRoot");
  62 </script>
  63 </body>
  64 </html>