Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* 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
"use strict";
// Test that the geometry editor resizes properly an element on all sides,
// with different unit measures, and that arrow/handlers are updated correctly.
const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
const ID = "geometry-editor-";
const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
const SIDES = ["top", "right", "bottom", "left"];
// The object below contains all the tests for this unit test.
// The property's name is the test's description, that points to an
// object contains the steps (what side of the geometry editor to drag,
// the amount of pixels) and the expectation.
const TESTS = {
"Drag top's handler along x and y, south-east direction": {
expects: "Only y axis is used to updated the top's element value",
drag: "top",
by: { x: 10, y: 10 },
},
"Drag right's handler along x and y, south-east direction": {
expects: "Only x axis is used to updated the right's element value",
drag: "right",
by: { x: 10, y: 10 },
},
"Drag bottom's handler along x and y, south-east direction": {
expects: "Only y axis is used to updated the bottom's element value",
drag: "bottom",
by: { x: 10, y: 10 },
},
"Drag left's handler along x and y, south-east direction": {
expects: "Only y axis is used to updated the left's element value",
drag: "left",
by: { x: 10, y: 10 },
},
"Drag top's handler along x and y, north-west direction": {
expects: "Only y axis is used to updated the top's element value",
drag: "top",
by: { x: -20, y: -20 },
},
"Drag right's handler along x and y, north-west direction": {
expects: "Only x axis is used to updated the right's element value",
drag: "right",
by: { x: -20, y: -20 },
},
"Drag bottom's handler along x and y, north-west direction": {
expects: "Only y axis is used to updated the bottom's element value",
drag: "bottom",
by: { x: -20, y: -20 },
},
"Drag left's handler along x and y, north-west direction": {
expects: "Only y axis is used to updated the left's element value",
drag: "left",
by: { x: -20, y: -20 },
},
};
add_task(async function () {
const inspector = await openInspectorForURL(TEST_URL);
const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector);
helper.prefix = ID;
const { show, hide, finalize } = helper;
info("Showing the highlighter");
await show("#node2");
for (const desc in TESTS) {
await executeTest(helper, desc, TESTS[desc]);
}
info("Hiding the highlighter");
await hide();
await finalize();
});
async function executeTest(helper, desc, data) {
info(desc);
ok(
await areElementAndHighlighterMovedCorrectly(helper, data.drag, data.by),
data.expects
);
}
async function areElementAndHighlighterMovedCorrectly(helper, side, by) {
const { mouse, highlightedNode } = helper;
const { x, y } = await getHandlerCoords(helper, side);
const dx = x + by.x;
const dy = y + by.y;
const beforeDragStyle = await highlightedNode.getComputedStyle();
// simulate drag & drop
await mouse.down(x, y);
await mouse.move(dx, dy);
await mouse.up();
await reflowContentPage();
info(`Checking ${side} handler is moved correctly`);
await isHandlerPositionUpdated(helper, side, x, y, by);
let delta = side === "left" || side === "right" ? by.x : by.y;
delta = delta * (side === "right" || side === "bottom" ? -1 : 1);
info("Checking element's sides are correct after drag & drop");
return areElementSideValuesCorrect(
highlightedNode,
beforeDragStyle,
side,
delta
);
}
async function isHandlerPositionUpdated(helper, name, x, y, by) {
const { x: afterDragX, y: afterDragY } = await getHandlerCoords(helper, name);
if (name === "left" || name === "right") {
is(afterDragX, x + by.x, `${name} handler's x axis updated.`);
is(afterDragY, y, `${name} handler's y axis unchanged.`);
} else {
is(afterDragX, x, `${name} handler's x axis unchanged.`);
is(afterDragY, y + by.y, `${name} handler's y axis updated.`);
}
}
async function areElementSideValuesCorrect(node, beforeDragStyle, name, delta) {
const afterDragStyle = await node.getComputedStyle();
let isSideCorrect = true;
for (const side of SIDES) {
const afterValue = Math.round(parseFloat(afterDragStyle[side].value));
const beforeValue = Math.round(parseFloat(beforeDragStyle[side].value));
if (side === name) {
// `isSideCorrect` is used only as test's return value, not to perform
// the actual test, because with `is` instead of `ok` we gather more
// information in case of failure
isSideCorrect = isSideCorrect && afterValue === beforeValue + delta;
is(afterValue, beforeValue + delta, `${side} is updated.`);
} else {
isSideCorrect = isSideCorrect && afterValue === beforeValue;
is(afterValue, beforeValue, `${side} is unchaged.`);
}
}
return isSideCorrect;
}
async function getHandlerCoords({ getElementAttribute }, side) {
return {
x: Math.round(await getElementAttribute("handler-" + side, "cx")),
y: Math.round(await getElementAttribute("handler-" + side, "cy")),
};
}