tor-browser

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

browser_markup_shadowdom_navigation.js (3119B)

      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 navigation works correctly with shadow dom slotted nodes.
      7 // Each slotted nodes has two containers representing the same node front in the markup
      8 // view, we need to make sure that navigating to the slotted version selects the slotted
      9 // container, and navigating to the non-slotted element selects the non-slotted container.
     10 
     11 const TEST_URL = `data:text/html;charset=utf-8,
     12  <test-component class="test-component">
     13    <div slot="slot1" class="slotted1"><div class="slot1-child">slot1-1</div></div>
     14    <div slot="slot1" class="slotted2">slot1-2</div>
     15  </test-component>
     16 
     17  <script>
     18    'use strict';
     19    customElements.define('test-component', class extends HTMLElement {
     20      constructor() {
     21        super();
     22        let shadowRoot = this.attachShadow({mode: 'open'});
     23        shadowRoot.innerHTML = '<slot class="slot1" name="slot1"></slot>';
     24      }
     25    });
     26  </script>`;
     27 
     28 const TEST_DATA = [
     29  ["KEY_PageUp", "html"],
     30  ["KEY_ArrowDown", "head"],
     31  ["KEY_ArrowDown", "body"],
     32  ["KEY_ArrowDown", "test-component"],
     33  ["KEY_ArrowRight", "test-component"],
     34  ["KEY_ArrowDown", "shadow-root"],
     35  ["KEY_ArrowRight", "shadow-root"],
     36  ["KEY_ArrowDown", "slot1"],
     37  ["KEY_ArrowRight", "slot1"],
     38  ["KEY_ArrowDown", "div", "slotted1"],
     39  ["KEY_ArrowDown", "div", "slotted2"],
     40  ["KEY_ArrowDown", "slotted1"],
     41  ["KEY_ArrowRight", "slotted1"],
     42  ["KEY_ArrowDown", "slot1-child"],
     43  ["KEY_ArrowDown", "slotted2"],
     44 ];
     45 
     46 add_task(async function () {
     47  const { inspector } = await openInspectorForURL(TEST_URL);
     48 
     49  info("Making sure the markup-view frame is focused");
     50  inspector.markup._frame.focus();
     51 
     52  info("Starting to iterate through the test data");
     53  for (const [key, expected, slottedClassName] of TEST_DATA) {
     54    info("Testing step: " + key + " to navigate to " + expected);
     55    EventUtils.synthesizeKey(key);
     56 
     57    info("Making sure markup-view children get updated");
     58    await waitForChildrenUpdated(inspector);
     59 
     60    info("Checking the right node is selected");
     61    checkSelectedNode(key, expected, slottedClassName, inspector);
     62  }
     63 
     64  // Same as in browser_markup_navigation.js, use a single catch-call event listener.
     65  await inspector.once("inspector-updated");
     66 });
     67 
     68 function checkSelectedNode(key, expected, slottedClassName, inspector) {
     69  const selectedContainer = inspector.markup.getSelectedContainer();
     70  const slotted = !!slottedClassName;
     71 
     72  is(
     73    selectedContainer.isSlotted(),
     74    slotted,
     75    `Selected container is ${slotted ? "slotted" : "not slotted"} as expected`
     76  );
     77  is(
     78    inspector.selection.isSlotted(),
     79    slotted,
     80    `Inspector selection is also ${slotted ? "slotted" : "not slotted"}`
     81  );
     82  ok(
     83    selectedContainer.elt.textContent.includes(expected),
     84    "Found expected content: " +
     85      expected +
     86      " in container after pressing " +
     87      key
     88  );
     89 
     90  if (slotted) {
     91    is(
     92      selectedContainer.node.className,
     93      slottedClassName,
     94      "Slotted has the expected classname " + slottedClassName
     95    );
     96  }
     97 }