From 4823c23e56072394509da8ec0255121b4e2ce495 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Tue, 28 Aug 2018 18:08:26 -0400
Subject: [PATCH 1/9] fix(drawer): Allow customizing drawer width

---
 packages/mdc-drawer/README.md                     | 6 ++++++
 packages/mdc-drawer/_variables.scss               | 2 +-
 test/screenshot/spec/mdc-drawer/mixins/width.html | 0
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 test/screenshot/spec/mdc-drawer/mixins/width.html

diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
index 6dbee4b6d72..e5475602f71 100644
--- a/packages/mdc-drawer/README.md
+++ b/packages/mdc-drawer/README.md
@@ -320,6 +320,12 @@ 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`.
 
+### Sass Variables
+
+Variable | Description
+--- | ---
+`$mdc-drawer-width` | Sets the width of drawer.
+
 ## Accessibility
 
 ### Focus Management
diff --git a/packages/mdc-drawer/_variables.scss b/packages/mdc-drawer/_variables.scss
index da585c901a8..fac16e06657 100644
--- a/packages/mdc-drawer/_variables.scss
+++ b/packages/mdc-drawer/_variables.scss
@@ -40,7 +40,7 @@ $mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high);
 $mdc-drawer-divider-opacity: .12;
 
 // Widths
-$mdc-drawer-width: 256px;
+$mdc-drawer-width: 256px !default;
 $mdc-drawer-list-item-spacing: 4px;
 $mdc-drawer-surface-padding: 16px;
 
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..e69de29bb2d

From 511ffda91546c6104159c04b666d2f16ca061458 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Tue, 28 Aug 2018 18:11:41 -0400
Subject: [PATCH 2/9] fix(drawer): Removed empty file

---
 test/screenshot/spec/mdc-drawer/mixins/width.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 test/screenshot/spec/mdc-drawer/mixins/width.html

diff --git a/test/screenshot/spec/mdc-drawer/mixins/width.html b/test/screenshot/spec/mdc-drawer/mixins/width.html
deleted file mode 100644
index e69de29bb2d..00000000000

From 99ebc8e4ce8b9ec0afacd58fe2404d29a4121572 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Tue, 28 Aug 2018 18:34:22 -0400
Subject: [PATCH 3/9] fix(drawer): Added new drawer width mixin

---
 packages/mdc-drawer/README.md                 |   7 +-
 packages/mdc-drawer/_mixins.scss              |  11 ++
 packages/mdc-drawer/_variables.scss           |   2 +-
 packages/mdc-drawer/common.scss               |   3 +-
 .../dismissible/mdc-drawer-dismissible.scss   |   4 -
 test/screenshot/spec/mdc-drawer/fixture.scss  |   4 +
 .../spec/mdc-drawer/mixins/width.html         | 144 ++++++++++++++++++
 7 files changed, 162 insertions(+), 13 deletions(-)
 create mode 100644 test/screenshot/spec/mdc-drawer/mixins/width.html

diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
index 38c6eb54661..d791ed1a5fd 100644
--- a/packages/mdc-drawer/README.md
+++ b/packages/mdc-drawer/README.md
@@ -320,12 +320,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.
-
-### Sass Variables
-
-Variable | Description
---- | ---
-`$mdc-drawer-width` | Sets the width of drawer.
+`mdc-drawer-width($width)` | Sets the width of drawer and margin space required for `mdc-drawer-app-content` in case of dismissible variant.
 
 ## Accessibility
 
diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
index c7d3ab65c7f..d5130b8c764 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -122,3 +122,14 @@
 @mixin mdc-drawer-z-index($value) {
   z-index: $value;
 }
+
+@mixin mdc-drawer-width($width) {
+  width: $width;
+  max-width: $width;
+
+  @at-root {
+    .mdc-drawer--open + .mdc-drawer-app-content {
+      @include mdc-rtl-reflexive-box(margin, left, $width);
+    }
+  }
+}
diff --git a/packages/mdc-drawer/_variables.scss b/packages/mdc-drawer/_variables.scss
index fac16e06657..da585c901a8 100644
--- a/packages/mdc-drawer/_variables.scss
+++ b/packages/mdc-drawer/_variables.scss
@@ -40,7 +40,7 @@ $mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high);
 $mdc-drawer-divider-opacity: .12;
 
 // Widths
-$mdc-drawer-width: 256px !default;
+$mdc-drawer-width: 256px;
 $mdc-drawer-list-item-spacing: 4px;
 $mdc-drawer-surface-padding: 16px;
 
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/spec/mdc-drawer/fixture.scss b/test/screenshot/spec/mdc-drawer/fixture.scss
index 28e22576c1a..708ade90a20 100644
--- a/test/screenshot/spec/mdc-drawer/fixture.scss
+++ b/test/screenshot/spec/mdc-drawer/fixture.scss
@@ -72,3 +72,7 @@ body {
 .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/width.html b/test/screenshot/spec/mdc-drawer/mixins/width.html
new file mode 100644
index 00000000000..c1ece7deb3d
--- /dev/null
+++ b/test/screenshot/spec/mdc-drawer/mixins/width.html
@@ -0,0 +1,144 @@
+<!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 mdc-typography test-drawer-container">
+    <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>
+      <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>
+    </aside>
+
+    <div class="mdc-drawer-app-content test-drawer-app-content">
+      <header class="mdc-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>
+        </div>
+      </header>
+
+      <div class="mdc-top-app-bar--fixed-adjust test-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>
+    </main>
+
+    <!-- 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>

From f532000fa503d63ae3663d902ab969b200ebd515 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Tue, 28 Aug 2018 18:48:42 -0400
Subject: [PATCH 4/9] fix(drawer): Updated screenshots. Updated selector to
 match with mixin

---
 packages/mdc-drawer/_mixins.scss                         | 6 ++----
 .../mdc-drawer/dismissible/mdc-drawer-dismissible.scss   | 3 ++-
 test/screenshot/golden.json                              | 9 +++++++++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
index d5130b8c764..dc636c68476 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -127,9 +127,7 @@
   width: $width;
   max-width: $width;
 
-  @at-root {
-    .mdc-drawer--open + .mdc-drawer-app-content {
-      @include mdc-rtl-reflexive-box(margin, left, $width);
-    }
+  &.mdc-drawer--open + .mdc-drawer-app-content {
+    @include mdc-rtl-reflexive-box(margin, left, $width);
   }
 }
diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
index 3d02b4ba456..c1ab05bbfe9 100644
--- a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
+++ b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -42,7 +42,8 @@
 
   position: relative;
 
-  .mdc-drawer--closing + & {
+  // To level the specificity with app-content selector in `mdc-drawer-width` mixin.
+  .mdc-drawer.mdc-drawer--closing + & {
     @include mdc-rtl-reflexive-box(margin, left, 0);
   }
 }
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 1a96376d88a..47498dcbaa6 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -242,6 +242,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/24/18_38_28_836/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/28/22_34_48_913/spec/mdc-drawer/mixins/width.html",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/28/22_34_48_913/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/28/22_34_48_913/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/28/22_34_48_913/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/28/22_34_48_913/spec/mdc-drawer/mixins/width.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-elevation/classes/baseline-large.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/02/21_23_44_930/spec/mdc-elevation/classes/baseline-large.html",
     "screenshots": {

From 8fb76f87d3417c0e4913406e94e34ace0d311b98 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Wed, 29 Aug 2018 11:44:03 -0400
Subject: [PATCH 5/9] feat(drawer): Removed max-width style and minor change to
 README

---
 packages/mdc-drawer/README.md    | 2 +-
 packages/mdc-drawer/_mixins.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
index d791ed1a5fd..e92e814e812 100644
--- a/packages/mdc-drawer/README.md
+++ b/packages/mdc-drawer/README.md
@@ -320,7 +320,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 drawer and margin space required for `mdc-drawer-app-content` in case of dismissible variant.
+`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 dc636c68476..25746d2eee7 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -125,7 +125,6 @@
 
 @mixin mdc-drawer-width($width) {
   width: $width;
-  max-width: $width;
 
   &.mdc-drawer--open + .mdc-drawer-app-content {
     @include mdc-rtl-reflexive-box(margin, left, $width);

From eabb5065f128098823e635e0b6e91a07427406d1 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Wed, 29 Aug 2018 13:47:16 -0400
Subject: [PATCH 6/9] fix(drawer): Fixed layout in screenshots

---
 packages/mdc-drawer/_mixins.scss              |  2 +-
 .../spec/mdc-drawer/classes/dismissible.html  | 89 ++++++++++---------
 .../spec/mdc-drawer/classes/modal.html        | 89 ++++++++++---------
 .../spec/mdc-drawer/classes/permanent.html    | 89 ++++++++++---------
 test/screenshot/spec/mdc-drawer/fixture.scss  |  8 +-
 .../mixins/fill-color-accessible.html         | 89 ++++++++++---------
 .../spec/mdc-drawer/mixins/fill-color.html    | 89 ++++++++++---------
 .../spec/mdc-drawer/mixins/width.html         | 89 ++++++++++---------
 8 files changed, 289 insertions(+), 255 deletions(-)

diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
index 25746d2eee7..6de8149cfbe 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -126,7 +126,7 @@
 @mixin mdc-drawer-width($width) {
   width: $width;
 
-  &.mdc-drawer--open + .mdc-drawer-app-content {
+  &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
     @include mdc-rtl-reflexive-box(margin, left, $width);
   }
 }
diff --git a/test/screenshot/spec/mdc-drawer/classes/dismissible.html b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
index 14939f8a111..e425659b8c1 100644
--- a/test/screenshot/spec/mdc-drawer/classes/dismissible.html
+++ b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
@@ -38,58 +38,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>
-          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">
             <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 5c90c6ddeab..f7165431d2b 100644
--- a/test/screenshot/spec/mdc-drawer/classes/modal.html
+++ b/test/screenshot/spec/mdc-drawer/classes/modal.html
@@ -38,58 +38,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>
-          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-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 e23ec0752bb..994b7c1d38f 100644
--- a/test/screenshot/spec/mdc-drawer/classes/permanent.html
+++ b/test/screenshot/spec/mdc-drawer/classes/permanent.html
@@ -38,57 +38,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/fixture.scss b/test/screenshot/spec/mdc-drawer/fixture.scss
index 708ade90a20..1668c8e0831 100644
--- a/test/screenshot/spec/mdc-drawer/fixture.scss
+++ b/test/screenshot/spec/mdc-drawer/fixture.scss
@@ -55,14 +55,18 @@ body {
 
 .test-drawer-app-content {
   flex: auto;
-  overflow: auto;
 }
 
 .test-main-content {
-  overflow: auto;
   height: 100%;
   padding-left: 16px;
   padding-right: 16px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.test-drawer-top-app-bar {
+  position: absolute;
 }
 
 .custom-drawer--fill-color {
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 05fd7de8edb..6e3615a37c1 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
@@ -38,57 +38,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 e6c026b1074..2c17905af9b 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
@@ -38,57 +38,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
index c1ece7deb3d..c6ee4661354 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/width.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/width.html
@@ -38,58 +38,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>
-          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">
             <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>
 

From 25d25d4d40134c0624abf61af73a2664c096fa0c Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Wed, 29 Aug 2018 13:52:10 -0400
Subject: [PATCH 7/9] fix(drawer): Updated golden screenshots

---
 test/screenshot/golden.json | 48 ++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 47498dcbaa6..25e6f4f89ac 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -200,55 +200,55 @@
   "spec/mdc-drawer/classes/dismissible.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/20/20_20_10_473/spec/mdc-drawer/classes/dismissible.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/abhiomkar/2018/08/22/19_20_41_831/spec/mdc-drawer/classes/modal.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/abhiomkar/2018/08/24/18_38_28_836/spec/mdc-drawer/classes/permanent.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/07/17/21_05_09_679/spec/mdc-drawer/mixins/fill-color-accessible.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/07/17/21_05_09_679/spec/mdc-drawer/mixins/fill-color.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/24/18_38_28_836/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/28/22_34_48_913/spec/mdc-drawer/mixins/width.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/28/22_34_48_913/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/28/22_34_48_913/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/28/22_34_48_913/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/28/22_34_48_913/spec/mdc-drawer/mixins/width.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/spec/mdc-drawer/mixins/width.html.windows_ie_11.png"
     }
   },
   "spec/mdc-elevation/classes/baseline-large.html": {

From 669f2658597e5ae68b243e429e949a7394db1847 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Wed, 29 Aug 2018 16:34:01 -0400
Subject: [PATCH 8/9] fix(drawer): Updated golden screenshots

---
 test/screenshot/golden.json | 60 ++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 92a293e88a8..6a8166938d5 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -198,57 +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/abhiomkar/2018/08/29/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/abhiomkar/2018/08/29/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/abhiomkar/2018/08/29/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/abhiomkar/2018/08/29/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/abhiomkar/2018/08/29/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/28/22_34_48_913/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/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/17_47_35_472/spec/mdc-drawer/mixins/width.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/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": {

From 79b7e433f52994f9f109ee5639980160545d8eb1 Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Wed, 29 Aug 2018 17:33:17 -0400
Subject: [PATCH 9/9] fix(drawer): Removed extra CSS specificity

---
 packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
index c1ab05bbfe9..3d02b4ba456 100644
--- a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
+++ b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -42,8 +42,7 @@
 
   position: relative;
 
-  // To level the specificity with app-content selector in `mdc-drawer-width` mixin.
-  .mdc-drawer.mdc-drawer--closing + & {
+  .mdc-drawer--closing + & {
     @include mdc-rtl-reflexive-box(margin, left, 0);
   }
 }