tor-browser

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

browser_rules_grid-toggle_01.js (2604B)

      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 and the display of the
      7 // grid highlighter.
      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 add_task(async function () {
     22  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     23  const { inspector, view } = await openRuleView();
     24  const highlighters = view.highlighters;
     25  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
     26  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
     27    getHighlighterTestHelpers(inspector);
     28 
     29  await selectNode("#grid", inspector);
     30  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
     31  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
     32 
     33  info("Checking the initial state of the CSS grid toggle in the rule-view.");
     34  ok(
     35    !gridToggle.hasAttribute("disabled"),
     36    "Grid highlighter toggle is not disabled."
     37  );
     38  is(
     39    gridToggle.getAttribute("aria-pressed"),
     40    "false",
     41    "Grid highlighter toggle button is not active."
     42  );
     43  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
     44 
     45  info("Toggling ON the CSS grid highlighter from the rule-view.");
     46  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     47  gridToggle.click();
     48  await onHighlighterShown;
     49 
     50  info(
     51    "Checking the CSS grid highlighter is created and toggle button is active in " +
     52      "the rule-view."
     53  );
     54  ok(
     55    !gridToggle.hasAttribute("disabled"),
     56    "Grid highlighter toggle is not disabled."
     57  );
     58  is(
     59    gridToggle.getAttribute("aria-pressed"),
     60    "true",
     61    "Grid highlighter toggle is active."
     62  );
     63  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
     64 
     65  info("Toggling OFF the CSS grid highlighter from the rule-view.");
     66  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
     67  gridToggle.click();
     68  await onHighlighterHidden;
     69 
     70  info(
     71    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
     72      "in the rule-view."
     73  );
     74  ok(
     75    !gridToggle.hasAttribute("disabled"),
     76    "Grid highlighter toggle is not disabled."
     77  );
     78  is(
     79    gridToggle.getAttribute("aria-pressed"),
     80    "false",
     81    "Grid highlighter toggle button is not active."
     82  );
     83  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
     84 });