tor-browser

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

browser_grids_grid-list-element-rep.js (4348B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the grid item's element rep will display the box model higlighter on hover
      7 // and select the node on click.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    #grid {
     12      display: grid;
     13    }
     14    #pseudo-grid::after {
     15      content: "hello";
     16      display: grid;
     17    }
     18  </style>
     19  <script>
     20    class Custom extends HTMLElement {
     21        constructor() {
     22          super();
     23          const shadow = this.attachShadow({ mode: "open" });
     24          const wrapper = document.createElement("div");
     25          wrapper.classList.add("in-shadow");
     26          wrapper.setAttribute("style", "display: grid");
     27 
     28          const cell1 = document.createElement("span");
     29          cell1.textContent = "shadow cell1";
     30          const cell2 = document.createElement("span");
     31          cell2.textContent = "shadow cell2";
     32 
     33          wrapper.append(cell1, cell2);
     34          shadow.append(wrapper);
     35        }
     36      }
     37      customElements.define("custom-el", Custom);
     38  </script>
     39  <div id="grid">
     40    <div id="cell1">cell1</div>
     41    <div id="cell2">cell2</div>
     42  </div>
     43  <div id="pseudo-grid"></div>
     44  <custom-el></custom-el>
     45 `;
     46 
     47 add_task(async function () {
     48  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     49  const { inspector, gridInspector } = await openLayoutView();
     50  const { document: doc } = gridInspector;
     51  const { store } = inspector;
     52 
     53  const gridList = doc.querySelector("#grid-list");
     54 
     55  const [elementRep, pseudoRep, inShadowRep] =
     56    gridList.querySelectorAll(".objectBox");
     57 
     58  info("Testing regular grid container");
     59  is(
     60    elementRep.textContent,
     61    "div#grid",
     62    "Got expected Rep for the #grid element"
     63  );
     64  let nodeFront = await highlightAndSelectNode(inspector, elementRep);
     65  is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
     66  is(nodeFront.id, "grid", "The selected node has the correct id.");
     67  is(
     68    nodeFront,
     69    store.getState().grids[0].nodeFront,
     70    "The selected node is the one stored on the grid item's state."
     71  );
     72 
     73  info("Testing pseudo element grid container");
     74  is(
     75    pseudoRep.textContent,
     76    "::after",
     77    "Got expected Rep for the pseudo element grid container"
     78  );
     79  nodeFront = await highlightAndSelectNode(inspector, pseudoRep);
     80  is(
     81    nodeFront.displayName,
     82    "::after",
     83    "The expected node was highlighted/selected"
     84  );
     85  is(
     86    nodeFront,
     87    store.getState().grids[1].nodeFront,
     88    "The selected node is the one stored on the grid item's state."
     89  );
     90 
     91  info("Testing shadow DOM grid container");
     92  is(
     93    inShadowRep.textContent,
     94    "div.in-shadow",
     95    "Got expected Rep for the shadow DOM grid container"
     96  );
     97  nodeFront = await highlightAndSelectNode(inspector, inShadowRep);
     98  is(
     99    nodeFront.className,
    100    "in-shadow",
    101    "The expected node was highlighted/selected"
    102  );
    103  is(
    104    nodeFront,
    105    store.getState().grids[2].nodeFront,
    106    "The selected node is the one stored on the grid item's state."
    107  );
    108 });
    109 
    110 async function highlightAndSelectNode(inspector, repEl) {
    111  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
    112 
    113  info(`Scrolling into the view the "${repEl.textContent}" element node rep.`);
    114  const openInspectorButton = repEl.querySelector(".open-inspector");
    115  openInspectorButton.scrollIntoView();
    116 
    117  info("Listen to node-highlight event and mouse over the widget");
    118  let onHighlight = waitForHighlighterTypeShown(
    119    inspector.highlighters.TYPES.BOXMODEL
    120  );
    121  EventUtils.synthesizeMouse(
    122    openInspectorButton,
    123    10,
    124    5,
    125    { type: "mouseover" },
    126    openInspectorButton.ownerGlobal
    127  );
    128  const { nodeFront } = await onHighlight;
    129 
    130  ok(nodeFront, "nodeFront was returned from highlighting the node.");
    131 
    132  const onSelection = inspector.selection.once("new-node-front");
    133  // Selecting the node will cause a new highlight
    134  onHighlight = waitForHighlighterTypeShown(
    135    inspector.highlighters.TYPES.BOXMODEL
    136  );
    137  EventUtils.sendMouseEvent(
    138    { type: "click" },
    139    openInspectorButton,
    140    openInspectorButton.ownerGlobal
    141  );
    142  await onSelection;
    143  await onHighlight;
    144 
    145  is(
    146    inspector.selection.nodeFront,
    147    nodeFront,
    148    "The node is selected in the markup view when clicking the node"
    149  );
    150 
    151  return nodeFront;
    152 }