fix(document-injection): Update to use injected document

Update several classes in Material and the CDK to reference
the injected document instead of accessing the global document
and window variables. This fixes use-cases where the document
is dynamically provided. This change follows the pattern used
in several other places such as the Cdk OverlayContainer.

Author: timsawyer

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -15,9 +15,12 @@ import {
   NgZone,
   OnDestroy,
   Output,
+  Optional,
+  Inject,
 } from '@angular/core';
 import {Observable, of as observableOf, Subject, Subscription} from 'rxjs';
 import {coerceElement} from '@angular/cdk/coercion';
+import {DOCUMENT} from '@angular/common';
 
 
 // This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
@@ -134,7 +137,25 @@ export class FocusMonitor implements OnDestroy {
     this._windowFocusTimeoutId = setTimeout(() => this._windowFocused = false);
   }
 
-  constructor(private _ngZone: NgZone, private _platform: Platform) {}
+   /** Used to reference correct document/window */
+   protected _document?: Document;
+
+  constructor(private _ngZone: NgZone,
+              private _platform: Platform,
+              /** @breaking-change 11.0.0 make document required */
+              @Optional() @Inject(DOCUMENT) document?: any) {
+    this._document = document;
+  }
+
+  /** Access injected document if available or fallback to global document reference */
+  get document(): Document {
+    return this._document || document;
+  }
+
+  /** Use defaultView of injected document if available or fallback to global window reference */
+  get window(): Window {
+    return this.document.defaultView || window;
+  }
 
   /**
    * Monitors focus on an element and applies appropriate CSS classes.
@@ -393,27 +414,27 @@ export class FocusMonitor implements OnDestroy {
       // Note: we listen to events in the capture phase so we
       // can detect them even if the user stops propagation.
       this._ngZone.runOutsideAngular(() => {
-        document.addEventListener('keydown', this._documentKeydownListener,
+        this.document.addEventListener('keydown', this._documentKeydownListener,
           captureEventListenerOptions);
-        document.addEventListener('mousedown', this._documentMousedownListener,
+        this.document.addEventListener('mousedown', this._documentMousedownListener,
           captureEventListenerOptions);
-        document.addEventListener('touchstart', this._documentTouchstartListener,
+        this.document.addEventListener('touchstart', this._documentTouchstartListener,
           captureEventListenerOptions);
-        window.addEventListener('focus', this._windowFocusListener);
+        this.window.addEventListener('focus', this._windowFocusListener);
       });
     }
   }
 
   private _decrementMonitoredElementCount() {
     // Unregister global listeners when last element is unmonitored.
     if (!--this._monitoredElementCount) {
-      document.removeEventListener('keydown', this._documentKeydownListener,
+      this.document.removeEventListener('keydown', this._documentKeydownListener,
         captureEventListenerOptions);
-      document.removeEventListener('mousedown', this._documentMousedownListener,
+      this.document.removeEventListener('mousedown', this._documentMousedownListener,
         captureEventListenerOptions);
-      document.removeEventListener('touchstart', this._documentTouchstartListener,
+      this.document.removeEventListener('touchstart', this._documentTouchstartListener,
         captureEventListenerOptions);
-      window.removeEventListener('focus', this._windowFocusListener);
+      this.window.removeEventListener('focus', this._windowFocusListener);
 
       // Clear timeouts for all potentially pending timeouts to prevent the leaks.
       clearTimeout(this._windowFocusTimeoutId);

src/cdk/drag-drop/directives/drag.spec.ts

@@ -1948,6 +1948,7 @@ describe('CdkDrag', () => {
         // mode in unit tests and there are some issues with doing it in e2e tests.
         const fakeDocument = {
           body: document.body,
+          documentElement: document.documentElement,
           fullscreenElement: document.createElement('div'),
           ELEMENT_NODE: Node.ELEMENT_NODE,
           querySelectorAll: function(...args: [string]) {

src/cdk/scrolling/scroll-dispatcher.ts

@@ -7,11 +7,11 @@
  */
 
 import {Platform} from '@angular/cdk/platform';
-import {ElementRef, Injectable, NgZone, OnDestroy} from '@angular/core';
+import {ElementRef, Injectable, NgZone, OnDestroy, Optional, Inject} from '@angular/core';
 import {fromEvent, of as observableOf, Subject, Subscription, Observable, Observer} from 'rxjs';
 import {auditTime, filter} from 'rxjs/operators';
 import {CdkScrollable} from './scrollable';
