tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_markup_shadowdom_maxchildren.js (4130B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that the markup view properly displays the "more nodes" button both for host
      7 // elements and for slot elements.
      8 
      9 const TEST_URL = `data:text/html;charset=utf-8,
     10 <test-component>
     11  <div>node 1</div><div>node 2</div><div>node 3</div>
     12  <div>node 4</div><div>node 5</div><div>node 6</div>
     13 </test-component>
     14 
     15 <script>
     16  "use strict";
     17  customElements.define("test-component", class extends HTMLElement {
     18    constructor() {
     19      super();
     20      let shadowRoot = this.attachShadow({mode: "open"});
     21      shadowRoot.innerHTML = "<slot>some default content</slot>";
     22    }
     23    connectedCallback() {}
     24    disconnectedCallback() {}
     25  });
     26 </script>`;
     27 
     28 const MAX_CHILDREN = 5;
     29 
     30 add_task(async function () {
     31  await pushPref("devtools.markup.pagesize", MAX_CHILDREN);
     32 
     33  const { inspector } = await openInspectorForURL(TEST_URL);
     34 
     35  // <test-component> is a shadow host.
     36  info("Find and expand the test-component shadow DOM host.");
     37  const hostFront = await getNodeFront("test-component", inspector);
     38  await inspector.markup.expandNode(hostFront);
     39  await waitForMultipleChildrenUpdates(inspector);
     40 
     41  info(
     42    "Test that expanding a shadow host shows shadow root and direct host children."
     43  );
     44  const { markup } = inspector;
     45  const hostContainer = markup.getContainer(hostFront);
     46  let childContainers = hostContainer.getChildContainers();
     47 
     48  is(
     49    childContainers.length,
     50    MAX_CHILDREN,
     51    "Expecting 5 children: shadowroot, 4 host children"
     52  );
     53  assertContainerHasText(childContainers[0], "#shadow-root");
     54  for (let i = 1; i < 5; i++) {
     55    assertContainerHasText(childContainers[i], "div");
     56    assertContainerHasText(childContainers[i], "node " + i);
     57  }
     58 
     59  info("Click on the more nodes button under the host element");
     60  let moreNodesLink = hostContainer.elt.querySelector(".more-nodes");
     61  ok(
     62    !!moreNodesLink,
     63    "A 'more nodes' button is displayed in the host container"
     64  );
     65  moreNodesLink.querySelector("button").click();
     66  await inspector.markup._waitForChildren();
     67 
     68  childContainers = hostContainer.getChildContainers();
     69  is(childContainers.length, 7, "Expecting one additional host child");
     70  assertContainerHasText(childContainers[6], "div");
     71  assertContainerHasText(childContainers[6], "node 6");
     72 
     73  info("Expand the shadow root");
     74  const shadowRootContainer = childContainers[0];
     75  const shadowRootFront = shadowRootContainer.node;
     76  await inspector.markup.expandNode(shadowRootFront);
     77  await waitForMultipleChildrenUpdates(inspector);
     78 
     79  const shadowChildContainers = shadowRootContainer.getChildContainers();
     80  is(shadowChildContainers.length, 1, "Expecting 1 slot child");
     81  assertContainerHasText(shadowChildContainers[0], "slot");
     82 
     83  info("Expand the slot");
     84  const slotContainer = shadowChildContainers[0];
     85  const slotFront = slotContainer.node;
     86  await inspector.markup.expandNode(slotFront);
     87  await waitForMultipleChildrenUpdates(inspector);
     88 
     89  let slotChildContainers = slotContainer.getChildContainers();
     90  is(slotChildContainers.length, MAX_CHILDREN, "Expecting 5 slotted children");
     91  for (const slotChildContainer of slotChildContainers) {
     92    assertContainerHasText(slotChildContainer, "div");
     93    ok(
     94      slotChildContainer.elt.querySelector(".reveal-link"),
     95      "Slotted container has a reveal link element"
     96    );
     97  }
     98 
     99  info("Click on the more nodes button under the slot element");
    100  moreNodesLink = slotContainer.elt.querySelector(".more-nodes");
    101  ok(
    102    !!moreNodesLink,
    103    "A 'more nodes' button is displayed in the host container"
    104  );
    105  EventUtils.sendMouseEvent(
    106    { type: "click" },
    107    moreNodesLink.querySelector("button")
    108  );
    109  await inspector.markup._waitForChildren();
    110 
    111  slotChildContainers = slotContainer.getChildContainers();
    112  is(
    113    slotChildContainers.length,
    114    7,
    115    "Expecting one additional slotted element and fallback"
    116  );
    117  assertContainerHasText(slotChildContainers[5], "div");
    118  ok(
    119    slotChildContainers[5].elt.querySelector(".reveal-link"),
    120    "Slotted container has a reveal link element"
    121  );
    122 });