diff options
Diffstat (limited to 'devtools/client/inspector/markup/test/browser_markup_image_tooltip.js')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_image_tooltip.js | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js new file mode 100644 index 0000000000..f4a45c5079 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js @@ -0,0 +1,63 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"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(); +} |