diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js new file mode 100644 index 0000000000..8875b95efb --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js @@ -0,0 +1,125 @@ +/* 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/. */ + +/* Globals defined in: devtools/client/inspector/test/head.js */ + +"use strict"; + +// Test that the geometry highlighter labels are correct. + +const TEST_URL = `data:text/html;charset=utf-8, + <div id='positioned' style=' + background:yellow; + position:absolute; + left:5rem; + top:30px; + right:300px; + bottom:10em;'></div> + <div id='positioned2' style=' + background:blue; + position:absolute; + right:10%; + top:5vmin;'>test element</div> + <div id='relative' style=' + background:green; + position:relative; + top:10px; + left:20px; + bottom:30px; + right:40px; + width:100px; + height:100px;'></div> + <div id='relative2' style=' + background:grey; + position:relative; + top:0;bottom:-50px; + height:3em;'>relative</div>`; + +const ID = "geometry-editor-"; +const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter"; + +const POSITIONED_ELEMENT_TESTS = [ + { + selector: "#positioned", + expectedLabels: [ + { side: "left", visible: true, label: "5rem" }, + { side: "top", visible: true, label: "30px" }, + { side: "right", visible: true, label: "300px" }, + { side: "bottom", visible: true, label: "10em" }, + ], + }, + { + selector: "#positioned2", + expectedLabels: [ + { side: "left", visible: false }, + { side: "top", visible: true, label: "5vmin" }, + { side: "right", visible: true, label: "10%" }, + { side: "bottom", visible: false }, + ], + }, + { + selector: "#relative", + expectedLabels: [ + { side: "left", visible: true, label: "20px" }, + { side: "top", visible: true, label: "10px" }, + { side: "right", visible: false }, + { side: "bottom", visible: false }, + ], + }, + { + selector: "#relative2", + expectedLabels: [ + { side: "left", visible: false }, + { side: "top", visible: true, label: "0px" }, + { side: "right", visible: false }, + { side: "bottom", visible: false }, + ], + }, +]; + +add_task(async function () { + const helper = await openInspectorForURL(TEST_URL).then( + getHighlighterHelperFor(HIGHLIGHTER_TYPE) + ); + + helper.prefix = ID; + + const { finalize } = helper; + + await positionLabelsAreCorrect(helper); + + await finalize(); +}); + +async function positionLabelsAreCorrect({ + show, + hide, + isElementHidden, + getElementTextContent, +}) { + info("Highlight nodes and check position labels"); + + for (const { selector, expectedLabels } of POSITIONED_ELEMENT_TESTS) { + info("Testing node " + selector); + + await show(selector); + + for (const { side, visible, label } of expectedLabels) { + const id = "label-" + side; + + const hidden = await isElementHidden(id); + if (visible) { + ok(!hidden, "The " + side + " label is visible"); + + const value = await getElementTextContent(id); + is(value, label, "The " + side + " label textcontent is correct"); + } else { + ok(hidden, "The " + side + " label is hidden"); + } + } + + info("Hiding the highlighter"); + await hide(); + } +} |