tor-browser

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

browser_rules_shapes-toggle_03.js (4230B)

      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 with multiple shapes in the page.
      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 class="shape" id="shape1"></div>
     17  <div class="shape" id="shape2"></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("Selecting the first shape container.");
     31  await selectNode("#shape1", inspector);
     32  let container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
     33  let shapeToggle = container.querySelector(".inspector-shapeswatch");
     34 
     35  info(
     36    "Checking the state of the CSS shape toggle for the first shape container " +
     37      "in the rule-view."
     38  );
     39  ok(shapeToggle, "shape highlighter toggle is visible.");
     40  is(
     41    shapeToggle.getAttribute("aria-pressed"),
     42    "false",
     43    "shape highlighter toggle button is not active."
     44  );
     45  ok(
     46    !highlighters.highlighters[HIGHLIGHTER_TYPE],
     47    "No CSS shape highlighter exists in the rule-view."
     48  );
     49  ok(
     50    !highlighters.shapesHighlighterShown,
     51    "No CSS shapes highlighter is shown."
     52  );
     53 
     54  info(
     55    "Toggling ON the CSS shapes highlighter for the first shapes container from the " +
     56      "rule-view."
     57  );
     58  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     59  shapeToggle.click();
     60  await onHighlighterShown;
     61 
     62  info(
     63    "Checking the CSS shapes highlighter is created and toggle button is active in " +
     64      "the rule-view."
     65  );
     66  is(
     67    shapeToggle.getAttribute("aria-pressed"),
     68    "true",
     69    "shapes highlighter toggle is active."
     70  );
     71  ok(
     72    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     73    "CSS shapes highlighter created in the rule-view."
     74  );
     75  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
     76 
     77  info("Selecting the second shapes container.");
     78  await selectNode("#shape2", inspector);
     79  const firstShapesHighlighterShown = highlighters.shapesHighlighterShown;
     80  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
     81  shapeToggle = container.querySelector(".inspector-shapeswatch");
     82 
     83  info(
     84    "Checking the state of the CSS shapes toggle for the second shapes container " +
     85      "in the rule-view."
     86  );
     87  ok(shapeToggle, "shapes highlighter toggle is visible.");
     88  is(
     89    shapeToggle.getAttribute("aria-pressed"),
     90    "false",
     91    "shapes highlighter toggle button is not active."
     92  );
     93  ok(
     94    !highlighters.shapesHighlighterShown,
     95    "CSS shapes highlighter is still no longer" +
     96      "shown due to selecting another node."
     97  );
     98 
     99  info(
    100    "Toggling ON the CSS shapes highlighter for the second shapes container " +
    101      "from the rule-view."
    102  );
    103  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
    104  shapeToggle.click();
    105  await onHighlighterShown;
    106 
    107  info(
    108    "Checking the CSS shapes highlighter is created for the second shapes container " +
    109      "and toggle button is active in the rule-view."
    110  );
    111  is(
    112    shapeToggle.getAttribute("aria-pressed"),
    113    "true",
    114    "shapes highlighter toggle is active."
    115  );
    116  Assert.notEqual(
    117    highlighters.shapesHighlighterShown,
    118    firstShapesHighlighterShown,
    119    "shapes highlighter for the second shapes container is shown."
    120  );
    121 
    122  info("Selecting the first shapes container.");
    123  await selectNode("#shape1", inspector);
    124  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
    125  shapeToggle = container.querySelector(".inspector-shapeswatch");
    126 
    127  info(
    128    "Checking the state of the CSS shapes toggle for the first shapes container " +
    129      "in the rule-view."
    130  );
    131  ok(shapeToggle, "shapes highlighter toggle is visible.");
    132  is(
    133    shapeToggle.getAttribute("aria-pressed"),
    134    "false",
    135    "shapes highlighter toggle button is not active."
    136  );
    137 });