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 that the eye dropper works as expected when the page is zoomed-in.
const COLOR_1 = "#aa0000";
const COLOR_2 = "#0bb000";
const COLOR_3 = "#00cc00";
const COLOR_4 = "#000dd0";
const HTML = `
<style>
body {
margin: 0;
}
div {
height: 50px;
width: 50px;
}
</style>
<div style="background-color: ${COLOR_1};"></div>
<div style="background-color: ${COLOR_2};"></div>
<div style="background-color: ${COLOR_3};"></div>
<div style="background-color: ${COLOR_4};"></div>`;
HTML
)}`;
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URI
);
info("Zoom in the page");
setContentPageZoomLevel(2);
const toggleButton = inspector.panelDoc.querySelector(
"#inspector-eyedropper-toggle"
);
toggleButton.click();
await TestUtils.waitForCondition(() =>
highlighterTestFront.isEyeDropperVisible()
);
ok(true, "Eye dropper is visible");
const checkColorAt = (...args) =>
checkEyeDropperColorAt(highlighterTestFront, ...args);
// ⚠️ Note that we need to check the regular position, not the zoomed-in ones.
await checkColorAt(
25,
10,
COLOR_1,
"The eyedropper holds the expected color for the first div"
);
await checkColorAt(
25,
60,
COLOR_2,
"The eyedropper holds the expected color for the second div"
);
await checkColorAt(
25,
110,
COLOR_3,
"The eyedropper holds the expected color for the third div"
);
await checkColorAt(
25,
160,
COLOR_4,
"The eyedropper holds the expected color for the fourth div"
);
info("Hide the eyedropper");
toggleButton.click();
await TestUtils.waitForCondition(async () => {
const visible = await highlighterTestFront.isEyeDropperVisible();
return !visible;
});
setContentPageZoomLevel(1);
});