Deflake and re-enable CrElementsInputTest.All.

Previously, when testing the focus() and blur() cases, the  test
was not waiting for both opacity and width transitions to finish,
resulting in transitions from focus() finishing while the test was
making assertions related to blur().

Properly waiting for all transitions to finish before moving on
to the blur() case should fix the issue.

Re-enabling the test on Mac, where it was disabled because of this
reason.

Bug: 997943
Change-Id: I6badb546fba4f093c2fa45490e2a52e5dae84982
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2223082Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773729}

chrome/test/data/webui/cr_elements/cr_elements_focus_test.js

@@ -119,13 +119,7 @@ CrElementsInputTest.prototype = {
   ]),
 };
 
-// https://crbug.com/997943: Flaky on Mac
-GEN('#if defined(OS_MACOSX)');
-GEN('#define MAYBE_All DISABLED_All');
-GEN('#else');
-GEN('#define MAYBE_All All');
-GEN('#endif');
-TEST_F('CrElementsInputTest', 'MAYBE_All', function() {
+TEST_F('CrElementsInputTest', 'All', function() {
   mocha.run();
 });
 

chrome/test/data/webui/cr_elements/cr_input_test.js

@@ -6,7 +6,7 @@
 // #import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {eventToPromise, whenAttributeIs} from '../test_util.m.js';
-// #import {assertEquals, assertThrows, assertTrue, assertFalse} from '../chai_assert.js';
+// #import {assertEquals, assertNotEquals, assertThrows, assertTrue, assertFalse} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-input', function() {
@@ -184,38 +184,50 @@ suite('cr-input', function() {
     const label = crInput.$.label;
     const originalLabelColor = getComputedStyle(label).color;
 
+    /** @return {!Promise<!Array<!Event>>} */
+    function waitForTransitions() {
+      const events = [];
+      return test_util.eventToPromise('transitionend', underline)
+          .then(e => {
+            events.push(e);
+            return test_util.eventToPromise('transitionend', underline);
+          })
+          .then(e => {
+            events.push(e);
+            return events;
+          });
+    }
+
     assertEquals('0', getComputedStyle(underline).opacity);
     assertEquals(0, underline.offsetWidth);
 
-    let whenTransitionEnd =
-        test_util.eventToPromise('transitionend', underline);
+    let whenTransitionsEnd = waitForTransitions();
 
     input.focus();
     assertTrue(crInput.hasAttribute('focused_'));
-    assertTrue(originalLabelColor !== getComputedStyle(label).color);
-    return whenTransitionEnd
-        .then(() => {
+    assertNotEquals(originalLabelColor, getComputedStyle(label).color);
+    return whenTransitionsEnd
+        .then(events => {
+          // Ensure transitions finished in the expected order.
+          assertEquals(2, events.length);
+          assertEquals('opacity', events[0].propertyName);
+          assertEquals('width', events[1].propertyName);
+
           assertEquals('1', getComputedStyle(underline).opacity);
-          assertTrue(0 !== underline.offsetWidth);
-        })
-        .then(() => {
+          assertNotEquals(0, underline.offsetWidth);
+
+          whenTransitionsEnd = waitForTransitions();
           input.blur();
-          whenTransitionEnd =
-              test_util.eventToPromise('transitionend', underline);
-          // Wait for underline to fade out.
-          return whenTransitionEnd;
+          return whenTransitionsEnd;
         })
-        .then(() => {
-          whenTransitionEnd =
-              test_util.eventToPromise('transitionend', underline);
+        .then(events => {
+          // Ensure transitions finished in the expected order.
+          assertEquals(2, events.length);
+          assertEquals('opacity', events[0].propertyName);
+          assertEquals('width', events[1].propertyName);
+
           assertFalse(crInput.hasAttribute('focused_'));
           assertEquals('0', getComputedStyle(underline).opacity);
-          // The width transition has a delay larger than the opacity transition
-          // duration so that the width can be reset to 0 after the underline is
-          // no longer visible.
-          return whenTransitionEnd;
-        })
-        .then(() => {
           assertEquals(0, underline.offsetWidth);
         });
   });

ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

@@ -100,7 +100,7 @@
       :host([force-underline]) #underline,
       :host([focused_]:not([readonly])) #underline {
         opacity: 1;
-        transition: width 180ms ease-out, opacity 120ms ease-in;
+        transition: opacity 120ms ease-in, width 180ms ease-out;
         width: 100%;
       }
     </style>