1 files changed, 89 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion.js b/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion.js
new file mode 100644
index 0000000000..8b6f576182
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-reduced-motion.js
@@ -0,0 +1,89 @@
+/* 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);
+});