tor-browser

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

browser_markup_shadowdom_delete.js (3498B)

      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 slot elements are correctly updated when slotted elements are being removed
      7 // from the DOM.
      8 
      9 const TEST_URL = `data:text/html;charset=utf-8,
     10  <test-component>
     11    <div slot="slot1" id="el1">slot1-1</div>
     12    <div slot="slot1" id="el2">slot1-2</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 name="slot1"><div>default</div></slot>';
     22      }
     23    });
     24  </script>`;
     25 
     26 add_task(async function () {
     27  const { inspector } = await openInspectorForURL(TEST_URL);
     28 
     29  // <test-component> is a shadow host.
     30  info("Find and expand the test-component shadow DOM host.");
     31  const hostFront = await getNodeFront("test-component", inspector);
     32  await inspector.markup.expandNode(hostFront);
     33  await waitForMultipleChildrenUpdates(inspector);
     34 
     35  info(
     36    "Test that expanding a shadow host shows shadow root and direct host children."
     37  );
     38  const { markup } = inspector;
     39  const hostContainer = markup.getContainer(hostFront);
     40  const childContainers = hostContainer.getChildContainers();
     41 
     42  is(
     43    childContainers.length,
     44    3,
     45    "Expecting 3 children: shadowroot, 2 host children"
     46  );
     47  assertContainerHasText(childContainers[0], "#shadow-root");
     48  assertContainerHasText(childContainers[1], "div");
     49  assertContainerHasText(childContainers[2], "div");
     50 
     51  info("Expand the shadow root");
     52  const shadowRootContainer = childContainers[0];
     53  await expandContainer(inspector, shadowRootContainer);
     54 
     55  const shadowChildContainers = shadowRootContainer.getChildContainers();
     56  is(shadowChildContainers.length, 1, "Expecting 1 child slot");
     57  assertContainerHasText(shadowChildContainers[0], "slot");
     58 
     59  info("Expand the slot");
     60  const slotContainer = shadowChildContainers[0];
     61  await expandContainer(inspector, slotContainer);
     62 
     63  let slotChildContainers = slotContainer.getChildContainers();
     64  is(
     65    slotChildContainers.length,
     66    3,
     67    "Expecting 3 children (2 slotted, fallback)"
     68  );
     69  assertContainerSlotted(slotChildContainers[0]);
     70  assertContainerSlotted(slotChildContainers[1]);
     71  assertContainerHasText(slotChildContainers[2], "div");
     72 
     73  await deleteNode(inspector, "#el1");
     74  slotChildContainers = slotContainer.getChildContainers();
     75  is(
     76    slotChildContainers.length,
     77    2,
     78    "Expecting 2 children (1 slotted, fallback)"
     79  );
     80  assertContainerSlotted(slotChildContainers[0]);
     81  assertContainerHasText(slotChildContainers[1], "div");
     82 
     83  await deleteNode(inspector, "#el2");
     84  slotChildContainers = slotContainer.getChildContainers();
     85  // After deleting the last host direct child we expect the slot to show the default
     86  // content <div>default</div>
     87  is(slotChildContainers.length, 1, "Expecting 1 child");
     88  ok(
     89    !slotChildContainers[0].isSlotted(),
     90    "Container is a not slotted container"
     91  );
     92 });
     93 
     94 async function deleteNode(inspector, selector) {
     95  info("Select node " + selector + " and make sure it is focused");
     96  await selectNode(selector, inspector);
     97  await clickContainer(selector, inspector);
     98 
     99  info("Delete the node");
    100  const mutated = inspector.once("markupmutation");
    101  const updated = inspector.once("inspector-updated");
    102  EventUtils.sendKey("delete", inspector.panelWin);
    103  await mutated;
    104  await updated;
    105 }