diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js new file mode 100644 index 0000000000..d9413e5d39 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js @@ -0,0 +1,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; +} |