Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* 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
"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: () => {
return { x: 0, y: 0 };
},
expectedPositions: { top: false, right: true, left: false },
},
{
desc: "Move the mouse to the top right",
getCoordinates: width => {
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;
}