From 247f75f3724ef1806efba0a1d5e94634743a3fa8 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Thu, 30 Aug 2018 11:37:15 -0400
Subject: [PATCH] feat(drawer): Allow customizing drawer width (#3459)

---
 demos/drawer/drawer.scss                      |   1 +
 demos/drawer/permanent-drawer.html            |   5 +-
 packages/mdc-drawer/README.md                 |   1 +
 packages/mdc-drawer/_mixins.scss              |   8 +
 packages/mdc-drawer/common.scss               |   3 +-
 .../dismissible/mdc-drawer-dismissible.scss   |   4 -
 test/screenshot/golden.json                   |  59 ++++---
 .../spec/mdc-drawer/classes/dismissible.html  |  89 ++++++-----
 .../spec/mdc-drawer/classes/modal.html        |  90 ++++++-----
 .../spec/mdc-drawer/classes/permanent.html    |  89 ++++++-----
 test/screenshot/spec/mdc-drawer/fixture.scss  |  19 ++-
 .../mixins/fill-color-accessible.html         |  89 ++++++-----
 .../spec/mdc-drawer/mixins/fill-color.html    |  89 ++++++-----
 .../spec/mdc-drawer/mixins/width.html         | 151 ++++++++++++++++++
 14 files changed, 451 insertions(+), 246 deletions(-)
 create mode 100644 test/screenshot/spec/mdc-drawer/mixins/width.html

diff --git a/demos/drawer/drawer.scss b/demos/drawer/drawer.scss
index d74cfc19775..388c4018827 100644
--- a/demos/drawer/drawer.scss
+++ b/demos/drawer/drawer.scss
@@ -78,6 +78,7 @@
 }
 
 .demo-content {
+  position: relative;
   flex: auto;
   overflow: auto;
   background: #fff;
diff --git a/demos/drawer/permanent-drawer.html b/demos/drawer/permanent-drawer.html
index 68ad15ece3e..17c27e52633 100644
--- a/demos/drawer/permanent-drawer.html
+++ b/demos/drawer/permanent-drawer.html
@@ -104,11 +104,14 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
       </div>
     </aside>
     <div class="demo-content" id="demo-content">
-      <header class="mdc-top-app-bar" id="app-bar">
+      <header class="mdc-top-app-bar demo-top-app-bar" id="app-bar">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
             <span class="mdc-top-app-bar__title">Permanent Drawer</span>
           </section>
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+          </section>
         </div>
       </header>
 
diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
index 070200997f7..5f5b185da67 100644
--- a/packages/mdc-drawer/README.md
+++ b/packages/mdc-drawer/README.md
@@ -335,6 +335,7 @@ Mixin | Description
 `mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.
 `mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.
 `mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.
+`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.
 
 ## Accessibility
 
diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
index c7d3ab65c7f..6de8149cfbe 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -122,3 +122,11 @@
 @mixin mdc-drawer-z-index($value) {
   z-index: $value;
 }
+
+@mixin mdc-drawer-width($width) {
+  width: $width;
+
+  &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
+    @include mdc-rtl-reflexive-box(margin, left, $width);
+  }
+}
diff --git a/packages/mdc-drawer/common.scss b/packages/mdc-drawer/common.scss
index ae1c0915784..80a3ca0331d 100644
--- a/packages/mdc-drawer/common.scss
+++ b/packages/mdc-drawer/common.scss
@@ -41,13 +41,12 @@
   @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
   @include mdc-drawer-item-corner-radius(4px);
   @include mdc-drawer-z-index($mdc-drawer-z-index);
+  @include mdc-drawer-width($mdc-drawer-width);
 
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   box-sizing: border-box;
-  width: $mdc-drawer-width;
-  max-width: $mdc-drawer-width;
   height: 100%;
   transition-property: transform;
   transition-timing-function: $mdc-animation-standard-curve-timing-function;
diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
index 2ea0c520c99..3d02b4ba456 100644
--- a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
+++ b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -42,10 +42,6 @@
 
   position: relative;
 
-  .mdc-drawer--open + & {
-    @include mdc-rtl-reflexive-box(margin, left, $mdc-drawer-width);
-  }
-
   .mdc-drawer--closing + & {
     @include mdc-rtl-reflexive-box(margin, left, 0);
   }
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 6a2dfe6466d..6a8166938d5 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -198,48 +198,57 @@
     }
   },
   "spec/mdc-drawer/classes/dismissible.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/classes/modal.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/classes/permanent.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/mixins/fill-color-accessible.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/mixins/fill-color.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