-
+import {DOCUMENT} from '@angular/common';
 
 /** Time in ms to throttle the scrolling events by default. */
 export const DEFAULT_SCROLL_TIME = 20;
@@ -22,7 +22,15 @@ export const DEFAULT_SCROLL_TIME = 20;
  */
 @Injectable({providedIn: 'root'})
 export class ScrollDispatcher implements OnDestroy {
-  constructor(private _ngZone: NgZone, private _platform: Platform) { }
+  /** Used to reference correct document/window */
+  protected _document?: Document;
+
+  constructor(private _ngZone: NgZone,
+              private _platform: Platform,
+              /** @breaking-change 11.0.0 make document required */
+              @Optional() @Inject(DOCUMENT) document?: any) {
+    this._document = document;
+  }
 
   /** Subject for notifying that a registered scrollable reference element has been scrolled. */
   private _scrolled = new Subject<CdkScrollable|void>();
@@ -39,6 +47,16 @@ export class ScrollDispatcher implements OnDestroy {
    */
   scrollContainers: Map<CdkScrollable, Subscription> = new Map();
 
+  /** Access injected document if available or fallback to global document reference */
+  get document(): Document {
+    return this._document || document;
+  }
+
+  /** Use defaultView of injected document if available or fallback to global window reference */
+  get window(): Window {
+    return this.document.defaultView || window;
+  }
+
   /**
    * Registers a scrollable instance with the service and listens for its scrolled events. When the
    * scrollable is scrolled, the service emits the event to its scrolled observable.
@@ -153,7 +171,7 @@ export class ScrollDispatcher implements OnDestroy {
   /** Sets up the global scroll listeners. */
   private _addGlobalListener() {
     this._globalSubscription = this._ngZone.runOutsideAngular(() => {
-      return fromEvent(window.document, 'scroll').subscribe(() => this._scrolled.next());
+      return fromEvent(this.window.document, 'scroll').subscribe(() => this._scrolled.next());
     });
   }
 

src/cdk/scrolling/viewport-ruler.ts

@@ -7,9 +7,10 @@
  */
 
 import {Platform} from '@angular/cdk/platform';
-import {Injectable, NgZone, OnDestroy} from '@angular/core';
+import {Injectable, NgZone, OnDestroy, Optional, Inject} from '@angular/core';
 import {merge, of as observableOf, fromEvent, Observable, Subscription} from 'rxjs';
 import {auditTime} from 'rxjs/operators';
+import {DOCUMENT} from '@angular/common';
 
 /** Time in ms to throttle the resize events by default. */
 export const DEFAULT_RESIZE_TIME = 20;
@@ -35,10 +36,18 @@ export class ViewportRuler implements OnDestroy {
   /** Subscription to streams that invalidate the cached viewport dimensions. */
   private _invalidateCache: Subscription;
 
-  constructor(private _platform: Platform, ngZone: NgZone) {
+  /** Used to reference correct document/window */
+  protected _document?: Document;
+
+  constructor(private _platform: Platform,
+              ngZone: NgZone,
+              /** @breaking-change 11.0.0 make document required */
+              @Optional() @Inject(DOCUMENT) document?: any) {
+    this._document = document;
+
     ngZone.runOutsideAngular(() => {
       this._change = _platform.isBrowser ?
-          merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange')) :
+          merge(fromEvent(this.window, 'resize'), fromEvent(this.window, 'orientationchange')) :
           observableOf();
 
       // Note that we need to do the subscription inside `runOutsideAngular`
@@ -47,6 +56,16 @@ export class ViewportRuler implements OnDestroy {
     });
   }
 
+  /** Access injected document if available or fallback to global document reference */
+  get document(): Document {
+    return this._document || document;
+  }
+
+  /** Use defaultView of injected document if available or fallback to global window reference */
+  get window(): Window {
+    return this.document.defaultView || window;
+  }
+
   ngOnDestroy() {
     this._invalidateCache.unsubscribe();
   }
@@ -105,13 +124,13 @@ export class ViewportRuler implements OnDestroy {
     // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
     // `document.documentElement` works consistently, where the `top` and `left` values will
     // equal negative the scroll position.
-    const documentElement = document.documentElement!;
+    const documentElement = this.document.documentElement!;
     const documentRect = documentElement.getBoundingClientRect();
 
-    const top = -documentRect.top || document.body.scrollTop || window.scrollY ||
+    const top = -documentRect.top || this.document.body.scrollTop || this.window.scrollY ||
                  documentElement.scrollTop || 0;
 
-    const left = -documentRect.left || document.body.scrollLeft || window.scrollX ||
+    const left = -documentRect.left || this.document.body.scrollLeft || this.window.scrollX ||
                   documentElement.scrollLeft || 0;
 
     return {top, left};
@@ -128,7 +147,7 @@ export class ViewportRuler implements OnDestroy {
   /** Updates the cached viewport size. */
   private _updateViewportSize() {
     this._viewportSize = this._platform.isBrowser ?
-        {width: window.innerWidth, height: window.innerHeight} :
+        {width: this.window.innerWidth, height: this.window.innerHeight} :
         {width: 0, height: 0};
   }
 }

src/cdk/text-field/autosize.ts

@@ -21,11 +21,13 @@ import {
   OnDestroy,
   NgZone,
   HostListener,
+  Optional,
+  Inject,
 } from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
 import {auditTime, takeUntil} from 'rxjs/operators';
 import {fromEvent, Subject} from 'rxjs';
-
+import {DOCUMENT} from '@angular/common';
 
 /** Directive to automatically resize a textarea to fit its content. */
 @Directive({
@@ -89,13 +91,29 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
   /** Cached height of a textarea with a single row. */
   private _cachedLineHeight: number;
 
-  constructor(
-    private _elementRef: ElementRef<HTMLElement>,
-    private _platform: Platform,
-    private _ngZone: NgZone) {
+  /** Used to reference correct document/window */
+  protected _document?: Document;
+
+  constructor(private _elementRef: ElementRef<HTMLElement>,
+              private _platform: Platform,
+              private _ngZone: NgZone,
+              /** @breaking-change 11.0.0 make document required */
+              @Optional() @Inject(DOCUMENT) document?: any) {
+    this._document = document;
+
     this._textareaElement = this._elementRef.nativeElement as HTMLTextAreaElement;
   }
 
+  /** Access injected document if available or fallback to global document reference */
+  get document(): Document {
+    return this._document || document;
+  }
+
+  /** Use defaultView of injected document if available or fallback to global window reference */
+  get window(): Window {
+    return this.document.defaultView || window;
+  }
+
   /** Sets the minimum height of the textarea as determined by minRows. */
   _setMinHeight(): void {
     const minHeight = this.minRows && this._cachedLineHeight ?
@@ -124,7 +142,7 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
       this.resizeToFitContent();
 
       this._ngZone.runOutsideAngular(() => {
-        fromEvent(window, 'resize')
+        fromEvent(this.window, 'resize')
           .pipe(auditTime(16), takeUntil(this._destroyed))
           .subscribe(() => this.resizeToFitContent(true));
       });
@@ -277,7 +295,7 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
     // Also note that we have to assert that the textarea is focused before we set the
     // selection range. Setting the selection range on a non-focused textarea will cause
     // it to receive focus on IE and Edge.
-    if (!this._destroyed.isStopped && document.activeElement === textarea) {
+    if (!this._destroyed.isStopped && this.document.activeElement === textarea) {
       textarea.setSelectionRange(selectionStart, selectionEnd);
     }
   }

src/material/autocomplete/autocomplete-trigger.ts

@@ -225,9 +225,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
   }
 
   ngAfterViewInit() {
-    if (typeof window !== 'undefined') {
+    if (typeof this.window !== 'undefined') {
       this._zone.runOutsideAngular(() => {
-        window.addEventListener('blur', this._windowBlurHandler);
+        this.window.addEventListener('blur', this._windowBlurHandler);
       });
 
       if (_supportsShadowDom()) {
@@ -252,8 +252,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
   }
 
   ngOnDestroy() {
-    if (typeof window !== 'undefined') {
-      window.removeEventListener('blur', this._windowBlurHandler);
+    if (typeof this.window !== 'undefined') {
+      this.window.removeEventListener('blur', this._windowBlurHandler);
     }
 
     this._viewportSubscription.unsubscribe();
@@ -262,6 +262,11 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     this._closeKeyEventStream.complete();
   }
 
+  /** Use defaultView of injected document if available or fallback to global window reference */
+  get window(): Window {
+    return this._document?.defaultView || window;
+  }
+
   /** Whether or not the autocomplete panel is open. */
   get panelOpen(): boolean {
     return this._overlayAttached && this.autocomplete.showPanel;