tor-browser

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

browser_grids_highlighter-setting-rules-grid-toggle.js (2306B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test toggling the grid highlighter in the rule view with changes in the grid
      7 // display setting from the layout view.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    #grid {
     12      display: grid;
     13    }
     14  </style>
     15  <div id="grid">
     16    <div id="cell1">cell1</div>
     17    <div id="cell2">cell2</div>
     18  </div>
     19 `;
     20 
     21 const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
     22 
     23 add_task(async function () {
     24  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     25  const { inspector, gridInspector } = await openLayoutView();
     26  const { document: doc } = gridInspector;
     27  const { store } = inspector;
     28 
     29  const checkbox = doc.getElementById("grid-setting-extend-grid-lines");
     30 
     31  ok(
     32    !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
     33    "'Extend grid lines infinitely' is pref off by default."
     34  );
     35 
     36  info("Toggling ON the 'Extend grid lines infinitely' setting.");
     37  const onCheckboxChange = waitUntilState(
     38    store,
     39    state => state.highlighterSettings.showInfiniteLines
     40  );
     41  checkbox.click();
     42  await onCheckboxChange;
     43 
     44  info("Selecting the rule view.");
     45  const ruleView = selectRuleView(inspector);
     46  const highlighters = ruleView.highlighters;
     47 
     48  await selectNode("#grid", inspector);
     49 
     50  const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
     51  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
     52 
     53  info("Toggling ON the CSS grid highlighter from the rule-view.");
     54  const onHighlighterShown = highlighters.once(
     55    "grid-highlighter-shown",
     56    (nodeFront, options) => {
     57      info("Checking the grid highlighter display settings.");
     58      const {
     59        color,
     60        showGridAreasOverlay,
     61        showGridLineNumbers,
     62        showInfiniteLines,
     63      } = options;
     64 
     65      is(color, "#9400FF", "CSS grid highlighter color is correct.");
     66      ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
     67      ok(!showGridLineNumbers, "Show grid line numbers option is off.");
     68      ok(showInfiniteLines, "Show infinite lines option is on.");
     69    }
     70  );
     71  gridToggle.click();
     72  await onHighlighterShown;
     73 
     74  Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
     75 });