browser_html_tooltip_xul-wrapper.js (2826B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 /* import-globals-from helper_html_tooltip.js */ 4 5 "use strict"; 6 7 /** 8 * Test the HTMLTooltip can overflow out of the toolbox when using a XUL panel wrapper. 9 */ 10 11 const HTML_NS = "http://www.w3.org/1999/xhtml"; 12 const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip-05.xhtml"; 13 14 const { 15 HTMLTooltip, 16 } = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js"); 17 loadHelperScript("helper_html_tooltip.js"); 18 19 // The test toolbox will be 200px tall, the anchors are 50px tall, therefore, the maximum 20 // tooltip height that could fit in the toolbox is 150px. Setting 160px, the tooltip will 21 // either have to overflow or to be resized. 22 const TOOLTIP_HEIGHT = 160; 23 const TOOLTIP_WIDTH = 200; 24 25 add_task(async function () { 26 // Force the toolbox to be 200px high; 27 await pushPref("devtools.toolbox.footer.height", 200); 28 29 const { win, doc } = await createHost("bottom", TEST_URI); 30 31 info("Resize and move the window to have space below."); 32 const originalWidth = win.outerWidth; 33 const originalHeight = win.outerHeight; 34 win.resizeBy(-100, -200); 35 36 const originalTop = win.screenTop; 37 const originalLeft = win.screenLeft; 38 await moveWindowTo(win, 100, 100); 39 40 registerCleanupFunction(async () => { 41 info("Restore original window dimensions and position."); 42 win.resizeTo(originalWidth, originalHeight); 43 await moveWindowTo(win, originalLeft, originalTop); 44 }); 45 46 info("Create HTML tooltip"); 47 const tooltip = new HTMLTooltip(doc, { useXulWrapper: true }); 48 const div = doc.createElementNS(HTML_NS, "div"); 49 div.style.height = "200px"; 50 div.style.background = "red"; 51 tooltip.panel.appendChild(div); 52 tooltip.setContentSize({ width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT }); 53 54 const box1 = doc.getElementById("box1"); 55 56 // Above box1: check that the tooltip can overflow onto the content page. 57 info("Display the tooltip above box1."); 58 await showTooltip(tooltip, box1, { position: "top" }); 59 checkTooltip(tooltip, "top", TOOLTIP_HEIGHT); 60 await hideTooltip(tooltip); 61 62 // Below box1: check that the tooltip can overflow out of the browser window. 63 info("Display the tooltip below box1."); 64 await showTooltip(tooltip, box1, { position: "bottom" }); 65 checkTooltip(tooltip, "bottom", TOOLTIP_HEIGHT); 66 await hideTooltip(tooltip); 67 68 is(tooltip.isVisible(), false, "Tooltip is not visible"); 69 70 tooltip.destroy(); 71 }); 72 73 function checkTooltip(tooltip, position, height) { 74 is(tooltip.position, position, "Actual tooltip position is " + position); 75 const rect = tooltip.container.getBoundingClientRect(); 76 is(rect.height, height, "Actual tooltip height is " + height); 77 // Testing the actual left/top offsets is not relevant here as it is handled by the XUL 78 // panel. 79 }