Bug 1273827 - Wait for reflow after showing HTMLTooltip in tests;r=ochameau
MozReview-Commit-ID: 1qKKXO8iRyD
--- a/devtools/client/shared/test/browser_html_tooltip-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip-01.js
@@ -18,16 +18,17 @@ const TEST_URI = `data:text/xml;charset=
<hbox id="box1" flex="1">test1</hbox>
<hbox id="box2" flex="1">test2</hbox>
<hbox id="box3" flex="1">test3</hbox>
<hbox id="box4" flex="1">test4</hbox>
</vbox>
</window>`;
const {HTMLTooltip} = require("devtools/client/shared/widgets/HTMLTooltip");
+loadHelperScript("helper_html_tooltip.js");
function getTooltipContent(doc) {
let div = doc.createElementNS(HTML_NS, "div");
div.style.height = "50px";
div.style.boxSizing = "border-box";
div.textContent = "tooltip";
return div;
}
@@ -49,23 +50,25 @@ add_task(function* () {
tooltip.on("shown", () => shown++);
let onShown = tooltip.once("shown");
tooltip.show(doc.getElementById("box1"));
yield onShown;
is(shown, 1, "Event shown was fired once");
+ yield waitForReflow(tooltip);
is(tooltip.isVisible(), true, "Tooltip is visible");
info("Hide the tooltip and check the expected events are fired.");
let hidden = 0;
tooltip.on("hidden", () => hidden++);
let onPopupHidden = tooltip.once("hidden");
tooltip.hide();
yield onPopupHidden;
is(hidden, 1, "Event hidden was fired once");
+ yield waitForReflow(tooltip);
is(tooltip.isVisible(), false, "Tooltip is not visible");
});
--- a/devtools/client/shared/test/helper_html_tooltip.js
+++ b/devtools/client/shared/test/helper_html_tooltip.js
@@ -4,45 +4,64 @@
"use strict";
/**
* Helper methods for the HTMLTooltip integration tests.
*/
/**
- * Display an existing HTMLTooltip on an anchor. Returns a promise that will
- * resolve when the tooltip "shown" event has been fired.
+ * Display an existing HTMLTooltip on an anchor. After the tooltip "shown"
+ * event has been fired a reflow will be triggered.
*
* @param {HTMLTooltip} tooltip
* The tooltip instance to display
* @param {Node} anchor
* The anchor that should be used to display the tooltip
* @param {String} position
* The preferred display position ("top", "bottom")
- * @return {Promise} promise that resolves when the "shown" event is fired
+ * @return {Promise} promise that resolves when "shown" has been fired, reflow
+ * and repaint done.
*/
-function showTooltip(tooltip, anchor, position) {
+function* showTooltip(tooltip, anchor, position) {
let onShown = tooltip.once("shown");
tooltip.show(anchor, {position});
- return onShown;
+ yield onShown;
+ return waitForReflow(tooltip);
}
/**
- * Hide an existing HTMLTooltip. Returns a promise that will resolve when the
- * tooltip "hidden" event has been fired.
+ * 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 the "hidden" event is fired
+ * @return {Promise} promise that resolves when "hidden" has been fired, reflow
+ * and repaint done.
*/
-function hideTooltip(tooltip) {
+function* hideTooltip(tooltip) {
let onPopupHidden = tooltip.once("hidden");
tooltip.hide();
- return onPopupHidden;
+ yield onPopupHidden;
+ return waitForReflow(tooltip);
+}
+
+/**
+ * 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) {
+ let {document} = tooltip;
+ return new Promise(resolve => {
+ document.documentElement.offsetWidth;
+ document.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