+    }
+  },
+  "spec/mdc-drawer/mixins/width.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_ie_11.png"
     }
   },
   "spec/mdc-elevation/classes/baseline-large.html": {
diff --git a/test/screenshot/spec/mdc-drawer/classes/dismissible.html b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
index fee8e6ade5e..7cfabf3a65e 100644
--- a/test/screenshot/spec/mdc-drawer/classes/dismissible.html
+++ b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
@@ -48,58 +48,63 @@
           <div class="mdc-drawer__title">Title here</div>
           <div class="mdc-drawer__subtitle">Subtext</div>
         </header>
-        <nav class="mdc-list">
-          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            <span class="mdc-list-item__text">Inbox</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            <span class="mdc-list-item__text">Star</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            <span class="mdc-list-item__text">Sent Mail</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            <span class="mdc-list-item__text">Drafts</span>
-          </a>
+        <div class="mdc-drawer__content">
+          <nav class="mdc-list">
+            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+              <span class="mdc-list-item__text">Inbox</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+              <span class="mdc-list-item__text">Star</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+              <span class="mdc-list-item__text">Sent Mail</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+              <span class="mdc-list-item__text">Drafts</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <h6 class="mdc-list-group__subheader">Labels</h6>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Family</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Friends</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Work</span>
-          </a>
+            <hr class="mdc-list-divider">
+            <h6 class="mdc-list-group__subheader">Labels</h6>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Family</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Friends</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Work</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            <span class="mdc-list-item__text">Settings</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            <span class="mdc-list-item__text">Help & feedback</span>
-          </a>
-        </nav>
+            <hr class="mdc-list-divider">
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+              <span class="mdc-list-item__text">Settings</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+              <span class="mdc-list-item__text">Help & feedback</span>
+            </a>
+          </nav>
+        </div>
       </aside>
 
       <div class="mdc-drawer-app-content test-drawer-app-content">
-        <header class="mdc-top-app-bar">
+        <header class="mdc-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
               <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
               <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
             </section>
+            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            </section>
           </div>
         </header>
 
diff --git a/test/screenshot/spec/mdc-drawer/classes/modal.html b/test/screenshot/spec/mdc-drawer/classes/modal.html
index d07fc8a3087..1e810acdcd7 100644
--- a/test/screenshot/spec/mdc-drawer/classes/modal.html
+++ b/test/screenshot/spec/mdc-drawer/classes/modal.html
@@ -48,59 +48,63 @@
           <div class="mdc-drawer__title">Title here</div>
           <div class="mdc-drawer__subtitle">Subtext</div>
         </header>
-        <nav class="mdc-list">
-          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            <span class="mdc-list-item__text">Inbox</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            <span class="mdc-list-item__text">Star</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            <span class="mdc-list-item__text">Sent Mail</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            <span class="mdc-list-item__text">Drafts</span>
-          </a>
+        <div class="mdc-drawer__content">
+          <nav class="mdc-list">
+            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+              <span class="mdc-list-item__text">Inbox</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+              <span class="mdc-list-item__text">Star</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+              <span class="mdc-list-item__text">Sent Mail</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+              <span class="mdc-list-item__text">Drafts</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <h6 class="mdc-list-group__subheader">Labels</h6>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Family</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Friends</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Work</span>
-          </a>
+            <hr class="mdc-list-divider">
+            <h6 class="mdc-list-group__subheader">Labels</h6>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Family</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Friends</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Work</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            <span class="mdc-list-item__text">Settings</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            <span class="mdc-list-item__text">Help & feedback</span>
-          </a>
-        </nav>
+            <hr class="mdc-list-divider">
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+              <span class="mdc-list-item__text">Settings</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+              <span class="mdc-list-item__text">Help & feedback</span>
+            </a>
+          </nav>
+        </div>
       </aside>
-
       <div class="mdc-drawer-scrim"></div>
       <div class="test-drawer-app-content">
-        <header class="mdc-top-app-bar">
+        <header class="mdc-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
               <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
               <span class="mdc-top-app-bar__title">Modal Drawer</span>
             </section>
+            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            </section>
           </div>
         </header>
 
diff --git a/test/screenshot/spec/mdc-drawer/classes/permanent.html b/test/screenshot/spec/mdc-drawer/classes/permanent.html
index 3af6bca6d4e..c3b4d56e98b 100644
--- a/test/screenshot/spec/mdc-drawer/classes/permanent.html
+++ b/test/screenshot/spec/mdc-drawer/classes/permanent.html
@@ -48,57 +48,62 @@
           <div class="mdc-drawer__title">Title here</div>
           <div class="mdc-drawer__subtitle">Subtext</div>
         </header>
-        <nav class="mdc-list">
-          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            <span class="mdc-list-item__text">Inbox</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            <span class="mdc-list-item__text">Star</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            <span class="mdc-list-item__text">Sent Mail</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            <span class="mdc-list-item__text">Drafts</span>
-          </a>
+        <div class="mdc-drawer__content">
+          <nav class="mdc-list">
+            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+              <span class="mdc-list-item__text">Inbox</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+              <span class="mdc-list-item__text">Star</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+              <span class="mdc-list-item__text">Sent Mail</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+              <span class="mdc-list-item__text">Drafts</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <h6 class="mdc-list-group__subheader">Labels</h6>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Family</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Friends</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Work</span>
-          </a>
+            <hr class="mdc-list-divider">
+            <h6 class="mdc-list-group__subheader">Labels</h6>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Family</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Friends</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Work</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            <span class="mdc-list-item__text">Settings</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            <span class="mdc-list-item__text">Help & feedback</span>
-          </a>
-        </nav>
+            <hr class="mdc-list-divider">
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+              <span class="mdc-list-item__text">Settings</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+              <span class="mdc-list-item__text">Help & feedback</span>
+            </a>
+          </nav>
+        </div>
       </aside>
 
       <div class="mdc-drawer-app-content test-drawer-app-content">
-        <header class="mdc-top-app-bar">
+        <header class="mdc-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
               <span class="mdc-top-app-bar__title">Permanent Drawer</span>
             </section>
+            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            </section>
           </div>
         </header>
 
diff --git a/test/screenshot/spec/mdc-drawer/fixture.scss b/test/screenshot/spec/mdc-drawer/fixture.scss
index f3be1cf3e46..2cb9fa0fb2f 100644
--- a/test/screenshot/spec/mdc-drawer/fixture.scss
+++ b/test/screenshot/spec/mdc-drawer/fixture.scss
@@ -23,6 +23,7 @@
 @import "../../../../packages/mdc-drawer/mixins";
 @import "../../../../packages/mdc-drawer/variables";
 @import "../../../../packages/mdc-typography/mdc-typography";
+@import "../../../../packages/mdc-typography/mixins";
 @import "../../../../packages/mdc-top-app-bar/mdc-top-app-bar";
 @import "../../../../packages/mdc-list/mixins";
 @import "../../../../packages/mdc-theme/color-palette";
@@ -30,8 +31,12 @@
 $custom-drawer-color: $material-color-orange-900;
 
 .test-viewport--drawer {
+  @include mdc-typography-base;
+
+  height: 100vh;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 }
 
 .test-drawer-column {
@@ -41,16 +46,20 @@ $custom-drawer-color: $material-color-orange-900;
 
 .test-drawer-app-content {
   flex: auto;
-  height: 100vh;
-  overflow: auto;
+}
+
+.test-drawer-top-app-bar {
+  position: absolute;
 }
 
 .test-drawer-main-content {
   display: block; // Needed for IE 11
-  height: calc(100% - 64px);
+  height: 100%;
   padding-right: 16px;
   padding-left: 16px;
   overflow: auto;
+  box-sizing: border-box;
+  background: #fff;
 }
 
 .custom-drawer--fill-color {
@@ -60,3 +69,7 @@ $custom-drawer-color: $material-color-orange-900;
 .custom-drawer--fill-color-accessible {
   @include mdc-drawer-fill-color-accessible(darkcyan);
 }
+
+.custom-drawer--width {
+  @include mdc-drawer-width(400px);
+}
diff --git a/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html b/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
index a9295179ffd..ec2840677cb 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
@@ -48,57 +48,62 @@
           <div class="mdc-drawer__title">Title here</div>
           <div class="mdc-drawer__subtitle">Subtext</div>
         </header>
-        <nav class="mdc-list">
-          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            Inbox
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            Star
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            Sent Mail
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            Drafts
-          </a>
+        <div class="mdc-drawer__content">
+          <nav class="mdc-list">
+            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+              Inbox
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+              Star
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+              Sent Mail
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+              Drafts
+            </a>
 
-          <hr class="mdc-list-divider">
-          <h6 class="mdc-list-group__subheader">Labels</h6>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Family
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Friends
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Work
-          </a>
+            <hr class="mdc-list-divider">
+            <h6 class="mdc-list-group__subheader">Labels</h6>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              Family
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              Friends
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              Work
+            </a>
 
-          <hr class="mdc-list-divider">
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            Settings
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            Help & feedback
-          </a>
-        </nav>
+            <hr class="mdc-list-divider">
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+              Settings
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+              Help & feedback
+            </a>
+          </nav>
+        </div>
       </aside>
 
       <div class="mdc-drawer-app-content test-drawer-app-content">
-        <header class="mdc-top-app-bar">
+        <header class="mdc-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
               <span class="mdc-top-app-bar__title">Permanent Drawer</span>
             </section>
+            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            </section>
           </div>
         </header>
 
diff --git a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
index b77ed7ba812..bb32a1f89d7 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
@@ -48,57 +48,62 @@
           <div class="mdc-drawer__title">Title here</div>
           <div class="mdc-drawer__subtitle">Subtext</div>
         </header>
-        <nav class="mdc-list">
-          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            Inbox
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            Star
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            Sent Mail
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            Drafts
-          </a>
+        <div class="mdc-drawer__content">
+          <nav class="mdc-list">
+            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+              Inbox
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+              Star
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+              Sent Mail
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+              Drafts
+            </a>
 
-          <hr class="mdc-list-divider">
-          <h6 class="mdc-list-group__subheader">Labels</h6>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Family
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Friends
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Work
-          </a>
+            <hr class="mdc-list-divider">
+            <h6 class="mdc-list-group__subheader">Labels</h6>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              Family
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              Friends
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              Work
+            </a>
 
-          <hr class="mdc-list-divider">
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            Settings
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            Help & feedback
-          </a>
-        </nav>
+            <hr class="mdc-list-divider">
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+              Settings
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+              Help & feedback
+            </a>
+          </nav>
+        </div>
       </aside>
 
       <div class="mdc-drawer-app-content test-drawer-app-content">
-        <header class="mdc-top-app-bar">
+        <header class="mdc-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
               <span class="mdc-top-app-bar__title">Permanent Drawer</span>
             </section>
+            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            </section>
           </div>
         </header>
 
diff --git a/test/screenshot/spec/mdc-drawer/mixins/width.html b/test/screenshot/spec/mdc-drawer/mixins/width.html
new file mode 100644
index 00000000000..dff2a4ebd82
--- /dev/null
+++ b/test/screenshot/spec/mdc-drawer/mixins/width.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Dismissible Drawer - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.list.css">
+    <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+  </head>
+
+  <body class="test-container">
+    <div class="test-viewport test-viewport--drawer">
+      <aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open custom-drawer--width">
+      <header class="mdc-drawer__header">
+        <div class="mdc-drawer__title">Title here</div>
+        <div class="mdc-drawer__subtitle">Subtext</div>
+      </header>
+      <div class="mdc-drawer__content">
+        <nav class="mdc-list">
+          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+            Inbox
+          </a>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+            Star
+          </a>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+            Sent Mail
+          </a>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+            Drafts
+          </a>
+
+          <hr class="mdc-list-divider">
+          <h6 class="mdc-list-group__subheader">Labels</h6>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+            Family
+          </a>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+            Friends
+          </a>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+            Work
+          </a>
+
+          <hr class="mdc-list-divider">
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+            Settings
+          </a>
+          <a class="mdc-list-item" href="#">
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+            Help & feedback
+          </a>
+        </nav>
+      </div>
+    </aside>
+
+    <div class="mdc-drawer-app-content test-drawer-app-content">
+      <header class="mdc-top-app-bar test-drawer-top-app-bar">
+        <div class="mdc-top-app-bar__row">
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+            <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
+            <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
+          </section>
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+          </section>
+        </div>
+      </header>
+
+      <div class="mdc-top-app-bar--fixed-adjust test-drawer-main-content">
+        <p class="test-drawer-paragraph">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut<br>
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br>
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in<br>
+          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br>
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
+          anim id est laborum.
+        </p>
+        <p class="test-drawer-paragraph">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut<br>
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br>
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in<br>
+          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br>
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
+          anim id est laborum.
+        </p>
+        <p class="test-drawer-paragraph">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut<br>
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br>
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in<br>
+          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br>
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
+          anim id est laborum.
+        </p>
+        <p class="test-drawer-paragraph">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut<br>
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br>
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in<br>
+          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br>
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
+          anim id est laborum.
+        </p>
+      </div>
+    </div>
+  </div>
+
+    <!-- Automatically provides/replaces `Promise` if missing or broken. -->
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
+    <script src="../../../out/material-components-web.js"></script>
+    <script src="../../../out/spec/fixture.js"></script>
+    <script src="../../../out/spec/mdc-drawer/fixture.js"></script>
+  </body>
+</html>