1 files changed, 94 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-frames.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-frames.js
new file mode 100644
index 0000000000..926a97a80b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-frames.js
@@ -0,0 +1,94 @@
+/* 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 eyedropper works on a page with iframes.
+
+const TOP_LEVEL_BACKGROUND_COLOR = "#ff0000";
+const SAME_ORIGIN_FRAME_BACKGROUND_COLOR = "#00ee00";
+const REMOTE_FRAME_BACKGROUND_COLOR = "#0000dd";
+
+const HTML = `
+<style>
+  body {
+    height: 100vh;
+    background: ${TOP_LEVEL_BACKGROUND_COLOR};
+    margin: 0;
+  }
+
+  div, iframe {
+    border: none;
+    display: block;
+    height: 100px;
+    text-align: center;
+  }
+</style>
+<div>top-level element</div>
+<iframe src="https://example.com/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
+  SAME_ORIGIN_FRAME_BACKGROUND_COLOR
+)};text-align: center;}</style><body>same origin iframe</body>"></iframe>
+<iframe src="https://example.org/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
+  REMOTE_FRAME_BACKGROUND_COLOR
+)};text-align: center;}</style><body>remote iframe</body>"></iframe>
+`;
+const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
+  HTML
+)}`;
+
+add_task(async function () {
+  const { inspector, highlighterTestFront } = await openInspectorForURL(
+    TEST_URI
+  );
+
+  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);
+
+  //   The content page has the following layout:
+  //
+  //  +------------------------------------+
+  //  |   top level div (#ff0000)          | 100px
+  //  +------------------------------------+
+  //  |   same origin iframe (#00ee00)     | 100px
+  //  +------------------------------------+
+  //  |   remote iframe (#0000dd)          | 100px
+  //  +------------------------------------+
+
+  await checkColorAt(
+    50,
+    50,
+    TOP_LEVEL_BACKGROUND_COLOR,
+    "The eyedropper holds the expected color for the top-level element"
+  );
+
+  await checkColorAt(
+    50,
+    150,
+    SAME_ORIGIN_FRAME_BACKGROUND_COLOR,
+    "The eyedropper holds the expected color for the same-origin iframe"
+  );
+
+  await checkColorAt(
+    50,
+    250,
+    REMOTE_FRAME_BACKGROUND_COLOR,
+    "The eyedropper holds the expected color for the remote iframe"
+  );
+
+  info("Hide the eyedropper");
+  toggleButton.click();
+  await TestUtils.waitForCondition(async () => {
+    const visible = await highlighterTestFront.isEyeDropperVisible();
+    return !visible;
+  });
+});