From 5614e65e3908e1d30979ac003e5150efd01eaad7 Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Mon, 21 Nov 2016 17:45:30 +0300
Subject: [PATCH 01/10] feat(overlay): add fullscreen overlay class

---
 src/demo-app/demo-app-module.ts           |  5 ++-
 src/demo-app/demo-app/demo-app.html       |  3 ++
 src/demo-app/demo-app/demo-app.scss       |  6 +++
 src/demo-app/demo-app/demo-app.ts         | 19 ++++++++-
 src/lib/core/core.ts                      |  2 +-
 src/lib/core/overlay/overlay-container.ts | 50 ++++++++++++++++++++++-
 6 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index b0cccd849597..6d80219f93cf 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -4,7 +4,7 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule} from '@angular/material';
+import {MaterialModule, OverlayContainer, FullscreenFriendlyOverlayContainer} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo} from './dialog/dialog-demo';
@@ -94,6 +94,9 @@ import {InputContainerDemo} from './input/input-container-demo';
     FoggyTabContent,
     PlatformDemo
   ],
+  providers: [
+    {provide: OverlayContainer, useClass: FullscreenFriendlyOverlayContainer}
+  ],
   entryComponents: [
     DemoApp,
     JazzDialog,
diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index b48e4a1efab9..e3af8f85b27f 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/demo-app/demo-app/demo-app.html
@@ -25,6 +25,9 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material 2 Demos</h1>
+        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+          Fullscreen
+        </button>
         <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
           {{root.dir.toUpperCase()}}
         </button>
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
index 17338c88abf2..62d5833daecc 100644
--- a/src/demo-app/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app/demo-app.scss
@@ -39,3 +39,9 @@ body {
     font-size: 20px;
   }
 }
