Bug 1448555 - Part 0 - Manually set hover state on animation hint rather than relying on EventUtils;r=pbro draft
authorBrian Grinstead <bgrinstead@mozilla.com>
Tue, 03 Apr 2018 13:57:19 -0700
changeset 776835 341382e8a2c4171f082e77e870492f6e793abc22
parent 776748 5ec55f7a95f94cf39d57cdf36abecab914ea48eb
child 776836 a267f397a4ca9c670bfc4039700e09687de0224b
push id105018
push userbgrinstead@mozilla.com
push dateTue, 03 Apr 2018 20:57:00 +0000
reviewerspbro
bugs1448555
milestone61.0a1
Bug 1448555 - Part 0 - Manually set hover state on animation hint rather than relying on EventUtils;r=pbro This is unfortunate, but when the toolbox height changes very slightly (due to introducing flex in the next changeset) the <svg:path> doesn't get hovered anymore by synthesizeMouseAtCenter. MozReview-Commit-ID: ENaXBjwSjKX
devtools/client/animationinspector/test/browser_animation_detail_easings.js
devtools/client/themes/animationinspector.css
--- a/devtools/client/animationinspector/test/browser_animation_detail_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_detail_easings.js
@@ -87,30 +87,32 @@ add_task(async function() {
         const titleEl = gEl.querySelector("title");
         ok(titleEl, `<title> element for ${ testIdentity } should exists`);
         is(titleEl.textContent, expectedValue,
            `textContent of <title> for ${ testIdentity } should be ${ expectedValue }`);
 
         info("Test emphasis path");
         // Scroll to show the hintEl since the element may be out of displayed area.
         hintEl.scrollIntoView(false);
+        const win = hintEl.ownerGlobal;
 
-        const win = hintEl.ownerDocument.defaultView;
-        // Mouse out once from hintEl.
-        EventUtils.synthesizeMouse(hintEl, -1, -1, {type: "mouseout"}, win);
-        is(win.getComputedStyle(hintEl).strokeOpacity, 0,
-           `stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
-           `while mouse is out from the element`);
-        // Mouse is over the hintEl.
-        EventUtils.synthesizeMouseAtCenter(hintEl, {type: "mouseover"}, win);
+        // Mouse is over the hintEl. Ideally this would use EventUtils, but mouseover
+        // on the path element is flaky, so let's trust that hovering works and force
+        // on a hover class to get the same styles.
+        hintEl.classList.add("hover");
         if (testdata.noEmphasisPath) {
           is(win.getComputedStyle(hintEl).strokeOpacity, 0,
              `stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
              `even while mouse is over the element`);
         } else {
           is(win.getComputedStyle(hintEl).strokeOpacity, 1,
              `stroke-opacity of hintEl for ${ testIdentity } should be 1 ` +
              `while mouse is over the element`);
         }
+        // Mouse out once from hintEl.
+        hintEl.classList.remove("hover");
+        is(win.getComputedStyle(hintEl).strokeOpacity, 0,
+           `stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
+           `while mouse is out from the element`);
       }
     }
   }
 });
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -697,17 +697,20 @@ body {
   stroke-linecap: round;
   stroke-width: 5;
 }
 
 .keyframes svg path.hint {
   fill: none;
 }
 
-.keyframes svg path.hint:hover {
+/* Note: We only use the hover class in a mochitest due to flakiness
+   when simulating mouseover (Bug 1448555). */
+.keyframes svg path.hint:hover,
+.keyframes svg path.hint.hover {
   stroke-opacity: 1;
 }
 
 .keyframes svg rect.hint {
   fill-opacity: .1;
 }
 
 .animation-detail {