tor-browser

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

browser_grids_grid-outline-highlight-area.js (2406B)

      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 area and cell are highlighted when hovering over a grid area in the
      7 // grid outline.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    #grid {
     12      display: grid;
     13      grid-template-areas:
     14        "header"
     15        "footer";
     16    }
     17    .top {
     18      grid-area: header;
     19    }
     20    .bottom {
     21      grid-area: footer;
     22    }
     23  </style>
     24  <div id="grid">
     25    <div id="cella" className="top">Cell A</div>
     26    <div id="cellb" className="bottom">Cell B</div>
     27  </div>
     28 `;
     29 
     30 add_task(async function () {
     31  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     32 
     33  const { inspector, gridInspector } = await openLayoutView();
     34  const { document: doc } = gridInspector;
     35  const { store } = inspector;
     36  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
     37  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
     38 
     39  const gridList = doc.getElementById("grid-list");
     40  const checkbox = gridList.children[0].querySelector("input");
     41 
     42  info("Toggling ON the CSS grid highlighter from the layout panel.");
     43  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     44  const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2);
     45  const onCheckboxChange = waitUntilState(
     46    store,
     47    state => state.grids.length == 1 && state.grids[0].highlighted
     48  );
     49  checkbox.click();
     50 
     51  info("Wait for checkbox to change");
     52  await onCheckboxChange;
     53 
     54  info("Wait for highlighter to be shown");
     55  await onHighlighterShown;
     56 
     57  info("Wait for outline to be rendered");
     58  await onGridOutlineRendered;
     59 
     60  info("Hovering over grid cell A in the grid outline.");
     61  const onCellAHighlight = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     62 
     63  synthesizeMouseOverOnGridCell(doc, 0);
     64 
     65  const { options } = await onCellAHighlight;
     66 
     67  info(
     68    "Checking the grid highlighter options for the show grid area and cell parameters."
     69  );
     70  const { showGridCell, showGridArea } = options;
     71  const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell;
     72 
     73  is(gridFragmentIndex, "0", "Should be the first grid fragment index.");
     74  is(rowNumber, "1", "Should be the first grid row.");
     75  is(columnNumber, "1", "Should be the first grid column.");
     76  is(showGridArea, "header", "Grid area name should be 'header'.");
     77 });