From ebdb084ca505380a21e4e90215c51e86e61b4c58 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 7 Nov 2018 14:53:29 -0800
Subject: [PATCH] fix(drawer): allow drawer below top app bar (#4028)

---
 packages/mdc-drawer/README.md                 |  50 +++-
 .../dismissible/mdc-drawer-dismissible.scss   |   1 -
 test/screenshot/golden.json                   |  16 +-
 .../classes/baseline-alert-above-drawer.html  |  55 +++--
 test/screenshot/spec/mdc-dialog/fixture.scss  |  14 ++
 .../dismissible-below-top-app-bar.html        | 232 ++++++++++++++++++
 test/screenshot/spec/mdc-drawer/fixture.scss  |   4 +
 7 files changed, 340 insertions(+), 32 deletions(-)
 create mode 100644 test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
index 4521f02eb54..94ee0222405 100644
--- a/packages/mdc-drawer/README.md
+++ b/packages/mdc-drawer/README.md
@@ -197,6 +197,8 @@ Dismissible drawers are by default hidden off screen, and can slide into view. D
 
 #### Usage with Top App Bar
 
+##### Dismissible Drawer Full Height Drawer
+
 In cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.
 
 In the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:
@@ -241,7 +243,48 @@ In the following example, the `mdc-drawer__content` and `main-content` elements
 </body>
 ```
 
-The CSS to match it looks like this:
+##### Dismissible Drawer Below Top App Bar
+
+In cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.
+
+```html
+<body>
+  <header class="mdc-top-app-bar 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">
+        <a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
+        <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
+      </section>
+    </div>
+  </header>
+  <aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
+    <div class="mdc-drawer__content">
+      <div class="mdc-list">
+        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
+          <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">send</i>
+          <span class="mdc-list-item__text">Outgoing</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>
+    </div>
+  </aside>
+
+  <div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
+    <main class="main-content" id="main-content">
+      App Content
+    </main>
+  </div>
+</body>
+```
+
+The CSS to match either case looks like this:
 
 ```scss
 // Note: these styles do not account for any paddings/margins that you may need.
@@ -265,6 +308,11 @@ body {
 .app-bar {
   position: absolute;
 }
+
+// only apply this style if below top app bar
+.mdc-top-app-bar {
+  z-index: 7;
+}
 ```
 
 The JavaScript to toggle the drawer when the navigation button is clicked looks like this:
diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
index d91fdd97666..c731b5f2d03 100644
--- a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
+++ b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -30,7 +30,6 @@
 
   display: none;
   position: absolute;
-  top: 0;
 
   &.mdc-drawer--open {
     display: flex;
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index c90eca6ae51..4b58b7ecf23 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -387,12 +387,12 @@
     }
   },
   "spec/mdc-dialog/classes/baseline-alert-above-drawer.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_chrome_69.png",
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_chrome_69.png",
       "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_ie_11.png"
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/classes/baseline-alert-with-title.html": {
@@ -556,6 +556,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/mixins/title-ink-color.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-drawer/classes/dismissible-below-top-app-bar.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html.windows_chrome_69.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-drawer/classes/dismissible.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/26/06_08_27_877/spec/mdc-drawer/classes/dismissible.html?utm_source=golden_json",
     "screenshots": {
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
index 24b51fb4e49..6687e066ff2 100644
--- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
+++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
@@ -36,32 +36,7 @@
   </head>
 
   <body class="test-container test-container--edge-fonts mdc-dialog-scroll-lock">
-    <main class="test-viewport test-viewport--center">
-
-      <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
-
-      <div class="mdc-dialog mdc-dialog--open test-dialog"
-           role="alertdialog"
-           aria-modal="true"
-           aria-describedby="test-dialog__content--alert"
-           id="test-dialog">
-        <div class="mdc-dialog__scrim"></div>
-        <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
-            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
-              <div class="test-dialog__content-rect">Alert</div>
-            </div>
-            <footer class="mdc-dialog__actions">
-              <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
-              </button>
-              <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">Discard</span>
-              </button>
-            </footer>
-          </div>
-        </div>
-      </div>
+    <main class="test-viewport test-viewport--drawer">
 
       <aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open">
         <header class="mdc-drawer__header">
@@ -114,6 +89,34 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
           </nav>
         </div>
       </aside>
+      <div class="mdc-drawer-app-content test-drawer-app-content--center">
+          <div>
+            <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
+          </div>
+
+          <div class="mdc-dialog mdc-dialog--open test-dialog"
+               role="alertdialog"
+               aria-modal="true"
+               aria-describedby="test-dialog__content--alert"
+               id="test-dialog">
+            <div class="mdc-dialog__scrim"></div>
+            <div class="mdc-dialog__container">
+              <div class="mdc-dialog__surface">
+                <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
+                  <div class="test-dialog__content-rect">Alert</div>
+                </div>
+                <footer class="mdc-dialog__actions">
+                  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                    <span class="test-font--redact-all">Cancel</span>
+                  </button>
+                  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                    <span class="test-font--redact-all">Discard</span>
+                  </button>
+                </footer>
+              </div>
+            </div>
+          </div>
+        </div>
     </main>
 
     <!-- Automatically provides/replaces `Promise` if missing or broken. -->
diff --git a/test/screenshot/spec/mdc-dialog/fixture.scss b/test/screenshot/spec/mdc-dialog/fixture.scss
index 7f3c2a2f6cc..c39d7aedb2d 100644
--- a/test/screenshot/spec/mdc-dialog/fixture.scss
+++ b/test/screenshot/spec/mdc-dialog/fixture.scss
@@ -88,3 +88,17 @@ $custom-dialog-color: $material-color-red-300;
   @include mdc-dialog-min-width(600px);
   @include mdc-dialog-max-width(300px, 30px);
 }
+
+.test-viewport--drawer {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.test-drawer-app-content--center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
diff --git a/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html b/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
new file mode 100644
index 00000000000..2e9257467ba
--- /dev/null
+++ b/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
@@ -0,0 +1,232 @@
+<!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">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
+  </head>
+
+  <body class="test-container test-container--edge-fonts">
+    <div class="test-viewport test-viewport--drawer">
+      <header class="mdc-top-app-bar test-drawer-top-app-bar test-drawer-top-app-bar--dismissible">
+        <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<i class="test-font--redact-prev-letter"></i></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>
+
+      <aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open mdc-top-app-bar--fixed-adjust">
+        <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>
+              <span class="mdc-list-item__text">Inbox<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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<i class="test-font--redact-prev-letter"></i></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 &amp; feedback<i class="test-font--redact-prev-letter"></i></span>
+            </a>
+          </nav>
+        </div>
+      </aside>
+
+      <div class="mdc-drawer-app-content test-drawer-app-content mdc-top-app-bar--fixed-adjust">
+        <main class="test-drawer-main-content">
+          <p>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+            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>
+        </main>
+      </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>
diff --git a/test/screenshot/spec/mdc-drawer/fixture.scss b/test/screenshot/spec/mdc-drawer/fixture.scss
index 7e762dffac9..f90be254f81 100644
--- a/test/screenshot/spec/mdc-drawer/fixture.scss
+++ b/test/screenshot/spec/mdc-drawer/fixture.scss
@@ -50,6 +50,10 @@ $custom-drawer-color: $material-color-orange-900;
   position: absolute;
 }
 
+.test-drawer-top-app-bar--dismissible {
+  z-index: 7;
+}
+
 .test-drawer-main-content {
   display: block; // Needed for IE 11
   box-sizing: border-box;
