browser_html_tooltip_offset.js (3298B)
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 "use strict"; 5 6 /** 7 * Test the HTMLTooltip can be displayed with vertical and horizontal offsets. 8 */ 9 10 const HTML_NS = "http://www.w3.org/1999/xhtml"; 11 const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip.xhtml"; 12 13 const { 14 HTMLTooltip, 15 } = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js"); 16 loadHelperScript("helper_html_tooltip.js"); 17 18 add_task(async function () { 19 // Force the toolbox to be 200px high; 20 await pushPref("devtools.toolbox.footer.height", 200); 21 22 const { doc } = await createHost("bottom", TEST_URI); 23 24 info("Test a tooltip is not closed when clicking inside itself"); 25 26 const box1 = doc.getElementById("box1"); 27 const box2 = doc.getElementById("box2"); 28 const box3 = doc.getElementById("box3"); 29 const box4 = doc.getElementById("box4"); 30 31 const tooltip = new HTMLTooltip(doc, { useXulWrapper: false }); 32 33 const div = doc.createElementNS(HTML_NS, "div"); 34 div.style.height = "100px"; 35 div.style.boxSizing = "border-box"; 36 div.textContent = "tooltip"; 37 tooltip.panel.appendChild(div); 38 tooltip.setContentSize({ width: 50, height: 100 }); 39 40 info("Display the tooltip on box1."); 41 await showTooltip(tooltip, box1, { x: 5, y: 10 }); 42 43 let panelRect = tooltip.container.getBoundingClientRect(); 44 let anchorRect = box1.getBoundingClientRect(); 45 46 // Tooltip will be displayed below box1 47 is(panelRect.top, anchorRect.bottom + 10, "Tooltip top has 10px offset"); 48 is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset"); 49 is(panelRect.height, 100, "Tooltip height is at 100px as expected"); 50 51 info("Display the tooltip on box2."); 52 await showTooltip(tooltip, box2, { x: 5, y: 10 }); 53 54 panelRect = tooltip.container.getBoundingClientRect(); 55 anchorRect = box2.getBoundingClientRect(); 56 57 // Tooltip will be displayed below box2, but can't be fully displayed because of the 58 // offset 59 is(panelRect.top, anchorRect.bottom + 10, "Tooltip top has 10px offset"); 60 is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset"); 61 is(panelRect.height, 90, "Tooltip height is only 90px"); 62 63 info("Display the tooltip on box3."); 64 await showTooltip(tooltip, box3, { x: 5, y: 10 }); 65 66 panelRect = tooltip.container.getBoundingClientRect(); 67 anchorRect = box3.getBoundingClientRect(); 68 69 // Tooltip will be displayed above box3, but can't be fully displayed because of the 70 // offset 71 is( 72 panelRect.bottom, 73 anchorRect.top - 10, 74 "Tooltip bottom is 10px above anchor" 75 ); 76 is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset"); 77 is(panelRect.height, 90, "Tooltip height is only 90px"); 78 79 info("Display the tooltip on box4."); 80 await showTooltip(tooltip, box4, { x: 5, y: 10 }); 81 82 panelRect = tooltip.container.getBoundingClientRect(); 83 anchorRect = box4.getBoundingClientRect(); 84 85 // Tooltip will be displayed above box4 86 is( 87 panelRect.bottom, 88 anchorRect.top - 10, 89 "Tooltip bottom is 10px above anchor" 90 ); 91 is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset"); 92 is(panelRect.height, 100, "Tooltip height is at 100px as expected"); 93 94 await hideTooltip(tooltip); 95 96 tooltip.destroy(); 97 });