tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_html_tooltip_variable-height.js (2666B)

      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 content can have a variable height.
      9 */
     10 
     11 const HTML_NS = "http://www.w3.org/1999/xhtml";
     12 const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip.xhtml";
     13 
     14 const CONTAINER_HEIGHT = 300;
     15 const CONTAINER_WIDTH = 200;
     16 const TOOLTIP_HEIGHT = 50;
     17 
     18 const {
     19  HTMLTooltip,
     20 } = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");
     21 loadHelperScript("helper_html_tooltip.js");
     22 
     23 add_task(async function () {
     24  // Force the toolbox to be 400px tall => 50px for each box.
     25  await pushPref("devtools.toolbox.footer.height", 400);
     26 
     27  await addTab("about:blank");
     28  const { doc } = await createHost("bottom", TEST_URI);
     29 
     30  const tooltip = new HTMLTooltip(doc, { useXulWrapper: false });
     31  info("Set tooltip content 50px tall, but request a container 200px tall");
     32  const tooltipContent = doc.createElementNS(HTML_NS, "div");
     33  tooltipContent.style.cssText =
     34    "height: " + TOOLTIP_HEIGHT + "px; background: red;";
     35  tooltip.panel.appendChild(tooltipContent);
     36  tooltip.setContentSize({ width: CONTAINER_WIDTH, height: Infinity });
     37 
     38  info("Show the tooltip and check the container and panel height.");
     39  await showTooltip(tooltip, doc.getElementById("box1"));
     40 
     41  const containerRect = tooltip.container.getBoundingClientRect();
     42  const panelRect = tooltip.panel.getBoundingClientRect();
     43  is(
     44    containerRect.height,
     45    CONTAINER_HEIGHT,
     46    "Tooltip container has the expected height."
     47  );
     48  is(
     49    panelRect.height,
     50    TOOLTIP_HEIGHT,
     51    "Tooltip panel has the expected height."
     52  );
     53 
     54  info("Click below the tooltip panel but in the tooltip filler element.");
     55  let onHidden = once(tooltip, "hidden");
     56  EventUtils.synthesizeMouse(tooltip.container, 100, 100, {}, doc.defaultView);
     57  await onHidden;
     58 
     59  info("Show the tooltip one more time, and increase the content height");
     60  await showTooltip(tooltip, doc.getElementById("box1"));
     61  tooltipContent.style.height = 2 * CONTAINER_HEIGHT + "px";
     62 
     63  info(
     64    "Click at the same coordinates as earlier, this time it should hit the tooltip."
     65  );
     66  const onPanelClick = once(tooltip.panel, "click");
     67  EventUtils.synthesizeMouse(tooltip.container, 100, 100, {}, doc.defaultView);
     68  await onPanelClick;
     69  is(tooltip.isVisible(), true, "Tooltip is still visible");
     70 
     71  info("Click above the tooltip container, the tooltip should be closed.");
     72  onHidden = once(tooltip, "hidden");
     73  EventUtils.synthesizeMouse(tooltip.container, 100, -10, {}, doc.defaultView);
     74  await onHidden;
     75 
     76  tooltip.destroy();
     77 });