--- 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