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,19 @@ 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;
-
-      // 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);
+    // Do not register the transition event listener if the fade-in and fade-out duration
+    // are set to zero because the event won't be fired at all.
+    if (duration || animationConfig.exitDuration) {
+      this._ngZone.runOutsideAngular(() => {
+        ripple.addEventListener('transitionend', () => this._finishRippleTransition(rippleRef));
+      });
+    }
+
+    // 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._finishRippleTransition(rippleRef);
+    }
 
     return rippleRef;
   }
@@ -211,15 +209,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._finishRippleTransition(rippleRef);
+    }
   }
 
   /** Fades out all currently active ripples. */
@@ -244,6 +244,39 @@ export class RippleRenderer {
     this._triggerElement = element;
   }
 
+  /** Method that will be called if the fade-in or fade-in transition completed. */
+  private _finishRippleTransition(rippleRef: RippleRef) {
+    if (rippleRef.state === RippleState.FADING_IN) {
+      this._startFadeOutTransition(rippleRef);
+    } else if (rippleRef.state === RippleState.FADING_OUT) {
+      this._destroyRipple(rippleRef);
+    }
+  }
+
+  /**
+   * Starts the fade-out transition of the given ripple if it's not persistent and the pointer
+   * is not held down anymore.
+   */
+  private _startFadeOutTransition(rippleRef: RippleRef) {
+    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 (!rippleRef.config.persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
+      rippleRef.fadeOut();
+    }
+  }
+
+  /** Destroys the given ripple by removing it from the DOM and updating its state. */
+  private _destroyRipple(rippleRef: RippleRef) {
+    rippleRef.state = RippleState.HIDDEN;
+    rippleRef.element.parentNode!.removeChild(rippleRef.element);
+  }
+
   /** Function being called whenever the trigger is being pressed using mouse. */
   private onMousedown = (event: MouseEvent) => {
     const isSyntheticEvent = this._lastTouchStartEvent &&
@@ -295,11 +328,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) {