tor-browser

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

browser_rules_grid-toggle_03.js (4263B)

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