diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js new file mode 100644 index 000000000..cc22473b7 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_06.js @@ -0,0 +1,166 @@ +/* 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 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(function* () { + let inspector = yield openInspectorForURL(TEST_URL); + let helper = yield getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector); + + helper.prefix = ID; + + let { show, hide, finalize } = helper; + + info("Showing the highlighter"); + yield show("#node2"); + + for (let desc in TESTS) { + yield executeTest(helper, desc, TESTS[desc]); + } + + info("Hiding the highlighter"); + yield hide(); + yield finalize(); +}); + +function* executeTest(helper, desc, data) { + info(desc); + + ok((yield areElementAndHighlighterMovedCorrectly( + helper, data.drag, data.by)), data.expects); +} + +function* areElementAndHighlighterMovedCorrectly(helper, side, by) { + let { mouse, reflow, highlightedNode } = helper; + + let {x, y} = yield getHandlerCoords(helper, side); + + let dx = x + by.x; + let dy = y + by.y; + + let beforeDragStyle = yield highlightedNode.getComputedStyle(); + + // simulate drag & drop + yield mouse.down(x, y); + yield mouse.move(dx, dy); + yield mouse.up(); + + yield reflow(); + + info(`Checking ${side} handler is moved correctly`); + yield 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 yield areElementSideValuesCorrect(highlightedNode, beforeDragStyle, + side, delta); +} + +function* isHandlerPositionUpdated(helper, name, x, y, by) { + let {x: afterDragX, y: afterDragY} = yield 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.`); + } +} + +function* areElementSideValuesCorrect(node, beforeDragStyle, name, delta) { + let afterDragStyle = yield node.getComputedStyle(); + let isSideCorrect = true; + + for (let side of SIDES) { + let afterValue = Math.round(parseFloat(afterDragStyle[side].value)); + let 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; +} + +function* getHandlerCoords({getElementAttribute}, side) { + return { + x: Math.round(yield getElementAttribute("handler-" + side, "cx")), + y: Math.round(yield getElementAttribute("handler-" + side, "cy")) + }; +} |