browser_inspector_highlighter-reduced-motion.js

Enable keyboard shortcuts

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

// Check that the boxmodel highlighter is styled differently when

// ui.prefersReducedMotion is enabled.

const TEST_URL =

  "data:text/html;charset=utf-8,<h1>test1</h1><h2>test2</h2><h3>test3</h3>";

add_task(async function () {

  info("Disable ui.prefersReducedMotion");

  await pushPref("ui.prefersReducedMotion", 0);

  info("Enable simple highlighters");

  await pushPref("devtools.inspector.simple-highlighters-reduced-motion", true);

  const { highlighterTestFront, inspector } =

    await openInspectorForURL(TEST_URL);

  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.BOXMODEL;

  const front = inspector.inspectorFront;

  const highlighterFront = await front.getHighlighterByType(HIGHLIGHTER_TYPE);

  // Small helper to retrieve the computed style of a specific highlighter

  // element.

  const getElementComputedStyle = async (id, property) => {

    info(`Retrieve computed style for property ${property} on element ${id}`);

    return highlighterTestFront.getHighlighterComputedStyle(

id,

      property,

      highlighterFront

);

};

  info("Highlight a node and check the highlighter is filled");

  await selectAndHighlightNode("h1", inspector);

  let stroke = await getElementComputedStyle("box-model-content", "stroke");

  let fill = await getElementComputedStyle("box-model-content", "fill");

is(

    stroke,

    "none",

    "If prefersReducedMotion is disabled, stroke style is none"

);

ok(

    InspectorUtils.isValidCSSColor(fill),

    "If prefersReducedMotion is disabled, fill style is a valid color"

);

  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);

  info("Enable ui.prefersReducedMotion");

  await pushPref("ui.prefersReducedMotion", 1);

  info("Highlight a node and check the highlighter uses stroke and not fill");

  await selectAndHighlightNode("h2", inspector);

  stroke = await getElementComputedStyle("box-model-content", "stroke");

  fill = await getElementComputedStyle("box-model-content", "fill");

ok(

    InspectorUtils.isValidCSSColor(stroke),

    "If prefersReducedMotion is enabled, stroke style is a valid color"

);

  is(fill, "none", "If prefersReducedMotion is enabled, fill style is none");

  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);

  info("Disable simple highlighters");

  await pushPref(

    "devtools.inspector.simple-highlighters-reduced-motion",

    false

);

  info("Highlight a node and check the highlighter is filled again");

  await selectAndHighlightNode("h3", inspector);

  stroke = await getElementComputedStyle("box-model-content", "stroke");

  fill = await getElementComputedStyle("box-model-content", "fill");

is(

    stroke,

    "none",

    "If simple highlighters are disabled, stroke style is none"

);

ok(

    InspectorUtils.isValidCSSColor(fill),

    "If simple highlighters are disabled, fill style is a valid color"

);

  await inspector.highlighters.hideHighlighterType(HIGHLIGHTER_TYPE);

});