1 files changed, 97 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js
new file mode 100644
index 0000000000..3598939d27
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js
@@ -0,0 +1,97 @@
+/* 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 shapes in iframes are updated correctly on mouse events.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes_iframe.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const { inspector } = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = { inspector, view, highlighters, helper };
+
+  await testPolygonIframeMovePoint(config);
+});
+
+async function testPolygonIframeMovePoint(config) {
+  const { inspector, view, helper } = config;
+  const selector = "#polygon";
+  const property = "clip-path";
+
+  info(`Turn on shapes highlighter for ${selector}`);
+  // Get a reference to the highlighter's target node inside the iframe.
+  const highlightedNode = await getNodeFrontInFrames(
+    ["#frame", selector],
+    inspector
+  );
+  // Select the nested node so toggling of the shapes highlighter works from the rule view
+  await selectNode(highlightedNode, inspector);
+  await toggleShapesHighlighter(view, selector, property, true);
+  const { mouse } = helper;
+
+  // We expect two ruleview-changed events:
+  // - one for previewing the change (DomRule::previewPropertyValue)
+  // - one for applying the change (DomRule::applyProperties)
+  let onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+
+  info("Moving polygon point visible in iframe");
+  // Iframe has 10px margin. Element in iframe is 800px by 800px. First point is at 0 0%
+  is(
+    await getClipPathPoint(highlightedNode, 0),
+    "0px 0%",
+    `First point is at 0 0%`
+  );
+
+  await mouse.down(10, 10);
+  await mouse.move(20, 20);
+  await mouse.up();
+  await reflowContentPage();
+  await onRuleViewChanged;
+
+  // point moved from y 0 to 10px, 10/800 (iframe height) = 1,25%
+  is(
+    await getClipPathPoint(highlightedNode, 0),
+    "10px 1.25%",
+    `Point moved to 10px 1.25%`
+  );
+
+  onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+
+  info("Dragging mouse out of the iframe");
+  // Iframe has 10px margin. Element in iframe is 800px by 800px. Second point is at 100px 50%
+  is(
+    await getClipPathPoint(highlightedNode, 1),
+    "100px 50%",
+    `Second point is at 100px 50%`
+  );
+
+  await mouse.down(110, 410);
+  await mouse.move(120, 510);
+  await mouse.up();
+  await reflowContentPage();
+  await onRuleViewChanged;
+
+  // The point can't be moved out of the iframe boundary, so we can't really assert the
+  // y point here (as it depends on the horizontal scrollbar size + the shape control point size).
+  ok(
+    (await getClipPathPoint(highlightedNode, 1)).startsWith("110px"),
+    `Point moved to 110px`
+  );
+
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function getClipPathPoint(node, pointIndex) {
+  const computedStyle = await node.inspectorFront.pageStyle.getComputed(node);
+  const definition = computedStyle["clip-path"].value;
+  const points = definition.replaceAll(/(^polygon\()|(\)$)/g, "").split(", ");
+  return points[pointIndex];
+}