devtools/client/shared/test/browser_html_tooltip_variable-height.js

   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 });