1 files changed, 72 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
new file mode 100644
index 0000000000..e11b9484db
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
@@ -0,0 +1,72 @@
+/* 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/. */
+
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
+"use strict";
+
+// Test that the right arrows/labels are shown even when the css properties are
+// in several different css rules.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
+const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+const PROPS = ["left", "right", "top", "bottom"];
+
+add_task(async function () {
+  const helper = await openInspectorForURL(TEST_URL).then(
+    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
+  );
+
+  helper.prefix = ID;
+
+  const { finalize } = helper;
+
+  await checkArrowsLabelsAndHandlers(
+    "#node2",
+    ["top", "left", "bottom", "right"],
+    helper
+  );
+
+  await checkArrowsLabelsAndHandlers("#node3", ["top", "left"], helper);
+
+  await finalize();
+});
+
+async function checkArrowsLabelsAndHandlers(
+  selector,
+  expectedProperties,
+  { show, hide, isElementHidden }
+) {
+  info("Getting node " + selector + " from the page");
+
+  await show(selector);
+
+  for (const name of expectedProperties) {
+    const hidden =
+      (await isElementHidden("arrow-" + name)) &&
+      (await isElementHidden("handler-" + name));
+    ok(
+      !hidden,
+      "The " + name + " label/arrow & handler is visible for node " + selector
+    );
+  }
+
+  // Testing that the other arrows are hidden
+  for (const name of PROPS) {
+    if (expectedProperties.includes(name)) {
+      continue;
+    }
+    const hidden =
+      (await isElementHidden("arrow-" + name)) &&
+      (await isElementHidden("handler-" + name));
+    ok(
+      hidden,
+      "The " + name + " arrow & handler is hidden for node " + selector
+    );
+  }
+
+  info("Hiding the highlighter");
+  await hide();
+}