layout/inspector/tests/test_bug609549-shadow.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <!--
   3 https://bugzilla.mozilla.org/show_bug.cgi?id=609549
   4 -->
   5 <head>
   6   <title>Test for Bug 609549</title>
   7   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   9 </head>
  10
  11 <body>
  12 <!-- No linebreaks since this is html and whitespace is preserved. -->
  13 <template id="template"><div anonid="box-A">x</div><div anonid="box-B"><slot name="name-span"/></div><div anonid="box-C">x</div><slot/></template>
  14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609549">Mozilla Bug 609549</a>
  15
  16 <custom-element id="bound"><p id="p">lorem ipsum dolor sit amet</p><span id="sandwiched" slot="name-span">sandwiched</span></custom-element>
  17
  18 <div id="content" style="display: none">
  19
  20 </div>
  21 <pre id="test">
  22 <script>
  23 <![CDATA[
  24
  25 /** Test for Bug 609549 **/
  26 SimpleTest.waitForExplicitFinish();
  27
  28 customElements.define("custom-element", class extends HTMLElement {
  29   constructor() {
  30     super();
  31     const template = document.getElementById("template");
  32     const shadowRoot = this.attachShadow({mode: "open"})
  33       .appendChild(template.content.cloneNode(true));
  34   }
  35 });
  36
  37 const InspectorUtils = SpecialPowers.InspectorUtils;
  38
  39 addLoadEvent(function() {
  40   ok("getChildrenForNode" in InspectorUtils, "InspectorUtils has no getChildrenForNode");
  41   var withoutAnons =
  42     InspectorUtils.getChildrenForNode($("bound"), false, false);
  43
  44   is(withoutAnons.length, $("bound").childNodes.length,
  45      "withoutAnons should be the same length as childNodes");
  46   is(SpecialPowers.unwrap(withoutAnons[0]), $("p"), "didn't get paragraph - without anons");
  47   is(SpecialPowers.unwrap(withoutAnons[1]), $("sandwiched"),
  48      "didn't get sandwiched span - without anons");
  49
  50   var withAnons = InspectorUtils.getChildrenForNode($("bound"), true, false);
  51   is(withAnons.length, 3, "bad withAnons.length");
  52   ok(SpecialPowers.unwrap(withAnons[0]) instanceof ShadowRoot, "First one is shadow");
  53   is(SpecialPowers.unwrap(withAnons[1]), $("p"), "didn't get paragraph - without anons");
  54   is(SpecialPowers.unwrap(withAnons[2]), $("sandwiched"),
  55      "didn't get sandwiched span - without anons");
  56
  57   withAnons = InspectorUtils.getChildrenForNode(withAnons[0], true, false);
  58   is(withAnons.length, 4, "bad withAnons.length");
  59   is(withAnons[0].getAttribute("anonid"), "box-A",
  60      "didn't get anonymous box-A");
  61   is(withAnons[1].getAttribute("anonid"), "box-B",
  62      "didn't get anonymous box-B");
  63   is(withAnons[2].getAttribute("anonid"), "box-C",
  64      "didn't get anonymous box-C");
  65   is(withAnons[3].assignedNodes()[0].id, "p", "didn't get paragraph - with anons");
  66
  67   var bKids = InspectorUtils.getChildrenForNode(withAnons[1], true, false)[0].assignedNodes();
  68   is(bKids.length, 1, "bKids.length is bad");
  69   is(SpecialPowers.unwrap(bKids[0]), $("sandwiched"),
  70      "didn't get sandwiched span inserted into box-B");
  71
  72   SimpleTest.finish();
  73 });
  74
  75 ]]>
  76 </script>
  77 </pre>
  78 </body>
  79 </html>