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
|
/* 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(function* () {
let {inspector, testActor} = yield openInspectorForURL(TEST_PAGE);
let helper = yield getHighlighterHelperFor(HIGHLIGHTER_TYPE)({inspector, testActor});
helper.prefix = ID;
let {mouse, show, hide, finalize} = helper;
let {width, height} = yield testActor.getBoundingClientRect("html");
// 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");
yield show("html");
info("Move the eyedropper around and check that the label appears at the right place");
for (let {desc, getCoordinates, expectedPositions} of TEST_DATA) {
info(desc);
let {x, y} = getCoordinates(width, height);
info(`Moving the mouse to ${x} ${y}`);
yield mouse.move(x, y);
yield checkLabelPositionAttributes(helper, expectedPositions);
}
info("Hide the eyedropper");
yield hide();
finalize();
});
function* checkLabelPositionAttributes(helper, positions) {
for (let position in positions) {
is((yield hasAttribute(helper, position)), positions[position],
`The label was ${positions[position] ? "" : "not "}moved to the ${position}`);
}
}
function* hasAttribute({getElementAttribute}, name) {
let value = yield getElementAttribute("root", name);
return value !== null;
}
|
