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 | 60 |
1 files changed, 60 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 000000000..7b1611acd --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js @@ -0,0 +1,60 @@ +/* vim: set ts=2 et sw=2 tw=80: */ +/* 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(function* () { + yield addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html"); + let {inspector} = yield openInspector(); + + info("Selecting the first <img> tag"); + yield selectNode("img", inspector); + + for (let testNode of TEST_NODES) { + let target = yield getImageTooltipTarget(testNode, inspector); + yield assertTooltipShownOn(target, inspector); + checkImageTooltip(testNode, inspector); + } +}); + +function* getImageTooltipTarget({selector}, inspector) { + let nodeFront = yield getNodeFront(selector, inspector); + let isImg = nodeFront.tagName.toLowerCase() === "img"; + + let container = getContainerForNodeFront(nodeFront, inspector); + + let target = container.editor.tag; + if (isImg) { + target = container.editor.getAttributeElement("src").querySelector(".link"); + } + return target; +} + +function* assertTooltipShownOn(element, {markup}) { + info("Is the element a valid hover target"); + let isValid = yield isHoverTooltipTarget(markup.imagePreviewTooltip, element); + ok(isValid, "The element is a valid hover target for the image tooltip"); +} + +function checkImageTooltip({selector, size}, {markup}) { + let panel = markup.imagePreviewTooltip.panel; + let images = panel.getElementsByTagName("img"); + is(images.length, 1, "Tooltip for [" + selector + "] contains an image"); + + let label = panel.querySelector(".devtools-tooltip-caption"); + is(label.textContent, size, + "Tooltip label for [" + selector + "] displays the right image size"); + + markup.imagePreviewTooltip.hide(); +} |