diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_highlighter-zoom.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-zoom.js | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js b/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js new file mode 100644 index 0000000000..ba81fde1b8 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-zoom.js @@ -0,0 +1,83 @@ +/* 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 that the highlighter stays correctly positioned and has the right aspect +// ratio even when the page is zoomed in or out. + +const TEST_URL = "data:text/html;charset=utf-8,<div>zoom me</div>"; + +// TEST_LEVELS entries should contain the zoom level to test. +const TEST_LEVELS = [2, 1, 0.5]; + +// Returns the expected style attribute value to check for on the highlighter's elements +// node, for the values given. +const expectedStyle = (w, h, z) => + (z !== 1 + ? `transform-origin: left top 0px; transform: scale(${1 / z}); ` + : "") + + `position: absolute; width: ${w * z}px; height: ${h * z}px; ` + + "overflow: hidden;"; + +add_task(async function () { + const { inspector, highlighterTestFront } = await openInspectorForURL( + TEST_URL + ); + + const div = await getNodeFront("div", inspector); + + for (const level of TEST_LEVELS) { + info(`Zoom to level ${level}`); + setContentPageZoomLevel(level); + + info("Highlight the test node"); + await inspector.highlighters.showHighlighterTypeForNode( + inspector.highlighters.TYPES.BOXMODEL, + div + ); + + const isVisible = await highlighterTestFront.isHighlighting(); + ok(isVisible, `The highlighter is visible at zoom level ${level}`); + + await isNodeCorrectlyHighlighted(highlighterTestFront, "div"); + + info("Check that the highlighter root wrapper node was scaled down"); + + const style = await getElementsNodeStyle(highlighterTestFront); + + const { width, height } = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [], + () => { + const { require } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs" + ); + const { + getWindowDimensions, + } = require("resource://devtools/shared/layout/utils.js"); + return getWindowDimensions(content); + } + ); + + is( + style, + expectedStyle(width, height, level), + "The style attribute of the root element is correct" + ); + + info("Unhighlight the node"); + await inspector.highlighters.hideHighlighterType( + inspector.highlighters.TYPES.BOXMODEL + ); + } +}); + +async function getElementsNodeStyle(highlighterTestFront) { + const value = await highlighterTestFront.getHighlighterNodeAttribute( + "box-model-elements", + "style" + ); + return value; +} |