tor-browser

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

browser_inspector_highlighter-reduced-motion.js (3177B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 // Check that the boxmodel highlighter is styled differently when
      8 // ui.prefersReducedMotion is enabled.
      9 
     10 const TEST_URL =
     11  "data:text/html;charset=utf-8,<h1>test1</h1><h2>test2</h2><h3>test3</h3>";
     12 
     13 add_task(async function () {
     14  info("Disable ui.prefersReducedMotion");
     15  await pushPref("ui.prefersReducedMotion", 0);
     16 
     17  info("Enable simple highlighters");
     18  await pushPref("devtools.inspector.simple-highlighters-reduced-motion", true);
     19 
     20  const { highlighterTestFront, inspector } =
     21    await openInspectorForURL(TEST_URL);
     22  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.BOXMODEL;
     23 
     24  const front = inspector.inspectorFront;
     25  const highlighterFront = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
     26 
     27  // Small helper to retrieve the computed style of a specific highlighter
     28  // element.
     29  const getElementComputedStyle = async (id, property) => {
     30    info(`Retrieve computed style for property ${property} on element ${id}`);
     31    return highlighterTestFront.getHighlighterComputedStyle(
     32      id,
     33      property,
     34      highlighterFront
     35    );
     36  };
     37 
     38  info("Highlight a node and check the highlighter is filled");
     39  await selectAndHighlightNode("h1", inspector);
     40  let stroke = await getElementComputedStyle("box-model-content", "stroke");
     41  let fill = await getElementComputedStyle("box-model-content", "fill");
     42  is(
     43    stroke,
     44    "none",
     45    "If prefersReducedMotion is disabled, stroke style is none"
     46  );
     47  ok(
     48    InspectorUtils.isValidCSSColor(fill),
     49    "If prefersReducedMotion is disabled, fill style is a valid color"
     50  );
     51  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);
     52 
     53  info("Enable ui.prefersReducedMotion");
     54  await pushPref("ui.prefersReducedMotion", 1);
     55 
     56  info("Highlight a node and check the highlighter uses stroke and not fill");
     57  await selectAndHighlightNode("h2", inspector);
     58  stroke = await getElementComputedStyle("box-model-content", "stroke");
     59  fill = await getElementComputedStyle("box-model-content", "fill");
     60  ok(
     61    InspectorUtils.isValidCSSColor(stroke),
     62    "If prefersReducedMotion is enabled, stroke style is a valid color"
     63  );
     64  is(fill, "none", "If prefersReducedMotion is enabled, fill style is none");
     65 
     66  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);
     67 
     68  info("Disable simple highlighters");
     69  await pushPref(
     70    "devtools.inspector.simple-highlighters-reduced-motion",
     71    false
     72  );
     73 
     74  info("Highlight a node and check the highlighter is filled again");
     75  await selectAndHighlightNode("h3", inspector);
     76  stroke = await getElementComputedStyle("box-model-content", "stroke");
     77  fill = await getElementComputedStyle("box-model-content", "fill");
     78  is(
     79    stroke,
     80    "none",
     81    "If simple highlighters are disabled, stroke style is none"
     82  );
     83  ok(
     84    InspectorUtils.isValidCSSColor(fill),
     85    "If simple highlighters are disabled, fill style is a valid color"
     86  );
     87  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);
     88 });