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
|
/* 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 the position of the eyedropper label.
// It should move around when the eyedropper is close to the edges of the viewport so as
// to always stay visible.
const HIGHLIGHTER_TYPE = "EyeDropper";
const ID = "eye-dropper-";
const HTML = `
<style>
html, body {height: 100%; margin: 0;}
body {background: linear-gradient(red, gold); display: flex; justify-content: center;
align-items: center;}
</style>
Eyedropper label position test
`;
const TEST_PAGE = "data:text/html;charset=utf-8," + encodeURI(HTML);
const TEST_DATA = [
{
desc: "Move the mouse to the center of the screen",
getCoordinates: (width, height) => {
return { x: width / 2, y: height / 2 };
},
expectedPositions: { top: false, right: false, left: false },
},
{
desc: "Move the mouse to the center left",
getCoordinates: (width, height) => {
return { x: 0, y: height / 2 };
},
expectedPositions: { top: false, right: true, left: false },
},
{
desc: "Move the mouse to the center right",
getCoordinates: (width, height) => {
return { x: width, y: height / 2 };
},
expectedPositions: { top: false, right: false, left: true },
},
{
desc: "Move the mouse to the bottom center",
getCoordinates: (width, height) => {
return { x: width / 2, y: height };
},
expectedPositions: { top: true, right: false, left: false },
},
{
desc: "Move the mouse to the bottom left",
getCoordinates: (width, height) => {
return { x: 0, y: height };
},
expectedPositions: { top: true, right: true, left: false },
},
{
desc: "Move the mouse to the bottom right",
getCoordinates: (width, height) => {
return { x: width, y: height };
},
expectedPositions: { top: true, right: false, left: true },
},
{
desc: "Move the mouse to the top left",
getCoordinates: (width, height) => {
return { x: 0, y: 0 };
},
expectedPositions: { top: false, right: true, left: false },
},
{
desc: "Move the mouse to the top right",
getCoordinates: (width, height) => {
return { x: width, y: 0 };
},
expectedPositions: { top: false, right: false, left: true },
},
];
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_PAGE
);
const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({
inspector,
highlighterTestFront,
});
helper.prefix = ID;
const { mouse, show, hide, finalize } = helper;
let { width, height } = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[],
() => {
const rect = content.document
.querySelector("html")
.getBoundingClientRect();
return { width: rect.width, height: rect.height };
}
);
// This test fails in non-e10s windows if we use width and height. For some reasons, the
// mouse events can't be dispatched/handled properly when we try to move the eyedropper
// to the far right and/or bottom of the screen. So just removing 10px from each side
// fixes it.
width -= 10;
height -= 10;
info("Show the eyedropper on the page");
await show("html");
info(
"Move the eyedropper around and check that the label appears at the right place"
);
for (const { desc, getCoordinates, expectedPositions } of TEST_DATA) {
info(desc);
const { x, y } = getCoordinates(width, height);
info(`Moving the mouse to ${x} ${y}`);
await mouse.move(x, y);
await checkLabelPositionAttributes(helper, expectedPositions);
}
info("Hide the eyedropper");
await hide();
finalize();
});
async function checkLabelPositionAttributes(helper, positions) {
for (const position in positions) {
is(
await hasAttribute(helper, position),
positions[position],
`The label was ${
positions[position] ? "" : "not "
}moved to the ${position}`
);
}
}
async function hasAttribute({ getElementAttribute }, name) {
const value = await getElementAttribute("root", name);
return value !== null;
}
|
