tor-browser

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

browser_rules_flexbox-toggle_01b.js (2645B)

      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 flebox highlighter in the rule view and the display of the
      7 // flexbox highlighter.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    #flex {
     12      display: inline-flex;
     13    }
     14  </style>
     15  <div id="flex"></div>
     16 `;
     17 
     18 add_task(async function () {
     19  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     20  const { inspector, view } = await openRuleView();
     21  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
     22  const {
     23    getActiveHighlighter,
     24    getNodeForActiveHighlighter,
     25    waitForHighlighterTypeShown,
     26    waitForHighlighterTypeHidden,
     27  } = getHighlighterTestHelpers(inspector);
     28 
     29  await selectNode("#flex", inspector);
     30  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
     31  const flexboxToggle = container.querySelector(
     32    ".js-toggle-flexbox-highlighter"
     33  );
     34 
     35  info("Checking the initial state of the flexbox toggle in the rule-view.");
     36  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
     37  is(
     38    flexboxToggle.getAttribute("aria-pressed"),
     39    "false",
     40    "Flexbox highlighter toggle button is not active."
     41  );
     42  ok(
     43    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     44    "No flexbox highlighter exists in the rule-view."
     45  );
     46  ok(
     47    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
     48    "No flexbox highlighter is shown."
     49  );
     50 
     51  info("Toggling ON the flexbox highlighter from the rule-view.");
     52  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     53  flexboxToggle.click();
     54  await onHighlighterShown;
     55 
     56  info(
     57    "Checking the flexbox highlighter is created and toggle button is active in " +
     58      "the rule-view."
     59  );
     60  is(
     61    flexboxToggle.getAttribute("aria-pressed"),
     62    "true",
     63    "Flexbox highlighter toggle is active."
     64  );
     65  ok(
     66    getActiveHighlighter(HIGHLIGHTER_TYPE),
     67    "Flexbox highlighter created in the rule-view."
     68  );
     69  ok(
     70    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
     71    "Flexbox highlighter is shown."
     72  );
     73 
     74  info("Toggling OFF the flexbox highlighter from the rule-view.");
     75  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
     76  flexboxToggle.click();
     77  await onHighlighterHidden;
     78 
     79  info(
     80    "Checking the flexbox highlighter is not shown and toggle button is not active " +
     81      "in the rule-view."
     82  );
     83  is(
     84    flexboxToggle.getAttribute("aria-pressed"),
     85    "false",
     86    "Flexbox highlighter toggle button is not active."
     87  );
     88  ok(
     89    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     90    "No flexbox highlighter is shown."
     91  );
     92 });