tor-browser

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

browser_markup_flex_display_badge.js (4818B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the flex display badge toggles on the flexbox highlighter.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    #flex {
     11      display: flex;
     12    }
     13  </style>
     14  <div id="flex"></div>
     15 `;
     16 
     17 add_task(async function () {
     18  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     19  const { inspector } = await openLayoutView();
     20  const { store } = inspector;
     21  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
     22  const {
     23    getActiveHighlighter,
     24    getNodeForActiveHighlighter,
     25    waitForHighlighterTypeShown,
     26    waitForHighlighterTypeHidden,
     27  } = getHighlighterTestHelpers(inspector);
     28 
     29  info("Check the flex display badge is shown and not active.");
     30  await selectNode("#flex", inspector);
     31 
     32  info("Wait until the flexbox store has been updated");
     33  await waitUntilState(
     34    store,
     35    state =>
     36      state.flexbox.flexContainer.nodeFront === inspector.selection.nodeFront
     37  );
     38 
     39  const flexContainer = await getContainerForSelector("#flex", inspector);
     40  const flexDisplayBadge = flexContainer.elt.querySelector(
     41    ".inspector-badge.interactive[data-display]"
     42  );
     43  ok(
     44    !flexDisplayBadge.classList.contains("active"),
     45    "flex display badge is not active."
     46  );
     47  is(
     48    flexDisplayBadge.getAttribute("aria-pressed"),
     49    "false",
     50    "flex display badge is not pressed."
     51  );
     52  ok(
     53    flexDisplayBadge.classList.contains("interactive"),
     54    "flex display badge is interactive."
     55  );
     56 
     57  info("Check the initial state of the flex highlighter.");
     58  ok(
     59    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     60    "No flexbox highlighter exists in the highlighters overlay."
     61  );
     62  ok(
     63    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
     64    "No flexbox highlighter is shown."
     65  );
     66 
     67  info("Toggling ON the flexbox highlighter from the flex display badge.");
     68  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
     69  let onCheckboxChange = waitUntilState(
     70    store,
     71    state => state.flexbox.highlighted
     72  );
     73  flexDisplayBadge.click();
     74  await onHighlighterShown;
     75  await onCheckboxChange;
     76 
     77  info(
     78    "Check the flexbox highlighter is created and flex display badge state."
     79  );
     80  ok(
     81    getActiveHighlighter(HIGHLIGHTER_TYPE),
     82    "Flexbox highlighter is created in the highlighters overlay."
     83  );
     84  ok(
     85    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
     86    "Flexbox highlighter is shown."
     87  );
     88  ok(
     89    flexDisplayBadge.classList.contains("active"),
     90    "flex display badge is active."
     91  );
     92  is(
     93    flexDisplayBadge.getAttribute("aria-pressed"),
     94    "true",
     95    "flex display badge is pressed."
     96  );
     97  ok(
     98    flexDisplayBadge.classList.contains("interactive"),
     99    "flex display badge is interactive."
    100  );
    101 
    102  info("Toggling OFF the flexbox highlighter from the flex display badge.");
    103  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
    104  onCheckboxChange = waitUntilState(store, state => !state.flexbox.highlighted);
    105  flexDisplayBadge.click();
    106  await onHighlighterHidden;
    107  await onCheckboxChange;
    108 
    109  ok(
    110    !flexDisplayBadge.classList.contains("active"),
    111    "flex display badge is not active."
    112  );
    113  is(
    114    flexDisplayBadge.getAttribute("aria-pressed"),
    115    "false",
    116    "flex display badge is no longer pressed."
    117  );
    118  ok(
    119    flexDisplayBadge.classList.contains("interactive"),
    120    "flex display badge is interactive."
    121  );
    122 
    123  info("Toggling ON the flexbox highlighter from the keyboard.");
    124  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
    125  onCheckboxChange = waitUntilState(store, state => state.flexbox.highlighted);
    126 
    127  flexDisplayBadge.focus();
    128  EventUtils.synthesizeKey("VK_RETURN", {}, flexDisplayBadge.ownerGlobal);
    129  await onHighlighterShown;
    130  await onCheckboxChange;
    131 
    132  ok(
    133    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
    134    "Flexbox highlighter was displayed from the keyboard."
    135  );
    136  ok(
    137    flexDisplayBadge.classList.contains("active"),
    138    "flex display badge is active."
    139  );
    140  is(
    141    flexDisplayBadge.getAttribute("aria-pressed"),
    142    "true",
    143    "flex display badge is pressed."
    144  );
    145 
    146  info("Toggling OFF the flexbox highlighter from the keyboard.");
    147  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
    148  onCheckboxChange = waitUntilState(store, state => !state.flexbox.highlighted);
    149  EventUtils.synthesizeKey("VK_RETURN", {}, flexDisplayBadge.ownerGlobal);
    150  await onHighlighterHidden;
    151  await onCheckboxChange;
    152 
    153  ok(true, "Highlighter was hidden from the keyboard");
    154  ok(
    155    !flexDisplayBadge.classList.contains("active"),
    156    "flex display badge was deactivated from the keyboard"
    157  );
    158  is(
    159    flexDisplayBadge.getAttribute("aria-pressed"),
    160    "false",
    161    "flex display badge is no longer pressed."
    162  );
    163 });