1 files changed, 102 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
new file mode 100644
index 0000000000..46afb2ac57
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the shapes highlighter can be toggled for basic shapes with default values.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape-circle {
+      clip-path: circle();
+    }
+    #shape-ellipse {
+      clip-path: ellipse();
+    }
+    #shape-inset {
+      clip-path: inset();
+    }
+    #shape-polygon {
+      clip-path: polygon();
+    }
+  </style>
+  <div id="shape-circle"></div>
+  <div id="shape-ellipse"></div>
+  <div id="shape-inset"></div>
+  <div id="shape-polygon"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  const selectors = new Map([
+    ["#shape-circle", true],
+    ["#shape-ellipse", true],
+    // Basic shapes inset() and polygon() expect explicit coordinates.
+    // They don't have default values and are invalid without coordinates.
+    ["#shape-inset", false],
+    ["#shape-polygon", false],
+  ]);
+
+  for (const [selector, expectShapesToogle] of selectors) {
+    await selectNode(selector, inspector);
+    const container = getRuleViewProperty(
+      view,
+      selector,
+      "clip-path"
+    ).valueSpan;
+    const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+    if (expectShapesToogle) {
+      ok(
+        shapesToggle,
+        `Shapes highlighter toggle expected and found for ${selector}`
+      );
+    } else {
+      is(
+        shapesToggle,
+        null,
+        `Shapes highlighter toggle not expected and not found for ${selector}`
+      );
+
+      // Skip the rest of the test.
+      continue;
+    }
+
+    info(`Toggling ON the shapes highlighter for ${selector}`);
+    const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+    shapesToggle.click();
+    await onHighlighterShown;
+
+    ok(
+      shapesToggle.classList.contains("active"),
+      `Shapes highlighter toggle active for ${selector}`
+    );
+    ok(
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+      `Shapes highlighter instance created for ${selector}`
+    );
+    ok(
+      highlighters.shapesHighlighterShown,
+      `Shapes highlighter shown for ${selector}`
+    );
+
+    info(`Toggling OFF the shapes highlighter for ${selector}`);
+    const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+    shapesToggle.click();
+    await onHighlighterHidden;
+
+    ok(
+      !shapesToggle.classList.contains("active"),
+      `Shapes highlighter toggle no longer active for ${selector}`
+    );
+    ok(
+      !highlighters.shapesHighlighterShown,
+      `Shapes highlighter no longer shown for ${selector}`
+    );
+  }
+});