tor-browser

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

browser_rules_shapes-toggle_07.js (3428B)

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