1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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(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")),
};
}
|
