tor-browser

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

browser_rules_shapes-toggle_basic-shapes-default.js (2964B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Check that the shapes highlighter can be toggled for basic shapes with default values.
      7 
      8 const TEST_URI = `
      9  <style type='text/css'>
     10    #shape-circle {
     11      clip-path: circle();
     12    }
     13    #shape-ellipse {
     14      clip-path: ellipse();
     15    }
     16    #shape-inset {
     17      clip-path: inset();
     18    }
     19    #shape-polygon {
     20      clip-path: polygon();
     21    }
     22  </style>
     23  <div id="shape-circle"></div>
     24  <div id="shape-ellipse"></div>
     25  <div id="shape-inset"></div>
     26  <div id="shape-polygon"></div>
     27 `;
     28 
     29 const { TYPES } = ChromeUtils.importESModule(
     30  "resource://devtools/shared/highlighters.mjs"
     31 );
     32 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     33 
     34 add_task(async function () {
     35  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     36  const { inspector, view } = await openRuleView();
     37  const highlighters = view.highlighters;
     38 
     39  const selectors = new Map([
     40    ["#shape-circle", true],
     41    ["#shape-ellipse", true],
     42    // Basic shapes inset() and polygon() expect explicit coordinates.
     43    // They don't have default values and are invalid without coordinates.
     44    ["#shape-inset", false],
     45    ["#shape-polygon", false],
     46  ]);
     47 
     48  for (const [selector, expectShapesToogle] of selectors) {
     49    await selectNode(selector, inspector);
     50    const container = getRuleViewProperty(
     51      view,
     52      selector,
     53      "clip-path"
     54    ).valueSpan;
     55    const shapesToggle = container.querySelector(".inspector-shapeswatch");
     56 
     57    if (expectShapesToogle) {
     58      ok(
     59        shapesToggle,
     60        `Shapes highlighter toggle expected and found for ${selector}`
     61      );
     62    } else {
     63      is(
     64        shapesToggle,
     65        null,
     66        `Shapes highlighter toggle not expected and not found for ${selector}`
     67      );
     68 
     69      // Skip the rest of the test.
     70      continue;
     71    }
     72 
     73    info(`Toggling ON the shapes highlighter for ${selector}`);
     74    const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     75    shapesToggle.click();
     76    await onHighlighterShown;
     77 
     78    is(
     79      shapesToggle.getAttribute("aria-pressed"),
     80      "true",
     81      `Shapes highlighter toggle active for ${selector}`
     82    );
     83    ok(
     84      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     85      `Shapes highlighter instance created for ${selector}`
     86    );
     87    ok(
     88      highlighters.shapesHighlighterShown,
     89      `Shapes highlighter shown for ${selector}`
     90    );
     91 
     92    info(`Toggling OFF the shapes highlighter for ${selector}`);
     93    const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
     94    shapesToggle.click();
     95    await onHighlighterHidden;
     96 
     97    is(
     98      shapesToggle.getAttribute("aria-pressed"),
     99      "false",
    100      `Shapes highlighter toggle no longer active for ${selector}`
    101    );
    102    ok(
    103      !highlighters.shapesHighlighterShown,
    104      `Shapes highlighter no longer shown for ${selector}`
    105    );
    106  }
    107 });