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(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"))
};
}
|
