tor-browser

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

browser_rules_shapes-toggle_01.js (2674B)

      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 shapes highlighter in the rule view and the display of the
      7 // shapes highlighter.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    #shape {
     12      width: 800px;
     13      height: 800px;
     14      clip-path: circle(25%);
     15    }
     16  </style>
     17  <div id="shape"></div>
     18 `;
     19 
     20 const { TYPES } = ChromeUtils.importESModule(
     21  "resource://devtools/shared/highlighters.mjs"
     22 );
     23 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     24 
     25 add_task(async function () {
     26  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     27  const { inspector, view } = await openRuleView();
     28  const highlighters = view.highlighters;
     29 
     30  info("Select a node with a shape value");
     31  await selectNode("#shape", inspector);
     32  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
     33  const shapesToggle = container.querySelector(".inspector-shapeswatch");
     34 
     35  info("Checking the initial state of the CSS shape toggle in the rule-view.");
     36  ok(shapesToggle, "Shapes highlighter toggle is visible.");
     37  is(
     38    shapesToggle.getAttribute("aria-pressed"),
     39    "false",
     40    "Shapes highlighter toggle button is not active."
     41  );
     42  ok(
     43    !highlighters.highlighters[HIGHLIGHTER_TYPE],
     44    "No CSS shapes highlighter exists in the rule-view."
     45  );
     46  ok(
     47    !highlighters.shapesHighlighterShown,
     48    "No CSS shapes highlighter is shown."
     49  );
     50  info("Toggling ON the CSS shapes highlighter from the rule-view.");
     51  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     52  shapesToggle.click();
     53  await onHighlighterShown;
     54 
     55  info(
     56    "Checking the CSS shapes highlighter is created and toggle button is active in " +
     57      "the rule-view."
     58  );
     59  is(
     60    shapesToggle.getAttribute("aria-pressed"),
     61    "true",
     62    "Shapes highlighter toggle is active."
     63  );
     64  ok(
     65    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     66    "CSS shapes highlighter created in the rule-view."
     67  );
     68  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
     69 
     70  info("Toggling OFF the CSS shapes highlighter from the rule-view.");
     71  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
     72  shapesToggle.click();
     73  await onHighlighterHidden;
     74 
     75  info(
     76    "Checking the CSS shapes highlighter is not shown and toggle button is not " +
     77      "active in the rule-view."
     78  );
     79  is(
     80    shapesToggle.getAttribute("aria-pressed"),
     81    "false",
     82    "Shapes highlighter toggle button is not active."
     83  );
     84  ok(
     85    !highlighters.shapesHighlighterShown,
     86    "No CSS shapes highlighter is shown."
     87  );
     88 });