1 files changed, 89 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-zoom.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-zoom.js
new file mode 100644
index 0000000000..ea8b3ef444
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-zoom.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";
+
+// Test that the eye dropper works as expected when the page is zoomed-in.
+
+const COLOR_1 = "#aa0000";
+const COLOR_2 = "#0bb000";
+const COLOR_3 = "#00cc00";
+const COLOR_4 = "#000dd0";
+
+const HTML = `
+<style>
+  body {
+    margin: 0;
+  }
+  div {
+    height: 50px;
+    width: 50px;
+  }
+</style>
+<div style="background-color: ${COLOR_1};"></div>
+<div style="background-color: ${COLOR_2};"></div>
+<div style="background-color: ${COLOR_3};"></div>
+<div style="background-color: ${COLOR_4};"></div>`;
+const TEST_URI = `http://example.com/document-builder.sjs?html=${encodeURIComponent(
+  HTML
+)}`;
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  info("Zoom in the page");
+  setContentPageZoomLevel(2);
+
+  const toggleButton = inspector.panelDoc.querySelector(
+    "#inspector-eyedropper-toggle"
+  );
+  toggleButton.click();
+  await TestUtils.waitForCondition(() =>
+    highlighterTestFront.isEyeDropperVisible()
+  );
+
+  ok(true, "Eye dropper is visible");
+
+  const checkColorAt = (...args) =>
+    checkEyeDropperColorAt(highlighterTestFront, ...args);
+
+  // ⚠️ Note that we need to check the regular position, not the zoomed-in ones.
+
+  await checkColorAt(
+    25,
+    10,
+    COLOR_1,
+    "The eyedropper holds the expected color for the first div"
+  );
+
+  await checkColorAt(
+    25,
+    60,
+    COLOR_2,
+    "The eyedropper holds the expected color for the second div"
+  );
+
+  await checkColorAt(
+    25,
+    110,
+    COLOR_3,
+    "The eyedropper holds the expected color for the third div"
+  );
+
+  await checkColorAt(
+    25,
+    160,
+    COLOR_4,
+    "The eyedropper holds the expected color for the fourth div"
+  );
+
+  info("Hide the eyedropper");
+  toggleButton.click();
+  await TestUtils.waitForCondition(async () => {
+    const visible = await highlighterTestFront.isEyeDropperVisible();
+    return !visible;
+  });
+  setContentPageZoomLevel(1);
+});