Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that image preview tooltips are shown on img and canvas tags in the
// markup-view and that the tooltip actually contains an image and shows the
// right dimension label
const TEST_NODES = [
{ selector: "img.local", size: "192" + " \u00D7 " + "192" },
{ selector: "img.data", size: "64" + " \u00D7 " + "64" },
{ selector: "img.remote", size: "22" + " \u00D7 " + "23" },
{ selector: ".canvas", size: "600" + " \u00D7 " + "600" },
];
add_task(async function () {
await addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
const { inspector } = await openInspector();
info("Selecting the first <img> tag");
await selectNode("img", inspector);
for (const testNode of TEST_NODES) {
const target = await getImageTooltipTarget(testNode, inspector);
await assertTooltipShownOnHover(
inspector.markup.imagePreviewTooltip,
target
);
checkImageTooltip(testNode, inspector);
await assertTooltipHiddenOnMouseOut(
inspector.markup.imagePreviewTooltip,
target
);
}
});
async function getImageTooltipTarget({ selector }, inspector) {
const nodeFront = await getNodeFront(selector, inspector);
const isImg = nodeFront.tagName.toLowerCase() === "img";
const container = getContainerForNodeFront(nodeFront, inspector);
let target = container.editor.tag;
if (isImg) {
target = container.editor.getAttributeElement("src").querySelector(".link");
}
return target;
}
function checkImageTooltip({ selector, size }, { markup }) {
const panel = markup.imagePreviewTooltip.panel;
const images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip for [" + selector + "] contains an image");
const label = panel.querySelector(".devtools-tooltip-caption");
is(
label.textContent,
size,
"Tooltip label for [" + selector + "] displays the right image size"
);
markup.imagePreviewTooltip.hide();
}