117 lines
3.4 KiB
JavaScript
117 lines
3.4 KiB
JavaScript
/* 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(function* () {
|
|
let helper = yield openInspectorForURL(TEST_URL)
|
|
.then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
|
|
|
|
helper.prefix = ID;
|
|
|
|
let { finalize } = helper;
|
|
|
|
yield positionLabelsAreCorrect(helper);
|
|
|
|
yield finalize();
|
|
});
|
|
|
|
function* positionLabelsAreCorrect(
|
|
{show, hide, isElementHidden, getElementTextContent}
|
|
) {
|
|
info("Highlight nodes and check position labels");
|
|
|
|
for (let {selector, expectedLabels} of POSITIONED_ELEMENT_TESTS) {
|
|
info("Testing node " + selector);
|
|
|
|
yield show(selector);
|
|
|
|
for (let {side, visible, label} of expectedLabels) {
|
|
let id = "label-" + side;
|
|
|
|
let hidden = yield isElementHidden(id);
|
|
if (visible) {
|
|
ok(!hidden, "The " + side + " label is visible");
|
|
|
|
let value = yield getElementTextContent(id);
|
|
is(value, label, "The " + side + " label textcontent is correct");
|
|
} else {
|
|
ok(hidden, "The " + side + " label is hidden");
|
|
}
|
|
}
|
|
|
|
info("Hiding the highlighter");
|
|
yield hide();
|
|
}
|
|
}
|