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/core/ripple/ripple-renderer.ts

@@ -169,21 +169,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;
   }
@@ -209,15 +207,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. */
@@ -242,6 +242,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) => {
     // Screen readers will fire fake mouse events for space/enter. Skip launching a
@@ -296,11 +329,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) {