tor-browser

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

browser_rules_shapes-toggle_06.js (3033B)

      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 clip-path and shape-outside
      7 // on the same element.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11    .shape {
     12      width: 800px;
     13      height: 800px;
     14      clip-path: circle(25%);
     15      shape-outside: circle(25%);
     16    }
     17  </style>
     18  <div class="shape" id="shape1"></div>
     19  <div class="shape" id="shape2"></div>
     20 `;
     21 
     22 add_task(async function () {
     23  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     24  const { inspector, view } = await openRuleView();
     25  const highlighters = view.highlighters;
     26 
     27  info("Selecting the first shapes container.");
     28  await selectNode("#shape1", inspector);
     29  let clipPathContainer = getRuleViewProperty(
     30    view,
     31    ".shape",
     32    "clip-path"
     33  ).valueSpan;
     34  let clipPathShapeToggle = clipPathContainer.querySelector(
     35    ".inspector-shapeswatch"
     36  );
     37  let shapeOutsideContainer = getRuleViewProperty(
     38    view,
     39    ".shape",
     40    "shape-outside"
     41  ).valueSpan;
     42  let shapeOutsideToggle = shapeOutsideContainer.querySelector(
     43    ".inspector-shapeswatch"
     44  );
     45 
     46  info(
     47    "Toggling ON the CSS shapes highlighter for clip-path from the rule-view."
     48  );
     49  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     50  clipPathShapeToggle.click();
     51  await onHighlighterShown;
     52  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
     53  is(
     54    clipPathShapeToggle.getAttribute("aria-pressed"),
     55    "true",
     56    "clip-path toggle button is active."
     57  );
     58  is(
     59    shapeOutsideToggle.getAttribute("aria-pressed"),
     60    "false",
     61    "shape-outside toggle button is not active."
     62  );
     63 
     64  info(
     65    "Toggling ON the CSS shapes highlighter for shape-outside from the rule-view."
     66  );
     67  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     68  shapeOutsideToggle.click();
     69  await onHighlighterShown;
     70  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
     71  is(
     72    clipPathShapeToggle.getAttribute("aria-pressed"),
     73    "false",
     74    "clip-path toggle button is not active."
     75  );
     76  is(
     77    shapeOutsideToggle.getAttribute("aria-pressed"),
     78    "true",
     79    "shape-outside toggle button is active."
     80  );
     81 
     82  info("Selecting the second shapes container.");
     83  await selectNode("#shape2", inspector);
     84  clipPathContainer = getRuleViewProperty(
     85    view,
     86    ".shape",
     87    "clip-path"
     88  ).valueSpan;
     89  clipPathShapeToggle = clipPathContainer.querySelector(
     90    ".inspector-shapeswatch"
     91  );
     92  shapeOutsideContainer = getRuleViewProperty(
     93    view,
     94    ".shape",
     95    "shape-outside"
     96  ).valueSpan;
     97  shapeOutsideToggle = shapeOutsideContainer.querySelector(
     98    ".inspector-shapeswatch"
     99  );
    100  is(
    101    clipPathShapeToggle.getAttribute("aria-pressed"),
    102    "false",
    103    "clip-path toggle button is not active."
    104  );
    105  is(
    106    shapeOutsideToggle.getAttribute("aria-pressed"),
    107    "false",
    108    "shape-outside toggle button is not active."
    109  );
    110 });