1 files changed, 48 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_iframe.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_iframe.js
new file mode 100644
index 0000000000..a5f7b22a00
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_iframe.js
@@ -0,0 +1,48 @@
+/* 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 creation of the geometry highlighter elements on remote frame.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(`
+    <div id='positioned' style='
+      background:yellow;
+      position:absolute;
+      left:5rem;
+      top:30px;'
+    >
+      Hello from iframe
+    </div>`)}">
+  </iframe>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Select the absolute positioned node in the iframe");
+  await selectNodeInFrames(["iframe", "#positioned"], inspector);
+
+  info("Click on the button enabling the highlighter");
+  const onHighlighterShown = inspector.highlighters.once(
+    "geometry-editor-highlighter-shown"
+  );
+  const boxModelPanel = inspector.getPanel("boxmodel");
+  const button = await waitFor(() =>
+    boxModelPanel.document.querySelector(".layout-geometry-editor")
+  );
+  button.click();
+
+  await onHighlighterShown;
+  ok(true, "Highlighter is displayed");
+
+  info("Click on the button again to disable the highlighter");
+  const onHighlighterHidden = inspector.highlighters.once(
+    "geometry-editor-highlighter-hidden"
+  );
+
+  button.click();
+  await onHighlighterHidden;
+  ok("Highlighter is hidden");
+});