fix(ripple): not fading out on touch devices

* Makes the ripple animations no longer dependent on `setTimeout` that does not always fire properly / or within the specified duration. (related chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=567800)
* Fix indentation of a few ripple tests
* Fixes that the speed factor tests are basically not checking anything (even though they will be removed in the future; they need to pass right now)

Fixes #12470

Author: devversion

src/lib/checkbox/checkbox.spec.ts

@@ -2,7 +2,6 @@ import {
   ComponentFixture,
   fakeAsync,
   TestBed,
-  tick,
   flush,
   flushMicrotasks,
 } from '@angular/core/testing';
@@ -11,7 +10,6 @@ import {Component, DebugElement, ViewChild, Type} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
-import {defaultRippleAnimationConfig} from '@angular/material/core';
 import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config';
 import {MutationObserverFactory} from '@angular/cdk/observers';
 
@@ -379,24 +377,29 @@ describe('MatCheckbox', () => {
       expect(inputElement.value).toBe('basic_checkbox');
     });
 
-    it('should show a ripple when focused by a keyboard action', fakeAsync(() => {
+    it('should show a ripple when focused by a keyboard action', () => {
       expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
           .toBe(0, 'Expected no ripples on load.');
 
       dispatchFakeEvent(inputElement, 'keydown');
       dispatchFakeEvent(inputElement, 'focus');
 
-      tick(defaultRippleAnimationConfig.enterDuration);
-
       expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
           .toBe(1, 'Expected ripple after element is focused.');
 
-      dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
-      tick(defaultRippleAnimationConfig.exitDuration);
+      const rippleElement = fixture.nativeElement
+        .querySelector('.mat-ripple-element')! as HTMLElement;
+
+      // Flush the fade-in transition of the ripple.
+      dispatchFakeEvent(rippleElement, 'transitionend');
+
+      // Blur the input element and flush the fade-out transition of the ripple.
+      dispatchFakeEvent(inputElement, 'blur');
+      dispatchFakeEvent(rippleElement, 'transitionend');
 
       expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
           .toBe(0, 'Expected no ripple after element is blurred.');
-    }));
+    });
 
     it('should remove the SVG checkmark from the tab order', () => {
       expect(checkboxNativeElement.querySelector('svg')!.getAttribute('focusable')).toBe('false');

src/lib/core/ripple/ripple-renderer.ts

@@ -171,21 +171,15 @@ export class RippleRenderer {
       this._mostRecentTransientRipple = rippleRef;
     }
 
-    // Wait for the ripple element to be completely faded in.
-    // Once it's faded in, the ripple can be hidden immediately if the mouse is released.
-    this.runTimeoutOutsideZone(() => {
-      const isMostRecentTransientRipple = rippleRef === this._mostRecentTransientRipple;
-
-      rippleRef.state = RippleState.VISIBLE;
+    this._ngZone.runOutsideAngular(() => {
+      ripple.addEventListener('transitionend', () => this._onRippleTransitionEnd(rippleRef));
+    });
 
-      // When the timer runs out while the user has kept their pointer down, we want to
-      // keep only the persistent ripples and the latest transient ripple. We do this,
-      // because we don't want stacked transient ripples to appear after their enter
-      // animation has finished.
-      if (!config.persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
-        rippleRef.fadeOut();
-      }
-    }, duration);
+    // In case there is no fade-in transition duration, we need to manually call the
+    // transition end listener because `transitionend` doesn't fire if there is no transition.
+    if (!duration) {
+      this._onRippleTransitionEnd(rippleRef);
+    }
 
     return rippleRef;
   }
@@ -211,15 +205,17 @@ export class RippleRenderer {
     const rippleEl = rippleRef.element;
     const animationConfig = {...defaultRippleAnimationConfig, ...rippleRef.config.animation};
 
+    // This starts the fade-out transition and will fire the transition end listener that
+    // removes the ripple element from the DOM.
     rippleEl.style.transitionDuration = `${animationConfig.exitDuration}ms`;
     rippleEl.style.opacity = '0';
     rippleRef.state = RippleState.FADING_OUT;
 
-    // Once the ripple faded out, the ripple can be safely removed from the DOM.
-    this.runTimeoutOutsideZone(() => {
-      rippleRef.state = RippleState.HIDDEN;
-      rippleEl.parentNode!.removeChild(rippleEl);
-    }, animationConfig.exitDuration);
+    // In case there is no fade-out transition duration, we need to manually call the
+    // transition end listener because `transitionend` doesn't fire if there is no transition.
+    if (!animationConfig.exitDuration) {
+      this._onRippleTransitionEnd(rippleRef);
+    }
   }
 
   /** Fades out all currently active ripples. */
@@ -244,6 +240,28 @@ export class RippleRenderer {
     this._triggerElement = element;
   }
 
+  /** Transition end event listener that fires after ripples fade in or fade out. */
+  private _onRippleTransitionEnd(rippleRef: RippleRef) {
+    const {config, element} = rippleRef;
+
+    if (rippleRef.state === RippleState.FADING_IN) {
+      const isMostRecentTransientRipple = rippleRef === this._mostRecentTransientRipple;
+
+      rippleRef.state = RippleState.VISIBLE;
+
+      // When the timer runs out while the user has kept their pointer down, we want to
+      // keep only the persistent ripples and the latest transient ripple. We do this,
+      // because we don't want stacked transient ripples to appear after their enter
+      // animation has finished.
+      if (!config.persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
+        rippleRef.fadeOut();
+      }
+    } else if (rippleRef.state === RippleState.FADING_OUT) {
+      rippleRef.state = RippleState.HIDDEN;
+      element.parentNode!.removeChild(element);
+    }
+  }
+
   /** Function being called whenever the trigger is being pressed using mouse. */
   private onMousedown = (event: MouseEvent) => {
     const isSyntheticEvent = this._lastTouchStartEvent &&
@@ -290,11 +308,6 @@ export class RippleRenderer {
     });
   }
 
-  /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
-  private runTimeoutOutsideZone(fn: Function, delay = 0) {
-    this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));
-  }
-
   /** Removes previously registered event listeners from the trigger element. */
   _removeTriggerEvents() {
     if (this._triggerElement) {