зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1408468 - Shapes highlighter handles for shapes in iframe cannot be clicked outside iframe. r=gl
MozReview-Commit-ID: 3J4J6vM96sj
This commit is contained in:
Mike Park
Родитель
353e6851a0
Коммит
c304a07e7a
|
|
@ -16,6 +16,7 @@ support-files =
|
|||
doc_inspector_highlighter-geometry_01.html
|
||||
doc_inspector_highlighter-geometry_02.html
|
||||
doc_inspector_highlighter_cssshapes.html
|
||||
doc_inspector_highlighter_cssshapes_iframe.html
|
||||
doc_inspector_highlighter_csstransform.html
|
||||
doc_inspector_highlighter_dom.html
|
||||
doc_inspector_highlighter_inline.html
|
||||
|
|
@ -82,6 +83,7 @@ skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keybo
|
|||
[browser_inspector_highlighter-cssshape_03.js]
|
||||
[browser_inspector_highlighter-cssshape_04.js]
|
||||
[browser_inspector_highlighter-cssshape_05.js]
|
||||
[browser_inspector_highlighter-cssshape_iframe_01.js]
|
||||
[browser_inspector_highlighter-csstransform_01.js]
|
||||
[browser_inspector_highlighter-csstransform_02.js]
|
||||
[browser_inspector_highlighter-embed.js]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
/* 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(function* () {
|
||||
let inspector = yield openInspectorForURL(TEST_URL);
|
||||
let helper = yield getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector);
|
||||
let {testActor} = inspector;
|
||||
|
||||
yield testPolygonIframeMovePoint(testActor, helper);
|
||||
|
||||
yield helper.finalize();
|
||||
});
|
||||
|
||||
function* testPolygonIframeMovePoint(testActor, helper) {
|
||||
info("Displaying polygon");
|
||||
yield helper.show("#polygon", {mode: "cssClipPath"}, "#frame");
|
||||
let { mouse, highlightedNode } = helper;
|
||||
|
||||
info("Moving polygon point visible in iframe");
|
||||
yield mouse.down(10, 10);
|
||||
yield mouse.move(20, 20);
|
||||
yield mouse.up();
|
||||
yield testActor.reflow();
|
||||
|
||||
let computedStyle = yield highlightedNode.getComputedStyle();
|
||||
let definition = computedStyle["clip-path"].value;
|
||||
ok(definition.includes("10px 10px"), "Point moved to 10px 10px");
|
||||
|
||||
info("Moving polygon point not visible in iframe");
|
||||
yield mouse.down(110, 410);
|
||||
yield mouse.move(120, 420);
|
||||
yield mouse.up();
|
||||
yield testActor.reflow();
|
||||
|
||||
computedStyle = yield highlightedNode.getComputedStyle();
|
||||
definition = computedStyle["clip-path"].value;
|
||||
ok(definition.includes("110px 51.25%"), "Point moved to 110px 51.25%");
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<iframe id="frame" src="doc_inspector_highlighter_cssshapes.html"></iframe>
|
||||
|
|
@ -447,8 +447,12 @@ const getHighlighterHelperFor = (type) => Task.async(
|
|||
return highlighter.actorID;
|
||||
},
|
||||
|
||||
show: function* (selector = ":root", options) {
|
||||
highlightedNode = yield getNodeFront(selector, inspector);
|
||||
show: function* (selector = ":root", options, frameSelector = null) {
|
||||
if (frameSelector) {
|
||||
highlightedNode = yield getNodeFrontInFrame(selector, frameSelector, inspector);
|
||||
} else {
|
||||
highlightedNode = yield getNodeFront(selector, inspector);
|
||||
}
|
||||
return yield highlighter.show(highlightedNode, options);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
const { CanvasFrameAnonymousContentHelper,
|
||||
createSVGNode, createNode, getComputedStyle } = require("./utils/markup");
|
||||
const { setIgnoreLayoutChanges, getCurrentZoom,
|
||||
getAdjustedQuads } = require("devtools/shared/layout/utils");
|
||||
getAdjustedQuads, getFrameOffsets } = require("devtools/shared/layout/utils");
|
||||
const { AutoRefreshHighlighter } = require("./auto-refresh");
|
||||
const {
|
||||
getDistance,
|
||||
|
|
@ -205,7 +205,20 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
|
|||
return;
|
||||
}
|
||||
|
||||
const { target, type, pageX, pageY } = event;
|
||||
let { target, type, pageX, pageY } = event;
|
||||
|
||||
// For events on highlighted nodes in an iframe, when the event takes place
|
||||
// outside the iframe. Check if event target belongs to the iframe. If it doesn't,
|
||||
// adjust pageX/pageY to be relative to the iframe rather than the parent.
|
||||
if (target.ownerDocument !== this.currentNode.ownerDocument) {
|
||||
let [xOffset, yOffset] = getFrameOffsets(target.ownerGlobal, this.currentNode);
|
||||
// xOffset/yOffset are relative to the viewport, so first find the top/left
|
||||
// edges of the viewport relative to the page.
|
||||
let viewportLeft = pageX - event.clientX;
|
||||
let viewportTop = pageY - event.clientY;
|
||||
pageX -= viewportLeft + xOffset;
|
||||
pageY -= viewportTop + yOffset;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case "pagehide":
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче