Source code
Revision control
Copy as Markdown
Other Tools
/* Any copyright is dedicated to the Public Domain.
/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
/* import-globals-from ../../shared/test/shared-head.js */
"use strict";
/**
* Helper methods for the HTMLTooltip integration tests.
*/
/**
* Display an existing HTMLTooltip on an anchor and properly wait for the popup to be
* repainted.
*
* @param {HTMLTooltip} tooltip
* The tooltip instance to display
* @param {Node} anchor
* The anchor that should be used to display the tooltip
* @param {Object} see HTMLTooltip:show documentation
* @return {Promise} promise that resolves when reflow and repaint are done.
*/
async function showTooltip(tooltip, anchor, { position, x, y } = {}) {
await tooltip.show(anchor, { position, x, y });
await waitForReflow(tooltip);
// Wait for next tick. Tooltip tests sometimes fail to successively hide and
// show tooltips on Win32 debug.
await waitForTick();
}
/**
* Hide an existing HTMLTooltip. After the tooltip "hidden" event has been fired
* a reflow will be triggered.
*
* @param {HTMLTooltip} tooltip
* The tooltip instance to hide
* @return {Promise} promise that resolves when "hidden" has been fired, reflow
* and repaint done.
*/
async function hideTooltip(tooltip) {
const onPopupHidden = tooltip.once("hidden");
tooltip.hide();
await onPopupHidden;
await waitForReflow(tooltip);
// Wait for next tick. Tooltip tests sometimes fail to successively hide and
// show tooltips on Win32 debug.
await waitForTick();
}
/**
* Forces the reflow of an HTMLTooltip document and waits for the next repaint.
*
* @param {HTMLTooltip} the tooltip to reflow
* @return {Promise} a promise that will resolve after the reflow and repaint
* have been executed.
*/
function waitForReflow(tooltip) {
const { doc } = tooltip;
return new Promise(resolve => {
doc.documentElement.offsetWidth;
doc.defaultView.requestAnimationFrame(resolve);
});
}
/**
* Test helper designed to check that a tooltip is displayed at the expected
* position relative to an anchor, given a set of expectations.
*
* @param {HTMLTooltip} tooltip
* The HTMLTooltip instance to check
* @param {Node} anchor
* The tooltip's anchor
* @param {Object} expected
* - {String} position : "top" or "bottom"
* - {Boolean} leftAligned
* - {Number} width: expected tooltip width
* - {Number} height: expected tooltip height
*/
function checkTooltipGeometry(
tooltip,
anchor,
{ position, leftAligned = true, height, width } = {}
) {
info("Check the tooltip geometry matches expected position and dimensions");
const tooltipRect = tooltip.container.getBoundingClientRect();
const anchorRect = anchor.getBoundingClientRect();
if (position === "top") {
is(
tooltipRect.bottom,
Math.round(anchorRect.top),
"Tooltip is above the anchor"
);
} else if (position === "bottom") {
is(
tooltipRect.top,
Math.round(anchorRect.bottom),
"Tooltip is below the anchor"
);
} else {
ok(false, "Invalid position provided to checkTooltipGeometry");
}
if (leftAligned) {
is(
tooltipRect.left,
Math.round(anchorRect.left),
"Tooltip left-aligned with the anchor"
);
}
is(tooltipRect.height, height, "Tooltip has the expected height");
is(tooltipRect.width, width, "Tooltip has the expected width");
}