tor-browser

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

browser_rules_grid-toggle_05.js (4698B)

      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 grid toggle is hidden when the maximum number of grid highlighters
      7 // have been reached.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    .grid {
     12      display: grid;
     13    }
     14  </style>
     15  <div id="grid1" class="grid">
     16    <div class="cell1">cell1</div>
     17    <div class="cell2">cell2</div>
     18  </div>
     19  <div id="grid2" class="grid">
     20    <div class="cell1">cell1</div>
     21    <div class="cell2">cell2</div>
     22  </div>
     23  <div id="grid3" class="grid">
     24    <div class="cell1">cell1</div>
     25    <div class="cell2">cell2</div>
     26  </div>
     27 `;
     28 
     29 add_task(async function () {
     30  await pushPref("devtools.gridinspector.maxHighlighters", 2);
     31  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     32  const { inspector, gridInspector } = await openLayoutView();
     33  const ruleView = selectRuleView(inspector);
     34  const { document: doc } = gridInspector;
     35  const { highlighters } = inspector;
     36  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
     37  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
     38    getHighlighterTestHelpers(inspector);
     39 
     40  await selectNode("#grid1", inspector);
     41  const gridList = doc.getElementById("grid-list");
     42  const checkbox2 = gridList.children[1].querySelector("input");
     43  const checkbox3 = gridList.children[2].querySelector("input");
     44  const container = getRuleViewProperty(ruleView, ".grid", "display").valueSpan;
     45  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
     46 
     47  info("Checking the initial state of the CSS grid toggle in the rule-view.");
     48  ok(
     49    !gridToggle.hasAttribute("disabled"),
     50    "Grid highlighter toggle is not disabled."
     51  );
     52  is(
     53    gridToggle.getAttribute("aria-pressed"),
     54    "false",
     55    "Grid highlighter toggle button is not active."
     56  );
     57  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
     58 
     59  info("Toggling ON the CSS grid highlighter for #grid2.");
     60  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     61  checkbox2.click();
     62  await onHighlighterShown;
     63 
     64  info(
     65    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
     66  );
     67  ok(
     68    !gridToggle.hasAttribute("disabled"),
     69    "Grid highlighter toggle is not disabled."
     70  );
     71  is(
     72    gridToggle.getAttribute("aria-pressed"),
     73    "false",
     74    "Grid highlighter toggle button is not active."
     75  );
     76  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
     77 
     78  info("Toggling ON the CSS grid highlighter for #grid3.");
     79  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     80  checkbox3.click();
     81  await onHighlighterShown;
     82 
     83  info("Checking the CSS grid toggle for #grid1 is disabled.");
     84  ok(
     85    gridToggle.hasAttribute("disabled"),
     86    "Grid highlighter toggle is disabled."
     87  );
     88  is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
     89 
     90  info("Toggling OFF the CSS grid highlighter for #grid3.");
     91  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
     92  checkbox3.click();
     93  await onHighlighterHidden;
     94 
     95  info(
     96    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
     97  );
     98  ok(
     99    !gridToggle.hasAttribute("disabled"),
    100    "Grid highlighter toggle is not disabled."
    101  );
    102  is(
    103    gridToggle.getAttribute("aria-pressed"),
    104    "false",
    105    "Grid highlighter toggle button is not active."
    106  );
    107  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
    108 
    109  info("Toggling ON the CSS grid highlighter for #grid1 from the rule-view.");
    110  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
    111  gridToggle.click();
    112  await onHighlighterShown;
    113 
    114  info("Checking the CSS grid toggle for #grid1 is not disabled.");
    115  ok(
    116    !gridToggle.hasAttribute("disabled"),
    117    "Grid highlighter toggle is not disabled."
    118  );
    119  is(
    120    gridToggle.getAttribute("aria-pressed"),
    121    "true",
    122    "Grid highlighter toggle is active."
    123  );
    124  is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
    125 
    126  info("Toggling OFF the CSS grid highlighter for #grid1 from the rule-view.");
    127  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
    128  gridToggle.click();
    129  await onHighlighterHidden;
    130 
    131  info(
    132    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
    133  );
    134  ok(
    135    !gridToggle.hasAttribute("disabled"),
    136    "Grid highlighter toggle is not disabled."
    137  );
    138  is(
    139    gridToggle.getAttribute("aria-pressed"),
    140    "false",
    141    "Grid highlighter toggle button is not active."
    142  );
    143  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
    144 });