+
+// stretch to screen size in fullscreen mode
+.demo-content {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index 57b8f96049c9..ecb01436648d 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
 
 
 @Component({
@@ -52,4 +52,21 @@ export class DemoApp {
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'}
   ];
+
+  constructor(private _element: ElementRef) {
+
+  }
+
+  public toggleFullscreen() {
+    let elem = this._element.nativeElement.querySelector('.demo-content');
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullScreen) {
+      elem.msRequestFullScreen();
+    }
+  }
 }
diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
index 062c430e90fb..1203e578e246 100644
--- a/src/lib/core/core.ts
+++ b/src/lib/core/core.ts
@@ -44,7 +44,7 @@ export {Platform as MdPlatform} from './platform/platform';
 
 // Overlay
 export {Overlay, OVERLAY_PROVIDERS} from './overlay/overlay';
-export {OverlayContainer} from './overlay/overlay-container';
+export {OverlayContainer, FullscreenFriendlyOverlayContainer} from './overlay/overlay-container';
 export {OverlayRef} from './overlay/overlay-ref';
 export {OverlayState} from './overlay/overlay-state';
 export {
diff --git a/src/lib/core/overlay/overlay-container.ts b/src/lib/core/overlay/overlay-container.ts
index c05147261ed2..ac22471141e5 100644
--- a/src/lib/core/overlay/overlay-container.ts
+++ b/src/lib/core/overlay/overlay-container.ts
@@ -1,9 +1,12 @@
+import {Injectable} from '@angular/core';
+
 /**
  * The OverlayContainer is the container in which all overlays will load.
  * It should be provided in the root component to ensure it is properly shared.
  */
+@Injectable()
 export class OverlayContainer {
-  private _containerElement: HTMLElement;
+  protected _containerElement: HTMLElement;
 
   /**
    * This method returns the overlay container element.  It will lazily
@@ -20,10 +23,53 @@ export class OverlayContainer {
    * Create the overlay container element, which is simply a div
    * with the 'cdk-overlay-container' class on the document body.
    */
-  private _createContainer(): void {
+  protected _createContainer(): void {
     let container = document.createElement('div');
     container.classList.add('cdk-overlay-container');
     document.body.appendChild(container);
     this._containerElement = container;
   }
 }
+
+/**
+ * The OverlayContainer is the container in which all overlays will load.
+ * It should be provided in the root component to ensure it is properly shared.
+ */
+@Injectable()
+export class FullscreenFriendlyOverlayContainer extends OverlayContainer {
+  protected _createContainer(): void {
+    super._createContainer();
+
+    this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
+  }
+
+  private _adjustParentForFullscreenChange(): void {
+    if (!this._containerElement) {
+      return;
+    }
+
+    let fullscreenElement = this._getFullscreenElement();
+    let parent = fullscreenElement || document.body;
+    parent.appendChild(this._containerElement);
+  }
+
+  private _addFullscreenChangeListener(fn: () => void) {
+    if (document.fullscreenEnabled) {
+      document.addEventListener('fullscreenchange', fn);
+    } else if (document.webkitFullscreenEnabled) {
+      document.addEventListener('webkitfullscreenchange', fn);
+    } else if ((document as any).mozFullScreenEnabled) {
+      document.addEventListener('mozfullscreenchange', fn);
+    } else if ((document as any).msFullscreenEnabled) {
+      document.addEventListener('MSFullscreenChange', fn);
+    }
+  }
+
+  private _getFullscreenElement(): Element {
+    return document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement ||
+        null;
+  }
+}

From d80f0099e65b1b13d9c31537feda9da805ac55a6 Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Mon, 21 Nov 2016 18:06:21 +0300
Subject: [PATCH 02/10] fix lint error

---
 src/demo-app/demo-app-module.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 6d80219f93cf..22b29eeb43f8 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -4,7 +4,8 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule, OverlayContainer, FullscreenFriendlyOverlayContainer} from '@angular/material';
+import {MaterialModule, OverlayContainer,
+  FullscreenFriendlyOverlayContainer} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo} from './dialog/dialog-demo';

From 1162a88b1b9b2b47fca253030ee35639aa730739 Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Tue, 29 Nov 2016 10:24:26 +0300
Subject: [PATCH 03/10] move fs container to a new file and rename it

---
 src/demo-app/demo-app-module.ts               |  4 +-
 src/lib/core/core.ts                          |  3 +-
 .../overlay/fullscreen-overlay-container.ts   | 51 +++++++++++++++++++
 src/lib/core/overlay/overlay-container.ts     | 43 ----------------
 4 files changed, 55 insertions(+), 46 deletions(-)
 create mode 100644 src/lib/core/overlay/fullscreen-overlay-container.ts

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 22b29eeb43f8..5f99a3a54225 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -5,7 +5,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
 import {MaterialModule, OverlayContainer,
-  FullscreenFriendlyOverlayContainer} from '@angular/material';
+  FullscreenOverlayContainer} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo} from './dialog/dialog-demo';
@@ -96,7 +96,7 @@ import {InputContainerDemo} from './input/input-container-demo';
     PlatformDemo
   ],
   providers: [
-    {provide: OverlayContainer, useClass: FullscreenFriendlyOverlayContainer}
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
   ],
   entryComponents: [
     DemoApp,
diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
index 1203e578e246..00ca0edfa45d 100644
--- a/src/lib/core/core.ts
+++ b/src/lib/core/core.ts
@@ -44,7 +44,8 @@ export {Platform as MdPlatform} from './platform/platform';
 
 // Overlay
 export {Overlay, OVERLAY_PROVIDERS} from './overlay/overlay';
-export {OverlayContainer, FullscreenFriendlyOverlayContainer} from './overlay/overlay-container';
+export {OverlayContainer} from './overlay/overlay-container';
+export {FullscreenOverlayContainer} from './overlay/fullscreen-overlay-container';
 export {OverlayRef} from './overlay/overlay-ref';
 export {OverlayState} from './overlay/overlay-state';
 export {
diff --git a/src/lib/core/overlay/fullscreen-overlay-container.ts b/src/lib/core/overlay/fullscreen-overlay-container.ts
new file mode 100644
index 000000000000..d393724efdd3
--- /dev/null
+++ b/src/lib/core/overlay/fullscreen-overlay-container.ts
@@ -0,0 +1,51 @@
+import {Injectable} from '@angular/core';
+import {OverlayContainer} from './overlay-container';
+
+/**
+ * The FullscreenOverlayContainer is the alternative to OverlayContainer
+ * that supports correct displaying of overlay elements in Fullscreen mode
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
+ * It should be provided in the root component that way:
+ * providers: [
+ *   {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
+ * ],
+ */
+@Injectable()
+export class FullscreenOverlayContainer extends OverlayContainer {
+  protected _createContainer(): void {
+    super._createContainer();
+    this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
+  }
+
+  private _adjustParentForFullscreenChange(): void {
+    if (!this._containerElement) {
+      return;
+    }
+
+    let fullscreenElement = this._getFullscreenElement();
+    let parent = fullscreenElement || document.body;
+    parent.appendChild(this._containerElement);
+  }
+
+  private _addFullscreenChangeListener(fn: () => void) {
+    if (document.fullscreenEnabled) {
+      document.addEventListener('fullscreenchange', fn);
+    } else if (document.webkitFullscreenEnabled) {
+      document.addEventListener('webkitfullscreenchange', fn);
+    } else if ((document as any).mozFullScreenEnabled) {
+      document.addEventListener('mozfullscreenchange', fn);
+    } else if ((document as any).msFullscreenEnabled) {
+      document.addEventListener('MSFullscreenChange', fn);
+    }
+  }
+
+  // When the page is put into fullscreen mode, a specific element is specified.
+  // Only that element and its children are visible when in fullscreen mode.
+  private _getFullscreenElement(): Element {
+    return document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement ||
+        null;
+  }
+}
diff --git a/src/lib/core/overlay/overlay-container.ts b/src/lib/core/overlay/overlay-container.ts
index ac22471141e5..c227961a23ce 100644
--- a/src/lib/core/overlay/overlay-container.ts
+++ b/src/lib/core/overlay/overlay-container.ts
@@ -30,46 +30,3 @@ export class OverlayContainer {
     this._containerElement = container;
   }
 }
-
-/**
- * The OverlayContainer is the container in which all overlays will load.
- * It should be provided in the root component to ensure it is properly shared.
- */
-@Injectable()
-export class FullscreenFriendlyOverlayContainer extends OverlayContainer {
-  protected _createContainer(): void {
-    super._createContainer();
-
-    this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
-  }
-
-  private _adjustParentForFullscreenChange(): void {
-    if (!this._containerElement) {
-      return;
-    }
-
-    let fullscreenElement = this._getFullscreenElement();
-    let parent = fullscreenElement || document.body;
-    parent.appendChild(this._containerElement);
-  }
-
-  private _addFullscreenChangeListener(fn: () => void) {
-    if (document.fullscreenEnabled) {
-      document.addEventListener('fullscreenchange', fn);
-    } else if (document.webkitFullscreenEnabled) {
-      document.addEventListener('webkitfullscreenchange', fn);
-    } else if ((document as any).mozFullScreenEnabled) {
-      document.addEventListener('mozfullscreenchange', fn);
-    } else if ((document as any).msFullscreenEnabled) {
-      document.addEventListener('MSFullscreenChange', fn);
-    }
-  }
-
-  private _getFullscreenElement(): Element {
-    return document.fullscreenElement ||
-        document.webkitFullscreenElement ||
-        (document as any).mozFullScreenElement ||
-        (document as any).msFullscreenElement ||
-        null;
-  }
-}

From d4f68a5087e1ff16a89e143c3ce0b52a871874ec Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Sun, 18 Dec 2016 14:33:47 +0300
Subject: [PATCH 04/10] add e2e tests

---
 e2e/components/fullscreen/fullscreen.e2e.ts   | 36 ++++++++++++
 src/e2e-app/e2e-app-module.ts                 | 13 +++--
 src/e2e-app/e2e-app/e2e-app.html              |  1 +
 src/e2e-app/e2e-app/routes.ts                 |  4 +-
 src/e2e-app/fullscreen/fullscreen-e2e.html    |  5 ++
 src/e2e-app/fullscreen/fullscreen-e2e.ts      | 55 +++++++++++++++++++
 .../overlay/fullscreen-overlay-container.ts   | 23 +++++++-
 7 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 e2e/components/fullscreen/fullscreen.e2e.ts
 create mode 100644 src/e2e-app/fullscreen/fullscreen-e2e.html
 create mode 100644 src/e2e-app/fullscreen/fullscreen-e2e.ts

diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts
new file mode 100644
index 000000000000..2ad4d927bbef
--- /dev/null
+++ b/e2e/components/fullscreen/fullscreen.e2e.ts
@@ -0,0 +1,36 @@
+describe('fullscreen', () => {
+  beforeEach(() => browser.get('/fullscreen'));
+
+  let overlayInBody = () => 
+    browser.isElementPresent(by.css('body > .md-overlay-container'));
+  let overlayInFullscreen = () => 
+    browser.isElementPresent(by.css('#fullscreenpane > .md-overlay-container'));
+
+  it('should open a dialog inside a fullscreen element and move it to the document body', () => {
+    element(by.id('fullscreen')).click();
+    element(by.id('dialog')).click();
+
+    overlayInFullscreen.then(isPresent => {
+        expect(isPresent).toBe(true);
+        element(by.id('exitfullscreenindialog')).click();
+        overlayInBody.then(isPresent => {
+            expect(isPresent).toBe(true);
+        });
+    });
+  });
+
+  it('should open a dialog inside the document body and move it to a fullscreen element', () => {
+    element(by.id('dialog')).click();
+    overlayInBody.then(isPresent => {
+        expect(isPresent).toBe(true);
+        element(by.id('fullscreenindialog')).click();
+        overlayInFullscreen.then(isPresent => {
+            expect(isPresent).toBe(true);
+            element(by.id('exitfullscreenindialog')).click();
+            browser.isElementPresent(by.css('body > .md-overlay-container')).then(isPresent => {
+                expect(isPresent).toBe(true);
+            });
+        });
+    });
+  });
+});
diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts
index a54832b2b831..091698206b8f 100644
--- a/src/e2e-app/e2e-app-module.ts
+++ b/src/e2e-app/e2e-app-module.ts
@@ -13,11 +13,11 @@ import {GridListE2E} from './grid-list/grid-list-e2e';
 import {ListE2E} from './list/list-e2e';
 import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from './progress-spinner/progress-spinner-e2e';
-import {MaterialModule} from '@angular/material';
+import {FullscreenE2E, TestDialog as TestDialogFullScreen} from './fullscreen/fullscreen-e2e';
+import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
 
-
 @NgModule({
   imports: [
     BrowserModule,
@@ -39,12 +39,15 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
     ListE2E,
     ProgressBarE2E,
     ProgressSpinnerE2E,
-    SlideToggleE2E
+    SlideToggleE2E,
+    FullscreenE2E,
+    TestDialogFullScreen
   ],
   bootstrap: [E2EApp],
   providers: [
-    {provide: AnimationDriver, useValue: AnimationDriver.NOOP}
+    {provide: AnimationDriver, useValue: AnimationDriver.NOOP},
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
   ],
-  entryComponents: [TestDialog]
+  entryComponents: [TestDialog, TestDialogFullScreen]
 })
 export class E2eAppModule { }
diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app.html
index 43a251d80bac..753f9be0f8be 100644
--- a/src/e2e-app/e2e-app/e2e-app.html
+++ b/src/e2e-app/e2e-app/e2e-app.html
@@ -13,6 +13,7 @@
   <a md-list-item [routerLink]="['radio']">Radios</a>
   <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
   <a md-list-item [routerLink]="['tabs']">Tabs</a>
+  <a md-list-item [routerLink]="['fullscreen']">Fullscreen</a>
 </md-nav-list>
 
 <main>
diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
index 94b69fc33c04..5d9d6e4687a0 100644
--- a/src/e2e-app/e2e-app/routes.ts
+++ b/src/e2e-app/e2e-app/routes.ts
@@ -12,6 +12,7 @@ import {ListE2E} from '../list/list-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
 import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
+import {FullscreenE2E} from '../fullscreen/fullscreen-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -26,5 +27,6 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'list', component: ListE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
-  {path: 'slide-toggle', component: SlideToggleE2E}
+  {path: 'slide-toggle', component: SlideToggleE2E},
+  {path: 'fullscreen', component: FullscreenE2E}
 ];
diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.html b/src/e2e-app/fullscreen/fullscreen-e2e.html
new file mode 100644
index 000000000000..2ec7433bf799
--- /dev/null
+++ b/src/e2e-app/fullscreen/fullscreen-e2e.html
@@ -0,0 +1,5 @@
+<button id="fullscreen" (click)="toggleFullScreen()">FULLSCREEN</button>
+<div id="fullscreenpane" style="width: 100%; height: 100%">
+    <button id="dialog" (click)="openDialog()">DIALOG</button>    
+    <button id="exitfullscreen" (click)="exitFullscreen()">EXIT FULLSCREEN</button>
+</div>
\ No newline at end of file
diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.ts b/src/e2e-app/fullscreen/fullscreen-e2e.ts
new file mode 100644
index 000000000000..12bea34d8260
--- /dev/null
+++ b/src/e2e-app/fullscreen/fullscreen-e2e.ts
@@ -0,0 +1,55 @@
+import {Component, ElementRef, Output, EventEmitter} from '@angular/core';
+import {MdDialog, MdDialogRef, OverlayContainer,
+    FullscreenOverlayContainer} from '@angular/material';
+
+@Component({
+  selector: 'fullscreen-e2e',
+  moduleId: module.id,
+  templateUrl: 'fullscreen-e2e.html'
+})
+export class FullscreenE2E {
+  dialogRef: MdDialogRef<TestDialog>;
+
+  constructor (private _element: ElementRef, private _dialog: MdDialog,
+    private _overlayContainer: OverlayContainer) { }
+
+  openDialog() {
+    this.dialogRef = this._dialog.open(TestDialog);
+    this.dialogRef.componentInstance.fullscreen.subscribe(() => this.toggleFullScreen());
+    this.dialogRef.componentInstance.exitfullscreen.subscribe(() => this.exitFullscreen());
+    this.dialogRef.afterClosed().subscribe(() => {
+      this.dialogRef = null;
+    });
+  }
+
+  toggleFullScreen() {
+      let elem = this._element.nativeElement.querySelector('#fullscreenpane');
+      (this._overlayContainer as FullscreenOverlayContainer).toggleFullscreen(elem);
+  }
+
+  exitFullscreen() {
+      if (document.exitFullscreen) {
+          document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+      } else if ((document as any).mozExitFullScreen) {
+          (document as any).mozExitFullScreen();
+      } else if ((document as any).msExitFullScreen) {
+          (document as any).msExitFullScreen();
+      }
+  }
+}
+
+@Component({
+  selector: 'fullscreen-dialog-e2e-test',
+  template: `
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+  <button id="fullscreenindialog" (click)="fullscreen.emit()">FULLSCREEN</button>
+  <button id="exitfullscreenindialog" (click)="exitfullscreen.emit()">EXIT FULLSCREEN</button>
+  <button type="button" (click)="dialogRef.close()" id="close">CLOSE</button>`
+})
+export class TestDialog {
+  constructor(public dialogRef: MdDialogRef<TestDialog>) { }
+  @Output() fullscreen = new EventEmitter<void>();
+  @Output() exitfullscreen = new EventEmitter<void>();
+}
diff --git a/src/lib/core/overlay/fullscreen-overlay-container.ts b/src/lib/core/overlay/fullscreen-overlay-container.ts
index d393724efdd3..ee6304808056 100644
--- a/src/lib/core/overlay/fullscreen-overlay-container.ts
+++ b/src/lib/core/overlay/fullscreen-overlay-container.ts
@@ -14,6 +14,7 @@ import {OverlayContainer} from './overlay-container';
 export class FullscreenOverlayContainer extends OverlayContainer {
   protected _createContainer(): void {
     super._createContainer();
+    this._adjustParentForFullscreenChange();
     this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
   }
 
@@ -21,8 +22,7 @@ export class FullscreenOverlayContainer extends OverlayContainer {
     if (!this._containerElement) {
       return;
     }
-
-    let fullscreenElement = this._getFullscreenElement();
+    let fullscreenElement = this.getFullscreenElement();
     let parent = fullscreenElement || document.body;
     parent.appendChild(this._containerElement);
   }
@@ -41,11 +41,28 @@ export class FullscreenOverlayContainer extends OverlayContainer {
 
   // When the page is put into fullscreen mode, a specific element is specified.
   // Only that element and its children are visible when in fullscreen mode.
-  private _getFullscreenElement(): Element {
+  getFullscreenElement(): Element {
     return document.fullscreenElement ||
         document.webkitFullscreenElement ||
         (document as any).mozFullScreenElement ||
         (document as any).msFullscreenElement ||
         null;
   }
+
+  // returns true if it has tried to toggle fullscreen mode
+  // but provides no guarantees whether it really happened
+  toggleFullscreen(element: HTMLElement) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen();
+    } else if ((element as any).mozRequestFullScreen) {
+      (element as any).mozRequestFullScreen();
+    } else if ((element as any).msRequestFullScreen) {
+      (element as any).msRequestFullScreen();
+    } else {
+      return false;
+    }
+    return true;
+  }
 }

