/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ /* import-globals-from helper_html_tooltip.js */ "use strict"; /** * Test the HTMLTooltip positioning for a small tooltip element (should aways * find a way to fit). */ const HTML_NS = "http://www.w3.org/1999/xhtml"; const TEST_URI = `data:text/xml;charset=UTF-8, spacer test1 test2 MIDDLE test3 test4 spacer `; const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip"); loadHelperScript("helper_html_tooltip.js"); const TOOLTIP_HEIGHT = 30; const TOOLTIP_WIDTH = 100; add_task(function* () { // Force the toolbox to be 400px high; yield pushPref("devtools.toolbox.footer.height", 400); yield addTab("about:blank"); let [,, doc] = yield createHost("bottom", TEST_URI); info("Create HTML tooltip"); let tooltip = new HTMLTooltip(doc, {useXulWrapper: false}); let div = doc.createElementNS(HTML_NS, "div"); div.style.height = "100%"; tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT}); let box1 = doc.getElementById("box1"); let box2 = doc.getElementById("box2"); let box3 = doc.getElementById("box3"); let box4 = doc.getElementById("box4"); let height = TOOLTIP_HEIGHT, width = TOOLTIP_WIDTH; // box1: Can only fit below box1 info("Display the tooltip on box1."); yield showTooltip(tooltip, box1); let expectedTooltipGeometry = {position: "bottom", height, width}; checkTooltipGeometry(tooltip, box1, expectedTooltipGeometry); yield hideTooltip(tooltip); info("Try to display the tooltip on top of box1."); yield showTooltip(tooltip, box1, {position: "top"}); expectedTooltipGeometry = {position: "bottom", height, width}; checkTooltipGeometry(tooltip, box1, expectedTooltipGeometry); yield hideTooltip(tooltip); // box2: Can fit above or below, will default to bottom, more height // available. info("Try to display the tooltip on box2."); yield showTooltip(tooltip, box2); expectedTooltipGeometry = {position: "bottom", height, width}; checkTooltipGeometry(tooltip, box2, expectedTooltipGeometry); yield hideTooltip(tooltip); info("Try to display the tooltip on top of box2."); yield showTooltip(tooltip, box2, {position: "top"}); expectedTooltipGeometry = {position: "top", height, width}; checkTooltipGeometry(tooltip, box2, expectedTooltipGeometry); yield hideTooltip(tooltip); // box3: Can fit above or below, will default to top, more height available. info("Try to display the tooltip on box3."); yield showTooltip(tooltip, box3); expectedTooltipGeometry = {position: "top", height, width}; checkTooltipGeometry(tooltip, box3, expectedTooltipGeometry); yield hideTooltip(tooltip); info("Try to display the tooltip on bottom of box3."); yield showTooltip(tooltip, box3, {position: "bottom"}); expectedTooltipGeometry = {position: "bottom", height, width}; checkTooltipGeometry(tooltip, box3, expectedTooltipGeometry); yield hideTooltip(tooltip); // box4: Can only fit above box4 info("Display the tooltip on box4."); yield showTooltip(tooltip, box4); expectedTooltipGeometry = {position: "top", height, width}; checkTooltipGeometry(tooltip, box4, expectedTooltipGeometry); yield hideTooltip(tooltip); info("Try to display the tooltip on bottom of box4."); yield showTooltip(tooltip, box4, {position: "bottom"}); expectedTooltipGeometry = {position: "top", height, width}; checkTooltipGeometry(tooltip, box4, expectedTooltipGeometry); yield hideTooltip(tooltip); is(tooltip.isVisible(), false, "Tooltip is not visible"); tooltip.destroy(); });