1 files changed, 145 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
new file mode 100644
index 0000000000..d9413e5d39
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
@@ -0,0 +1,145 @@
+/* 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 the position of the eyedropper label.
+// It should move around when the eyedropper is close to the edges of the viewport so as
+// to always stay visible.
+
+const HIGHLIGHTER_TYPE = "EyeDropper";
+const ID = "eye-dropper-";
+
+const HTML = `
+<style>
+html, body {height: 100%; margin: 0;}
+body {background: linear-gradient(red, gold); display: flex; justify-content: center;
+      align-items: center;}
+</style>
+Eyedropper label position test
+`;
+const TEST_PAGE = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+const TEST_DATA = [
+  {
+    desc: "Move the mouse to the center of the screen",
+    getCoordinates: (width, height) => {
+      return { x: width / 2, y: height / 2 };
+    },
+    expectedPositions: { top: false, right: false, left: false },
+  },
+  {
+    desc: "Move the mouse to the center left",
+    getCoordinates: (width, height) => {
+      return { x: 0, y: height / 2 };
+    },
+    expectedPositions: { top: false, right: true, left: false },
+  },
+  {
+    desc: "Move the mouse to the center right",
+    getCoordinates: (width, height) => {
+      return { x: width, y: height / 2 };
+    },
+    expectedPositions: { top: false, right: false, left: true },
+  },
+  {
+    desc: "Move the mouse to the bottom center",
+    getCoordinates: (width, height) => {
+      return { x: width / 2, y: height };
+    },
+    expectedPositions: { top: true, right: false, left: false },
+  },
+  {
+    desc: "Move the mouse to the bottom left",
+    getCoordinates: (width, height) => {
+      return { x: 0, y: height };
+    },
+    expectedPositions: { top: true, right: true, left: false },
+  },
+  {
+    desc: "Move the mouse to the bottom right",
+    getCoordinates: (width, height) => {
+      return { x: width, y: height };
+    },
+    expectedPositions: { top: true, right: false, left: true },
+  },
+  {
+    desc: "Move the mouse to the top left",
+    getCoordinates: (width, height) => {
+      return { x: 0, y: 0 };
+    },
+    expectedPositions: { top: false, right: true, left: false },
+  },
+  {
+    desc: "Move the mouse to the top right",
+    getCoordinates: (width, height) => {
+      return { x: width, y: 0 };
+    },
+    expectedPositions: { top: false, right: false, left: true },
+  },
+];
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_PAGE
+  );
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({
+    inspector,
+    highlighterTestFront,
+  });
+  helper.prefix = ID;
+
+  const { mouse, show, hide, finalize } = helper;
+  let { width, height } = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const rect = content.document
+        .querySelector("html")
+        .getBoundingClientRect();
+      return { width: rect.width, height: rect.height };
+    }
+  );
+
+  // This test fails in non-e10s windows if we use width and height. For some reasons, the
+  // mouse events can't be dispatched/handled properly when we try to move the eyedropper
+  // to the far right and/or bottom of the screen. So just removing 10px from each side
+  // fixes it.
+  width -= 10;
+  height -= 10;
+
+  info("Show the eyedropper on the page");
+  await show("html");
+
+  info(
+    "Move the eyedropper around and check that the label appears at the right place"
+  );
+  for (const { desc, getCoordinates, expectedPositions } of TEST_DATA) {
+    info(desc);
+    const { x, y } = getCoordinates(width, height);
+    info(`Moving the mouse to ${x} ${y}`);
+    await mouse.move(x, y);
+    await checkLabelPositionAttributes(helper, expectedPositions);
+  }
+
+  info("Hide the eyedropper");
+  await hide();
+  finalize();
+});
+
+async function checkLabelPositionAttributes(helper, positions) {
+  for (const position in positions) {
+    is(
+      await hasAttribute(helper, position),
+      positions[position],
+      `The label was ${
+        positions[position] ? "" : "not "
+      }moved to the ${position}`
+    );
+  }
+}
+
+async function hasAttribute({ getElementAttribute }, name) {
+  const value = await getElementAttribute("root", name);
+  return value !== null;
+}