diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js | 97 |
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]; +} |