From 17bfd84e6b1a370cb70dcde24bb9143167d4fb7c Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Sun, 18 Dec 2016 20:20:39 +0300
Subject: [PATCH 05/10] fix tests

---
 e2e/components/fullscreen/fullscreen.e2e.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts
index 2ad4d927bbef..64c558f9c25b 100644
--- a/e2e/components/fullscreen/fullscreen.e2e.ts
+++ b/e2e/components/fullscreen/fullscreen.e2e.ts
@@ -10,10 +10,10 @@ describe('fullscreen', () => {
     element(by.id('fullscreen')).click();
     element(by.id('dialog')).click();
 
-    overlayInFullscreen.then(isPresent => {
+    overlayInFullscreen().then(isPresent => {
         expect(isPresent).toBe(true);
         element(by.id('exitfullscreenindialog')).click();
-        overlayInBody.then(isPresent => {
+        overlayInBody().then(isPresent => {
             expect(isPresent).toBe(true);
         });
     });
@@ -21,13 +21,13 @@ describe('fullscreen', () => {
 
   it('should open a dialog inside the document body and move it to a fullscreen element', () => {
     element(by.id('dialog')).click();
-    overlayInBody.then(isPresent => {
+    overlayInBody().then(isPresent => {
         expect(isPresent).toBe(true);
         element(by.id('fullscreenindialog')).click();
-        overlayInFullscreen.then(isPresent => {
+        overlayInFullscreen().then(isPresent => {
             expect(isPresent).toBe(true);
             element(by.id('exitfullscreenindialog')).click();
-            browser.isElementPresent(by.css('body > .md-overlay-container')).then(isPresent => {
+            overlayInBody().then(isPresent => {
                 expect(isPresent).toBe(true);
             });
         });

From 9b59f2d283747f9348b9474cb159d265d9250a9f Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Tue, 20 Dec 2016 14:56:45 +0300
Subject: [PATCH 06/10] rebased and fix comments

---
 e2e/components/fullscreen/fullscreen.e2e.ts         |  8 ++++----
 .../core/overlay/fullscreen-overlay-container.ts    | 13 +++++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts
index 64c558f9c25b..10eecf912c89 100644
--- a/e2e/components/fullscreen/fullscreen.e2e.ts
+++ b/e2e/components/fullscreen/fullscreen.e2e.ts
@@ -1,10 +1,10 @@
 describe('fullscreen', () => {
   beforeEach(() => browser.get('/fullscreen'));
 
-  let overlayInBody = () => 
-    browser.isElementPresent(by.css('body > .md-overlay-container'));
-  let overlayInFullscreen = () => 
-    browser.isElementPresent(by.css('#fullscreenpane > .md-overlay-container'));
+  let overlayInBody = () =>
+    browser.isElementPresent(by.css('body > .cdk-overlay-container'));
+  let overlayInFullscreen = () =>
+    browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container'));
 
   it('should open a dialog inside a fullscreen element and move it to the document body', () => {
     element(by.id('fullscreen')).click();
diff --git a/src/lib/core/overlay/fullscreen-overlay-container.ts b/src/lib/core/overlay/fullscreen-overlay-container.ts
index ee6304808056..7c22c8c3094a 100644
--- a/src/lib/core/overlay/fullscreen-overlay-container.ts
+++ b/src/lib/core/overlay/fullscreen-overlay-container.ts
@@ -39,8 +39,10 @@ export class FullscreenOverlayContainer extends OverlayContainer {
     }
   }
 
-  // When the page is put into fullscreen mode, a specific element is specified.
-  // Only that element and its children are visible when in fullscreen mode.
+  /**
+   * When the page is put into fullscreen mode, a specific element is specified.
+   * Only that element and its children are visible when in fullscreen mode.
+  */
   getFullscreenElement(): Element {
     return document.fullscreenElement ||
         document.webkitFullscreenElement ||
@@ -49,8 +51,11 @@ export class FullscreenOverlayContainer extends OverlayContainer {
         null;
   }
 
-  // returns true if it has tried to toggle fullscreen mode
-  // but provides no guarantees whether it really happened
+  /**
+   * Toggle element into fullscreen mode
+   * returns true if it has tried to toggle fullscreen mode
+   * but provides no guarantees whether it really happened
+  */
   toggleFullscreen(element: HTMLElement) {
     if (element.requestFullscreen) {
       element.requestFullscreen();

From 842cbb75b080dfa4ce0d692a92fb8f852fc418c2 Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Tue, 20 Dec 2016 15:05:34 +0300
Subject: [PATCH 07/10] fix typings

---
 e2e/components/fullscreen/fullscreen.e2e.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts
index 10eecf912c89..23b7641cd40f 100644
--- a/e2e/components/fullscreen/fullscreen.e2e.ts
+++ b/e2e/components/fullscreen/fullscreen.e2e.ts
@@ -1,3 +1,5 @@
+import {browser, by, element, Key, ProtractorBy} from 'protractor';
+
 describe('fullscreen', () => {
   beforeEach(() => browser.get('/fullscreen'));
 
@@ -10,10 +12,10 @@ describe('fullscreen', () => {
     element(by.id('fullscreen')).click();
     element(by.id('dialog')).click();
 
-    overlayInFullscreen().then(isPresent => {
+    overlayInFullscreen().then((isPresent: boolean) => {
         expect(isPresent).toBe(true);
         element(by.id('exitfullscreenindialog')).click();
-        overlayInBody().then(isPresent => {
+        overlayInBody().then((isPresent: boolean) => {
             expect(isPresent).toBe(true);
         });
     });
@@ -21,13 +23,13 @@ describe('fullscreen', () => {
 
   it('should open a dialog inside the document body and move it to a fullscreen element', () => {
     element(by.id('dialog')).click();
-    overlayInBody().then(isPresent => {
+    overlayInBody().then((isPresent: boolean) => {
         expect(isPresent).toBe(true);
         element(by.id('fullscreenindialog')).click();
-        overlayInFullscreen().then(isPresent => {
+        overlayInFullscreen().then((isPresent: boolean) => {
             expect(isPresent).toBe(true);
             element(by.id('exitfullscreenindialog')).click();
-            overlayInBody().then(isPresent => {
+            overlayInBody().then((isPresent: boolean) => {
                 expect(isPresent).toBe(true);
             });
         });

From 65bb3238b3abbf0144c557dc0f4248300c935eef Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Tue, 20 Dec 2016 16:03:52 +0300
Subject: [PATCH 08/10] fix e2e tests

---
 e2e/components/fullscreen/fullscreen.e2e.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts
index 23b7641cd40f..63a3c65d06e5 100644
--- a/e2e/components/fullscreen/fullscreen.e2e.ts
+++ b/e2e/components/fullscreen/fullscreen.e2e.ts
@@ -4,9 +4,9 @@ describe('fullscreen', () => {
   beforeEach(() => browser.get('/fullscreen'));
 
   let overlayInBody = () =>
-    browser.isElementPresent(by.css('body > .cdk-overlay-container'));
+    browser.isElementPresent(by.css('body > .cdk-overlay-container') as ProtractorBy);
   let overlayInFullscreen = () =>
-    browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container'));
+    browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container') as ProtractorBy);
 
   it('should open a dialog inside a fullscreen element and move it to the document body', () => {
     element(by.id('fullscreen')).click();

From 07e80c32d39605eb61d97b50b85923a9e5ee2522 Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Sun, 8 Jan 2017 10:40:47 +0300
Subject: [PATCH 09/10] address comments

---
 src/demo-app/demo-app/demo-app.ts             |  2 +-
 .../overlay/fullscreen-overlay-container.ts   | 20 -------------------
 2 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index ecb01436648d..b5528b7f4be0 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -57,7 +57,7 @@ export class DemoApp {
 
   }
 
-  public toggleFullscreen() {
+  toggleFullscreen() {
     let elem = this._element.nativeElement.querySelector('.demo-content');
     if (elem.requestFullscreen) {
       elem.requestFullscreen();
diff --git a/src/lib/core/overlay/fullscreen-overlay-container.ts b/src/lib/core/overlay/fullscreen-overlay-container.ts
index 7c22c8c3094a..7dfd7893bced 100644
--- a/src/lib/core/overlay/fullscreen-overlay-container.ts
+++ b/src/lib/core/overlay/fullscreen-overlay-container.ts
@@ -50,24 +50,4 @@ export class FullscreenOverlayContainer extends OverlayContainer {
         (document as any).msFullscreenElement ||
         null;
   }
-
-  /**
-   * Toggle element into fullscreen mode
-   * returns true if it has tried to toggle fullscreen mode
-   * but provides no guarantees whether it really happened
-  */
-  toggleFullscreen(element: HTMLElement) {
-    if (element.requestFullscreen) {
-      element.requestFullscreen();
-    } else if (element.webkitRequestFullScreen) {
-      element.webkitRequestFullScreen();
-    } else if ((element as any).mozRequestFullScreen) {
-      (element as any).mozRequestFullScreen();
-    } else if ((element as any).msRequestFullScreen) {
-      (element as any).msRequestFullScreen();
-    } else {
-      return false;
-    }
-    return true;
-  }
 }

From a24e2c4de4f6b282d0ae6968257d44eab56464ac Mon Sep 17 00:00:00 2001
From: Rem <Rem.Kolomna@gmail.com>
Date: Sun, 8 Jan 2017 22:53:09 +0300
Subject: [PATCH 10/10] fix tests

---
 src/e2e-app/fullscreen/fullscreen-e2e.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.ts b/src/e2e-app/fullscreen/fullscreen-e2e.ts
index 12bea34d8260..f2569eb6139a 100644
--- a/src/e2e-app/fullscreen/fullscreen-e2e.ts
+++ b/src/e2e-app/fullscreen/fullscreen-e2e.ts
@@ -1,6 +1,5 @@
 import {Component, ElementRef, Output, EventEmitter} from '@angular/core';
-import {MdDialog, MdDialogRef, OverlayContainer,
-    FullscreenOverlayContainer} from '@angular/material';
+import {MdDialog, MdDialogRef} from '@angular/material';
 
 @Component({
   selector: 'fullscreen-e2e',
@@ -10,8 +9,7 @@ import {MdDialog, MdDialogRef, OverlayContainer,
 export class FullscreenE2E {
   dialogRef: MdDialogRef<TestDialog>;
 
-  constructor (private _element: ElementRef, private _dialog: MdDialog,
-    private _overlayContainer: OverlayContainer) { }
+  constructor (private _element: ElementRef, private _dialog: MdDialog) { }
 
   openDialog() {
     this.dialogRef = this._dialog.open(TestDialog);
@@ -23,8 +21,16 @@ export class FullscreenE2E {
   }
 
   toggleFullScreen() {
-      let elem = this._element.nativeElement.querySelector('#fullscreenpane');
-      (this._overlayContainer as FullscreenOverlayContainer).toggleFullscreen(elem);
+      let element = this._element.nativeElement.querySelector('#fullscreenpane');
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.webkitRequestFullScreen) {
+        element.webkitRequestFullScreen();
+      } else if ((element as any).mozRequestFullScreen) {
+        (element as any).mozRequestFullScreen();
+      } else if ((element as any).msRequestFullScreen) {
+        (element as any).msRequestFullScreen();
+      }
   }
 
   exitFullscreen() {