tor-browser

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

browser_rules_flexbox-toggle_03.js (4217B)

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