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
/* 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();
}
}