fix(material/core): ripples not fading out on touch devices when scrolling

* 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/material-experimental/mdc-list/list.spec.ts

@@ -1,14 +1,10 @@
-import {waitForAsync, TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {fakeAsync, TestBed, waitForAsync} from '@angular/core/testing';
+import {dispatchFakeEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {Component, QueryList, ViewChildren} from '@angular/core';
-import {defaultRippleAnimationConfig} from '@angular/material-experimental/mdc-core';
-import {dispatchMouseEvent} from '../../cdk/testing/private';
 import {By} from '@angular/platform-browser';
 import {MatListItem, MatListModule} from './index';
 
 describe('MDC-based MatList', () => {
-  // Default ripple durations used for testing.
-  const {enterDuration, exitDuration} = defaultRippleAnimationConfig;
-
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
@@ -243,12 +239,16 @@ describe('MDC-based MatList', () => {
     dispatchMouseEvent(rippleTarget, 'mousedown');
     dispatchMouseEvent(rippleTarget, 'mouseup');
 
+    // Flush the ripple enter animation.
+    dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
+
     expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
       .withContext('Expected ripples to be enabled by default.')
       .toBe(1);
 
-    // Wait for the ripples to go away.
-    tick(enterDuration + exitDuration);
+    // Flush the ripple exit animation.
+    dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
+
     expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
       .withContext('Expected ripples to go away.')
       .toBe(0);
@@ -273,12 +273,16 @@ describe('MDC-based MatList', () => {
     dispatchMouseEvent(rippleTarget, 'mousedown');
     dispatchMouseEvent(rippleTarget, 'mouseup');
 
+    // Flush the ripple enter animation.
+    dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
+
     expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
       .withContext('Expected ripples to be enabled by default.')
       .toBe(1);
 
-    // Wait for the ripples to go away.
-    tick(enterDuration + exitDuration);
+    // Flush the ripple exit animation.
+    dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
+
     expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
       .withContext('Expected ripples to go away.')
       .toBe(0);

src/material-experimental/mdc-list/selection-list.spec.ts

@@ -22,7 +22,7 @@ import {
   waitForAsync,
 } from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
-import {defaultRippleAnimationConfig, ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ThemePalette} from '@angular/material-experimental/mdc-core';
 import {By} from '@angular/platform-browser';
 import {numbers} from '@material/list';
 import {
@@ -612,17 +612,19 @@ describe('MDC-based MatSelectionList without forms', () => {
       const rippleTarget = fixture.nativeElement.querySelector(
         '.mat-mdc-list-option:not(.mdc-list-item--disabled)',
       );
-      const {enterDuration, exitDuration} = defaultRippleAnimationConfig;
-
       dispatchMouseEvent(rippleTarget, 'mousedown');
       dispatchMouseEvent(rippleTarget, 'mouseup');
 
+      // Flush the ripple enter animation.
+      dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
+
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
         .withContext('Expected ripples to be enabled by default.')
         .toBe(1);
 
-      // Wait for the ripples to go away.
-      tick(enterDuration + exitDuration);
+      // Flush the ripple exit animation.
+      dispatchFakeEvent(rippleTarget.querySelector('.mat-ripple-element')!, 'transitionend');
+
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
         .withContext('Expected ripples to go away.')
         .toBe(0);

src/material-experimental/mdc-slider/slider.spec.ts

@@ -9,19 +9,13 @@
 import {BidiModule, Directionality} from '@angular/cdk/bidi';
 import {Platform} from '@angular/cdk/platform';
 import {
+  dispatchFakeEvent,
   dispatchMouseEvent,
   dispatchPointerEvent,
   dispatchTouchEvent,
 } from '../../cdk/testing/private';
 import {Component, Provider, QueryList, Type, ViewChild, ViewChildren} from '@angular/core';
-import {
-  ComponentFixture,
-  fakeAsync,
-  flush,
-  TestBed,
-  tick,
-  waitForAsync,
-} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, TestBed, waitForAsync} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {Thumb} from '@material/slider';
@@ -297,8 +291,14 @@ describe('MDC-based MatSlider', () => {
     );
 
     function isRippleVisible(selector: string) {
-      tick(500);
-      return !!document.querySelector(`.mat-mdc-slider-${selector}-ripple`);
+      flushRippleTransitions();
+      return thumbElement.querySelector(`.mat-mdc-slider-${selector}-ripple`) !== null;
+    }
+
+    function flushRippleTransitions() {
+      thumbElement.querySelectorAll('.mat-ripple-element').forEach(el => {
+        dispatchFakeEvent(el, 'transitionend');
+      });
     }
 
     function blur() {

src/material-experimental/mdc-tabs/tab-group.spec.ts

@@ -199,7 +199,6 @@ describe('MDC-based MatTabGroup', () => {
         .toBe(0);
 
       dispatchFakeEvent(tabLabel.nativeElement, 'mousedown');
-      dispatchFakeEvent(tabLabel.nativeElement, 'mouseup');
 
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
         .withContext('Expected one ripple to show up on label mousedown.')

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

@@ -154,21 +154,19 @@ export class RippleRenderer implements EventListenerObject {
       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 fade-in and fade-out duration
+    // are set to zero. The events won't fire anyway and we can save resources here.
+    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;
   }
@@ -194,15 +192,17 @@ export class RippleRenderer implements EventListenerObject {
     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.remove();
-    }, 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. */
@@ -256,6 +256,40 @@ export class RippleRenderer implements EventListenerObject {
     }
   }
 
+  /** 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;
+    const {persistent} = rippleRef.config;
+
+    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 (!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.remove();
+  }
+
   /** 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
@@ -312,11 +346,6 @@ export class RippleRenderer implements EventListenerObject {
     });
   }
 
-  /** 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));
-  }
-
   /** Registers event listeners for a given list of events. */
   private _registerEvents(eventTypes: string[]) {
     this._ngZone.runOutsideAngular(() => {