From 6d61cb981842941b6146fc307650632686322320 Mon Sep 17 00:00:00 2001
From: Rachel Friedman <rlfriedman@google.com>
Date: Wed, 25 Jul 2018 16:51:12 -0700
Subject: [PATCH] chore(switch): Merge master into feat/switch-update (#3215)

---
 .travis.yml                                   |  19 +-
 demos/list.html                               |  98 ++--
 demos/list.scss                               |   1 +
 demos/switch.html                             |   6 +-
 demos/typography.html                         |  15 +
 demos/typography.scss                         |  53 ++
 docs/open_source/release-process.md           |  41 +-
 karma.conf.js                                 | 123 +++--
 package-lock.json                             |  33 +-
 package.json                                  |   1 +
 packages/mdc-chips/README.md                  |   8 +-
 packages/mdc-chips/chip-set/adapter.js        |  14 -
 packages/mdc-chips/chip-set/foundation.js     |  25 +-
 packages/mdc-chips/chip-set/index.js          |  35 +-
 packages/mdc-chips/chip/adapter.js            |  28 -
 packages/mdc-chips/chip/foundation.js         |  30 --
 packages/mdc-chips/chip/index.js              |  55 +-
 packages/mdc-fab/README.md                    |  13 +
 packages/mdc-list/README.md                   |  23 +-
 packages/mdc-list/mdc-list.scss               |  41 +-
 packages/mdc-select/README.md                 |  21 +-
 packages/mdc-select/foundation.js             |  46 +-
 packages/mdc-select/index.js                  |  68 +--
 packages/mdc-switch/package.json              |   1 +
 packages/mdc-typography/README.md             |   2 +
 packages/mdc-typography/_mixins.scss          |  25 +
 test/screenshot/README.md                     | 103 +++-
 test/screenshot/golden.json                   |  57 +-
 test/screenshot/infra/commands/approve.js     |  11 +-
 test/screenshot/infra/commands/build.js       |  61 ++-
 test/screenshot/infra/commands/clean.js       |  12 +-
 test/screenshot/infra/commands/demo.js        |  16 +-
 test/screenshot/infra/commands/index.js       |  11 +-
 test/screenshot/infra/commands/proto.js       |  21 +-
 test/screenshot/infra/commands/serve.js       |  28 +-
 test/screenshot/infra/commands/test.js        | 489 +++++++++++++++++-
 test/screenshot/infra/commands/travis.sh      |  64 ++-
 test/screenshot/infra/lib/cbt-api.js          | 124 ++++-
 test/screenshot/infra/lib/cli.js              | 338 +-----------
 test/screenshot/infra/lib/cloud-storage.js    |  22 +-
 test/screenshot/infra/lib/constants.js        |  31 +-
 test/screenshot/infra/lib/controller.js       | 179 ++-----
 test/screenshot/infra/lib/diff-base-parser.js | 412 +++++++++++++++
 test/screenshot/infra/lib/git-repo.js         |  70 ++-
 test/screenshot/infra/lib/github-api.js       | 180 +++++--
 test/screenshot/infra/lib/golden-io.js        |  56 +-
 test/screenshot/infra/lib/local-storage.js    |  57 +-
 test/screenshot/infra/lib/logger.js           |   6 +-
 test/screenshot/infra/lib/process-manager.js  |  17 +-
 test/screenshot/infra/lib/report-builder.js   |  86 ++-
 test/screenshot/infra/lib/report-writer.js    |   3 +-
 test/screenshot/infra/lib/selenium-api.js     | 274 +++++++++-
 test/screenshot/infra/lib/stacktrace.js       | 147 ++++++
 test/screenshot/infra/lib/user-agent-store.js |   4 +-
 test/screenshot/infra/proto/mdc.pb.js         |  25 +-
 test/screenshot/infra/proto/mdc.proto         |   1 -
 .../screenshot/infra/types/cbt-api-externs.js | 162 ++++++
 test/screenshot/infra/types/cli-types.js      |  26 +
 .../infra/types/node-api-externs.js           |  82 +++
 .../externs.js => types/report-ui-types.js}   | 102 +---
 test/screenshot/report/_collection.hbs        |   3 +
 test/screenshot/report/_footer.hbs            |   4 +-
 test/screenshot/report/_metadata.hbs          |   3 -
 test/screenshot/report/report.js              |  32 +-
 test/screenshot/report/report.scss            |   2 +-
 test/screenshot/run.js                        |  94 ++--
 .../spec/mdc-drawer/classes/permanent.html    |   8 +-
 .../spec/mdc-drawer/classes/persistent.html   |   8 +-
 .../spec/mdc-drawer/classes/temporary.html    |   8 +-
 test/screenshot/spec/mdc-drawer/fixture.scss  |   5 +
 .../mixins/fill-color-accessible.html         |   8 +-
 .../spec/mdc-drawer/mixins/fill-color.html    |   8 +-
 .../spec/mdc-drawer/mixins/ink-color.html     |   8 +-
 .../classes/baseline-textfield.html           |  61 +++
 test/screenshot/spec/mdc-textfield/fixture.js |   3 +
 .../spec/mdc-textfield/fixture.scss           |  23 +
 .../mdc-chips/mdc-chip-set.foundation.test.js |  80 +--
 test/unit/mdc-chips/mdc-chip-set.test.js      |  20 -
 .../mdc-chips/mdc-chip.foundation.test.js     | 127 ++---
 test/unit/mdc-chips/mdc-chip.test.js          |  51 --
 .../unit/mdc-select/foundation-events.test.js |  71 ---
 test/unit/mdc-select/foundation.test.js       | 134 ++---
 test/unit/mdc-select/mdc-select.test.js       |  79 ++-
 83 files changed, 3210 insertions(+), 1732 deletions(-)
 create mode 100644 test/screenshot/infra/lib/diff-base-parser.js
 create mode 100644 test/screenshot/infra/lib/stacktrace.js
 create mode 100644 test/screenshot/infra/types/cbt-api-externs.js
 create mode 100644 test/screenshot/infra/types/cli-types.js
 create mode 100644 test/screenshot/infra/types/node-api-externs.js
 rename test/screenshot/infra/{lib/externs.js => types/report-ui-types.js} (55%)
 create mode 100644 test/screenshot/spec/mdc-textfield/classes/baseline-textfield.html
 create mode 100644 test/screenshot/spec/mdc-textfield/fixture.js
 create mode 100644 test/screenshot/spec/mdc-textfield/fixture.scss
 delete mode 100644 test/unit/mdc-select/foundation-events.test.js

diff --git a/.travis.yml b/.travis.yml
index ac57df557e1..ab4dff71e4e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -33,13 +33,14 @@ matrix:
   - node_js: 8
     env:
     - TEST_SUITE=screenshot
+    git:
+      depth: 200
     script: npm run screenshot:test -- --no-fetch
-before_install:
-  # Source the script to run it in the same shell process. This ensures that any environment variables set by the
-  # script are visible to subsequent Travis CLI commands.
-  # https://superuser.com/a/176788/62792
-  - source test/screenshot/infra/commands/travis.sh
-install:
-  - rm -rf node_modules
-  - npm install
-  #- npm ls # Noisy output, but useful for debugging npm package dependency version issues
+    before_install:
+      # Source the script to run it in the same shell process. This ensures that any environment variables set by the
+      # script are visible to subsequent Travis CLI commands.
+      # https://superuser.com/a/176788/62792
+      - source test/screenshot/infra/commands/travis.sh
+    install:
+      - npm install
+      #- npm ls # Noisy output, but useful for debugging npm package dependency version issues
diff --git a/demos/list.html b/demos/list.html
index 819e3d7b8e9..b6ae33b7325 100644
--- a/demos/list.html
+++ b/demos/list.html
@@ -44,7 +44,7 @@
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
-              Photos
+              <span class="mdc-list-item__primary-text">Photos</span>
               <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
             </span>
             <a href="#" class="mdc-list-item__meta material-icons"
@@ -58,7 +58,7 @@
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
-              Recipes
+              <span class="mdc-list-item__primary-text">Recipes</span>
               <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
             </span>
             <a href="#" class="mdc-list-item__meta material-icons"
@@ -72,7 +72,7 @@
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
-              Work
+              <span class="mdc-list-item__primary-text">Work</span>
               <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
             </span>
             <a href="#" class="mdc-list-item__meta material-icons"
@@ -125,7 +125,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Photos
+                    <span class="mdc-list-item__primary-text">Photos</span>
                     <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -139,7 +139,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Recipes
+                    <span class="mdc-list-item__primary-text">Recipes</span>
                     <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -153,7 +153,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Work
+                    <span class="mdc-list-item__primary-text">Work</span>
                     <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -172,7 +172,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Vacation Itinerary
+                    <span class="mdc-list-item__primary-text">Vacation Itinerary</span>
                     <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -186,7 +186,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Kitchen Remodel
+                    <span class="mdc-list-item__primary-text">Kitchen Remodel</span>
                     <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -596,19 +596,19 @@ <h3>Text-Only</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -620,19 +620,19 @@ <h3>Text-Only (Dense)</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -645,21 +645,21 @@ <h3>Graphic</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -672,21 +672,21 @@ <h3>Graphic (Dense)</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -699,21 +699,21 @@ <h3>Avatar List</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -726,21 +726,21 @@ <h3>Avatar List (dense)</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -752,21 +752,21 @@ <h3>Metadata</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$10.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$20.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$30.00</span>
@@ -779,21 +779,21 @@ <h3>Metadata (Dense)</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$10.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$20.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$30.00</span>
@@ -809,7 +809,7 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Photos
+                  <span class="mdc-list-item__primary-text">Photos</span>
                   <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
                 </span>
                 <a href="#" class="mdc-list-item__meta material-icons"
@@ -823,7 +823,7 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Recipes
+                  <span class="mdc-list-item__primary-text">Recipes</span>
                   <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
                 </span>
                 <a href="#" class="mdc-list-item__meta material-icons"
@@ -837,7 +837,7 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Work
+                  <span class="mdc-list-item__primary-text">Work</span>
                   <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
                 </span>
                 <a href="#" class="mdc-list-item__meta material-icons"
@@ -859,10 +859,8 @@ <h3>Lists w/ Ellipsis</h3>
                   </i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Photos
-                  <span class="mdc-list-item__secondary-text">
-                    This is some secondary text
-                  </span>
+                  <span class="mdc-list-item__primary-text">Photos</span>
+                  <span class="mdc-list-item__secondary-text">This is some secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">
                   <i class="material-icons" aria-hidden="true">
@@ -877,10 +875,8 @@ <h3>Lists w/ Ellipsis</h3>
                   </i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Photos of my best photography using my finely tuned skills and eye
-                  <span class="mdc-list-item__secondary-text">
-                    This is some secondary text
-                  </span>
+                  <span class="mdc-list-item__primary-text">Photos of my best photography using my finely tuned skills and eye</span>
+                  <span class="mdc-list-item__secondary-text">This is some secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">
                   <i class="material-icons" aria-hidden="true">
@@ -895,10 +891,8 @@ <h3>Lists w/ Ellipsis</h3>
                   </i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Work Photos
-                  <span class="mdc-list-item__secondary-text">
-                    This is a description of work photos from the years 2018 to present time while I was a barista
-                  </span>
+                  <span class="mdc-list-item__primary-text">Work Photos</span>
+                  <span class="mdc-list-item__secondary-text">This is a description of work photos from the years 2018 to present time while I was a barista</span>
                 </span>
                 <span class="mdc-list-item__meta">
                   <i class="material-icons" aria-hidden="true">
@@ -982,7 +976,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Photos
+                    <span class="mdc-list-item__primary-text">Photos</span>
                     <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -996,7 +990,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Recipes
+                    <span class="mdc-list-item__primary-text">Recipes</span>
                     <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -1010,7 +1004,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Work
+                    <span class="mdc-list-item__primary-text">Work</span>
                     <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -1029,7 +1023,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Vacation Itinerary
+                    <span class="mdc-list-item__primary-text">Vacation Itinerary</span>
                     <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -1043,7 +1037,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Kitchen Remodel
+                    <span class="mdc-list-item__primary-text">Kitchen Remodel</span>
                     <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
diff --git a/demos/list.scss b/demos/list.scss
index fbae881eb8e..bd02192146a 100644
--- a/demos/list.scss
+++ b/demos/list.scss
@@ -20,6 +20,7 @@
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-list/mdc-list";
 @import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-typography/mixins";
 
 a.material-icons {
   text-decoration: none;
diff --git a/demos/switch.html b/demos/switch.html
index 4a3172b18f5..360affd0842 100644
--- a/demos/switch.html
+++ b/demos/switch.html
@@ -91,9 +91,9 @@ <h2>Enabled</h2>
               <div class="mdc-switch__track"></div>
               <div class="mdc-switch__thumb-underlay">
                 <div class="mdc-switch__thumb">
-                  <input type="checkbox" 
-                  id="basic-switch-custom" 
-                  class="mdc-switch__native-control" 
+                  <input type="checkbox"
+                  id="basic-switch-custom"
+                  class="mdc-switch__native-control"
                   role="switch" checked>
                 </div>
               </div>
diff --git a/demos/typography.html b/demos/typography.html
index a8a3c748968..680daf09582 100644
--- a/demos/typography.html
+++ b/demos/typography.html
@@ -30,6 +30,10 @@
         padding: 24px;
         border: 1px solid #ddd;
       }
+
+       .demo-typography--heading-baseline {
+         margin-left: 24px;
+       }
     </style>
   </head>
   <body class="mdc-typography">
@@ -77,6 +81,17 @@ <h6 class="mdc-typography--subtitle2">Subtitle 2</h6>
         <div><span class="mdc-typography--overline">Overline text</span></div>
 
       </section>
+
+      <h6 class="mdc-typography--headline6 demo-typography--heading-baseline">Baseline</h6>
+      <section class="demo-typography--section-baseline">
+        <h2 class="demo-typography__title mdc-typography--headline6">Our Changing Planet</h2>
+        <h3 class="demo-typography__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
+        <div class="demo-typography__body mdc-typography--body2">Visit ten places on our planet that are undergoing the biggest changes today.</div>
+
+        <line class="demo-typography-line-1">+34px</line>
+        <line class="demo-typography-line-2">+22px</line>
+        <line class="demo-typography-line-3">+28px</line>
+      </section>
     </main>
   </body>
 </html>
diff --git a/demos/typography.scss b/demos/typography.scss
index f0991d009be..1d4d2b5baaf 100644
--- a/demos/typography.scss
+++ b/demos/typography.scss
@@ -15,3 +15,56 @@
 //
 
 @import "./common";
+@import "../packages/mdc-typography/mixins";
+
+$ruler-color: #FD2549;
+
+.demo-typography--section-baseline {
+  position: relative;
+  margin: 24px;
+  padding: 0 24px 24px 24px;
+  border: 1px solid #ddd;
+  max-width: 350px;
+}
+
+.demo-typography__title {
+  @include mdc-typography-baseline-top(34px);
+  @include mdc-typography-baseline-bottom(22px);
+}
+
+.demo-typography__subtitle {
+  @include mdc-typography-baseline-top(22px);
+  @include mdc-typography-baseline-bottom(28px);
+
+  @include mdc-theme-prop(color, text-secondary-on-background);
+}
+
+.demo-typography__body {
+  @include mdc-typography-baseline-top(28px);
+  @include mdc-theme-prop(color, text-secondary-on-background);
+}
+
+.demo-typography-line-1,
+.demo-typography-line-2,
+.demo-typography-line-3 {
+  position: absolute;
+  border-top: 1px solid $ruler-color;
+  width: 100%;
+  left: 0;
+  right: 0;
+  color: $ruler-color;
+  font-size: 10px;
+  text-align: right;
+}
+
+.demo-typography-line-1 {
+  top: 34px;
+}
+
+.demo-typography-line-2 {
+  top: calc(34px + 22px);
+}
+
+.demo-typography-line-3 {
+  top: calc(34px + 22px + 28px);
+}
diff --git a/docs/open_source/release-process.md b/docs/open_source/release-process.md
index c14a0e7d93a..b5fb5012428 100644
--- a/docs/open_source/release-process.md
+++ b/docs/open_source/release-process.md
@@ -128,26 +128,13 @@ git commit -am "chore: Publish"
 
 ### For Pre-Releases and Patch Releases
 
-Simply run the post-release script to update and commit the changelog and apply an annotated vX.Y.Z git tag:
-
-```
-./scripts/post-release.sh
-```
-
-Make sure that a CHANGELOG commit actually appears in your `git log`! If you need to retry the process:
-
-```
-git tag -d <tag> # Delete the tag that the script created
-git reset --hard HEAD^ # Rewind to the previous commit
-```
-
-Alternatively, if you would like to be extra sure of the changelog, you can generate it manually prior to running the
-post-release script, in which case it will skip `npm run changelog` and commit your local changes:
+It's recommended to generate the changelog prior to running the post-release script so you can double-check the changes
+before it creates a tag:
 
 ```
 npm run changelog
 git diff # Review the changelog and make sure it looks OK
-./scripts/post-release.sh
+./scripts/post-release.sh # This will commit the changelog diff and then create a tag
 ```
 
 ### For Minor Releases
@@ -188,13 +175,13 @@ You will need to temporarily alter Github's master branch protection in order to
 1. Perform the process outlined in one of the sections below
 1. Don't forget to re-enable "Include administrators" & click "Save changes" afterwards
 
-### For Pre-releases and Feature/Breaking-Change Releases
+### For Pre-releases and Minor Releases
 
 `git push origin master && git push origin <tag>`
 
 This will ensure the new commits *and* tag are pushed to the remote git repository.
 
-### For Bugfix Releases
+### For Patch Releases
 
 `git push origin <tag>`
 
@@ -212,13 +199,27 @@ git push
 
 ## Update and Deploy Catalog Repository
 
-We maintain a `next` branch on the MDC Web Catalog repository to keep ahead of breaking changes in new releases.
+### For Patch Releases
+
+1. Update the `material-components-web` dependency in the catalog's `package.json` to the new patch version
+1. Run `npm start` and glance through the catalog pages to make sure everything looks normal
+1. Send a PR for the dependency update, then run `npm deploy` once it's merged to master
+
+### For Minor Releases
+
+We typically maintain a `next` branch on the MDC Web Catalog repository which follows MDC Web pre-releases, to keep
+ahead of breaking changes in new releases.
+
+In the event no pre-releases were tagged, the above process for patch releases would be followed, but would require
+checking for necessary updates to accommodate breaking changes in MDC Web.
+
+Below is the process when a `next` branch is used:
 
 1. Ensure you have the latest `master` checked out: `git checkout master && git pull`
 1. Create a new branch, e.g.: `git checkout -b chore/0.36.0`
 1. Merge `next` into the branch: `git merge next`
 1. Deal with any conflicts if necessary
-1. Update `package.json` to reference the newly-released final versions of MDC Web packages
+1. Update `package.json` to reference the newly-released minor version of `material-components-web`
 1. `rm -rf node_modules && npm i` to cause `package-lock.json` to update
 1. `npm start` and test the catalog, in case any further breaking changes occurred since the last pre-release
 1. `npm run build` to double-check that there are no unforeseen errors when building resources for deployment
diff --git a/karma.conf.js b/karma.conf.js
index 47e1c0f023b..4fddec16d85 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -20,43 +20,75 @@ const webpackConfig = require('./webpack.config')[0];
 const USING_TRAVISCI = Boolean(process.env.TRAVIS);
 const USING_SL = Boolean(process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY);
 
-const SL_LAUNCHERS = {
+const LOCAL_LAUNCHERS = {
+  /** See https://github.com/travis-ci/travis-ci/issues/8836#issuecomment-348248951 */
+  'ChromeHeadlessNoSandbox': {
+    base: 'ChromeHeadless',
+    flags: ['--no-sandbox'],
+  },
+};
+
+const SAUCE_LAUNCHERS = {
+  /*
+   * Chrome (desktop)
+   */
+
   'sl-chrome-stable': {
     base: 'SauceLabs',
     browserName: 'chrome',
     version: 'latest',
     platform: 'macOS 10.12',
+    extendedDebugging: true,
   },
-  'sl-chrome-beta': {
-    base: 'SauceLabs',
-    browserName: 'chrome',
-    version: 'dev',
-    platform: 'macOS 10.12',
-  },
-  'sl-chrome-previous': {
-    base: 'SauceLabs',
-    browserName: 'chrome',
-    version: 'latest-1',
-    platform: 'macOS 10.12',
-  },
+  // 'sl-chrome-beta': {
+  //   base: 'SauceLabs',
+  //   browserName: 'chrome',
+  //   version: 'dev',
+  //   platform: 'macOS 10.12',
+  //   extendedDebugging: true,
+  // },
+  // 'sl-chrome-previous': {
+  //   base: 'SauceLabs',
+  //   browserName: 'chrome',
+  //   version: 'latest-1',
+  //   platform: 'macOS 10.12',
+  //   extendedDebugging: true,
+  // },
+
+  /*
+   * Firefox
+   */
+
   'sl-firefox-stable': {
     base: 'SauceLabs',
     browserName: 'firefox',
     version: 'latest',
     platform: 'Windows 10',
+    extendedDebugging: true,
   },
-  'sl-firefox-previous': {
-    base: 'SauceLabs',
-    browserName: 'firefox',
-    version: 'latest-1',
-    platform: 'Windows 10',
-  },
+  // 'sl-firefox-previous': {
+  //   base: 'SauceLabs',
+  //   browserName: 'firefox',
+  //   version: 'latest-1',
+  //   platform: 'Windows 10',
+  //   extendedDebugging: true,
+  // },
+
+  /*
+   * IE
+   */
+
   'sl-ie': {
     base: 'SauceLabs',
     browserName: 'internet explorer',
     version: '11',
     platform: 'Windows 8.1',
   },
+
+  /*
+   * Edge
+   */
+
   // TODO(sgomes): Re-enable Edge and Safari after Sauce Labs problems are fixed.
   // 'sl-edge': {
   //   base: 'SauceLabs',
@@ -64,6 +96,11 @@ const SL_LAUNCHERS = {
   //   version: 'latest',
   //   platform: 'Windows 10',
   // },
+
+  /*
+   * Safari (desktop)
+   */
+
   // 'sl-safari-stable': {
   //   base: 'SauceLabs',
   //   browserName: 'safari',
@@ -76,6 +113,11 @@ const SL_LAUNCHERS = {
   //   version: '9.0',
   //   platform: 'OS X 10.11',
   // },
+
+  /*
+   * Safari (mobile)
+   */
+
   'sl-ios-safari-latest': {
     base: 'SauceLabs',
     deviceName: 'iPhone Simulator',
@@ -92,6 +134,16 @@ const SL_LAUNCHERS = {
   // },
 };
 
+const getLaunchers = () => {
+  if (USING_TRAVISCI) {
+    return USING_SL ? SAUCE_LAUNCHERS : LOCAL_LAUNCHERS;
+  } else {
+    return ['Chrome'];
+  }
+};
+
+const getBrowsers = () => Object.keys(getLaunchers());
+
 module.exports = function(config) {
   config.set({
     basePath: '',
@@ -106,12 +158,12 @@ module.exports = function(config) {
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
-    browsers: determineBrowsers(),
+    browsers: getBrowsers(),
     browserDisconnectTimeout: 40000,
     browserNoActivityTimeout: 120000,
     captureTimeout: 240000,
     concurrency: USING_SL ? 4 : Infinity,
-    customLaunchers: SL_LAUNCHERS,
+    customLaunchers: getLaunchers(),
 
     coverageReporter: {
       dir: 'coverage',
@@ -126,6 +178,10 @@ module.exports = function(config) {
       mocha: {
         reporter: 'html',
         ui: 'qunit',
+
+        // Number of milliseconds to wait for an individual `test(...)` function to complete.
+        // The default is 2000.
+        timeout: 10000,
       },
     },
 
@@ -152,23 +208,26 @@ module.exports = function(config) {
     },
   });
 
-  // See https://github.com/karma-runner/karma-sauce-launcher/issues/73
-  if (USING_TRAVISCI) {
-    config.set({
-      sauceLabs: {
+  if (USING_SL) {
+    const sauceLabsConfig = {
+      username: process.env.SAUCE_USERNAME,
+      accessKey: process.env.SAUCE_ACCESS_KEY,
+    };
+
+    if (USING_TRAVISCI) {
+      // See https://github.com/karma-runner/karma-sauce-launcher/issues/73
+      Object.assign(sauceLabsConfig, {
         testName: 'Material Components Web Unit Tests - CI',
         tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
-        username: process.env.SAUCE_USERNAME,
-        accessKey: process.env.SAUCE_ACCESS_KEY,
         startConnect: false,
-      },
+      });
+    }
+
+    config.set({
+      sauceLabs: sauceLabsConfig,
       // Attempt to de-flake Sauce Labs tests on TravisCI.
       transports: ['polling'],
       browserDisconnectTolerance: 3,
     });
   }
 };
-
-function determineBrowsers() {
-  return USING_SL ? Object.keys(SL_LAUNCHERS) : ['Chrome'];
-}
diff --git a/package-lock.json b/package-lock.json
index ac713744181..6a4fe7b2f41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10313,6 +10313,15 @@
           "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
           "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
           "dev": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
+          "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
+          "dev": true,
+          "requires": {
+            "extsprintf": "1.0.2"
+          }
         }
       }
     },
@@ -18498,12 +18507,28 @@
       "dev": true
     },
     "verror": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
-      "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
       "dev": true,
       "requires": {
-        "extsprintf": "1.0.2"
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        },
+        "extsprintf": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz",
+          "integrity": "sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=",
+          "dev": true
+        }
       }
     },
     "vfile": {
diff --git a/package.json b/package.json
index 878090ff2e1..a5db57c6fda 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
     "to-slug-case": "^1.0.0",
     "useragent": "^2.3.0",
     "validate-commit-msg": "^2.6.1",
+    "verror": "^1.10.0",
     "webpack": "^3.0.0",
     "webpack-dev-server": "^2.4.3"
   },
diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
index 3f4a8cf0a6b..082aa387e63 100644
--- a/packages/mdc-chips/README.md
+++ b/packages/mdc-chips/README.md
@@ -248,10 +248,6 @@ Method Signature | Description
 `addClassToLeadingIcon(className: string) => void` | Adds a class to the leading icon element
 `removeClassFromLeadingIcon(className: string) => void` | Removes a class from the leading icon element
 `eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise
-`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
-`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
-`registerTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the trailing icon element
-`deregisterTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the trailing icon element
 `notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with
 `notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with
 `notifyRemoval() => void` | Emits a custom event `MDCChip:removal` denoting the chip will be removed
@@ -267,8 +263,6 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `hasClass(className: string) => boolean` | Returns whether the chip set element has the given class
-`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event
-`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event
 `removeChip(chip: MDCChip) => void` | Removes the chip object from the chip set
 
 ### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`
@@ -292,3 +286,5 @@ Method Signature | Description
 --- | ---
 `select(chipFoundation: MDCChipFoundation) => void` | Selects the given chip
 `deselect(chipFoundation: MDCChipFoundation) => void` | Deselects the given chip
+`handleChipInteraction(evt: Event) => void` | Handles a custom `MDCChip:interaction` event on the root element
+`handleChipRemoval(evt: Event) => void` | Handles a custom `MDCChip:removal` event on the root element
diff --git a/packages/mdc-chips/chip-set/adapter.js b/packages/mdc-chips/chip-set/adapter.js
index fe7ac7238d6..6c4f2e11f02 100644
--- a/packages/mdc-chips/chip-set/adapter.js
+++ b/packages/mdc-chips/chip-set/adapter.js
@@ -38,20 +38,6 @@ class MDCChipSetAdapter {
    */
   hasClass(className) {}
 
-  /**
-   * Registers an event handler on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!MDCChipInteractionEventType): undefined} handler
-   */
-  registerInteractionHandler(evtType, handler) {}
-
-  /**
-   * Deregisters an event handler on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!MDCChipInteractionEventType): undefined} handler
-   */
-  deregisterInteractionHandler(evtType, handler) {}
-
   /**
    * Removes the chip object from the chip set.
    * @param {!Object} chip
diff --git a/packages/mdc-chips/chip-set/foundation.js b/packages/mdc-chips/chip-set/foundation.js
index b3f745dff87..c0955bf8ae1 100644
--- a/packages/mdc-chips/chip-set/foundation.js
+++ b/packages/mdc-chips/chip-set/foundation.js
@@ -44,8 +44,6 @@ class MDCChipSetFoundation extends MDCFoundation {
   static get defaultAdapter() {
     return /** @type {!MDCChipSetAdapter} */ ({
       hasClass: () => {},
-      registerInteractionHandler: () => {},
-      deregisterInteractionHandler: () => {},
       removeChip: () => {},
     });
   }
@@ -61,25 +59,6 @@ class MDCChipSetFoundation extends MDCFoundation {
      * @private {!Array<!MDCChipFoundation>}
      */
     this.selectedChips_ = [];
-
-    /** @private {function(!MDCChipInteractionEventType): undefined} */
-    this.chipInteractionHandler_ = (evt) => this.handleChipInteraction_(evt);
-    /** @private {function(!MDCChipInteractionEventType): undefined} */
-    this.chipRemovalHandler_ = (evt) => this.handleChipRemoval_(evt);
-  }
-
-  init() {
-    this.adapter_.registerInteractionHandler(
-      MDCChipFoundation.strings.INTERACTION_EVENT, this.chipInteractionHandler_);
-    this.adapter_.registerInteractionHandler(
-      MDCChipFoundation.strings.REMOVAL_EVENT, this.chipRemovalHandler_);
-  }
-
-  destroy() {
-    this.adapter_.deregisterInteractionHandler(
-      MDCChipFoundation.strings.INTERACTION_EVENT, this.chipInteractionHandler_);
-    this.adapter_.deregisterInteractionHandler(
-      MDCChipFoundation.strings.REMOVAL_EVENT, this.chipRemovalHandler_);
   }
 
   /**
@@ -119,7 +98,7 @@ class MDCChipSetFoundation extends MDCFoundation {
    * @param {!MDCChipInteractionEventType} evt
    * @private
    */
-  handleChipInteraction_(evt) {
+  handleChipInteraction(evt) {
     const chipFoundation = evt.detail.chip.foundation;
     if (this.adapter_.hasClass(cssClasses.CHOICE) || this.adapter_.hasClass(cssClasses.FILTER)) {
       if (chipFoundation.isSelected()) {
@@ -135,7 +114,7 @@ class MDCChipSetFoundation extends MDCFoundation {
    * @param {!MDCChipInteractionEventType} evt
    * @private
    */
-  handleChipRemoval_(evt) {
+  handleChipRemoval(evt) {
     const {chip} = evt.detail;
     this.deselect(chip.foundation);
     this.adapter_.removeChip(chip);
diff --git a/packages/mdc-chips/chip-set/index.js b/packages/mdc-chips/chip-set/index.js
index eb74ab4b169..78f9eca4e4d 100644
--- a/packages/mdc-chips/chip-set/index.js
+++ b/packages/mdc-chips/chip-set/index.js
@@ -19,7 +19,7 @@ import MDCComponent from '@material/base/component';
 
 import MDCChipSetAdapter from './adapter';
 import MDCChipSetFoundation from './foundation';
-import {MDCChip} from '../chip/index';
+import {MDCChip, MDCChipFoundation} from '../chip/index';
 
 /**
  * @extends {MDCComponent<!MDCChipSetFoundation>}
@@ -36,6 +36,11 @@ class MDCChipSet extends MDCComponent {
     this.chips;
     /** @type {(function(!Element): !MDCChip)} */
     this.chipFactory_;
+
+    /** @private {?function(?Event): undefined} */
+    this.handleChipInteraction_;
+    /** @private {?function(?Event): undefined} */
+    this.handleChipRemoval_;
   }
 
   /**
@@ -55,18 +60,32 @@ class MDCChipSet extends MDCComponent {
     this.chips = this.instantiateChips_(this.chipFactory_);
   }
 
-  destroy() {
-    this.chips.forEach((chip) => {
-      chip.destroy();
-    });
-  }
-
   initialSyncWithDOM() {
     this.chips.forEach((chip) => {
       if (chip.isSelected()) {
         this.foundation_.select(chip.foundation);
       }
     });
+
+    this.handleChipInteraction_ = (evt) => this.foundation_.handleChipInteraction(evt);
+    this.handleChipRemoval_ = (evt) => this.foundation_.handleChipRemoval(evt);
+    this.root_.addEventListener(
+      MDCChipFoundation.strings.INTERACTION_EVENT, this.handleChipInteraction_);
+    this.root_.addEventListener(
+      MDCChipFoundation.strings.REMOVAL_EVENT, this.handleChipRemoval_);
+  }
+
+  destroy() {
+    this.chips.forEach((chip) => {
+      chip.destroy();
+    });
+
+    this.root_.removeEventListener(
+      MDCChipFoundation.strings.INTERACTION_EVENT, this.handleChipInteraction_);
+    this.root_.removeEventListener(
+      MDCChipFoundation.strings.REMOVAL_EVENT, this.handleChipRemoval_);
+
+    super.destroy();
   }
 
   /**
@@ -83,8 +102,6 @@ class MDCChipSet extends MDCComponent {
   getDefaultFoundation() {
     return new MDCChipSetFoundation(/** @type {!MDCChipSetAdapter} */ (Object.assign({
       hasClass: (className) => this.root_.classList.contains(className),
-      registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
-      deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
       removeChip: (chip) => {
         const index = this.chips.indexOf(chip);
         this.chips.splice(index, 1);
diff --git a/packages/mdc-chips/chip/adapter.js b/packages/mdc-chips/chip/adapter.js
index d78d2b21e6a..997db72eff3 100644
--- a/packages/mdc-chips/chip/adapter.js
+++ b/packages/mdc-chips/chip/adapter.js
@@ -67,34 +67,6 @@ class MDCChipAdapter {
    */
   eventTargetHasClass(target, className) {}
 
-  /**
-   * Registers an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  registerEventHandler(evtType, handler) {}
-
-  /**
-   * Deregisters an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  deregisterEventHandler(evtType, handler) {}
-
-  /**
-   * Registers an event listener on the trailing icon element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  registerTrailingIconInteractionHandler(evtType, handler) {}
-
-  /**
-   * Deregisters an event listener on the trailing icon element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  deregisterTrailingIconInteractionHandler(evtType, handler) {}
-
   /**
    * Emits a custom "MDCChip:interaction" event denoting the chip has been
    * interacted with (typically on click or keydown).
diff --git a/packages/mdc-chips/chip/foundation.js b/packages/mdc-chips/chip/foundation.js
index 4f5823a6f20..4535db25509 100644
--- a/packages/mdc-chips/chip/foundation.js
+++ b/packages/mdc-chips/chip/foundation.js
@@ -48,10 +48,6 @@ class MDCChipFoundation extends MDCFoundation {
       addClassToLeadingIcon: () => {},
       removeClassFromLeadingIcon: () => {},
       eventTargetHasClass: () => {},
-      registerEventHandler: () => {},
-      deregisterEventHandler: () => {},
-      registerTrailingIconInteractionHandler: () => {},
-      deregisterTrailingIconInteractionHandler: () => {},
       notifyInteraction: () => {},
       notifyTrailingIconInteraction: () => {},
       notifyRemoval: () => {},
@@ -71,32 +67,6 @@ class MDCChipFoundation extends MDCFoundation {
      * @private {boolean}
      * */
     this.shouldRemoveOnTrailingIconClick_ = true;
-    /** @private {function(!Event): undefined} */
-    this.interactionHandler_ = (evt) => this.handleInteraction(evt);
-    /** @private {function(!Event): undefined} */
-    this.transitionEndHandler_ = (evt) => this.handleTransitionEnd(evt);
-    /** @private {function(!Event): undefined} */
-    this.trailingIconInteractionHandler_ = (evt) => this.handleTrailingIconInteraction(evt);
-  }
-
-  init() {
-    ['click', 'keydown'].forEach((evtType) => {
-      this.adapter_.registerEventHandler(evtType, this.interactionHandler_);
-    });
-    this.adapter_.registerEventHandler('transitionend', this.transitionEndHandler_);
-    ['click', 'keydown', 'touchstart', 'pointerdown', 'mousedown'].forEach((evtType) => {
-      this.adapter_.registerTrailingIconInteractionHandler(evtType, this.trailingIconInteractionHandler_);
-    });
-  }
-
-  destroy() {
-    ['click', 'keydown'].forEach((evtType) => {
-      this.adapter_.deregisterEventHandler(evtType, this.interactionHandler_);
-    });
-    this.adapter_.deregisterEventHandler('transitionend', this.transitionEndHandler_);
-    ['click', 'keydown', 'touchstart', 'pointerdown', 'mousedown'].forEach((evtType) => {
-      this.adapter_.deregisterTrailingIconInteractionHandler(evtType, this.trailingIconInteractionHandler_);
-    });
   }
 
   /**
diff --git a/packages/mdc-chips/chip/index.js b/packages/mdc-chips/chip/index.js
index 9ba742af05f..78de50ab80f 100644
--- a/packages/mdc-chips/chip/index.js
+++ b/packages/mdc-chips/chip/index.js
@@ -22,6 +22,8 @@ import MDCChipAdapter from './adapter';
 import {MDCChipFoundation} from './foundation';
 import {strings} from './constants';
 
+const INTERACTION_EVENTS = ['click', 'keydown'];
+
 /**
  * @extends {MDCComponent<!MDCChipFoundation>}
  * @final
@@ -35,8 +37,17 @@ class MDCChip extends MDCComponent {
 
     /** @private {?Element} */
     this.leadingIcon_;
+    /** @private {?Element} */
+    this.trailingIcon_;
     /** @private {!MDCRipple} */
     this.ripple_;
+
+    /** @private {?function(?Event): undefined} */
+    this.handleInteraction_;
+    /** @private {?function(!Event): undefined} */
+    this.handleTransitionEnd_;
+    /** @private {function(!Event): undefined} */
+    this.handleTrailingIconInteraction_;
   }
 
   /**
@@ -49,6 +60,7 @@ class MDCChip extends MDCComponent {
 
   initialize() {
     this.leadingIcon_ = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
+    this.trailingIcon_ = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
 
     // Adjust ripple size for chips with animated growing width. This applies when filter chips without
     // a leading icon are selected, and a leading checkmark will cause the chip width to expand.
@@ -69,8 +81,37 @@ class MDCChip extends MDCComponent {
     }
   }
 
+  initialSyncWithDOM() {
+    this.handleInteraction_ = (evt) => this.foundation_.handleInteraction(evt);
+    this.handleTransitionEnd_ = (evt) => this.foundation_.handleTransitionEnd(evt);
+    this.handleTrailingIconInteraction_ = (evt) => this.foundation_.handleTrailingIconInteraction(evt);
+
+    INTERACTION_EVENTS.forEach((evtType) => {
+      this.root_.addEventListener(evtType, this.handleInteraction_);
+    });
+    this.root_.addEventListener('transitionend', this.handleTransitionEnd_);
+
+    if (this.trailingIcon_) {
+      INTERACTION_EVENTS.forEach((evtType) => {
+        this.trailingIcon_.addEventListener(evtType, this.handleTrailingIconInteraction_);
+      });
+    }
+  }
+
   destroy() {
     this.ripple_.destroy();
+
+    INTERACTION_EVENTS.forEach((evtType) => {
+      this.root_.removeEventListener(evtType, this.handleInteraction_);
+    });
+    this.root_.removeEventListener('transitionend', this.handleTransitionEnd_);
+
+    if (this.trailingIcon_) {
+      INTERACTION_EVENTS.forEach((evtType) => {
+        this.trailingIcon_.removeEventListener(evtType, this.handleTrailingIconInteraction_);
+      });
+    }
+
     super.destroy();
   }
 
@@ -131,20 +172,6 @@ class MDCChip extends MDCComponent {
         }
       },
       eventTargetHasClass: (target, className) => target.classList.contains(className),
-      registerEventHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
-      deregisterEventHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
-      registerTrailingIconInteractionHandler: (evtType, handler) => {
-        const trailingIconEl = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
-        if (trailingIconEl) {
-          trailingIconEl.addEventListener(evtType, handler);
-        }
-      },
-      deregisterTrailingIconInteractionHandler: (evtType, handler) => {
-        const trailingIconEl = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
-        if (trailingIconEl) {
-          trailingIconEl.removeEventListener(evtType, handler);
-        }
-      },
       notifyInteraction: () => this.emit(strings.INTERACTION_EVENT, {chip: this}, true /* shouldBubble */),
       notifyTrailingIconInteraction: () => this.emit(
         strings.TRAILING_ICON_INTERACTION_EVENT, {chip: this}, true /* shouldBubble */),
diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
index 74e2f7493e3..75c27d9e878 100644
--- a/packages/mdc-fab/README.md
+++ b/packages/mdc-fab/README.md
@@ -77,6 +77,19 @@ const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));
 
 > See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
 
+## Variants
+
+### Extended FAB
+
+```html
+<button class="mdc-fab mdc-fab--extended">
+  <span class="material-icons mdc-fab__icon">add</span>
+  <span class="mdc-fab__label">Create</span>
+</button>
+```
+
+> _NOTE:_ The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.
+
 ## Style Customization
 
 ### CSS Classes
diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
index 0c34bf80106..3a949b0eb48 100644
--- a/packages/mdc-list/README.md
+++ b/packages/mdc-list/README.md
@@ -58,31 +58,27 @@ in the double line list style as defined by
 <ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
   <li class="mdc-list-item">
     <span class="mdc-list-item__text">
-      First-line text
-      <span class="mdc-list-item__secondary-text">
-        Second-line text
-      </span>
+      <span class="mdc-list-item__primary-text">First-line text</span>
+      <span class="mdc-list-item__secondary-text">Second-line text</span>
     </span>
   </li>
   <li class="mdc-list-item">
     <span class="mdc-list-item__text">
-      First-line text
-      <span class="mdc-list-item__secondary-text">
-        Second-line text
-      </span>
+      <span class="mdc-list-item__primary-text">First-line text</span>
+      <span class="mdc-list-item__secondary-text">Second-line text</span>
     </span>
   </li>
   <li class="mdc-list-item">
     <span class="mdc-list-item__text">
-      First-line text
-      <span class="mdc-list-item__secondary-text">
-        Second-line text
-      </span>
+      <span class="mdc-list-item__primary-text">First-line text</span>
+      <span class="mdc-list-item__secondary-text">Second-line text</span>
     </span>
   </li>
 </ul>
 ```
 
+> NOTE: Make sure that there are no white-space characters before primary and secondary text.
+
 ### List Groups
 
 Multiple related lists can be grouped together using the `mdc-list-group` class on a containing element.
@@ -185,7 +181,8 @@ CSS Class | Description
 `mdc-list--avatar-list` | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger.
 `mdc-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines).
 `mdc-list-item` | Mandatory, for the list item element.
-`mdc-list-item__text` |	Optional, primary text for the row (displayed as middle column of the list item).
+`mdc-list-item__text` |	Optional, wrapper for two line list item text content (displayed as middle column of the list item).
+`mdc-list-item__primary-text` | Optional, primary text for the list item. Should be the child of `mdc-list-item__text`.
 `mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`.
 `mdc-list-item--selected` | Optional, styles the row in an selected* state.
 `mdc-list-item--activated` | Optional, styles the row in an activated* state.
diff --git a/packages/mdc-list/mdc-list.scss b/packages/mdc-list/mdc-list.scss
index 72e73f263be..f10d791ecb3 100644
--- a/packages/mdc-list/mdc-list.scss
+++ b/packages/mdc-list/mdc-list.scss
@@ -94,23 +94,46 @@
   @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
 }
 
-.mdc-list-item__text,
-.mdc-list-item__secondary-text {
+.mdc-list-item__text {
   @include mdc-typography-overflow-ellipsis;
 
+  align-self: flex-start;
+}
+
+$mdc-list-item-primary-text-baseline-height_: 32px;
+$mdc-list-item-secondary-text-baseline-height_: 20px;
+$mdc-list-dense-item-primary-text-baseline-height_: 24px;
+
+.mdc-list-item__primary-text {
+  @include mdc-typography-overflow-ellipsis;
+  @include mdc-typography-baseline-top($mdc-list-item-primary-text-baseline-height_);
+  @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);
+
   display: block;
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list--dense & {
+    @include mdc-typography-baseline-top($mdc-list-dense-item-primary-text-baseline-height_);
+    @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);
+  }
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-list-item__secondary-text {
   @include mdc-typography(body2);
-}
+  @include mdc-typography-overflow-ellipsis;
+  @include mdc-typography-baseline-top($mdc-list-item-secondary-text-baseline-height_);
 
-// Match the font size to the primary text when dense
-// stylelint-disable plugin/selector-bem-pattern
-.mdc-list--dense .mdc-list-item__secondary-text {
-  font-size: inherit;
+  display: block;
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list--dense & {
+    @include mdc-typography-baseline-top($mdc-list-item-secondary-text-baseline-height_);
+
+    font-size: inherit;
+  }
+  // stylelint-enable plugin/selector-bem-pattern
 }
-// stylelint-enable plugin/selector-bem-pattern
 
 // stylelint-disable plugin/selector-bem-pattern
 .mdc-list--dense .mdc-list-item {
@@ -140,7 +163,7 @@
 }
 
 .mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
-  height: 48px;
+  height: 60px;
 }
 
 .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic {
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index b1499fa6213..bed761707dc 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -9,8 +9,8 @@ path: /catalog/input-controls/select-menus/
 ## Important - Default Style Deprecation Notice
 
 The existing default select style will be changed in an upcoming release. The Material spec indicates that
-the default style will be the filled variant (currently referred to as the box variant). This will become the  
-default style. Continuing to add the `mdc-select--box` class to the select will result in no change. 
+the default style will be the filled variant (currently referred to as the box variant). This will become the
+default style. Continuing to add the `mdc-select--box` class to the select will result in no change.
 
 # Select Menus
 
@@ -100,7 +100,7 @@ modifier class on the root element.
 
 ### Outlined Select
 
-The Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the 
+The Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the
 `mdc-select--outlined` modifier class on the root element.
 
 ```html
@@ -247,19 +247,14 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `floatLabel(value: boolean) => void` | Floats or defloats label. |
 | `activateBottomLine() => void` | Activates the bottom line component. |
 | `deactivateBottomLine() => void` | Deactivates the bottom line component. |
-| `setDisabled(disabled: boolean) => void` | Sets the `disabled` property of the `<select>` element. |
-| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` on the `<select>` element. |
-| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` on the `<select>` element. |
-| `getSelectedIndex() => number` | Returns the selected index of the `<select>` element. |
-| `setSelectedIndex(index: number) => void` | Sets the selected index of the `<select>` element. |
-| `getValue() => string` | Returns the value selected on the `<select>` element. |
-| `setValue(value: string) => void` | Sets the value of the `<select>` element. |
+| `getValue() => string` | Returns the value selected on the `select` element. |
 
 ### `MDCSelectFoundation`
 
 | Method Signature | Description |
 | --- | --- |
 | `notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline. |
-| `setValue(value: string) => void` | Sets the value of the component. |
-| `setDisabled(disabled: boolean) => void` | Adds/removes disabled class, and sets disabled attribute on the component. |
-| `setSelectedIndex(selectedIndex: number) => void` | Sets the selected index of the component. |
+| `updateDisabledStyle(disabled: boolean) => void` | Updates appearance based on disabled state. This must be called whenever the `disabled` state changes. |
+| `handleFocus() => void` | Handles a focus event on the `select` element. |
+| `handleBlur() => void` | Handles a blur event on the `select` element. |
+| `handleChange() => void` | Handles a change to the `select` element's value. This must be called both for `change` events and programmatic changes requested via the component API. |
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 3b8f2a2209a..1bb741c64d0 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -38,13 +38,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
       floatLabel: (/* value: boolean */) => {},
       activateBottomLine: () => {},
       deactivateBottomLine: () => {},
-      registerInteractionHandler: (/* type: string, handler: EventListener */) => {},
-      deregisterInteractionHandler: (/* type: string, handler: EventListener */) => {},
-      getSelectedIndex: () => /* number */ -1,
-      setSelectedIndex: (/* index: number */) => {},
-      setDisabled: (/* disabled: boolean */) => {},
-      getValue: () => /* string */ '',
-      setValue: (/* value: string */) => {},
+      getValue: () => {},
       isRtl: () => false,
       hasLabel: () => {},
       getLabelWidth: () => {},
@@ -59,34 +53,10 @@ export default class MDCSelectFoundation extends MDCFoundation {
 
     this.focusHandler_ = (evt) => this.handleFocus_(evt);
     this.blurHandler_ = (evt) => this.handleBlur_(evt);
-    this.selectionHandler_ = (evt) => this.handleSelect_(evt);
   }
 
-  init() {
-    this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
-    this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
-    this.adapter_.registerInteractionHandler('change', this.selectionHandler_);
-  }
-
-  destroy() {
-    this.adapter_.deregisterInteractionHandler('focus', this.focusHandler_);
-    this.adapter_.deregisterInteractionHandler('blur', this.blurHandler_);
-    this.adapter_.deregisterInteractionHandler('change', this.selectionHandler_);
-  }
-
-  setSelectedIndex(index) {
-    this.adapter_.setSelectedIndex(index);
-    this.floatLabelWithValue_();
-  }
-
-  setValue(value) {
-    this.adapter_.setValue(value);
-    this.setSelectedIndex(this.adapter_.getSelectedIndex());
-  }
-
-  setDisabled(disabled) {
+  updateDisabledStyle(disabled) {
     const {DISABLED} = MDCSelectFoundation.cssClasses;
-    this.adapter_.setDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(DISABLED);
     } else {
@@ -94,27 +64,23 @@ export default class MDCSelectFoundation extends MDCFoundation {
     }
   }
 
-  floatLabelWithValue_() {
+  handleChange() {
     const optionHasValue = this.adapter_.getValue().length > 0;
     this.adapter_.floatLabel(optionHasValue);
     this.notchOutline(optionHasValue);
   }
 
-  handleFocus_() {
+  handleFocus() {
     this.adapter_.floatLabel(true);
     this.notchOutline(true);
     this.adapter_.activateBottomLine();
   }
 
-  handleBlur_() {
-    this.floatLabelWithValue_();
+  handleBlur() {
+    this.handleChange();
     this.adapter_.deactivateBottomLine();
   }
 
-  handleSelect_() {
-    this.setSelectedIndex(this.adapter_.getSelectedIndex());
-  }
-
   /**
    * Opens/closes the notched outline.
    * @param {boolean} openNotch
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
index 92191db0c17..9799ca0d706 100644
--- a/packages/mdc-select/index.js
+++ b/packages/mdc-select/index.js
@@ -35,7 +35,8 @@ export class MDCSelect extends MDCComponent {
   }
 
   set value(value) {
-    this.foundation_.setValue(value);
+    this.nativeControl_.value = value;
+    this.foundation_.handleChange();
   }
 
   get selectedIndex() {
@@ -43,7 +44,8 @@ export class MDCSelect extends MDCComponent {
   }
 
   set selectedIndex(selectedIndex) {
-    this.foundation_.setSelectedIndex(selectedIndex);
+    this.nativeControl_.selectedIndex = selectedIndex;
+    this.foundation_.handleChange();
   }
 
   get disabled() {
@@ -51,7 +53,8 @@ export class MDCSelect extends MDCComponent {
   }
 
   set disabled(disabled) {
-    this.foundation_.setDisabled(disabled);
+    this.nativeControl_.disabled = disabled;
+    this.foundation_.updateDisabledStyle(disabled);
   }
 
   /**
@@ -94,6 +97,38 @@ export class MDCSelect extends MDCComponent {
     return new MDCRipple(this.root_, foundation);
   }
 
+  initialSyncWithDOM() {
+    this.handleChange_ = () => this.foundation_.handleChange();
+    this.handleFocus_ = () => this.foundation_.handleFocus();
+    this.handleBlur_ = () => this.foundation_.handleBlur();
+
+    this.nativeControl_.addEventListener('change', this.handleChange_);
+    this.nativeControl_.addEventListener('focus', this.handleFocus_);
+    this.nativeControl_.addEventListener('blur', this.handleBlur_);
+
+    // Initially sync floating label
+    this.foundation_.handleChange();
+
+    if (this.nativeControl_.disabled) {
+      this.disabled = true;
+    }
+  }
+
+  destroy() {
+    this.nativeControl_.removeEventListener('change', this.handleChange_);
+    this.nativeControl_.removeEventListener('focus', this.handleFocus_);
+    this.nativeControl_.removeEventListener('blur', this.handleBlur_);
+
+    if (this.ripple) {
+      this.ripple.destroy();
+    }
+    if (this.outline_) {
+      this.outline_.destroy();
+    }
+
+    super.destroy();
+  }
+
   getDefaultFoundation() {
     return new MDCSelectFoundation((Object.assign({
       addClass: (className) => this.root_.classList.add(className),
@@ -109,39 +144,14 @@ export class MDCSelect extends MDCComponent {
           this.lineRipple_.deactivate();
         }
       },
-      setDisabled: (disabled) => this.nativeControl_.disabled = disabled,
-      registerInteractionHandler: (type, handler) => this.nativeControl_.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) => this.nativeControl_.removeEventListener(type, handler),
-      getSelectedIndex: () => this.nativeControl_.selectedIndex,
-      setSelectedIndex: (index) => this.nativeControl_.selectedIndex = index,
-      getValue: () => this.nativeControl_.value,
-      setValue: (value) => this.nativeControl_.value = value,
       isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
+      getValue: () => this.nativeControl_.value,
     },
     this.getOutlineAdapterMethods_(),
     this.getLabelAdapterMethods_()))
     );
   }
 
-  initialSyncWithDOM() {
-    // needed to sync floating label
-    this.selectedIndex = this.nativeControl_.selectedIndex;
-
-    if (this.nativeControl_.disabled) {
-      this.disabled = true;
-    }
-  }
-
-  destroy() {
-    if (this.ripple) {
-      this.ripple.destroy();
-    }
-    if (this.outline_) {
-      this.outline_.destroy();
-    }
-    super.destroy();
-  }
-
   /**
    * @return {!{
    *   notchOutline: function(number, boolean): undefined,
diff --git a/packages/mdc-switch/package.json b/packages/mdc-switch/package.json
index 81dca096a31..966b32a604b 100644
--- a/packages/mdc-switch/package.json
+++ b/packages/mdc-switch/package.json
@@ -26,3 +26,4 @@
     "access": "public"
   }
 }
+
diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md
index 1466015df41..927d6acb1a1 100644
--- a/packages/mdc-typography/README.md
+++ b/packages/mdc-typography/README.md
@@ -97,6 +97,8 @@ Mixin | Description
 `mdc-typography-base` | Sets the font to Roboto
 `mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto
 `mdc-typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis
+`mdc-typography-baseline-top($distance)` | Sets the baseline height of a text element from top.
+`mdc-typography-baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `mdc-typography-baseline-top` when setting baseline distance to following text element.
 
 > **A note about `mdc-typography-overflow-ellipsis`**, `mdc-typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.
 
diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
index 29465ca077f..0e625bfa728 100644
--- a/packages/mdc-typography/_mixins.scss
+++ b/packages/mdc-typography/_mixins.scss
@@ -40,3 +40,28 @@
   white-space: nowrap;
   overflow: hidden;
 }
+
+@mixin mdc-typography-baseline-top($distance) {
+  margin-top: 0;
+  line-height: normal;
+
+  &::before {
+    @include mdc-typography-baseline-strut_($distance, 0);
+  }
+}
+
+@mixin mdc-typography-baseline-bottom($distance) {
+  margin-bottom: -1 * $distance;
+
+  &::after {
+    @include mdc-typography-baseline-strut_($distance, -1 * $distance);
+  }
+}
+
+@mixin mdc-typography-baseline-strut_($distance, $vertical-align) {
+  display: inline-block;
+  width: 0;
+  height: $distance;
+  content: "";
+  vertical-align: $vertical-align;
+}
diff --git a/test/screenshot/README.md b/test/screenshot/README.md
index b3b39c16764..be4eefa961d 100644
--- a/test/screenshot/README.md
+++ b/test/screenshot/README.md
@@ -6,6 +6,9 @@ Prevent visual regressions by running screenshot tests on every PR.
 
 ### API credentials
 
+CBT credentials can be found on the [CrossBrowserTesting.com > Account](https://crossbrowsertesting.com/account) page. \
+Your `Authkey` is listed under the `User Profile` section.
+
 Add the following to your `~/.bash_profile` or `~/.bashrc` file:
 
 ```bash
@@ -13,12 +16,17 @@ export MDC_CBT_USERNAME='you@example.com'
 export MDC_CBT_AUTHKEY='example'
 ```
 
-Credentials can be found here:
+Make the env vars available to existing terminal(s):
+
+```bash
+[[ -f ~/.bash_profile ]] && source ~/.bash_profile || source ~/.bashrc
+```
 
-* [CrossBrowserTesting.com > Account](https://crossbrowsertesting.com/account) \
-    `Authkey` is listed under the `User Profile` section
-* [Google Cloud Console > IAM & admin > Service accounts](https://console.cloud.google.com/iam-admin/serviceaccounts?project=material-components-web) \
-    Click the `︙` icon on the right side of the service account, then choose `Create key` 
+Then authorize your GCP account:
+
+```bash
+gcloud auth login
+```
 
 ### Test your changes
 
@@ -45,6 +53,18 @@ https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/14/03_37
 
 ## Basic usage
 
+### Local dev server
+
+The deprecated `npm run dev` command has been replaced by:
+
+```bash
+npm start
+```
+
+Open http://localhost:8080/ in your browser to view the test pages.
+
+Source files are automatically recompiled when they change.
+
 ### Updating "golden" screenshots
 
 On the
@@ -98,18 +118,6 @@ These options are treated as regular expressions, so partial matches are possibl
 
 See `test/screenshot/browser.json` for the full list of supported browsers.
 
-### Local dev server
-
-The deprecated `npm run dev` command has been replaced by:
-
-```bash
-npm start
-```
-
-Open http://localhost:8080/ in your browser to view the test pages.
-
-Source files are automatically recompiled when they change.
-
 ## Advanced usage
 
 Use `--help` to see all available CLI options:
@@ -124,6 +132,67 @@ npm run screenshot:test -- --help
 
 **IMPORTANT:** Note the `--` between the script name and its arguments. This is required by `npm`.
 
+### Creating new screenshot tests
+
+The easiest way to create new screenshot tests is to copy an existing test page or directory, and modify it for your 
+component.
+
+For example, to create tests for `mdc-radio`, start by copying and renaming the `mdc-checkbox` tests:
+
+```bash
+cp -r test/screenshot/spec/mdc-{checkbox,radio}
+sed -i '' 's/-checkbox/-radio/g' test/screenshot/spec/mdc-radio/*.* test/screenshot/spec/mdc-radio/*/*.*
+vim ...
+```
+
+#### Component sizes
+
+There are two types of components:
+
+1. **Large** fullpage components (dialog, drawer, top app bar, etc.)
+2. **Small** widget components (button, checkbox, linear progress, etc.)
+
+Test pages for **small** components must have a `test-main--mobile-viewport` class on the `<main>` element:
+
+```html
+<main class="test-main test-main--mobile-viewport">
+```
+
+This class ensures that all components on the page fit inside an "average" mobile viewport without scrolling.
+This is necessary because most browsers' WebDriver implementations do not support taking screenshots of the entire
+`document`.
+
+Test pages for **large** components, however, must _not_ use the `--mobile-viewport` class:
+
+```html
+<main class="test-main">
+```
+
+For **small** components, you also need to specify the dimensions of the `test-cell--FOO` class in your component's 
+`fixture.scss` file:
+
+```css
+.test-cell--button {
+  width: 171px;
+  height: 71px;
+}
+```
+
+The dimensions should be large enough to fit all variants of your component, with an extra ~`10px` or so of wiggle room.
+This prevents noisy diffs in the event that your component's `height` or `margin` changes unexpectedly.
+
+#### CSS classes
+
+CSS Class | Description
+--- | ---
+`test-main` | Mandatory. Wraps all page content.
+`test-main--mobile-viewport` | Mandatory (**small** components only). Ensures that all page content fits in a mobile viewport.
+`test-cell--<FOO>` | Mandatory (**small** components only). Sets the dimensions of cells in the grid.
+`custom-<FOO>--<MIXIN>` | Mandatory (mixin test pages only). Calls a single Sass theme mixin.
+
+\* _`<FOO>` is the name of the component, minus the `mdc-` prefix. E.g.: `radio`, `top-app-bar`._ \
+\* _`<MIXIN>` is the name of the Sass mixin, minus the `mdc-<FOO>-` prefix. E.g.: `container-fill-color`._ 
+
 ### Public demos
 
 ```bash
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 35f35e465f0..cd7e871a792 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -164,55 +164,55 @@
   "spec/mdc-drawer/classes/permanent.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/21_05_09_679/spec/mdc-drawer/classes/permanent.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/permanent.html.windows_chrome_67.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/permanent.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/classes/persistent.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/21_05_09_679/spec/mdc-drawer/classes/persistent.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/persistent.html.windows_chrome_67.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/persistent.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/persistent.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/persistent.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/persistent.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/persistent.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/persistent.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/persistent.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/classes/temporary.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/21_05_09_679/spec/mdc-drawer/classes/temporary.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/temporary.html.windows_chrome_67.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/temporary.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/temporary.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/classes/temporary.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/temporary.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/temporary.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/temporary.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/classes/temporary.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/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_67.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/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/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_67.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
     }
   },
   "spec/mdc-drawer/mixins/ink-color.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/21_05_09_679/spec/mdc-drawer/mixins/ink-color.html",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/ink-color.html.windows_chrome_67.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/ink-color.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/ink-color.html.windows_firefox_61.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-drawer/mixins/ink-color.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/ink-color.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/ink-color.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/ink-color.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/19/21_11_42_130/spec/mdc-drawer/mixins/ink-color.html.windows_ie_11.png"
     }
   },
   "spec/mdc-fab/classes/baseline.html": {
@@ -304,5 +304,14 @@
       "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/23/18_31_44_533/spec/mdc-switch/mixins/track-color.html.windows_firefox_61.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/23/18_31_44_533/spec/mdc-switch/mixins/track-color.html.windows_ie_11.png"
     }
+  },
+  "spec/mdc-textfield/classes/baseline-textfield.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/07/18/20_19_24_759/spec/mdc-textfield/classes/baseline-textfield.html",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/07/18/20_19_24_759/spec/mdc-textfield/classes/baseline-textfield.html.windows_chrome_67.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/07/18/20_19_24_759/spec/mdc-textfield/classes/baseline-textfield.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/07/18/20_19_24_759/spec/mdc-textfield/classes/baseline-textfield.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/07/18/20_19_24_759/spec/mdc-textfield/classes/baseline-textfield.html.windows_ie_11.png"
+    }
   }
 }
diff --git a/test/screenshot/infra/commands/approve.js b/test/screenshot/infra/commands/approve.js
index 90309b732e0..36fda3e0917 100644
--- a/test/screenshot/infra/commands/approve.js
+++ b/test/screenshot/infra/commands/approve.js
@@ -18,10 +18,15 @@
 
 const Controller = require('../lib/controller');
 
-module.exports = {
+class ApproveCommand {
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
     const controller = new Controller();
     const reportData = await controller.initForApproval();
     await controller.approveChanges(reportData);
-  },
-};
+  }
+}
+
+module.exports = ApproveCommand;
diff --git a/test/screenshot/infra/commands/build.js b/test/screenshot/infra/commands/build.js
index 0cc872fb394..07d9ed75bfa 100644
--- a/test/screenshot/infra/commands/build.js
+++ b/test/screenshot/infra/commands/build.js
@@ -27,13 +27,22 @@ const ProcessManager = require('../lib/process-manager');
 const ProtoCommand = require('./proto');
 const {TEST_DIR_RELATIVE_PATH} = require('../lib/constants');
 
-const logger = new Logger(__filename);
-const processManager = new ProcessManager();
+class BuildCommand {
+  constructor() {
+    this.logger_ = new Logger(__filename);
+    this.processManager_ = new ProcessManager();
 
-module.exports = {
+    this.cleanCommand_ = new CleanCommand();
+    this.indexCommand_ = new IndexCommand();
+    this.protoCommand_ = new ProtoCommand();
+  }
+
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
     // Travis sometimes forgets to emit this
-    logger.foldEnd('install.npm');
+    this.logger_.foldEnd('install.npm');
 
     const shouldBuild = await this.shouldBuild_();
     const shouldWatch = await this.shouldWatch_();
@@ -42,32 +51,32 @@ module.exports = {
       return;
     }
 
-    await CleanCommand.runAsync();
+    await this.cleanCommand_.runAsync();
 
-    logger.foldStart('screenshot.build', 'Compiling source files');
+    this.logger_.foldStart('screenshot.build', 'Compiling source files');
 
-    this.buildProtoFiles_(shouldWatch);
-    this.buildHtmlFiles_(shouldWatch);
+    await this.buildProtoFiles_(shouldWatch);
+    await this.buildHtmlFiles_(shouldWatch);
 
     if (shouldWatch) {
-      processManager.spawnChildProcess('npm', ['run', 'screenshot:webpack', '--', '--watch']);
+      this.processManager_.spawnChildProcess('npm', ['run', 'screenshot:webpack', '--', '--watch']);
     } else {
-      processManager.spawnChildProcessSync('npm', ['run', 'screenshot:webpack']);
+      this.processManager_.spawnChildProcessSync('npm', ['run', 'screenshot:webpack']);
     }
 
-    logger.foldEnd('screenshot.build');
-  },
+    this.logger_.foldEnd('screenshot.build');
+  }
 
   /**
    * @param {boolean} shouldWatch
    * @private
    */
-  buildProtoFiles_(shouldWatch) {
-    const buildRightNow = () => ProtoCommand.runAsync();
+  async buildProtoFiles_(shouldWatch) {
+    const buildRightNow = async () => this.protoCommand_.runAsync(shouldWatch);
     const buildDelayed = debounce(buildRightNow, 1000);
 
     if (!shouldWatch) {
-      buildRightNow();
+      await buildRightNow();
       return;
     }
 
@@ -78,18 +87,18 @@ module.exports = {
 
     watcher.on('add', buildDelayed);
     watcher.on('change', buildDelayed);
-  },
+  }
 
   /**
    * @param {boolean} shouldWatch
    * @private
    */
-  buildHtmlFiles_(shouldWatch) {
-    const buildRightNow = () => IndexCommand.runAsync();
+  async buildHtmlFiles_(shouldWatch) {
+    const buildRightNow = async () => this.indexCommand_.runAsync();
     const buildDelayed = debounce(buildRightNow, 1000);
 
     if (!shouldWatch) {
-      buildRightNow();
+      await buildRightNow();
       return;
     }
 
@@ -101,7 +110,7 @@ module.exports = {
 
     watcher.on('add', buildDelayed);
     watcher.on('unlink', buildDelayed);
-  },
+  }
 
   /**
    * @return {!Promise<boolean>}
@@ -121,7 +130,7 @@ module.exports = {
     }
 
     return true;
-  },
+  }
 
   /**
    * @return {!Promise<boolean>}
@@ -130,7 +139,7 @@ module.exports = {
   async shouldWatch_() {
     const cli = new Cli();
     return cli.watch;
-  },
+  }
 
   /**
    * TODO(acvdorak): Store PID in local text file instead of scanning through running processes
@@ -139,7 +148,7 @@ module.exports = {
    */
   async getExistingProcessId_() {
     /** @type {!Array<!PsNodeProcess>} */
-    const allProcs = await processManager.getRunningProcessesInPwdAsync('node', 'build');
+    const allProcs = await this.processManager_.getRunningProcessesInPwdAsync('node', 'build');
     const buildProcs = allProcs.filter((proc) => {
       const [script, command] = proc.arguments;
       return (
@@ -149,5 +158,7 @@ module.exports = {
     });
 
     return buildProcs.length > 0 ? buildProcs[0].pid : null;
-  },
-};
+  }
+}
+
+module.exports = BuildCommand;
diff --git a/test/screenshot/infra/commands/clean.js b/test/screenshot/infra/commands/clean.js
index e2de2343d25..fdc57785160 100644
--- a/test/screenshot/infra/commands/clean.js
+++ b/test/screenshot/infra/commands/clean.js
@@ -19,14 +19,20 @@
 const del = require('del');
 const mkdirp = require('mkdirp');
 const path = require('path');
+
 const {TEST_DIR_RELATIVE_PATH} = require('../lib/constants');
 
-module.exports = {
+class CleanCommand {
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
     const relativePathPatterns = ['out', '**/index.html'].map((filename) => {
       return path.join(TEST_DIR_RELATIVE_PATH, filename);
     });
     await del(relativePathPatterns);
     mkdirp.sync(path.join(TEST_DIR_RELATIVE_PATH, 'out'));
-  },
-};
+  }
+}
+
+module.exports = CleanCommand;
diff --git a/test/screenshot/infra/commands/demo.js b/test/screenshot/infra/commands/demo.js
index 1242dd885b7..dabfc0dc9cf 100644
--- a/test/screenshot/infra/commands/demo.js
+++ b/test/screenshot/infra/commands/demo.js
@@ -19,11 +19,19 @@
 const BuildCommand = require('./build');
 const Controller = require('../lib/controller');
 
-module.exports = {
+class DemoCommand {
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
-    await BuildCommand.runAsync();
+    const buildCommand = new BuildCommand();
     const controller = new Controller();
+
+    await buildCommand.runAsync();
+
     const reportData = await controller.initForDemo();
     await controller.uploadAllAssets(reportData);
-  },
-};
+  }
+}
+
+module.exports = DemoCommand;
diff --git a/test/screenshot/infra/commands/index.js b/test/screenshot/infra/commands/index.js
index d44542c080e..6aa24cab361 100644
--- a/test/screenshot/infra/commands/index.js
+++ b/test/screenshot/infra/commands/index.js
@@ -22,7 +22,10 @@ const LocalStorage = require('../lib/local-storage');
 const {TEST_DIR_RELATIVE_PATH} = require('../lib/constants');
 
 // TODO(acdvorak): Clean up this entire file. It's gross.
-module.exports = {
+class IndexCommand {
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
     const localStorage = new LocalStorage();
 
@@ -130,5 +133,7 @@ module.exports = {
     await walkDir(path.join(TEST_DIR_RELATIVE_PATH));
 
     await localStorage.delete([fakeReportHtmlFilePath, fakeReportJsonFilePath]);
-  },
-};
+  }
+}
+
+module.exports = IndexCommand;
diff --git a/test/screenshot/infra/commands/proto.js b/test/screenshot/infra/commands/proto.js
index d7701f78588..8be1fde6323 100644
--- a/test/screenshot/infra/commands/proto.js
+++ b/test/screenshot/infra/commands/proto.js
@@ -22,10 +22,13 @@ const path = require('path');
 const ProcessManager = require('../lib/process-manager');
 const {TEST_DIR_RELATIVE_PATH} = require('../lib/constants');
 
-const processManager = new ProcessManager();
-
-module.exports = {
-  async runAsync() {
+class ProtoCommand {
+  /**
+   * @param {boolean} isWatching
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
+  async runAsync(isWatching = false) {
+    const processManager = new ProcessManager();
     const protoFilePaths = glob.sync(path.join(TEST_DIR_RELATIVE_PATH, '**/*.proto'));
 
     const cmd = 'pbjs';
@@ -33,7 +36,11 @@ module.exports = {
 
     for (const protoFilePath of protoFilePaths) {
       const jsFilePath = protoFilePath.replace(/.proto$/, '.pb.js');
-      processManager.spawnChildProcessSync(cmd, args.concat(`--out=${jsFilePath}`, protoFilePath));
+      processManager.spawnChildProcessSync(
+        cmd, args.concat(`--out=${jsFilePath}`, protoFilePath), undefined, isWatching
+      );
     }
-  },
-};
+  }
+}
+
+module.exports = ProtoCommand;
diff --git a/test/screenshot/infra/commands/serve.js b/test/screenshot/infra/commands/serve.js
index 4063635a5c9..0762a80c25a 100644
--- a/test/screenshot/infra/commands/serve.js
+++ b/test/screenshot/infra/commands/serve.js
@@ -16,6 +16,8 @@
 
 'use strict';
 
+/** @type {!CliColor} */
+const colors = require('colors');
 const detectPort = require('detect-port');
 const express = require('express');
 const serveIndex = require('serve-index');
@@ -24,7 +26,10 @@ const Cli = require('../lib/cli');
 const {ExitCode} = require('../lib/constants');
 const {TEST_DIR_RELATIVE_PATH} = require('../lib/constants');
 
-module.exports = {
+class ServeCommand {
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
     const cli = new Cli();
     const {port} = cli;
@@ -39,11 +44,18 @@ module.exports = {
     app.use('/', express.static(TEST_DIR_RELATIVE_PATH), serveIndex(TEST_DIR_RELATIVE_PATH));
 
     app.listen(port, () => {
-      console.log(`
-==========================================================
-Local development server running on http://localhost:${port}/
-==========================================================
-`);
+      const urlPlain = `http://localhost:${port}/`;
+      const urlColor = colors.bold.underline(urlPlain);
+      const noticePlain = `Local development server running on ${urlPlain}`;
+      const noticeColor = `Local development server running on ${urlColor}`;
+      const borderColor = colors.green(''.padStart(noticePlain.length, '='));
+      console.log((`
+${borderColor}
+${noticeColor}
+${borderColor}
+`));
     });
-  },
-};
+  }
+}
+
+module.exports = ServeCommand;
diff --git a/test/screenshot/infra/commands/test.js b/test/screenshot/infra/commands/test.js
index 8511b509c2d..ef29166e22c 100644
--- a/test/screenshot/infra/commands/test.js
+++ b/test/screenshot/infra/commands/test.js
@@ -16,42 +16,495 @@
 
 'use strict';
 
+const VError = require('verror');
+
+const mdcProto = require('../proto/mdc.pb').mdc.proto;
+const GitRevision = mdcProto.GitRevision;
+
 const BuildCommand = require('./build');
+const Cli = require('../lib/cli');
+const CliColor = require('../lib/logger').colors;
 const Controller = require('../lib/controller');
+const DiffBaseParser = require('../lib/diff-base-parser');
+const Duration = require('../lib/duration');
 const GitHubApi = require('../lib/github-api');
+const ImageDiffer = require('../lib/image-differ');
 const Logger = require('../lib/logger');
+const getStackTrace = require('../lib/stacktrace')('TestCommand');
 const {ExitCode} = require('../lib/constants');
 
-module.exports = {
+// TODO(acdvorak): Refactor most of this class out into a separate file
+class TestCommand {
+  constructor() {
+    this.cli_ = new Cli();
+    this.diffBaseParser_ = new DiffBaseParser();
+    this.gitHubApi_ = new GitHubApi();
+    this.imageDiffer_ = new ImageDiffer();
+    this.logger_ = new Logger(__filename);
+  }
+
+  /**
+   * @return {!Promise<number|undefined>} Process exit code. If no exit code is returned, `0` is assumed.
+   */
   async runAsync() {
-    await BuildCommand.runAsync();
-    const controller = new Controller();
-    const gitHubApi = new GitHubApi();
-    const logger = new Logger(__filename);
+    await this.build_();
 
-    /** @type {!mdc.proto.ReportData} */
-    const reportData = await controller.initForCapture();
+    if (this.isExternalPr_()) {
+      this.logExternalPr_();
+      return ExitCode.OK;
+    }
+
+    /** @type {!mdc.proto.DiffBase} */
+    const snapshotDiffBase = await this.diffBaseParser_.parseGoldenDiffBase();
+    const snapshotGitRev = snapshotDiffBase.git_revision;
+
+    const isTravisPr = snapshotGitRev && snapshotGitRev.type === GitRevision.Type.TRAVIS_PR;
+    const isTestable = isTravisPr ? snapshotGitRev.pr_file_paths.length > 0 : true;
 
-    const {isTestable, prNumber} = controller.checkIsTestable(reportData);
     if (!isTestable) {
-      logger.warn(`PR #${prNumber} does not contain any testable source file changes.`);
-      logger.warn('Skipping screenshot tests.');
+      this.logUntestablePr_(snapshotGitRev.pr_number);
       return ExitCode.OK;
     }
 
-    await gitHubApi.setPullRequestStatus(reportData);
+    // TODO(acdvorak): Find a better word than "local"
+    /** @type {!mdc.proto.ReportData} */
+    const localDiffReportData = await this.diffAgainstLocal_(snapshotDiffBase);
+    const localDiffExitCode = this.getExitCode_(localDiffReportData);
+    if (localDiffExitCode !== ExitCode.OK) {
+      this.logTestResults_(localDiffReportData);
+      return localDiffExitCode;
+    }
+
+    if (isTravisPr) {
+      /** @type {!mdc.proto.ReportData} */
+      const masterDiffReportData = await this.diffAgainstMaster_({localDiffReportData, snapshotGitRev});
+      this.logTestResults_(localDiffReportData);
+      this.logTestResults_(masterDiffReportData);
+    } else {
+      this.logTestResults_(localDiffReportData);
+    }
+
+    // Diffs against master shouldn't fail the Travis job.
+    return ExitCode.OK;
+  }
+
+  async build_() {
+    const buildCommand = new BuildCommand();
+    await buildCommand.runAsync();
+  }
+
+  /**
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
+   * @return {!Promise<!mdc.proto.ReportData>}
+   * @private
+   */
+  async diffAgainstLocal_(goldenDiffBase) {
+    const controller = new Controller();
+
+    /** @type {!mdc.proto.ReportData} */
+    const reportData = await controller.initForCapture(goldenDiffBase);
 
     try {
+      await this.gitHubApi_.setPullRequestStatusAuto(reportData);
       await controller.uploadAllAssets(reportData);
       await controller.captureAllPages(reportData);
-      await controller.compareAllScreenshots(reportData);
+
+      controller.populateMaps(reportData);
+
+      await controller.uploadAllImages(reportData);
       await controller.generateReportPage(reportData);
-      await gitHubApi.setPullRequestStatus(reportData);
+
+      await this.gitHubApi_.setPullRequestStatusAuto(reportData);
+
+      this.logComparisonResults_(reportData);
     } catch (err) {
-      await gitHubApi.setPullRequestError();
-      throw err;
+      await this.gitHubApi_.setPullRequestError();
+      throw new VError(err, getStackTrace('diffAgainstLocal_'));
+    }
+
+    return reportData;
+  }
+
+  /**
+   * TODO(acdvorak): Rename this method
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
+   * @param {!Array<!mdc.proto.Screenshot>} capturedScreenshots
+   * @param {string} startTimeIsoUtc
+   * @return {!Promise<!mdc.proto.ReportData>}
+   * @private
+   */
+  async diffAgainstMasterImpl_({goldenDiffBase, capturedScreenshots, startTimeIsoUtc}) {
+    const controller = new Controller();
+
+    /** @type {!mdc.proto.ReportData} */
+    const reportData = await controller.initForCapture(goldenDiffBase);
+
+    try {
+      await controller.uploadAllAssets(reportData);
+      await this.copyAndCompareScreenshots_({reportData, capturedScreenshots, startTimeIsoUtc});
+
+      controller.populateMaps(reportData);
+
+      await controller.uploadAllImages(reportData);
+      await controller.generateReportPage(reportData);
+
+      this.logComparisonResults_(reportData);
+    } catch (err) {
+      await this.gitHubApi_.setPullRequestError();
+      throw new VError(err, getStackTrace('diffAgainstMasterImpl_'));
+    }
+
+    return reportData;
+  }
+
+  /**
+   * TODO(acdvorak): Rename this method
+   * @param {!mdc.proto.ReportData} localDiffReportData
+   * @param {!mdc.proto.GitRevision} snapshotGitRev
+   * @return {!Promise<!mdc.proto.ReportData>}
+   * @private
+   */
+  async diffAgainstMaster_({localDiffReportData, snapshotGitRev}) {
+    const localScreenshots = localDiffReportData.screenshots;
+
+    /** @type {!Array<!mdc.proto.Screenshot>} */
+    const capturedScreenshots = [].concat(
+      localScreenshots.changed_screenshot_list,
+      localScreenshots.added_screenshot_list,
+      localScreenshots.removed_screenshot_list,
+      localScreenshots.unchanged_screenshot_list,
+    );
+
+    /** @type {!mdc.proto.DiffBase} */
+    const masterDiffBase = await this.diffBaseParser_.parseMasterDiffBase();
+
+    /** @type {!mdc.proto.ReportData} */
+    const masterDiffReportData = await this.diffAgainstMasterImpl_({
+      goldenDiffBase: masterDiffBase,
+      capturedScreenshots,
+      startTimeIsoUtc: localDiffReportData.meta.start_time_iso_utc,
+    });
+
+    const prNumber = snapshotGitRev.pr_number;
+    const comment = this.getPrComment_({masterDiffReportData, snapshotGitRev});
+    await this.gitHubApi_.createPullRequestComment({prNumber, comment});
+
+    return masterDiffReportData;
+  }
+
+  /**
+   * @param {!mdc.proto.ReportData} reportData
+   * @param {!Array<!mdc.proto.Screenshot>} capturedScreenshots
+   * @param {string} startTimeIsoUtc
+   * @return {!Promise<void>}
+   * @private
+   */
+  async copyAndCompareScreenshots_({reportData, capturedScreenshots, startTimeIsoUtc}) {
+    const num = capturedScreenshots.length;
+    const plural = num === 1 ? '' : 's';
+    this.logger_.foldStart('screenshot.compare_master', `Comparing ${num} screenshot${plural} to master`);
+
+    const promises = [];
+    const screenshots = reportData.screenshots;
+    const masterScreenshots = screenshots.actual_screenshot_list;
+
+    for (const masterScreenshot of masterScreenshots) {
+      for (const capturedScreenshot of capturedScreenshots) {
+        if (capturedScreenshot.html_file_path !== masterScreenshot.html_file_path ||
+            capturedScreenshot.user_agent.alias !== masterScreenshot.user_agent.alias) {
+          continue;
+        }
+        promises.push(new Promise(async (resolve) => {
+          masterScreenshot.actual_html_file = capturedScreenshot.actual_html_file;
+          masterScreenshot.actual_image_file = capturedScreenshot.actual_image_file;
+          masterScreenshot.capture_state = capturedScreenshot.capture_state;
+
+          /** @type {!mdc.proto.DiffImageResult} */
+          const diffImageResult = await this.imageDiffer_.compareOneScreenshot({
+            meta: reportData.meta,
+            screenshot: masterScreenshot,
+          });
+
+          masterScreenshot.diff_image_result = diffImageResult;
+          masterScreenshot.diff_image_file = diffImageResult.diff_image_file;
+
+          if (diffImageResult.has_changed) {
+            reportData.screenshots.changed_screenshot_list.push(masterScreenshot);
+          } else {
+            reportData.screenshots.unchanged_screenshot_list.push(masterScreenshot);
+          }
+          reportData.screenshots.comparable_screenshot_list.push(masterScreenshot);
+
+          resolve();
+        }));
+      }
+    }
+
+    await Promise.all(promises);
+
+    const endTimeIsoUtc = new Date().toISOString();
+    reportData.meta.start_time_iso_utc = startTimeIsoUtc;
+    reportData.meta.end_time_iso_utc = endTimeIsoUtc;
+    reportData.meta.duration_ms = Duration.elapsed(startTimeIsoUtc, endTimeIsoUtc).toMillis();
+
+    this.logger_.foldEnd('screenshot.compare_master');
+  }
+
+  /**
+   * @param {!mdc.proto.ReportData} masterDiffReportData
+   * @param {!mdc.proto.GitRevision} snapshotGitRev
+   * @return {string}
+   * @private
+   */
+  getPrComment_({masterDiffReportData, snapshotGitRev}) {
+    const masterReportPageUrl = masterDiffReportData.meta.report_html_file.public_url;
+    const masterScreenshots = masterDiffReportData.screenshots;
+    const masterGitRev = masterDiffReportData.meta.golden_diff_base.git_revision;
+
+    const numTotal = masterScreenshots.actual_screenshot_list.length;
+    const numChanged =
+      masterScreenshots.changed_screenshot_list.length +
+      masterScreenshots.added_screenshot_list.length +
+      masterScreenshots.removed_screenshot_list.length;
+    const plural = numChanged === 1 ? '' : 's';
+
+    if (numChanged === 0) {
+      const range = `commit ${snapshotGitRev.commit} vs. \`${masterGitRev.branch}\``;
+      return `**All ${numTotal} screenshot tests passed** for ${range}! 💯🎉`;
+    }
+
+    const listMarkdown = [
+      this.getChangelistMarkdown_(
+        'Changed', masterScreenshots.changed_screenshot_list, masterScreenshots.changed_screenshot_page_map
+      ),
+      this.getChangelistMarkdown_(
+        'Added', masterScreenshots.added_screenshot_list, masterScreenshots.added_screenshot_page_map
+      ),
+      this.getChangelistMarkdown_(
+        'Removed', masterScreenshots.removed_screenshot_list, masterScreenshots.removed_screenshot_page_map
+      ),
+    ].filter((str) => Boolean(str)).join('\n\n');
+
+
+    return `
+### Screenshot test report ⚠️
+
+**${numChanged}** screenshot${plural} changed from \`${masterGitRev.branch}\` on commit ${snapshotGitRev.commit}:
+
+* ${masterReportPageUrl}
+
+<details>
+  <summary><b>Details</b></summary>
+  <div>
+
+${listMarkdown}
+
+  </div>
+</details>
+`.trim();
+  }
+
+  /**
+   * @param {string} verb
+   * @param {!Array<!mdc.proto.Screenshot>} screenshotArray
+   * @param {!Object<string, !mdc.proto.ScreenshotList>} screenshotMap
+   */
+  getChangelistMarkdown_(verb, screenshotArray, screenshotMap) {
+    const numHtmlFiles = Object.keys(screenshotMap).length;
+    if (numHtmlFiles === 0) {
+      return null;
+    }
+
+    const listItemMarkdown = Object.entries(screenshotMap).map(([htmlFilePath, screenshotList]) => {
+      const browserIconMarkup = this.getAllBrowserIcons_(screenshotList.screenshots);
+      const firstScreenshot = screenshotList.screenshots[0];
+      const htmlFileUrl = (firstScreenshot.actual_html_file || firstScreenshot.expected_html_file).public_url;
+
+      return `
+* [\`${htmlFilePath}\`](${htmlFileUrl}) ${browserIconMarkup}
+`.trim();
+    }).join('\n');
+
+    return `
+#### ${screenshotArray.length} ${verb}:
+
+${listItemMarkdown}
+`;
+  }
+
+  /**
+   * @param {!Array<!mdc.proto.Screenshot>} screenshotArray
+   * @return {string}
+   * @private
+   */
+  getAllBrowserIcons_(screenshotArray) {
+    return screenshotArray.map((screenshot) => {
+      return this.getOneBrowserIcon_(screenshot);
+    }).join(' ');
+  }
+
+  /**
+   * @param screenshot
+   * @return {string}
+   * @private
+   */
+  getOneBrowserIcon_(screenshot) {
+    const imgFile = screenshot.diff_image_file || screenshot.actual_image_file || screenshot.expected_image_file;
+    const linkUrl = imgFile.public_url;
+
+    const untrimmed = `
+<a href="${linkUrl}"
+   title="${screenshot.user_agent.alias}">
+  <img src="${screenshot.user_agent.browser_icon_url}" width="16" height="16">
+</a>
+`;
+    return untrimmed.trim().replace(/>\n *</g, '><');
+  }
+
+  /**
+   * @param {!mdc.proto.ReportData} reportData
+   * @return {!ExitCode|number}
+   */
+  getExitCode_(reportData) {
+    // TODO(acdvorak): Store this directly in the proto so we don't have to recalculate it all over the place
+    const numChanges =
+      reportData.screenshots.changed_screenshot_list.length +
+      reportData.screenshots.added_screenshot_list.length +
+      reportData.screenshots.removed_screenshot_list.length;
+
+    const isOnline = this.cli_.isOnline();
+    if (isOnline && numChanges > 0) {
+      return ExitCode.CHANGES_FOUND;
+    }
+    return ExitCode.OK;
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isExternalPr_() {
+    return Boolean(
+      process.env.TRAVIS_PULL_REQUEST_SLUG &&
+      !process.env.TRAVIS_PULL_REQUEST_SLUG.startsWith('material-components/')
+    );
+  }
+
+  /**
+   * @private
+   */
+  logExternalPr_() {
+    this.logger_.warn(`
+
+${CliColor.bold.red('Screenshot tests are not supported on external PRs for security reasons.')}
+
+See ${CliColor.underline('https://docs.travis-ci.com/user/pull-requests/#Pull-Requests-and-Security-Restrictions')}
+for more information.
+
+${CliColor.bold.red('Skipping screenshot tests.')}
+`);
+  }
+
+  /**
+   * @param {number} prNumber
+   * @private
+   */
+  logUntestablePr_(prNumber) {
+    this.logger_.warn(`
+
+${CliColor.underline(`PR #${prNumber}`)} does not contain any testable source file changes.
+
+${CliColor.bold.green('Skipping screenshot tests.')}
+`);
+  }
+
+  /**
+   * @param {!mdc.proto.ReportData} reportData
+   * @private
+   */
+  logComparisonResults_(reportData) {
+    this.logger_.foldStart('screenshot.diff_results', 'Diff results');
+    this.logComparisonResultSet_('Skipped', reportData.screenshots.skipped_screenshot_list);
+    this.logComparisonResultSet_('Unchanged', reportData.screenshots.unchanged_screenshot_list);
+    this.logComparisonResultSet_('Removed', reportData.screenshots.removed_screenshot_list);
+    this.logComparisonResultSet_('Added', reportData.screenshots.added_screenshot_list);
+    this.logComparisonResultSet_('Changed', reportData.screenshots.changed_screenshot_list);
+    this.logger_.foldEnd('screenshot.diff_results');
+  }
+
+  /**
+   * @param {!mdc.proto.ReportData} reportData
+   * @private
+   */
+  logTestResults_(reportData) {
+    // TODO(acdvorak): Store this directly in the proto so we don't have to recalculate it all over the place
+    const numChanges =
+      reportData.screenshots.changed_screenshot_list.length +
+      reportData.screenshots.added_screenshot_list.length +
+      reportData.screenshots.removed_screenshot_list.length;
+
+    const boldRed = CliColor.bold.red;
+    const boldGreen = CliColor.bold.green;
+    const color = numChanges === 0 ? boldGreen : boldRed;
+
+    const goldenDisplayName = this.getDisplayName_(reportData.meta.golden_diff_base);
+    const snapshotDisplayName = this.getDisplayName_(reportData.meta.snapshot_diff_base);
+
+    const changedMsg = `${numChanges} screenshot${numChanges === 1 ? '' : 's'} changed!`;
+    const reportPageUrl = reportData.meta.report_html_file.public_url;
+
+    const headingPlain = 'Screenshot Test Results';
+    const headingColor = CliColor.bold(headingPlain);
+    const headingUnderline = ''.padEnd(headingPlain.length, '=');
+
+    this.logger_.log(`
+
+${headingColor}
+${headingUnderline}
+
+  - Golden:   ${goldenDisplayName}
+  - Snapshot: ${snapshotDisplayName}
+  - Changes:  ${color(changedMsg)}
+  - Report:   ${color(reportPageUrl)}
+`.trimRight());
+  }
+
+  /**
+   * @param {!mdc.proto.DiffBase} diffBase
+   * @return {string}
+   * @private
+   */
+  getDisplayName_(diffBase) {
+    const gitRev = diffBase.git_revision;
+    if (gitRev) {
+      const commitShort = gitRev.commit.substr(0, 7);
+      if (gitRev.pr_number) {
+        return `PR #${gitRev.pr_number} (commit ${commitShort})`;
+      }
+      if (gitRev.tag) {
+        return `${gitRev.tag} (commit ${commitShort})`;
+      }
+      if (gitRev.branch) {
+        return `${gitRev.remote ? `${gitRev.remote}/${gitRev.branch}` : gitRev.branch} (commit ${commitShort})`;
+      }
+      return commitShort;
+    }
+    return diffBase.local_file_path || diffBase.public_url;
+  }
+
+  /**
+   * @param {string} title
+   * @param {!Array<!mdc.proto.Screenshot>} screenshots
+   * @private
+   */
+  logComparisonResultSet_(title, screenshots) {
+    const num = screenshots.length;
+    console.log(`${title} ${num} screenshot${num === 1 ? '' : 's'}${num > 0 ? ':' : ''}`);
+    for (const screenshot of screenshots) {
+      console.log(`  - ${screenshot.html_file_path} > ${screenshot.user_agent.alias}`);
     }
+    console.log('');
+  }
+}
 
-    return await controller.getTestExitCode(reportData);
-  },
-};
+module.exports = TestCommand;
diff --git a/test/screenshot/infra/commands/travis.sh b/test/screenshot/infra/commands/travis.sh
index 934f8ae01ee..a91db094439 100755
--- a/test/screenshot/infra/commands/travis.sh
+++ b/test/screenshot/infra/commands/travis.sh
@@ -1,15 +1,14 @@
 #!/usr/bin/env bash
 
-function print_error() {
-  echo -e "\033[31m\033[1m$@\033[0m"
+function print_to_stderr() {
+  echo "$@" >&2
 }
 
-function exit_if_external_pr() {
-  if [[ -n "$TRAVIS_PULL_REQUEST_SLUG" ]] && [[ ! "$TRAVIS_PULL_REQUEST_SLUG" =~ ^material-components/ ]]; then
-    echo
-    print_error "Error: $TEST_SUITE tests are not supported on external PRs."
-    print_error "Skipping $TEST_SUITE tests."
-    exit 19
+function log_error() {
+  if [[ $# -gt 0 ]]; then
+    print_to_stderr -e "\033[31m\033[1m$@\033[0m"
+  else
+    print_to_stderr
   fi
 }
 
@@ -19,17 +18,27 @@ function print_travis_env_vars() {
   echo
 }
 
-function extract_api_credentials() {
-  openssl aes-256-cbc -K $encrypted_eead2343bb54_key -iv $encrypted_eead2343bb54_iv \
+function maybe_extract_api_credentials() {
+  if [[ -z "$encrypted_eead2343bb54_key" ]] || [[ -z "$encrypted_eead2343bb54_iv" ]]; then
+    log_error
+    log_error "Missing decryption keys for API credentials."
+    log_error
+
+    if [[ -n "$TRAVIS_PULL_REQUEST_SLUG" ]] && [[ ! "$TRAVIS_PULL_REQUEST_SLUG" =~ ^material-components/ ]]; then
+      log_error "See https://docs.travis-ci.com/user/pull-requests/#Pull-Requests-and-Security-Restrictions for more information"
+      log_error
+    fi
+
+    return
+  fi
+
+  openssl aes-256-cbc -K "$encrypted_eead2343bb54_key" -iv "$encrypted_eead2343bb54_iv" \
     -in test/screenshot/infra/auth/travis.tar.enc -out test/screenshot/infra/auth/travis.tar -d
 
   tar -xf test/screenshot/infra/auth/travis.tar -C test/screenshot/infra/auth/
 }
 
-function install_google_cloud_sdk() {
-  export PATH=$PATH:$HOME/google-cloud-sdk/bin
-  export CLOUDSDK_CORE_DISABLE_PROMPTS=1
-
+function install_and_authorize_gcloud_sdk() {
   which gcloud 2>&1 > /dev/null
 
   if [[ $? == 0 ]]; then
@@ -54,11 +63,26 @@ function install_google_cloud_sdk() {
   gcloud components update gsutil
 }
 
-if [[ "$TEST_SUITE" == 'unit' ]]; then
-  exit_if_external_pr
-elif [[ "$TEST_SUITE" == 'screenshot' ]]; then
-  exit_if_external_pr
+function maybe_install_gcloud_sdk() {
+  export PATH=$PATH:$HOME/google-cloud-sdk/bin
+  export CLOUDSDK_CORE_DISABLE_PROMPTS=1
+
+  if [[ -f test/screenshot/infra/auth/gcs.json ]]; then
+    install_and_authorize_gcloud_sdk
+  else
+    log_error
+    log_error "Missing Google Cloud credentials file: test/screenshot/infra/auth/gcs.json"
+    log_error
+
+    if [[ -n "$TRAVIS_PULL_REQUEST_SLUG" ]] && [[ ! "$TRAVIS_PULL_REQUEST_SLUG" =~ ^material-components/ ]]; then
+      log_error "See https://docs.travis-ci.com/user/pull-requests/#Pull-Requests-and-Security-Restrictions for more information"
+      log_error
+    fi
+  fi
+}
+
+if [[ "$TEST_SUITE" == 'screenshot' ]]; then
   print_travis_env_vars
-  extract_api_credentials
-  install_google_cloud_sdk
+  maybe_extract_api_credentials
+  maybe_install_gcloud_sdk
 fi
diff --git a/test/screenshot/infra/lib/cbt-api.js b/test/screenshot/infra/lib/cbt-api.js
index 5972f2e719c..7e0213f81a9 100644
--- a/test/screenshot/infra/lib/cbt-api.js
+++ b/test/screenshot/infra/lib/cbt-api.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+const VError = require('verror');
 const request = require('request-promise-native');
 
 const mdcProto = require('../proto/mdc.pb').mdc.proto;
@@ -26,12 +27,16 @@ const {CbtAccount, CbtActiveTestCounts, CbtConcurrencyStats} = cbtProto;
 const {RawCapabilities} = seleniumProto;
 
 const Cli = require('./cli');
+const CliColor = require('./logger').colors;
+const DiffBaseParser = require('./diff-base-parser');
+const Duration = require('./duration');
+const getStackTrace = require('./stacktrace')('CbtApi');
 
 const MDC_CBT_USERNAME = process.env.MDC_CBT_USERNAME;
 const MDC_CBT_AUTHKEY = process.env.MDC_CBT_AUTHKEY;
 const REST_API_BASE_URL = 'https://crossbrowsertesting.com/api/v3';
 const SELENIUM_SERVER_URL = `http://${MDC_CBT_USERNAME}:${MDC_CBT_AUTHKEY}@hub.crossbrowsertesting.com:80/wd/hub`;
-const {ExitCode} = require('./constants');
+const {ExitCode, SELENIUM_STALLED_TIME_MS} = require('./constants');
 
 /** @type {?Promise<!Array<!cbt.proto.CbtDevice>>} */
 let allBrowsersPromise;
@@ -44,6 +49,12 @@ class CbtApi {
      */
     this.cli_ = new Cli();
 
+    /**
+     * @type {!DiffBaseParser}
+     * @private
+     */
+    this.diffBaseParser_ = new DiffBaseParser();
+
     this.validateEnvVars_();
   }
 
@@ -89,8 +100,8 @@ https://crossbrowsertesting.com/account
    */
   async fetchConcurrencyStats() {
     const [accountJson, activesJson] = await Promise.all([
-      this.sendRequest_('GET', '/account'),
-      this.sendRequest_('GET', '/account/activeTestCounts'),
+      this.sendRequest_(getStackTrace('fetchConcurrencyStats'), 'GET', '/account'),
+      this.sendRequest_(getStackTrace('fetchConcurrencyStats'), 'GET', '/account/activeTestCounts'),
     ]);
 
     const account = CbtAccount.fromObject(accountJson);
@@ -117,7 +128,8 @@ https://crossbrowsertesting.com/account
 
     console.log('Fetching browsers from CBT...');
 
-    allBrowsersPromise = this.sendRequest_('GET', '/selenium/browsers');
+    const stackTrace = getStackTrace('fetchAvailableDevices');
+    allBrowsersPromise = this.sendRequest_(stackTrace, 'GET', '/selenium/browsers');
 
     return allBrowsersPromise;
   }
@@ -128,7 +140,8 @@ https://crossbrowsertesting.com/account
    * @return {!Promise<void>}
    */
   async setTestScore({seleniumSessionId, changedScreenshots}) {
-    await this.sendRequest_('PUT', `/selenium/${seleniumSessionId}`, {
+    const stackTrace = getStackTrace('fetchAvailableDevices');
+    await this.sendRequest_(stackTrace, 'PUT', `/selenium/${seleniumSessionId}`, {
       action: 'set_score',
       score: changedScreenshots.length === 0 ? 'pass' : 'fail',
     });
@@ -138,9 +151,8 @@ https://crossbrowsertesting.com/account
    * @param {!mdc.proto.ReportMeta} meta
    * @param {!mdc.proto.UserAgent} userAgent
    * @return {!Promise<!selenium.proto.RawCapabilities>}
-   * @private
    */
-  async getDesiredCapabilities_({meta, userAgent}) {
+  async getDesiredCapabilities({meta, userAgent}) {
     // TODO(acdvorak): Create a type for this
     /** @type {{device: !cbt.proto.CbtDevice, browser: !cbt.proto.CbtBrowser}} */
     const matchingCbtUserAgent = await this.getMatchingCbtUserAgent_(userAgent);
@@ -314,7 +326,7 @@ https://crossbrowsertesting.com/account
    */
   async getCbtTestNameAndBuildNameForReport_(meta) {
     /** @type {?mdc.proto.GitRevision} */
-    const travisGitRev = await this.cli_.getTravisGitRevision();
+    const travisGitRev = await this.diffBaseParser_.getTravisGitRevision();
     if (travisGitRev) {
       return this.getCbtTestNameAndBuildNameForGitRev_(travisGitRev);
     }
@@ -349,23 +361,97 @@ https://crossbrowsertesting.com/account
   }
 
   /**
+   * @return {!Promise<void>}
+   */
+  async killStalledSeleniumTests() {
+    // NOTE: This only returns Selenium tests running on the authenticated CBT user's account.
+    // It does NOT return Selenium tests running under other users.
+    /** @type {!CbtSeleniumListResponse} */
+    const listResponse = await this.sendRequest_(
+      getStackTrace('killStalledSeleniumTests'),
+      'GET', '/selenium?active=true&num=100'
+    );
+
+    const activeSeleniumTestIds = listResponse.selenium.map((test) => test.selenium_test_id);
+
+    /** @type {!Array<!CbtSeleniumInfoResponse>} */
+    const infoResponses = await Promise.all(activeSeleniumTestIds.map((seleniumTestId) => {
+      const infoStackTrace = getStackTrace('killStalledSeleniumTests');
+      return this.sendRequest_(infoStackTrace, 'GET', `/selenium/${seleniumTestId}`);
+    }));
+
+    const stalledSeleniumTestIds = [];
+
+    for (const infoResponse of infoResponses) {
+      const lastCommand = infoResponse.commands[infoResponse.commands.length - 1];
+      if (!lastCommand) {
+        continue;
+      }
+
+      const commandTimestampMs = new Date(lastCommand.date_issued).getTime();
+      if (!Duration.hasElapsed(SELENIUM_STALLED_TIME_MS, commandTimestampMs)) {
+        continue;
+      }
+
+      stalledSeleniumTestIds.push(infoResponse.selenium_test_id);
+    }
+
+    await this.killSeleniumTests(stalledSeleniumTestIds);
+  }
+
+  /**
+   * @param {!Array<string>} seleniumTestIds
+   * @param {boolean=} silent
+   * @return {!Promise<void>}
+   */
+  async killSeleniumTests(seleniumTestIds, silent = false) {
+    await Promise.all(seleniumTestIds.map(async (seleniumTestId) => {
+      if (!silent) {
+        console.log(`${CliColor.magenta('Killing')} stalled Selenium test ${CliColor.bold(seleniumTestId)}`);
+      }
+      const stackTrace = getStackTrace('killSeleniumTests');
+      return await this.sendRequest_(stackTrace, 'DELETE', `/selenium/${seleniumTestId}`).catch((err) => {
+        if (!silent) {
+          console.warn(`${CliColor.red('Failed')} to kill stalled Selenium test ${CliColor.bold(seleniumTestId)}:`);
+          console.warn(err);
+        }
+      });
+    }));
+  }
+
+  /**
+   * @param {string} stackTrace
    * @param {string} method
    * @param {string} endpoint
    * @param {!Object=} body
    * @return {!Promise<!Object<string, *>|!Array<*>>}
    * @private
    */
-  async sendRequest_(method, endpoint, body = undefined) {
-    return request({
-      method,
-      uri: `${REST_API_BASE_URL}${endpoint}`,
-      auth: {
-        username: MDC_CBT_USERNAME,
-        password: MDC_CBT_AUTHKEY,
-      },
-      body,
-      json: true, // Automatically stringify the request body and parse the response body as JSON
-    });
+  async sendRequest_(stackTrace, method, endpoint, body = undefined) {
+    const uri = `${REST_API_BASE_URL}${endpoint}`;
+
+    if (this.cli_.isOffline()) {
+      console.warn(
+        `${CliColor.magenta('WARNING')}:`,
+        new Error('CbtApi#sendRequest_() should not be called in --offline mode')
+      );
+      return [];
+    }
+
+    try {
+      return await request({
+        method,
+        uri,
+        auth: {
+          username: MDC_CBT_USERNAME,
+          password: MDC_CBT_AUTHKEY,
+        },
+        body,
+        json: true, // Automatically stringify the request body and parse the response body as JSON
+      });
+    } catch (err) {
+      throw new VError(err, `CBT API request failed: ${method} ${uri}:\n${stackTrace}`);
+    }
   }
 }
 
diff --git a/test/screenshot/infra/lib/cli.js b/test/screenshot/infra/lib/cli.js
index ff34ace108f..557ea71139a 100644
--- a/test/screenshot/infra/lib/cli.js
+++ b/test/screenshot/infra/lib/cli.js
@@ -17,39 +17,19 @@
 'use strict';
 
 const mdcProto = require('../proto/mdc.pb').mdc.proto;
-const {ApprovalId, DiffBase, GitRevision} = mdcProto;
+const {ApprovalId} = mdcProto;
 
 const argparse = require('argparse');
 const checkIsOnline = require('is-online');
-const fs = require('mz/fs');
-const {GOLDEN_JSON_RELATIVE_PATH} = require('./constants');
 
 const Duration = require('./duration');
-const GitHubApi = require('./github-api');
-const GitRepo = require('./git-repo');
+const {GOLDEN_JSON_RELATIVE_PATH} = require('./constants');
 
-const HTTP_URL_REGEX = new RegExp('^https?://');
+/** @type {?boolean} */
+let isOnlineCached;
 
 class Cli {
   constructor() {
-    /**
-     * @type {!GitHubApi}
-     * @private
-     */
-    this.gitHubApi_ = new GitHubApi();
-
-    /**
-     * @type {!GitRepo}
-     * @private
-     */
-    this.gitRepo_ = new GitRepo();
-
-    /**
-     * @type {?boolean}
-     * @private
-     */
-    this.isOnlineCached_ = null;
-
     /**
      * @type {!ArgumentParser}
      * @private
@@ -79,6 +59,19 @@ class Cli {
     this.args_ = this.rootParser_.parseArgs();
   }
 
+  /**
+   * @return {!Promise<boolean>}
+   */
+  async checkIsOnline() {
+    if (this.offline) {
+      return false;
+    }
+    if (typeof isOnlineCached === 'undefined') {
+      isOnlineCached = await checkIsOnline({timeout: Duration.seconds(5).toMillis()});
+    }
+    return isOnlineCached;
+  }
+
   /**
    * @param {!ArgumentParser|!ActionContainer} parser
    * @param {!CliOptionConfig} config
@@ -362,8 +355,8 @@ E.g.: '--browser=chrome,-mobile' is the same as '--browser=chrome --browser=-mob
   }
 
   /** @return {boolean} */
-  get shouldFetch() {
-    return !this.args_['--no-fetch'];
+  get skipFetch() {
+    return this.args_['--no-fetch'];
   }
 
   /** @return {?string} */
@@ -472,298 +465,17 @@ E.g.: '--browser=chrome,-mobile' is the same as '--browser=chrome --browser=-mob
   }
 
   /**
-   * @return {!Promise<boolean>}
+   * @return {boolean}
    */
-  async isOnline() {
-    if (this.offline) {
-      return false;
-    }
-
-    if (typeof this.isOnlineCached_ !== 'boolean') {
-      this.isOnlineCached_ = await checkIsOnline({timeout: Duration.seconds(5).toMillis()});
-    }
-
-    return this.isOnlineCached_;
-  }
-
-  /**
-   * TODO(acdvorak): Move this method out of Cli class - it doesn't belong here.
-   * @return {!Promise<!mdc.proto.DiffBase>}
-   */
-  async parseGoldenDiffBase() {
-    /** @type {?mdc.proto.GitRevision} */
-    const travisGitRevision = await this.getTravisGitRevision();
-    if (travisGitRevision) {
-      return DiffBase.create({
-        type: DiffBase.Type.GIT_REVISION,
-        git_revision: travisGitRevision,
-      });
-    }
-    return this.parseDiffBase();
-  }
-
-  /**
-   * TODO(acdvorak): Move this method out of Cli class - it doesn't belong here.
-   * @param {string} rawDiffBase
-   * @return {!Promise<!mdc.proto.DiffBase>}
-   */
-  async parseDiffBase(rawDiffBase = this.diffBase) {
-    const isOnline = await this.isOnline();
-    const isRealBranch = (branch) => Boolean(branch) && !['master', 'origin/master', 'HEAD'].includes(branch);
-
-    /** @type {!mdc.proto.DiffBase} */
-    const parsedDiffBase = await this.parseDiffBase_(rawDiffBase);
-    const parsedBranch = parsedDiffBase.git_revision ? parsedDiffBase.git_revision.branch : null;
-
-    if (isOnline && isRealBranch(parsedBranch)) {
-      const prNumber = await this.gitHubApi_.getPullRequestNumber(parsedBranch);
-      if (prNumber) {
-        parsedDiffBase.git_revision.pr_number = prNumber;
-      }
-    }
-
-    return parsedDiffBase;
+  isOnline() {
+    return isOnlineCached === true;
   }
 
   /**
-   * TODO(acdvorak): Move this method out of Cli class - it doesn't belong here.
-   * @param {string} rawDiffBase
-   * @return {!Promise<!mdc.proto.DiffBase>}
-   * @private
-   */
-  async parseDiffBase_(rawDiffBase = this.diffBase) {
-    // Diff against a public `golden.json` URL.
-    // E.g.: `--diff-base=https://storage.googleapis.com/.../golden.json`
-    const isUrl = HTTP_URL_REGEX.test(rawDiffBase);
-    if (isUrl) {
-      return this.createPublicUrlDiffBase_(rawDiffBase);
-    }
-
-    // Diff against a local `golden.json` file.
-    // E.g.: `--diff-base=/tmp/golden.json`
-    const isLocalFile = await fs.exists(rawDiffBase);
-    if (isLocalFile) {
-      return this.createLocalFileDiffBase_(rawDiffBase);
-    }
-
-    const [inputGoldenRef, inputGoldenPath] = rawDiffBase.split(':');
-    const goldenFilePath = inputGoldenPath || GOLDEN_JSON_RELATIVE_PATH;
-    const fullGoldenRef = await this.gitRepo_.getFullSymbolicName(inputGoldenRef);
-
-    // Diff against a specific git commit.
-    // E.g.: `--diff-base=abcd1234`
-    if (!fullGoldenRef) {
-      return this.createCommitDiffBase_(inputGoldenRef, goldenFilePath);
-    }
-
-    const {remoteRef, localRef, tagRef} = this.getRefType_(fullGoldenRef);
-
-    // Diff against a remote git branch.
-    // E.g.: `--diff-base=origin/master` or `--diff-base=origin/feat/button/my-fancy-feature`
-    if (remoteRef) {
-      return this.createRemoteBranchDiffBase_(remoteRef, goldenFilePath);
-    }
-
-    // Diff against a remote git tag.
-    // E.g.: `--diff-base=v0.34.1`
-    if (tagRef) {
-      return this.createRemoteTagDiffBase_(tagRef, goldenFilePath);
-    }
-
-    // Diff against a local git branch.
-    // E.g.: `--diff-base=master` or `--diff-base=HEAD`
-    return this.createLocalBranchDiffBase_(localRef, goldenFilePath);
-  }
-
-  /**
-   * @return {?Promise<!mdc.proto.GitRevision>}
-   */
-  async getTravisGitRevision() {
-    const travisBranch = process.env.TRAVIS_BRANCH;
-    const travisTag = process.env.TRAVIS_TAG;
-    const travisPrNumber = Number(process.env.TRAVIS_PULL_REQUEST);
-    const travisPrBranch = process.env.TRAVIS_PULL_REQUEST_BRANCH;
-    const travisPrSha = process.env.TRAVIS_PULL_REQUEST_SHA;
-
-    if (travisPrNumber) {
-      const commit = await this.gitRepo_.getFullCommitHash(travisPrSha);
-      const author = await this.gitRepo_.getCommitAuthor(commit);
-      return GitRevision.create({
-        type: GitRevision.Type.TRAVIS_PR,
-        golden_json_file_path: GOLDEN_JSON_RELATIVE_PATH,
-        commit,
-        author,
-        branch: travisPrBranch || travisBranch,
-        pr_number: travisPrNumber,
-      });
-    }
-
-    if (travisTag) {
-      const commit = await this.gitRepo_.getFullCommitHash(travisTag);
-      const author = await this.gitRepo_.getCommitAuthor(commit);
-      return GitRevision.create({
-        type: GitRevision.Type.REMOTE_TAG,
-        golden_json_file_path: GOLDEN_JSON_RELATIVE_PATH,
-        commit,
-        author,
-        tag: travisTag,
-      });
-    }
-
-    if (travisBranch) {
-      const commit = await this.gitRepo_.getFullCommitHash(travisBranch);
-      const author = await this.gitRepo_.getCommitAuthor(commit);
-      return GitRevision.create({
-        type: GitRevision.Type.LOCAL_BRANCH,
-        golden_json_file_path: GOLDEN_JSON_RELATIVE_PATH,
-        commit,
-        author,
-        branch: travisBranch,
-      });
-    }
-
-    return null;
-  }
-
-  /**
-   * @param {string} publicUrl
-   * @return {!mdc.proto.DiffBase}
-   * @private
-   */
-  createPublicUrlDiffBase_(publicUrl) {
-    return DiffBase.create({
-      type: DiffBase.Type.PUBLIC_URL,
-      input_string: publicUrl,
-      public_url: publicUrl,
-    });
-  }
-
-  /**
-   * @param {string} localFilePath
-   * @return {!mdc.proto.DiffBase}
-   * @private
-   */
-  createLocalFileDiffBase_(localFilePath) {
-    return DiffBase.create({
-      type: DiffBase.Type.FILE_PATH,
-      input_string: localFilePath,
-      local_file_path: localFilePath,
-      is_default_local_file: localFilePath === GOLDEN_JSON_RELATIVE_PATH,
-    });
-  }
-
-  /**
-   * @param {string} commit
-   * @param {string} goldenJsonFilePath
-   * @return {!mdc.proto.DiffBase}
-   * @private
-   */
-  async createCommitDiffBase_(commit, goldenJsonFilePath) {
-    const author = await this.gitRepo_.getCommitAuthor(commit);
-
-    return DiffBase.create({
-      type: DiffBase.Type.GIT_REVISION,
-      git_revision: GitRevision.create({
-        type: GitRevision.Type.COMMIT,
-        input_string: `${commit}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
-        golden_json_file_path: goldenJsonFilePath,
-        commit,
-        author,
-      }),
-    });
-  }
-
-  /**
-   * @param {string} remoteRef
-   * @param {string} goldenJsonFilePath
-   * @return {!mdc.proto.DiffBase}
-   * @private
-   */
-  async createRemoteBranchDiffBase_(remoteRef, goldenJsonFilePath) {
-    const allRemoteNames = await this.gitRepo_.getRemoteNames();
-    const remote = allRemoteNames.find((curRemoteName) => remoteRef.startsWith(curRemoteName + '/'));
-    const branch = remoteRef.substr(remote.length + 1); // add 1 for forward-slash separator
-    const commit = await this.gitRepo_.getFullCommitHash(remoteRef);
-    const author = await this.gitRepo_.getCommitAuthor(commit);
-
-    return DiffBase.create({
-      type: DiffBase.Type.GIT_REVISION,
-      git_revision: GitRevision.create({
-        type: GitRevision.Type.REMOTE_BRANCH,
-        input_string: `${remoteRef}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
-        golden_json_file_path: goldenJsonFilePath,
-        commit,
-        author,
-        remote,
-        branch,
-      }),
-    });
-  }
-
-  /**
-   * @param {string} tagRef
-   * @param {string} goldenJsonFilePath
-   * @return {!mdc.proto.DiffBase}
-   * @private
-   */
-  async createRemoteTagDiffBase_(tagRef, goldenJsonFilePath) {
-    const commit = await this.gitRepo_.getFullCommitHash(tagRef);
-    const author = await this.gitRepo_.getCommitAuthor(commit);
-
-    return DiffBase.create({
-      type: DiffBase.Type.GIT_REVISION,
-      git_revision: GitRevision.create({
-        type: GitRevision.Type.REMOTE_TAG,
-        input_string: `${tagRef}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
-        golden_json_file_path: goldenJsonFilePath,
-        commit,
-        author,
-        remote: 'origin',
-        tag: tagRef,
-      }),
-    });
-  }
-
-  /**
-   * @param {string} branch
-   * @param {string} goldenJsonFilePath
-   * @return {!mdc.proto.DiffBase}
-   * @private
-   */
-  async createLocalBranchDiffBase_(branch, goldenJsonFilePath) {
-    const commit = await this.gitRepo_.getFullCommitHash(branch);
-    const author = await this.gitRepo_.getCommitAuthor(commit);
-
-    return DiffBase.create({
-      type: DiffBase.Type.GIT_REVISION,
-      git_revision: GitRevision.create({
-        type: GitRevision.Type.LOCAL_BRANCH,
-        input_string: `${branch}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
-        golden_json_file_path: goldenJsonFilePath,
-        commit,
-        author,
-        branch,
-      }),
-    });
-  }
-
-  /**
-   * @param {string} fullRef
-   * @return {{remoteRef: string, localRef: string, tagRef: string}}
-   * @private
+   * @return {boolean}
    */
-  getRefType_(fullRef) {
-    const getShortGoldenRef = (type) => {
-      const regex = new RegExp(`^refs/${type}s/(.+)$`);
-      const match = regex.exec(fullRef) || [];
-      return match[1];
-    };
-
-    const remoteRef = getShortGoldenRef('remote');
-    const localRef = getShortGoldenRef('head');
-    const tagRef = getShortGoldenRef('tag');
-
-    return {remoteRef, localRef, tagRef};
+  isOffline() {
+    return !this.isOnline();
   }
 }
 
diff --git a/test/screenshot/infra/lib/cloud-storage.js b/test/screenshot/infra/lib/cloud-storage.js
index a3c5c2e71ed..7b4876b7c58 100644
--- a/test/screenshot/infra/lib/cloud-storage.js
+++ b/test/screenshot/infra/lib/cloud-storage.js
@@ -80,33 +80,23 @@ class CloudStorage {
    */
   async uploadDirectory_(noun, reportData, localSourceDir) {
     const isSourceDirEmpty = glob.sync('**/*', {cwd: localSourceDir, nodir: true}).length === 0;
-    const isOnline = await this.cli_.isOnline();
-    if (isSourceDirEmpty || !isOnline) {
+    const isOffline = this.cli_.isOffline();
+    if (isSourceDirEmpty || isOffline) {
       return;
     }
 
-    console.log(`\nUploading ${noun} to GCS...\n`);
-
-    /** @type {!ChildProcessSpawnResult} */
-    const gsutilProcess = await this.spawnGsutilUploadProcess_(reportData, localSourceDir);
-
-    /** @type {number} */
-    const exitCode = gsutilProcess.status;
-
+    console.log(`Uploading ${noun} to GCS...\n`);
+    this.spawnGsutilUploadProcess_(reportData, localSourceDir);
     console.log('');
-
-    if (exitCode !== 0) {
-      throw new Error(`gsutil processes exited with code ${exitCode}`);
-    }
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
    * @param {string} localSourceDir
-   * @return {!Promise<!ChildProcessSpawnResult>}
+   * @return {!SpawnSyncReturns}
    * @private
    */
-  async spawnGsutilUploadProcess_(reportData, localSourceDir) {
+  spawnGsutilUploadProcess_(reportData, localSourceDir) {
     const removeTrailingSlash = (filePath) => filePath.replace(new RegExp('/+$'), '');
 
     // Normalize directory paths by removing trailing slashes
diff --git a/test/screenshot/infra/lib/constants.js b/test/screenshot/infra/lib/constants.js
index ab45a42f63d..a534bdd4d9f 100644
--- a/test/screenshot/infra/lib/constants.js
+++ b/test/screenshot/infra/lib/constants.js
@@ -51,18 +51,29 @@ module.exports = {
    * Number of milliseconds to wait for fonts to load on a test page in Selenium before giving up.
    * @type {number}
    */
-  SELENIUM_FONT_LOAD_WAIT_MS: 3000,
+  SELENIUM_FONT_LOAD_WAIT_MS: 3 * 1000, // 3 seconds
+
+  /**
+   * Number of milliseconds a Selenium test should wait to receive commands before being considered "stalled".
+   * @type {number}
+   */
+  SELENIUM_STALLED_TIME_MS: 2 * 60 * 1000, // 2 minutes
 
   ExitCode: {
     OK: 0,
-    UNKNOWN_ERROR: 11,
-    SIGINT: 12, // ctrl-c
-    SIGTERM: 13, // kill
-    UNSUPPORTED_CLI_COMMAND: 14,
-    HTTP_PORT_ALREADY_IN_USE: 15,
-    MISSING_ENV_VAR: 16,
-    UNHANDLED_PROMISE_REJECTION: 17,
-    CHANGES_FOUND: 18,
-    UNSUPPORTED_EXTERNAL_PR: 19,
+
+    /** ctrl-c */
+    SIGINT: 11,
+
+    /** kill */
+    SIGTERM: 12,
+
+    UNKNOWN_ERROR: 13,
+    UNCAUGHT_EXCEPTION: 14,
+    UNHANDLED_PROMISE_REJECTION: 15,
+    UNSUPPORTED_CLI_COMMAND: 16,
+    MISSING_ENV_VAR: 17,
+    HTTP_PORT_ALREADY_IN_USE: 18,
+    CHANGES_FOUND: 19,
   },
 };
diff --git a/test/screenshot/infra/lib/controller.js b/test/screenshot/infra/lib/controller.js
index 9608f343566..098e43f3544 100644
--- a/test/screenshot/infra/lib/controller.js
+++ b/test/screenshot/infra/lib/controller.js
@@ -16,39 +16,38 @@
 
 'use strict';
 
-const mdcProto = require('../proto/mdc.pb').mdc.proto;
-const {GitRevision} = mdcProto;
+const VError = require('verror');
 
+const CbtApi = require('./cbt-api');
 const Cli = require('./cli');
 const CloudStorage = require('./cloud-storage');
 const Duration = require('./duration');
-const GitRepo = require('./git-repo');
 const GoldenIo = require('./golden-io');
 const Logger = require('./logger');
 const ReportBuilder = require('./report-builder');
 const ReportWriter = require('./report-writer');
 const SeleniumApi = require('./selenium-api');
-const {ExitCode} = require('./constants');
+const getStackTrace = require('./stacktrace')('Controller');
 
 class Controller {
   constructor() {
     /**
-     * @type {!Cli}
+     * @type {!CbtApi}
      * @private
      */
-    this.cli_ = new Cli();
+    this.cbtApi_ = new CbtApi();
 
     /**
-     * @type {!CloudStorage}
+     * @type {!Cli}
      * @private
      */
-    this.cloudStorage_ = new CloudStorage();
+    this.cli_ = new Cli();
 
     /**
-     * @type {!GitRepo}
+     * @type {!CloudStorage}
      * @private
      */
-    this.gitRepo_ = new GitRepo();
+    this.cloudStorage_ = new CloudStorage();
 
     /**
      * @type {!GoldenIo}
@@ -86,183 +85,93 @@ class Controller {
    */
   async initForApproval() {
     const runReportJsonUrl = this.cli_.runReportJsonUrl;
-    return this.reportBuilder_.initForApproval({runReportJsonUrl});
+    return await this.reportBuilder_.initForApproval({runReportJsonUrl});
   }
 
   /**
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
    * @return {!Promise<!mdc.proto.ReportData>}
    */
-  async initForCapture() {
-    const isOnline = await this.cli_.isOnline();
-    const shouldFetch = this.cli_.shouldFetch;
-    if (isOnline && shouldFetch) {
-      await this.gitRepo_.fetch();
+  async initForCapture(goldenDiffBase) {
+    const isOnline = this.cli_.isOnline();
+    if (isOnline) {
+      await this.cbtApi_.killStalledSeleniumTests();
     }
-    return this.reportBuilder_.initForCapture();
+    return await this.reportBuilder_.initForCapture(goldenDiffBase);
   }
 
   /**
    * @return {!Promise<!mdc.proto.ReportData>}
    */
   async initForDemo() {
-    const isOnline = await this.cli_.isOnline();
-    const shouldFetch = this.cli_.shouldFetch;
-    if (isOnline && shouldFetch) {
-      await this.gitRepo_.fetch();
-    }
-    return this.reportBuilder_.initForDemo();
-  }
-
-  /**
-   * @param {!mdc.proto.ReportData} reportData
-   * @return {{isTestable: boolean, prNumber: ?number}}
-   */
-  checkIsTestable(reportData) {
-    const goldenGitRevision = reportData.meta.golden_diff_base.git_revision;
-    const shouldSkipScreenshotTests =
-      goldenGitRevision &&
-      goldenGitRevision.type === GitRevision.Type.TRAVIS_PR &&
-      goldenGitRevision.pr_file_paths.length === 0;
-
-    return {
-      isTestable: !shouldSkipScreenshotTests,
-      prNumber: goldenGitRevision ? goldenGitRevision.pr_number : null,
-    };
+    return await this.reportBuilder_.initForDemo();
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
-   * @return {!Promise<!mdc.proto.ReportData>}
    */
   async uploadAllAssets(reportData) {
-    this.logger_.foldStart('screenshot.upload', 'Controller#uploadAllAssets()');
+    this.logger_.foldStart('screenshot.upload_assets', 'Controller#uploadAllAssets()');
     await this.cloudStorage_.uploadAllAssets(reportData);
-    this.logger_.foldEnd('screenshot.upload');
-    return reportData;
+    this.logger_.foldEnd('screenshot.upload_assets');
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
-   * @return {!Promise<!mdc.proto.ReportData>}
    */
   async captureAllPages(reportData) {
-    this.logger_.foldStart('screenshot.capture', 'Controller#captureAllPages()');
-    await this.seleniumApi_.captureAllPages(reportData);
-    await this.cloudStorage_.uploadAllScreenshots(reportData);
-    this.logger_.foldEnd('screenshot.capture');
-    return reportData;
-  }
+    this.logger_.foldStart('screenshot.capture_images', 'Controller#captureAllPages()');
 
-  /**
-   * @param {!mdc.proto.ReportData} reportData
-   * @return {!Promise<!mdc.proto.ReportData>}
-   */
-  async compareAllScreenshots(reportData) {
-    this.logger_.foldStart('screenshot.compare', 'Controller#compareAllScreenshots()');
+    let stackTrace;
 
-    await this.reportBuilder_.populateScreenshotMaps(reportData.user_agents, reportData.screenshots);
-    await this.cloudStorage_.uploadAllDiffs(reportData);
-
-    this.logComparisonResults_(reportData);
+    try {
+      stackTrace = getStackTrace('captureAllPages');
+      await this.seleniumApi_.captureAllPages(reportData);
+    } catch (err) {
+      throw new VError(err, stackTrace);
+    }
 
-    // TODO(acdvorak): Where should this go?
     const meta = reportData.meta;
     meta.end_time_iso_utc = new Date().toISOString();
     meta.duration_ms = Duration.elapsed(meta.start_time_iso_utc, meta.end_time_iso_utc).toMillis();
 
-    this.logger_.foldEnd('screenshot.compare');
-
-    return reportData;
+    this.logger_.foldEnd('screenshot.capture_images');
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
-   * @return {!Promise<!mdc.proto.ReportData>}
    */
-  async generateReportPage(reportData) {
-    this.logger_.foldStart('screenshot.report', 'Controller#generateReportPage()');
-
-    await this.reportWriter_.generateReportPage(reportData);
-    await this.cloudStorage_.uploadDiffReport(reportData);
-
-    this.logger_.foldEnd('screenshot.report');
-    this.logger_.log('');
-
-    // TODO(acdvorak): Store this directly in the proto so we don't have to recalculate it all over the place
-    const numChanges =
-      reportData.screenshots.changed_screenshot_list.length +
-      reportData.screenshots.added_screenshot_list.length +
-      reportData.screenshots.removed_screenshot_list.length;
-
-    const boldRed = Logger.colors.bold.red;
-    const boldGreen = Logger.colors.bold.green;
-
-    if (numChanges > 0) {
-      this.logger_.error(boldRed(`\n\n${numChanges} screenshot${numChanges === 1 ? '' : 's'} changed!\n`));
-      this.logger_.log('Diff report:', boldRed(reportData.meta.report_html_file.public_url));
-    } else {
-      this.logger_.log(boldGreen(`\n\n${numChanges} screenshot${numChanges === 1 ? '' : 's'} changed!\n`));
-      this.logger_.log('Diff report:', boldGreen(reportData.meta.report_html_file.public_url));
-    }
-
-    return reportData;
+  populateMaps(reportData) {
+    this.reportBuilder_.populateMaps(reportData.user_agents, reportData.screenshots);
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
-   * @return {!Promise<number>}
    */
-  async getTestExitCode(reportData) {
-    // Pull requests display screenshot diffs as a separate "status check" in the GitHub UI, so we don't want to mark
-    // the Travis run as "failed".
-    if (Number(process.env.TRAVIS_PULL_REQUEST)) {
-      return ExitCode.OK;
-    }
-
-    // TODO(acdvorak): Store this directly in the proto so we don't have to recalculate it all over the place
-    const numChanges =
-      reportData.screenshots.changed_screenshot_list.length +
-      reportData.screenshots.added_screenshot_list.length +
-      reportData.screenshots.removed_screenshot_list.length;
-
-    return numChanges > 0 ? ExitCode.CHANGES_FOUND : ExitCode.OK;
+  async uploadAllImages(reportData) {
+    this.logger_.foldStart('screenshot.upload_images', 'Controller#uploadAllImages()');
+    await this.cloudStorage_.uploadAllScreenshots(reportData);
+    await this.cloudStorage_.uploadAllDiffs(reportData);
+    this.logger_.foldEnd('screenshot.upload_images');
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
-   * @return {!Promise<!mdc.proto.ReportData>}
    */
-  async approveChanges(reportData) {
-    /** @type {!GoldenFile} */
-    const newGoldenFile = await this.reportBuilder_.approveChanges(reportData);
-    await this.goldenIo_.writeToLocalFile(newGoldenFile);
-    return reportData;
+  async generateReportPage(reportData) {
+    this.logger_.foldStart('screenshot.generate_report', 'Controller#generateReportPage()');
+    await this.reportWriter_.generateReportPage(reportData);
+    await this.cloudStorage_.uploadDiffReport(reportData);
+    this.logger_.foldEnd('screenshot.generate_report');
   }
 
   /**
    * @param {!mdc.proto.ReportData} reportData
-   * @private
    */
-  logComparisonResults_(reportData) {
-    console.log('');
-    this.logComparisonResultSet_('Skipped', reportData.screenshots.skipped_screenshot_list);
-    this.logComparisonResultSet_('Unchanged', reportData.screenshots.unchanged_screenshot_list);
-    this.logComparisonResultSet_('Removed', reportData.screenshots.removed_screenshot_list);
-    this.logComparisonResultSet_('Added', reportData.screenshots.added_screenshot_list);
-    this.logComparisonResultSet_('Changed', reportData.screenshots.changed_screenshot_list);
-  }
-
-  /**
-   * @param {string} title
-   * @param {!Array<!mdc.proto.Screenshot>} screenshots
-   * @private
-   */
-  logComparisonResultSet_(title, screenshots) {
-    console.log(`${title} ${screenshots.length} screenshot${screenshots.length === 1 ? '' : 's'}:`);
-    for (const screenshot of screenshots) {
-      console.log(`  - ${screenshot.html_file_path} > ${screenshot.user_agent.alias}`);
-    }
-    console.log('');
+  async approveChanges(reportData) {
+    /** @type {!GoldenFile} */
+    const newGoldenFile = await this.reportBuilder_.approveChanges(reportData);
+    await this.goldenIo_.writeToLocalFile(newGoldenFile);
   }
 }
 
diff --git a/test/screenshot/infra/lib/diff-base-parser.js b/test/screenshot/infra/lib/diff-base-parser.js
new file mode 100644
index 00000000000..9aaae052728
--- /dev/null
+++ b/test/screenshot/infra/lib/diff-base-parser.js
@@ -0,0 +1,412 @@
+/*
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const mdcProto = require('../proto/mdc.pb').mdc.proto;
+const {DiffBase, GitRevision} = mdcProto;
+
+const fs = require('mz/fs');
+const {GOLDEN_JSON_RELATIVE_PATH} = require('./constants');
+
+const Cli = require('./cli');
+const GitHubApi = require('./github-api');
+const GitRepo = require('./git-repo');
+const getStackTrace = require('./stacktrace')('DiffBaseParser');
+
+const HTTP_URL_REGEX = new RegExp('^https?://');
+
+class DiffBaseParser {
+  constructor() {
+    /**
+     * @type {!Cli}
+     * @private
+     */
+    this.cli_ = new Cli();
+
+    /**
+     * @type {!GitHubApi}
+     * @private
+     */
+    this.gitHubApi_ = new GitHubApi();
+
+    /**
+     * @type {!GitRepo}
+     * @private
+     */
+    this.gitRepo_ = new GitRepo();
+  }
+
+  /**
+   * @return {!Promise<!mdc.proto.DiffBase>}
+   */
+  async parseGoldenDiffBase() {
+    return await this.getTravisDiffBase_() || await this.parseDiffBase(this.cli_.diffBase);
+  }
+
+  /**
+   * @return {!Promise<!mdc.proto.DiffBase>}
+   */
+  async parseSnapshotDiffBase() {
+    return await this.getTravisDiffBase_() || await this.parseDiffBase('HEAD');
+  }
+
+  /**
+   * @return {!Promise<!mdc.proto.DiffBase>}
+   */
+  async parseMasterDiffBase() {
+    /** @type {!mdc.proto.DiffBase} */
+    const goldenDiffBase = await this.parseGoldenDiffBase();
+    const prNumber = goldenDiffBase.git_revision ? goldenDiffBase.git_revision.pr_number : null;
+    let baseBranch = 'origin/master';
+    if (prNumber) {
+      if (process.env.TRAVIS_BRANCH) {
+        baseBranch = `origin/${process.env.TRAVIS_BRANCH}`;
+      } else {
+        baseBranch = await this.gitHubApi_.getPullRequestBaseBranch(prNumber);
+      }
+    }
+    return this.parseDiffBase(baseBranch);
+  }
+
+  /**
+   * @param {string} rawDiffBase
+   * @return {!Promise<!mdc.proto.DiffBase>}
+   */
+  async parseDiffBase(rawDiffBase) {
+    const isOnline = this.cli_.isOnline();
+    const isRealBranch = (branch) => Boolean(branch) && !['master', 'origin/master', 'HEAD'].includes(branch);
+
+    /** @type {!mdc.proto.DiffBase} */
+    const parsedDiffBase = await this.parseDiffBase_(rawDiffBase);
+    const parsedBranch = parsedDiffBase.git_revision ? parsedDiffBase.git_revision.branch : null;
+
+    if (isOnline && isRealBranch(parsedBranch)) {
+      const prNumber = await this.gitHubApi_.getPullRequestNumber(parsedBranch);
+      if (prNumber) {
+        parsedDiffBase.git_revision.pr_number = prNumber;
+      }
+    }
+
+    return parsedDiffBase;
+  }
+
+  /**
+   * @param {string} rawDiffBase
+   * @return {!Promise<!mdc.proto.DiffBase>}
+   * @private
+   */
+  async parseDiffBase_(rawDiffBase) {
+    // Diff against a public `golden.json` URL.
+    // E.g.: `--diff-base=https://storage.googleapis.com/.../golden.json`
+    const isUrl = HTTP_URL_REGEX.test(rawDiffBase);
+    if (isUrl) {
+      return this.createPublicUrlDiffBase_(rawDiffBase);
+    }
+
+    // Diff against a local `golden.json` file.
+    // E.g.: `--diff-base=/tmp/golden.json`
+    const isLocalFile = await fs.exists(rawDiffBase);
+    if (isLocalFile) {
+      return this.createLocalFileDiffBase_(rawDiffBase);
+    }
+
+    const [inputGoldenRef, inputGoldenPath] = rawDiffBase.split(':');
+    const goldenFilePath = inputGoldenPath || GOLDEN_JSON_RELATIVE_PATH;
+
+    const isRemoteBranch = inputGoldenRef.startsWith('origin/');
+    const isVersionTag = /^v[0-9.]+$/.test(inputGoldenRef);
+    const isFetchable = isRemoteBranch || isVersionTag;
+    const skipFetch = this.cli_.skipFetch;
+    const isOnline = this.cli_.isOnline();
+    if (isFetchable && !skipFetch && isOnline) {
+      await this.gitRepo_.fetch();
+    }
+
+    const fullGoldenRef = await this.gitRepo_.getFullSymbolicName(inputGoldenRef);
+
+    // Diff against a specific git commit.
+    // E.g.: `--diff-base=abcd1234`
+    if (!fullGoldenRef) {
+      return this.createCommitDiffBase_(inputGoldenRef, goldenFilePath);
+    }
+
+    const {remoteRef, localRef, tagRef} = this.getRefType_(fullGoldenRef);
+
+    // Diff against a remote git branch.
+    // E.g.: `--diff-base=origin/master` or `--diff-base=origin/feat/button/my-fancy-feature`
+    if (remoteRef) {
+      return this.createRemoteBranchDiffBase_(remoteRef, goldenFilePath);
+    }
+
+    // Diff against a remote git tag.
+    // E.g.: `--diff-base=v0.34.1`
+    if (tagRef) {
+      return this.createRemoteTagDiffBase_(tagRef, goldenFilePath);
+    }
+
+    // Diff against a local git branch.
+    // E.g.: `--diff-base=master` or `--diff-base=HEAD`
+    return this.createLocalBranchDiffBase_(localRef, goldenFilePath);
+  }
+
+  /**
+   * @return {!Promise<?mdc.proto.DiffBase>}
+   * @private
+   */
+  async getTravisDiffBase_() {
+    /** @type {?mdc.proto.GitRevision} */
+    const travisGitRevision = await this.getTravisGitRevision();
+    if (!travisGitRevision) {
+      return null;
+    }
+
+    let generatedInputString;
+    if (travisGitRevision.pr_number) {
+      generatedInputString = `travis/pr/${travisGitRevision.pr_number}`;
+    } else if (travisGitRevision.tag) {
+      generatedInputString = `travis/tag/${travisGitRevision.tag}`;
+    } else if (travisGitRevision.branch) {
+      generatedInputString = `travis/branch/${travisGitRevision.branch}`;
+    } else {
+      generatedInputString = `travis/commit/${travisGitRevision.commit}`;
+    }
+
+    return DiffBase.create({
+      type: DiffBase.Type.GIT_REVISION,
+      input_string: generatedInputString,
+      git_revision: travisGitRevision,
+    });
+  }
+
+  /**
+   * @return {?Promise<!mdc.proto.GitRevision>}
+   */
+  async getTravisGitRevision() {
+    const travisBranch = process.env.TRAVIS_BRANCH;
+    const travisTag = process.env.TRAVIS_TAG;
+    const travisPrNumber = Number(process.env.TRAVIS_PULL_REQUEST);
+    const travisPrBranch = process.env.TRAVIS_PULL_REQUEST_BRANCH;
+    const travisPrSha = process.env.TRAVIS_PULL_REQUEST_SHA;
+
+    const logInfo = {travisBranch, travisTag, travisPrNumber, travisPrBranch, travisPrSha};
+
+    if (travisPrNumber) {
+      const commit = await this.gitRepo_.getFullCommitHash(travisPrSha);
+      const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('getTravisGitRevision', logInfo));
+      return GitRevision.create({
+        type: GitRevision.Type.TRAVIS_PR,
+        golden_json_file_path: GOLDEN_JSON_RELATIVE_PATH,
+        commit,
+        author,
+        branch: travisPrBranch || travisBranch,
+        pr_number: travisPrNumber,
+        pr_file_paths: await this.getTestablePrFilePaths_(travisPrNumber),
+      });
+    }
+
+    if (travisTag) {
+      const commit = await this.gitRepo_.getFullCommitHash(travisTag);
+      const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('getTravisGitRevision', logInfo));
+      return GitRevision.create({
+        type: GitRevision.Type.REMOTE_TAG,
+        golden_json_file_path: GOLDEN_JSON_RELATIVE_PATH,
+        commit,
+        author,
+        tag: travisTag,
+      });
+    }
+
+    if (travisBranch) {
+      const commit = await this.gitRepo_.getFullCommitHash(travisBranch);
+      const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('getTravisGitRevision', logInfo));
+      return GitRevision.create({
+        type: GitRevision.Type.LOCAL_BRANCH,
+        golden_json_file_path: GOLDEN_JSON_RELATIVE_PATH,
+        commit,
+        author,
+        branch: travisBranch,
+      });
+    }
+
+    return null;
+  }
+
+  /**
+   * @param {number} prNumber
+   * @return {!Promise<!Array<string>>}
+   * @private
+   */
+  async getTestablePrFilePaths_(prNumber) {
+    /** @type {!Array<!github.proto.PullRequestFile>} */
+    const allPrFiles = await this.gitHubApi_.getPullRequestFiles(prNumber);
+
+    return allPrFiles
+      .filter((prFile) => {
+        const isMarkdownFile = () => prFile.filename.endsWith('.md');
+        const isDemosFile = () => prFile.filename.startsWith('demos/');
+        const isDocsFile = () => prFile.filename.startsWith('docs/');
+        const isUnitTestFile = () => prFile.filename.startsWith('test/unit/');
+        const isIgnoredFile = isMarkdownFile() || isDemosFile() || isDocsFile() || isUnitTestFile();
+        return !isIgnoredFile;
+      })
+      .map((prFile) => prFile.filename)
+    ;
+  }
+
+  /**
+   * @param {string} publicUrl
+   * @return {!mdc.proto.DiffBase}
+   * @private
+   */
+  createPublicUrlDiffBase_(publicUrl) {
+    return DiffBase.create({
+      type: DiffBase.Type.PUBLIC_URL,
+      input_string: publicUrl,
+      public_url: publicUrl,
+    });
+  }
+
+  /**
+   * @param {string} localFilePath
+   * @return {!mdc.proto.DiffBase}
+   * @private
+   */
+  createLocalFileDiffBase_(localFilePath) {
+    return DiffBase.create({
+      type: DiffBase.Type.FILE_PATH,
+      input_string: localFilePath,
+      local_file_path: localFilePath,
+      is_default_local_file: localFilePath === GOLDEN_JSON_RELATIVE_PATH,
+    });
+  }
+
+  /**
+   * @param {string} commit
+   * @param {string} goldenJsonFilePath
+   * @return {!mdc.proto.DiffBase}
+   * @private
+   */
+  async createCommitDiffBase_(commit, goldenJsonFilePath) {
+    const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('createCommitDiffBase_'));
+
+    return DiffBase.create({
+      type: DiffBase.Type.GIT_REVISION,
+      input_string: `${commit}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
+      git_revision: GitRevision.create({
+        type: GitRevision.Type.COMMIT,
+        golden_json_file_path: goldenJsonFilePath,
+        commit,
+        author,
+      }),
+    });
+  }
+
+  /**
+   * @param {string} remoteRef
+   * @param {string} goldenJsonFilePath
+   * @return {!mdc.proto.DiffBase}
+   * @private
+   */
+  async createRemoteBranchDiffBase_(remoteRef, goldenJsonFilePath) {
+    const allRemoteNames = await this.gitRepo_.getRemoteNames();
+    const remote = allRemoteNames.find((curRemoteName) => remoteRef.startsWith(curRemoteName + '/'));
+    const branch = remoteRef.substr(remote.length + 1); // add 1 for forward-slash separator
+    const commit = await this.gitRepo_.getFullCommitHash(remoteRef);
+    const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('createRemoteBranchDiffBase_'));
+
+    return DiffBase.create({
+      type: DiffBase.Type.GIT_REVISION,
+      input_string: `${remoteRef}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
+      git_revision: GitRevision.create({
+        type: GitRevision.Type.REMOTE_BRANCH,
+        golden_json_file_path: goldenJsonFilePath,
+        commit,
+        author,
+        remote,
+        branch,
+      }),
+    });
+  }
+
+  /**
+   * @param {string} tagRef
+   * @param {string} goldenJsonFilePath
+   * @return {!mdc.proto.DiffBase}
+   * @private
+   */
+  async createRemoteTagDiffBase_(tagRef, goldenJsonFilePath) {
+    const commit = await this.gitRepo_.getFullCommitHash(tagRef);
+    const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('createRemoteTagDiffBase_'));
+
+    return DiffBase.create({
+      type: DiffBase.Type.GIT_REVISION,
+      input_string: `${tagRef}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
+      git_revision: GitRevision.create({
+        type: GitRevision.Type.REMOTE_TAG,
+        golden_json_file_path: goldenJsonFilePath,
+        commit,
+        author,
+        remote: 'origin',
+        tag: tagRef,
+      }),
+    });
+  }
+
+  /**
+   * @param {string} branch
+   * @param {string} goldenJsonFilePath
+   * @return {!mdc.proto.DiffBase}
+   * @private
+   */
+  async createLocalBranchDiffBase_(branch, goldenJsonFilePath) {
+    const commit = await this.gitRepo_.getFullCommitHash(branch);
+    const author = await this.gitRepo_.getCommitAuthor(commit, getStackTrace('createLocalBranchDiffBase_'));
+
+    return DiffBase.create({
+      type: DiffBase.Type.GIT_REVISION,
+      input_string: `${branch}:${goldenJsonFilePath}`, // TODO(acdvorak): Document the ':' separator format
+      git_revision: GitRevision.create({
+        type: GitRevision.Type.LOCAL_BRANCH,
+        golden_json_file_path: goldenJsonFilePath,
+        commit,
+        author,
+        branch,
+      }),
+    });
+  }
+
+  /**
+   * @param {string} fullRef
+   * @return {{remoteRef: string, localRef: string, tagRef: string}}
+   * @private
+   */
+  getRefType_(fullRef) {
+    const getShortGoldenRef = (type) => {
+      const regex = new RegExp(`^refs/${type}s/(.+)$`);
+      const match = regex.exec(fullRef) || [];
+      return match[1];
+    };
+
+    const remoteRef = getShortGoldenRef('remote');
+    const localRef = getShortGoldenRef('head');
+    const tagRef = getShortGoldenRef('tag');
+
+    return {remoteRef, localRef, tagRef};
+  }
+}
+
+module.exports = DiffBaseParser;
diff --git a/test/screenshot/infra/lib/git-repo.js b/test/screenshot/infra/lib/git-repo.js
index 8fe97882f25..07c9e3eb476 100644
--- a/test/screenshot/infra/lib/git-repo.js
+++ b/test/screenshot/infra/lib/git-repo.js
@@ -16,11 +16,14 @@
 
 'use strict';
 
+const VError = require('verror');
 const simpleGit = require('simple-git/promise');
 
 const mdcProto = require('../proto/mdc.pb').mdc.proto;
 const {User} = mdcProto;
 
+let hasFetched = false;
+
 class GitRepo {
   constructor(workingDirPath = undefined) {
     /**
@@ -49,6 +52,11 @@ class GitRepo {
    * @return {!Promise<void>}
    */
   async fetch(args = []) {
+    if (hasFetched) {
+      return;
+    }
+    hasFetched = true;
+
     console.log('Fetching remote git commits...');
 
     const prFetchRef = '+refs/pull/*/head:refs/remotes/origin/pr/*';
@@ -58,7 +66,12 @@ class GitRepo {
       await this.exec_('raw', ['config', '--add', 'remote.origin.fetch', prFetchRef]);
     }
 
-    await this.repo_.fetch(['--tags', ...args]);
+    try {
+      await this.repo_.fetch(['--tags', ...args]);
+    } catch (err) {
+      const serialized = JSON.stringify(args);
+      throw new VError(err, `Failed to run GitRepo.fetch(${serialized})`);
+    }
   }
 
   /**
@@ -99,21 +112,34 @@ class GitRepo {
    * @return {!Promise<string>}
    */
   async getFileAtRevision(filePath, revision = 'master') {
-    return this.repo_.show([`${revision}:${filePath}`]);
+    try {
+      return this.repo_.show([`${revision}:${filePath}`]);
+    } catch (err) {
+      const serialized = JSON.stringify(args);
+      throw new VError(err, `Failed to run GitRepo.getFileAtRevision(${serialized})`);
+    }
   }
 
   /**
    * @return {!Promise<!Array<string>>}
    */
   async getRemoteNames() {
-    return (await this.repo_.getRemotes()).map((remote) => remote.name);
+    try {
+      return (await this.repo_.getRemotes()).map((remote) => remote.name);
+    } catch (err) {
+      throw new VError(err, 'Failed to run GitRepo.getRemoteNames()');
+    }
   }
 
   /**
    * @return {!Promise<!StatusSummary>}
    */
   async getStatus() {
-    return this.repo_.status();
+    try {
+      return this.repo_.status();
+    } catch (err) {
+      throw new VError(err, 'Failed to run GitRepo.getStatus()');
+    }
   }
 
   /**
@@ -121,8 +147,13 @@ class GitRepo {
    * @return {!Promise<!Array<!DefaultLogFields>>}
    */
   async getLog(args = []) {
-    const logEntries = await this.repo_.log([...args]);
-    return logEntries.all.concat(); // convert TypeScript ReadonlyArray to mutable Array
+    try {
+      const logEntries = await this.repo_.log([...args]);
+      return logEntries.all.concat(); // convert TypeScript ReadonlyArray to mutable Array
+    } catch (err) {
+      const serialized = JSON.stringify(args);
+      throw new VError(err, `Failed to run GitRepo.getLog(${serialized})`);
+    }
   }
 
   /**
@@ -130,16 +161,28 @@ class GitRepo {
    * @return {!Promise<!Array<string>>}
    */
   async getIgnoredPaths(filePaths) {
-    return this.repo_.checkIgnore(filePaths);
+    try {
+      return this.repo_.checkIgnore(filePaths);
+    } catch (err) {
+      throw new VError(err, `Unable to check gitignore status of ${filePaths.length} file paths`);
+    }
   }
 
   /**
-   * @param {string=} commit
+   * @param {string} commit
+   * @param {string} stackTrace
    * @return {!Promise<!mdc.proto.User>}
    */
-  async getCommitAuthor(commit = undefined) {
+  async getCommitAuthor(commit, stackTrace) {
     /** @type {!Array<!DefaultLogFields>} */
-    const logEntries = await this.getLog([commit]);
+    let logEntries;
+
+    try {
+      logEntries = await this.getLog([commit]);
+    } catch (err) {
+      throw new VError(err, `Unable to get author for commit "${commit}":\n${stackTrace}`);
+    }
+
     const logEntry = logEntries[0];
     return User.create({
       name: logEntry.author_name,
@@ -154,7 +197,12 @@ class GitRepo {
    * @private
    */
   async exec_(cmd, argList = []) {
-    return (await this.repo_[cmd](argList) || '').trim();
+    try {
+      return (await this.repo_[cmd](argList) || '').trim();
+    } catch (err) {
+      const serialized = JSON.stringify([cmd, ...argList]);
+      throw new VError(err, `Failed to run GitRepo.exec_(${serialized})`);
+    }
   }
 }
 
diff --git a/test/screenshot/infra/lib/github-api.js b/test/screenshot/infra/lib/github-api.js
index 9f07270d8d3..0a9d490a61c 100644
--- a/test/screenshot/infra/lib/github-api.js
+++ b/test/screenshot/infra/lib/github-api.js
@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 
+const VError = require('verror');
+const debounce = require('debounce');
 const octokit = require('@octokit/rest');
+
 const GitRepo = require('./git-repo');
+const getStackTrace = require('./stacktrace')('GitHubApi');
 
 class GitHubApi {
   constructor() {
@@ -41,6 +45,29 @@ class GitHubApi {
       type: 'oauth',
       token: token,
     });
+
+    const throttle = (fn, delay) => {
+      let lastCall = 0;
+      return (...args) => {
+        const now = (new Date).getTime();
+        if (now - lastCall < delay) {
+          return;
+        }
+        lastCall = now;
+        return fn(...args);
+      };
+    };
+
+    const createStatusDebounced = debounce((...args) => {
+      return this.createStatusUnthrottled_(...args);
+    }, 2500);
+    const createStatusThrottled = throttle((...args) => {
+      return this.createStatusUnthrottled_(...args);
+    }, 5000);
+    this.createStatusThrottled_ = (...args) => {
+      createStatusDebounced(...args);
+      createStatusThrottled(...args);
+    };
   }
 
   /**
@@ -56,17 +83,32 @@ class GitHubApi {
     };
   }
 
+  /**
+   * @param {string} state
+   * @param {string} description
+   */
+  setPullRequestStatusManual({state, description}) {
+    if (process.env.TRAVIS !== 'true') {
+      return;
+    }
+
+    this.createStatusThrottled_({
+      state,
+      targetUrl: `https://travis-ci.org/material-components/material-components-web/jobs/${process.env.TRAVIS_JOB_ID}`,
+      description,
+    });
+  }
+
   /**
    * @param {!mdc.proto.ReportData} reportData
    * @return {!Promise<*>}
    */
-  async setPullRequestStatus(reportData) {
-    const meta = reportData.meta;
-    const prNumber = Number(process.env.TRAVIS_PULL_REQUEST);
-    if (!prNumber) {
+  async setPullRequestStatusAuto(reportData) {
+    if (process.env.TRAVIS !== 'true') {
       return;
     }
 
+    const meta = reportData.meta;
     const screenshots = reportData.screenshots;
     const numUnchanged = screenshots.unchanged_screenshot_list.length;
     const numChanged =
@@ -90,22 +132,23 @@ class GitHubApi {
 
       targetUrl = meta.report_html_file.public_url;
     } else {
-      const numScreenshotsFormatted = screenshots.runnable_screenshot_list.length.toLocaleString();
+      const runnableScreenshots = screenshots.runnable_screenshot_list;
+      const numTotal = runnableScreenshots.length;
+
       state = GitHubApi.PullRequestState.PENDING;
       targetUrl = `https://travis-ci.org/material-components/material-components-web/jobs/${process.env.TRAVIS_JOB_ID}`;
-      description = `Running ${numScreenshotsFormatted} screenshot tests`;
+      description = `Running ${numTotal.toLocaleString()} screenshots...`;
     }
 
-    return await this.createStatus_({state, targetUrl, description});
+    return await this.createStatusUnthrottled_({state, targetUrl, description});
   }
 
   async setPullRequestError() {
-    const prNumber = Number(process.env.TRAVIS_PULL_REQUEST);
-    if (!prNumber) {
+    if (process.env.TRAVIS !== 'true') {
       return;
     }
 
-    return await this.createStatus_({
+    return await this.createStatusUnthrottled_({
       state: GitHubApi.PullRequestState.ERROR,
       targetUrl: `https://travis-ci.org/material-components/material-components-web/jobs/${process.env.TRAVIS_JOB_ID}`,
       description: 'Error running screenshot tests',
@@ -119,16 +162,24 @@ class GitHubApi {
    * @return {!Promise<*>}
    * @private
    */
-  async createStatus_({state, targetUrl, description = undefined}) {
-    return await this.octokit_.repos.createStatus({
-      owner: 'material-components',
-      repo: 'material-components-web',
-      sha: await this.gitRepo_.getFullCommitHash(process.env.TRAVIS_PULL_REQUEST_SHA),
-      state,
-      target_url: targetUrl,
-      description,
-      context: 'screenshot-test/butter-bot',
-    });
+  async createStatusUnthrottled_({state, targetUrl, description = undefined}) {
+    const sha = process.env.TRAVIS_PULL_REQUEST_SHA || await this.gitRepo_.getFullCommitHash();
+    let stackTrace;
+
+    try {
+      stackTrace = getStackTrace('createStatusUnthrottled_');
+      return await this.octokit_.repos.createStatus({
+        owner: 'material-components',
+        repo: 'material-components-web',
+        sha,
+        state,
+        target_url: targetUrl,
+        description,
+        context: 'screenshot-test/butter-bot',
+      });
+    } catch (err) {
+      throw new VError(err, `Failed to set commit status:\n${stackTrace}`);
+    }
   }
 
   /**
@@ -138,13 +189,21 @@ class GitHubApi {
   async getPullRequestNumber(branch = undefined) {
     branch = branch || await this.gitRepo_.getBranchName();
 
-    const allPRs = await this.octokit_.pullRequests.getAll({
-      owner: 'material-components',
-      repo: 'material-components-web',
-      per_page: 100,
-    });
+    let allPrsResponse;
+    let stackTrace;
+
+    try {
+      stackTrace = getStackTrace('getPullRequestNumber');
+      allPrsResponse = await this.octokit_.pullRequests.getAll({
+        owner: 'material-components',
+        repo: 'material-components-web',
+        per_page: 100,
+      });
+    } catch (err) {
+      throw new VError(err, `Failed to get pull request number for branch "${branch}":\n${stackTrace}`);
+    }
 
-    const filteredPRs = allPRs.data.filter((pr) => pr.head.ref === branch);
+    const filteredPRs = allPrsResponse.data.filter((pr) => pr.head.ref === branch);
 
     const pr = filteredPRs[0];
     return pr ? pr.number : null;
@@ -156,14 +215,71 @@ class GitHubApi {
    */
   async getPullRequestFiles(prNumber) {
     /** @type {!github.proto.PullRequestFileResponse} */
-    const fileResponse = await this.octokit_.pullRequests.getFiles({
-      owner: 'material-components',
-      repo: 'material-components-web',
-      number: prNumber,
-      per_page: 300,
-    });
+    let fileResponse;
+    let stackTrace;
+
+    try {
+      stackTrace = getStackTrace('getPullRequestFiles');
+      fileResponse = await this.octokit_.pullRequests.getFiles({
+        owner: 'material-components',
+        repo: 'material-components-web',
+        number: prNumber,
+        per_page: 300,
+      });
+    } catch (err) {
+      throw new VError(err, `Failed to get file list for PR #${prNumber}:\n${stackTrace}`);
+    }
+
     return fileResponse.data;
   }
+
+  /**
+   * @param {number} prNumber
+   * @return {!Promise<string>}
+   */
+  async getPullRequestBaseBranch(prNumber) {
+    let prResponse;
+    let stackTrace;
+
+    try {
+      stackTrace = getStackTrace('getPullRequestBaseBranch');
+      prResponse = await this.octokit_.pullRequests.get({
+        owner: 'material-components',
+        repo: 'material-components-web',
+        number: prNumber,
+      });
+    } catch (err) {
+      throw new VError(err, `Failed to get the base branch for PR #${prNumber}:\n${stackTrace}`);
+    }
+
+    if (!prResponse.data) {
+      const serialized = JSON.stringify(prResponse, null, 2);
+      throw new Error(`Unable to fetch data for GitHub PR #${prNumber}:\n${serialized}`);
+    }
+
+    return `origin/${prResponse.data.base.ref}`;
+  }
+
+  /**
+   * @param {number} prNumber
+   * @param {string} comment
+   * @return {!Promise<*>}
+   */
+  async createPullRequestComment({prNumber, comment}) {
+    let stackTrace;
+
+    try {
+      stackTrace = getStackTrace('createPullRequestComment');
+      return await this.octokit_.issues.createComment({
+        owner: 'material-components',
+        repo: 'material-components-web',
+        number: prNumber,
+        body: comment,
+      });
+    } catch (err) {
+      throw new VError(err, `Failed to create comment on PR #${prNumber}:\n${stackTrace}`);
+    }
+  }
 }
 
 module.exports = GitHubApi;
diff --git a/test/screenshot/infra/lib/golden-io.js b/test/screenshot/infra/lib/golden-io.js
index ac67a32516d..d63b847ddad 100644
--- a/test/screenshot/infra/lib/golden-io.js
+++ b/test/screenshot/infra/lib/golden-io.js
@@ -18,6 +18,7 @@ const request = require('request-promise-native');
 const stringify = require('json-stable-stringify');
 
 const Cli = require('./cli');
+const DiffBaseParser = require('./diff-base-parser');
 const GitRepo = require('./git-repo');
 const GoldenFile = require('./golden-file');
 const LocalStorage = require('./local-storage');
@@ -34,6 +35,12 @@ class GoldenIo {
      */
     this.cli_ = new Cli();
 
+    /**
+     * @type {!DiffBaseParser}
+     * @private
+     */
+    this.diffBaseParser_ = new DiffBaseParser();
+
     /**
      * @type {!GitRepo}
      * @private
@@ -62,29 +69,27 @@ class GoldenIo {
 
   /**
    * Parses the `golden.json` file specified by the `--diff-base` CLI arg.
-   * @param {string=} rawDiffBase
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
    * @return {!Promise<!GoldenFile>}
    */
-  async readFromDiffBase(rawDiffBase = this.cli_.diffBase) {
-    if (!this.cachedGoldenJsonMap_[rawDiffBase]) {
-      const goldenJson = JSON.parse(await this.readFromDiffBase_(rawDiffBase));
-      this.cachedGoldenJsonMap_[rawDiffBase] = new GoldenFile(goldenJson);
+  async readFromDiffBase(goldenDiffBase) {
+    const key = goldenDiffBase.input_string;
+    if (!this.cachedGoldenJsonMap_[key]) {
+      const goldenJson = JSON.parse(await this.readFromDiffBase_(goldenDiffBase));
+      this.cachedGoldenJsonMap_[key] = new GoldenFile(goldenJson);
     }
 
     // Deep copy to avoid mutating shared state
-    return new GoldenFile(this.cachedGoldenJsonMap_[rawDiffBase].toJSON());
+    return new GoldenFile(this.cachedGoldenJsonMap_[key].toJSON());
   }
 
   /**
-   * @param {string} rawDiffBase
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
    * @return {!Promise<string>}
    * @private
    */
-  async readFromDiffBase_(rawDiffBase) {
-    /** @type {!mdc.proto.DiffBase} */
-    const parsedDiffBase = await this.cli_.parseDiffBase(rawDiffBase);
-
-    const publicUrl = parsedDiffBase.public_url;
+  async readFromDiffBase_(goldenDiffBase) {
+    const publicUrl = goldenDiffBase.public_url;
     if (publicUrl) {
       return request({
         method: 'GET',
@@ -92,19 +97,22 @@ class GoldenIo {
       });
     }
 
-    const localFilePath = parsedDiffBase.local_file_path;
+    const localFilePath = goldenDiffBase.local_file_path;
     if (localFilePath) {
       return this.localStorage_.readTextFile(localFilePath);
     }
 
-    const rev = parsedDiffBase.git_revision;
+    const rev = goldenDiffBase.git_revision;
     if (rev) {
       return this.gitRepo_.getFileAtRevision(rev.golden_json_file_path, rev.commit);
     }
 
-    const serialized = JSON.stringify({parsedDiffBase, meta}, null, 2);
+    const serialized = JSON.stringify({goldenDiffBase}, null, 2);
     throw new Error(
-      `Unable to parse '--diff-base=${rawDiffBase}': Expected a URL, local file path, or git ref.\n${serialized}`
+      `
+Unable to parse '--diff-base=${goldenDiffBase.input_string}': Expected a URL, local file path, or git ref.
+${serialized}
+`.trim()
     );
   }
 
@@ -128,22 +136,6 @@ class GoldenIo {
   async stringify_(object) {
     return stringify(object, {space: '  '}) + '\n';
   }
-
-  /**
-   * Creates a deep clone of the given `source` object's own enumerable properties.
-   * Non-JSON-serializable properties (such as functions or symbols) are silently discarded.
-   * The returned value is structurally equivalent, but not referentially equal, to the input.
-   * In Java parlance:
-   *   clone.equals(source) // true
-   *   clone == source      // false
-   * @param {!T} source JSON object to clone
-   * @return {!T} Deep clone of `source` object
-   * @template T
-   * @private
-   */
-  deepCloneJson_(source) {
-    return JSON.parse(JSON.stringify(source));
-  }
 }
 
 module.exports = GoldenIo;
diff --git a/test/screenshot/infra/lib/local-storage.js b/test/screenshot/infra/lib/local-storage.js
index 821d5c8e2e9..2c6fc255839 100644
--- a/test/screenshot/infra/lib/local-storage.js
+++ b/test/screenshot/infra/lib/local-storage.js
@@ -16,6 +16,7 @@
 
 'use strict';
 
+const VError = require('verror');
 const del = require('del');
 const fs = require('mz/fs');
 const fsx = require('fs-extra');
@@ -63,7 +64,11 @@ class LocalStorage {
    */
   async getTestPageDestinationPaths(reportMeta) {
     const cwd = reportMeta.local_asset_base_dir;
-    return glob.sync('**/spec/mdc-*/**/*.html', {cwd, nodir: true, ignore: ['**/index.html']});
+    try {
+      return glob.sync('**/spec/mdc-*/**/*.html', {cwd, nodir: true, ignore: ['**/index.html']});
+    } catch (err) {
+      throw new VError(err, `Failed to run LocalStorage.getTestPageDestinationPaths(${cwd})`);
+    }
   }
 
   /**
@@ -72,8 +77,13 @@ class LocalStorage {
    * @return {!Promise<void>}
    */
   async writeTextFile(filePath, fileContent) {
-    mkdirp.sync(path.dirname(filePath));
-    await fs.writeFile(filePath, fileContent, {encoding: 'utf8'});
+    try {
+      mkdirp.sync(path.dirname(filePath));
+      await fs.writeFile(filePath, fileContent, {encoding: 'utf8'});
+    } catch (err) {
+      const serialized = JSON.stringify({filePath, fileContent: fileContent.length + ' bytes'});
+      throw new VError(err, `Failed to run LocalStorage.writeTextFile(${serialized})`);
+    }
   }
 
   /**
@@ -83,8 +93,13 @@ class LocalStorage {
    * @return {!Promise<void>}
    */
   async writeBinaryFile(filePath, fileContent, encoding = null) {
-    mkdirp.sync(path.dirname(filePath));
-    await fs.writeFile(filePath, fileContent, {encoding});
+    try {
+      mkdirp.sync(path.dirname(filePath));
+      await fs.writeFile(filePath, fileContent, {encoding});
+    } catch (err) {
+      const serialized = JSON.stringify({filePath, fileContent: fileContent.length + ' bytes', encoding});
+      throw new VError(err, `Failed to run LocalStorage.writeBinaryFile(${serialized})`);
+    }
   }
 
   /**
@@ -92,12 +107,16 @@ class LocalStorage {
    * @return {!Promise<string>}
    */
   async readTextFile(filePath) {
-    return fs.readFile(filePath, {encoding: 'utf8'});
+    try {
+      return await fs.readFile(filePath, {encoding: 'utf8'});
+    } catch (err) {
+      throw new VError(err, `Failed to run LocalStorage.readTextFile(${filePath})`);
+    }
   }
 
   /**
    * @param {string} filePath
-   * @return {!Promise<string>}
+   * @return {string}
    */
   readTextFileSync(filePath) {
     return fs.readFileSync(filePath, {encoding: 'utf8'});
@@ -109,7 +128,11 @@ class LocalStorage {
    * @return {!Promise<!Buffer>}
    */
   async readBinaryFile(filePath, encoding = null) {
-    return fs.readFile(filePath, {encoding});
+    try {
+      return await fs.readFile(filePath, {encoding});
+    } catch (err) {
+      throw new VError(err, `Failed to run LocalStorage.readBinaryFile(${filePath}, ${encoding})`);
+    }
   }
 
   /**
@@ -142,7 +165,11 @@ class LocalStorage {
    * @return {!Promise<void>}
    */
   async copy(src, dest) {
-    return fsx.copy(src, dest);
+    try {
+      return await fsx.copy(src, dest);
+    } catch (err) {
+      throw new VError(err, `Failed to run LocalStorage.copy(${src}, ${dest})`);
+    }
   }
 
   /**
@@ -150,7 +177,11 @@ class LocalStorage {
    * @return {!Promise<*>}
    */
   async delete(pathPatterns) {
-    return del(pathPatterns);
+    try {
+      return await del(pathPatterns);
+    } catch (err) {
+      throw new VError(err, `Failed to run LocalStorage.delete(${pathPatterns} patterns)`);
+    }
   }
 
   /**
@@ -158,7 +189,11 @@ class LocalStorage {
    * @return {!Promise<boolean>}
    */
   async exists(filePath) {
-    return fs.exists(filePath);
+    try {
+      return await fs.exists(filePath);
+    } catch (err) {
+      throw new VError(err, `Failed to run LocalStorage.exists(${filePath})`);
+    }
   }
 
   /**
diff --git a/test/screenshot/infra/lib/logger.js b/test/screenshot/infra/lib/logger.js
index 8dde6305385..06c07605fb0 100644
--- a/test/screenshot/infra/lib/logger.js
+++ b/test/screenshot/infra/lib/logger.js
@@ -181,21 +181,21 @@ class Logger {
    * @param {*} args
    */
   info(...args) {
-    console.info(`[${colors.blue('info')}][${this.id_}]`, ...args);
+    console.info(...args);
   }
 
   /**
    * @param {*} args
    */
   warn(...args) {
-    console.warn(`[${colors.yellow('warn')}][${this.id_}]`, ...args);
+    console.warn(...args);
   }
 
   /**
    * @param {*} args
    */
   error(...args) {
-    console.error(`[${colors.bold.red('error')}][${this.id_}]`, ...args);
+    console.error(...args);
   }
 
   /**
diff --git a/test/screenshot/infra/lib/process-manager.js b/test/screenshot/infra/lib/process-manager.js
index 13971a1257a..f4d641c86e6 100644
--- a/test/screenshot/infra/lib/process-manager.js
+++ b/test/screenshot/infra/lib/process-manager.js
@@ -18,6 +18,7 @@
 
 const childProcess = require('child_process');
 const ps = require('ps-node');
+const {ExitCode} = require('../lib/constants');
 
 class ProcessManager {
   /**
@@ -46,9 +47,10 @@ class ProcessManager {
    * @param {string} cmd
    * @param {!Array<string>} args
    * @param {!ChildProcessSpawnOptions=} opts
-   * @return {!ChildProcessSpawnResult}
+   * @param {boolean=} isWatching
+   * @return {!SpawnSyncReturns}
    */
-  spawnChildProcessSync(cmd, args, opts = {}) {
+  spawnChildProcessSync(cmd, args, opts = {}, isWatching = false) {
     /** @type {!ChildProcessSpawnOptions} */
     const defaultOpts = {
       stdio: 'inherit',
@@ -61,7 +63,16 @@ class ProcessManager {
 
     console.log(`${cmd} ${args.join(' ')}`);
 
-    return childProcess.spawnSync(cmd, args, mergedOpts);
+    const result = childProcess.spawnSync(cmd, args, mergedOpts);
+    if (result.status !== ExitCode.OK) {
+      const message = `${cmd} process exited with code ${result.status}`;
+      if (isWatching) {
+        console.error(message);
+      } else {
+        throw new Error(message);
+      }
+    }
+    return result;
   }
 
   /**
diff --git a/test/screenshot/infra/lib/report-builder.js b/test/screenshot/infra/lib/report-builder.js
index de52b547e0a..3671f4cd129 100644
--- a/test/screenshot/infra/lib/report-builder.js
+++ b/test/screenshot/infra/lib/report-builder.js
@@ -26,11 +26,13 @@ const path = require('path');
 const serveIndex = require('serve-index');
 
 const mdcProto = require('../proto/mdc.pb').mdc.proto;
-const {Approvals, DiffImageResult, Dimensions, GitRevision, GitStatus, GoldenScreenshot, LibraryVersion} = mdcProto;
+const {Approvals, DiffImageResult, Dimensions, GitStatus, GoldenScreenshot, LibraryVersion} = mdcProto;
 const {ReportData, ReportMeta, Screenshot, Screenshots, ScreenshotList, TestFile, User, UserAgents} = mdcProto;
 const {InclusionType, CaptureState} = Screenshot;
 
+const CbtApi = require('./cbt-api');
 const Cli = require('./cli');
+const DiffBaseParser = require('./diff-base-parser');
 const FileCache = require('./file-cache');
 const GitHubApi = require('./github-api');
 const GitRepo = require('./git-repo');
@@ -45,12 +47,24 @@ const TEMP_DIR = os.tmpdir();
 
 class ReportBuilder {
   constructor() {
+    /**
+     * @type {!CbtApi}
+     * @private
+     */
+    this.cbtApi_ = new CbtApi();
+
     /**
      * @type {!Cli}
      * @private
      */
     this.cli_ = new Cli();
 
+    /**
+     * @type {!DiffBaseParser}
+     * @private
+     */
+    this.diffBaseParser_ = new DiffBaseParser();
+
     /**
      * @type {!FileCache}
      * @private
@@ -104,32 +118,35 @@ class ReportBuilder {
     /** @type {!mdc.proto.ReportData} */
     const reportData = ReportData.fromObject(require(runReportJsonFile.absolute_path));
     reportData.approvals = Approvals.create();
-    this.populateScreenshotMaps(reportData.user_agents, reportData.screenshots);
+    this.populateMaps(reportData.user_agents, reportData.screenshots);
     this.populateApprovals_(reportData);
     return reportData;
   }
 
   /**
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
    * @return {!Promise<!mdc.proto.ReportData>}
    */
-  async initForCapture() {
+  async initForCapture(goldenDiffBase) {
     this.logger_.foldStart('screenshot.init', 'ReportBuilder#initForCapture()');
 
-    /** @type {boolean} */
-    const isOnline = await this.cli_.isOnline();
+    if (this.cli_.isOnline()) {
+      await this.cbtApi_.fetchAvailableDevices();
+    }
+
     /** @type {!mdc.proto.ReportMeta} */
-    const reportMeta = await this.createReportMetaProto_();
+    const reportMeta = await this.createReportMetaProto_(goldenDiffBase);
     /** @type {!mdc.proto.UserAgents} */
     const userAgents = await this.createUserAgentsProto_();
 
     await this.localStorage_.copyAssetsToTempDir(reportMeta);
 
     // In offline mode, we start a local web server to test on instead of using GCS.
-    if (!isOnline) {
+    if (this.cli_.isOffline()) {
       await this.startTemporaryHttpServer_(reportMeta);
     }
 
-    const screenshots = await this.createScreenshotsProto_({reportMeta, userAgents});
+    const screenshots = await this.createScreenshotsProto_({reportMeta, userAgents, goldenDiffBase});
 
     const reportData = ReportData.create({
       meta: reportMeta,
@@ -159,7 +176,7 @@ class ReportBuilder {
    * @param {!mdc.proto.UserAgents} userAgents
    * @param {!mdc.proto.Screenshots} screenshots
    */
-  populateScreenshotMaps(userAgents, screenshots) {
+  populateMaps(userAgents, screenshots) {
     // TODO(acdvorak): Figure out why the report page is randomly sorted. E.g.:
     // https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/12/04_49_09_427/report/report.html
     // https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/12/04_48_52_974/report/report.html
@@ -289,7 +306,7 @@ class ReportBuilder {
    */
   async prefetchGoldenImages_(reportData) {
     // TODO(acdvorak): Figure out how to handle offline mode for prefetching and diffing
-    console.log('Prefetching golden images...');
+    console.log('Fetching golden images...');
     await Promise.all(
       reportData.screenshots.expected_screenshot_list.map((expectedScreenshot) => {
         return this.prefetchScreenshotImages_(expectedScreenshot);
@@ -364,11 +381,12 @@ class ReportBuilder {
   }
 
   /**
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
    * @return {!Promise<!mdc.proto.ReportMeta>}
    * @private
    */
-  async createReportMetaProto_() {
-    const isOnline = await this.cli_.isOnline();
+  async createReportMetaProto_(goldenDiffBase) {
+    const isOnline = this.cli_.isOnline();
 
     // We only need to start up a local web server if the user is running in offline mode.
     // Otherwise, HTML files are uploaded to (and served) by GCS.
@@ -399,30 +417,7 @@ class ReportBuilder {
     const gitStatus = GitStatus.fromObject(await this.gitRepo_.getStatus());
 
     /** @type {!mdc.proto.DiffBase} */
-    const goldenDiffBase = await this.cli_.parseGoldenDiffBase();
-
-    /** @type {!mdc.proto.DiffBase} */
-    const snapshotDiffBase = await this.cli_.parseDiffBase('HEAD');
-
-    /** @type {!mdc.proto.GitRevision} */
-    const goldenGitRevision = goldenDiffBase.git_revision;
-
-    if (goldenGitRevision && goldenGitRevision.type === GitRevision.Type.TRAVIS_PR) {
-      /** @type {!Array<!github.proto.PullRequestFile>} */
-      const allPrFiles = await this.gitHubApi_.getPullRequestFiles(goldenGitRevision.pr_number);
-
-      goldenGitRevision.pr_file_paths = allPrFiles
-        .filter((prFile) => {
-          const isMarkdownFile = () => prFile.filename.endsWith('.md');
-          const isDemosFile = () => prFile.filename.startsWith('demos/');
-          const isDocsFile = () => prFile.filename.startsWith('docs/');
-          const isUnitTestFile = () => prFile.filename.startsWith('test/unit/');
-          const isIgnoredFile = isMarkdownFile() || isDemosFile() || isDocsFile() || isUnitTestFile();
-          return !isIgnoredFile;
-        })
-        .map((prFile) => prFile.filename)
-      ;
-    }
+    const snapshotDiffBase = await this.diffBaseParser_.parseSnapshotDiffBase();
 
     return ReportMeta.create({
       start_time_iso_utc: new Date().toISOString(),
@@ -459,7 +454,6 @@ class ReportBuilder {
       }),
       mdc_version: LibraryVersion.create({
         version_string: mdcVersionString,
-        commit_offset: await this.getCommitDistance_(mdcVersionString),
       }),
     });
   }
@@ -518,14 +512,6 @@ class ReportBuilder {
     return stdOut[0].trim().replace(/^v/, ''); // `node --version` returns "v8.11.0", so we strip the leading 'v'
   }
 
-  /**
-   * @param {string} mdcVersion
-   * @return {!Promise<number>}
-   */
-  async getCommitDistance_(mdcVersion) {
-    return (await this.gitRepo_.getLog([`v${mdcVersion}..HEAD`])).length;
-  }
-
   /**
    * @return {!Promise<!mdc.proto.UserAgents>}
    * @private
@@ -543,12 +529,13 @@ class ReportBuilder {
   /**
    * @param {!mdc.proto.ReportMeta} reportMeta
    * @param {!mdc.proto.UserAgents} allUserAgents
+   * @param {!mdc.proto.DiffBase} goldenDiffBase
    * @return {!Promise<!mdc.proto.Screenshots>}
    * @private
    */
-  async createScreenshotsProto_({reportMeta, userAgents}) {
+  async createScreenshotsProto_({reportMeta, userAgents, goldenDiffBase}) {
     /** @type {!GoldenFile} */
-    const goldenFile = await this.goldenIo_.readFromDiffBase();
+    const goldenFile = await this.goldenIo_.readFromDiffBase(goldenDiffBase);
 
     /** @type {!Array<!mdc.proto.Screenshot>} */
     const expectedScreenshots = await this.getExpectedScreenshots_(goldenFile);
@@ -580,7 +567,7 @@ class ReportBuilder {
     this.setAllStates_(screenshots.removed_screenshot_list, InclusionType.REMOVE, CaptureState.SKIPPED);
     this.setAllStates_(screenshots.comparable_screenshot_list, InclusionType.COMPARE, CaptureState.QUEUED);
 
-    this.populateScreenshotMaps(userAgents, screenshots);
+    this.populateMaps(userAgents, screenshots);
 
     return screenshots;
   }
@@ -679,6 +666,7 @@ class ReportBuilder {
       });
 
       for (const userAgent of allUserAgents) {
+        const maxRetries = this.cli_.isOnline() ? this.cli_.retries : 0;
         const userAgentAlias = userAgent.alias;
         const isScreenshotRunnable = isHtmlFileRunnable && userAgent.is_runnable;
         const expectedScreenshotImageUrl = goldenFile.getScreenshotImageUrl({htmlFilePath, userAgentAlias});
@@ -697,7 +685,7 @@ class ReportBuilder {
           actual_html_file: actualHtmlFile,
           expected_image_file: expectedImageFile,
           retry_count: 0,
-          max_retries: this.cli_.retries,
+          max_retries: maxRetries,
         }));
       }
     }
diff --git a/test/screenshot/infra/lib/report-writer.js b/test/screenshot/infra/lib/report-writer.js
index 4ace08732bd..8c7d3e6e6e1 100644
--- a/test/screenshot/infra/lib/report-writer.js
+++ b/test/screenshot/infra/lib/report-writer.js
@@ -417,8 +417,6 @@ class ReportWriter {
       return new Handlebars.SafeString(`<a href="${diffBase.public_url}">${diffBase.public_url}</a>`);
     }
 
-    const rev = diffBase.git_revision;
-
     if (diffBase.local_file_path) {
       const localFilePathMarkup = diffBase.is_default_local_file
         ? `<a href="${meta.golden_json_file.public_url}">${diffBase.local_file_path}</a>`
@@ -427,6 +425,7 @@ class ReportWriter {
       return new Handlebars.SafeString(`${localFilePathMarkup} (local file)`);
     }
 
+    const rev = diffBase.git_revision;
     if (rev) {
       const prMarkup = rev.pr_number
         ? `(PR <a href="${GITHUB_REPO_URL}/pull/${rev.pr_number}">#${rev.pr_number}</a>)`
diff --git a/test/screenshot/infra/lib/selenium-api.js b/test/screenshot/infra/lib/selenium-api.js
index 696c455ed64..9608ba94b29 100644
--- a/test/screenshot/infra/lib/selenium-api.js
+++ b/test/screenshot/infra/lib/selenium-api.js
@@ -17,6 +17,7 @@
 'use strict';
 
 const Jimp = require('jimp');
+const VError = require('verror');
 const UserAgentParser = require('useragent');
 const colors = require('colors/safe');
 const path = require('path');
@@ -25,7 +26,7 @@ const mdcProto = require('../proto/mdc.pb').mdc.proto;
 const seleniumProto = require('../proto/selenium.pb').selenium.proto;
 
 const {Screenshot, TestFile, UserAgent} = mdcProto;
-const {CaptureState} = Screenshot;
+const {CaptureState, InclusionType} = Screenshot;
 const {BrowserVendorType, Navigator} = UserAgent;
 const {RawCapabilities} = seleniumProto;
 
@@ -33,11 +34,12 @@ const CbtApi = require('./cbt-api');
 const Cli = require('./cli');
 const Constants = require('./constants');
 const Duration = require('./duration');
+const GitHubApi = require('./github-api');
 const ImageCropper = require('./image-cropper');
 const ImageDiffer = require('./image-differ');
 const LocalStorage = require('./local-storage');
-const {Browser, Builder, By, until} = require('selenium-webdriver');
-const {CBT_CONCURRENCY_POLL_INTERVAL_MS, CBT_CONCURRENCY_MAX_WAIT_MS} = Constants;
+const {Browser, Builder, By, logging, until} = require('selenium-webdriver');
+const {CBT_CONCURRENCY_POLL_INTERVAL_MS, CBT_CONCURRENCY_MAX_WAIT_MS, ExitCode} = Constants;
 const {SELENIUM_FONT_LOAD_WAIT_MS} = Constants;
 
 /**
@@ -46,6 +48,7 @@ const {SELENIUM_FONT_LOAD_WAIT_MS} = Constants;
  *   color: !CliColor,
  * }} CliStatus
  */
+
 const CliStatuses = {
   ACTIVE: {name: 'Active', color: colors.bold.cyan},
   QUEUED: {name: 'Queued', color: colors.cyan},
@@ -54,7 +57,11 @@ const CliStatuses = {
   STARTED: {name: 'Started', color: colors.bold.green},
   GET: {name: 'Get', color: colors.bold.white},
   CROP: {name: 'Crop', color: colors.white},
-  RETRY: {name: 'Retry', color: colors.red},
+  PASS: {name: 'Pass', color: colors.green},
+  ADD: {name: 'Add', color: colors.bgGreen.black},
+  FAIL: {name: 'Fail', color: colors.red},
+  RETRY: {name: 'Retry', color: colors.magenta},
+  CAPTURED: {name: 'Captured', color: colors.bold.grey},
   FINISHED: {name: 'Finished', color: colors.bold.green},
   FAILED: {name: 'Failed', color: colors.bold.red},
   QUITTING: {name: 'Quitting', color: colors.white},
@@ -74,6 +81,12 @@ class SeleniumApi {
      */
     this.cli_ = new Cli();
 
+    /**
+     * @type {!GitHubApi}
+     * @private
+     */
+    this.gitHubApi_ = new GitHubApi();
+
     /**
      * @type {!ImageCropper}
      * @private
@@ -91,6 +104,40 @@ class SeleniumApi {
      * @private
      */
     this.localStorage_ = new LocalStorage();
+
+    /**
+     * @type {!Set<string>}
+     * @private
+     */
+    this.seleniumSessionIds_ = new Set();
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.numPending_ = 0;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.numCompleted_ = 0;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.numChanged_ = 0;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.isKilled_ = false;
+
+    if (this.cli_.isOnline()) {
+      this.killBrowsersOnExit_();
+    }
   }
 
   /**
@@ -102,6 +149,9 @@ class SeleniumApi {
     let queuedUserAgents = runnableUserAgents.slice();
     let runningUserAgents;
 
+    this.numPending_ = reportData.screenshots.runnable_screenshot_list.length;
+    this.numCompleted_ = 0;
+
     function getLoggableAliases(userAgentAliases) {
       return userAgentAliases.length > 0 ? userAgentAliases.join(', ') : '(none)';
     }
@@ -119,6 +169,8 @@ class SeleniumApi {
       await this.captureAllPagesInAllBrowsers_({reportData, userAgents: runningUserAgents});
     }
 
+    console.log('');
+
     return reportData;
   }
 
@@ -151,28 +203,55 @@ class SeleniumApi {
     const seleniumSessionId = session.getId();
     let changedScreenshots;
 
-    const logResult = (status) => {
+    this.seleniumSessionIds_.add(seleniumSessionId);
+
+    const logResult = (status, ...args) => {
       /* eslint-disable camelcase */
       const {os_name, os_version, browser_name, browser_version} = userAgent.navigator;
-      this.logStatus_(status, `${browser_name} ${browser_version} on ${os_name} ${os_version}!`);
+      this.logStatus_(status, `${browser_name} ${browser_version} on ${os_name} ${os_version}!`, ...args);
       /* eslint-enable camelcase */
     };
 
     try {
       changedScreenshots = (await this.driveBrowser_({reportData, userAgent, driver})).changedScreenshots;
+      await this.printBrowserConsoleLogs_(driver);
       logResult(CliStatuses.FINISHED);
     } catch (err) {
       logResult(CliStatuses.FAILED);
-      throw err;
+      await this.killBrowsers_();
+      throw new VError(err, 'Failed to drive web browser');
     } finally {
       logResult(CliStatuses.QUITTING);
       await driver.quit();
+      this.seleniumSessionIds_.delete(seleniumSessionId);
+    }
+
+    if (this.cli_.isOnline()) {
+      await this.cbtApi_.setTestScore({
+        seleniumSessionId,
+        changedScreenshots,
+      });
     }
+  }
+
+  /**
+   * @param {!IWebDriver} driver
+   * @return {!Promise<void>}
+   * @private
+   */
+  async printBrowserConsoleLogs_(driver) {
+    const log = driver.manage().logs();
 
-    await this.cbtApi_.setTestScore({
-      seleniumSessionId,
-      changedScreenshots,
+    // Chrome is the only browser that supports logging as of 2018-07-20.
+    const logEntries = (await log.get(logging.Type.BROWSER).catch(() => [])).filter((logEntry) => {
+      // Ignore messages about missing favicon
+      return logEntry.message.indexOf('favicon.ico') === -1;
     });
+
+    if (logEntries.length > 0) {
+      const messageColor = colors.bold.red('Browser console log:');
+      console.log(`\n\n${messageColor}\n`, JSON.stringify(logEntries, null, 2), '\n');
+    }
   }
 
   /**
@@ -180,8 +259,7 @@ class SeleniumApi {
    * @private
    */
   async getMaxParallelTests_() {
-    const isOnline = await this.cli_.isOnline();
-    if (!isOnline) {
+    if (this.cli_.isOffline()) {
       return 1;
     }
 
@@ -236,7 +314,7 @@ class SeleniumApi {
     userAgent.desired_capabilities = desiredCapabilities;
     driverBuilder.withCapabilities(desiredCapabilities);
 
-    const isOnline = await this.cli_.isOnline();
+    const isOnline = this.cli_.isOnline();
     if (isOnline) {
       driverBuilder.usingServer(this.cbtApi_.getSeleniumServerUrl());
     }
@@ -244,7 +322,7 @@ class SeleniumApi {
     this.logStatus_(CliStatuses.STARTING, `${userAgent.alias}...`);
 
     /** @type {!IWebDriver} */
-    const driver = await driverBuilder.build();
+    const driver = await this.buildWebDriverWithRetries_(driverBuilder);
 
     /** @type {!selenium.proto.RawCapabilities} */
     const actualCapabilities = await this.getActualCapabilities_(driver);
@@ -266,6 +344,44 @@ class SeleniumApi {
     return driver;
   }
 
+  /**
+   * @param {!Builder} driverBuilder
+   * @param {number=} startTimeMs
+   * @return {!Promise<!IWebDriver>}
+   * @private
+   */
+  async buildWebDriverWithRetries_(driverBuilder, startTimeMs = Date.now()) {
+    try {
+      return await driverBuilder.build();
+    } catch (err) {
+      if (err.message.indexOf('maximum number of parallel') === -1) {
+        throw new VError(err, 'WebDriver instance could not be created');
+      }
+    }
+
+    /** @type {!cbt.proto.CbtConcurrencyStats} */
+    const concurrencyStats = await this.cbtApi_.fetchConcurrencyStats();
+    const max = concurrencyStats.max_concurrent_selenium_tests;
+
+    // TODO(acdvorak): De-dupe this with getMaxParallelTests_()
+    const elapsedTimeMs = Date.now() - startTimeMs;
+    const elapsedTimeHuman = Duration.millis(elapsedTimeMs).toHumanShort();
+    if (elapsedTimeMs > CBT_CONCURRENCY_MAX_WAIT_MS) {
+      throw new Error(`Timed out waiting for CBT resources to become available after ${elapsedTimeHuman}`);
+    }
+
+    // TODO(acdvorak): De-dupe this with getMaxParallelTests_()
+    const waitTimeMs = CBT_CONCURRENCY_POLL_INTERVAL_MS;
+    const waitTimeHuman = Duration.millis(waitTimeMs).toHumanShort();
+    this.logStatus_(
+      CliStatuses.WAITING,
+      `Parallel execution limit reached. ${max} tests are already running on CBT. Will retry in ${waitTimeHuman}...`
+    );
+    await this.sleep_(waitTimeMs);
+
+    return this.buildWebDriverWithRetries_(driverBuilder, startTimeMs);
+  }
+
   /**
    * @param {!mdc.proto.ReportMeta} meta
    * @param {!mdc.proto.UserAgent} userAgent
@@ -273,11 +389,18 @@ class SeleniumApi {
    * @private
    */
   async getDesiredCapabilities_({meta, userAgent}) {
-    const isOnline = await this.cli_.isOnline();
-    if (isOnline) {
-      return await this.cbtApi_.getDesiredCapabilities_({meta, userAgent});
+    if (this.cli_.isOnline()) {
+      return this.cbtApi_.getDesiredCapabilities({meta, userAgent});
     }
+    return this.createDesiredCapabilitiesOffline_({userAgent});
+  }
 
+  /**
+   * @param {!mdc.proto.UserAgent} userAgent
+   * @return {!selenium.proto.RawCapabilities}
+   * @private
+   */
+  createDesiredCapabilitiesOffline_({userAgent}) {
     const browserVendorMap = {
       [BrowserVendorType.CHROME]: Browser.CHROME,
       [BrowserVendorType.EDGE]: Browser.EDGE,
@@ -369,12 +492,17 @@ class SeleniumApi {
     /** @type {!Array<!mdc.proto.Screenshot>} */
     const screenshotQueueAll = reportData.screenshots.runnable_screenshot_browser_map[userAgent.alias].screenshots;
 
+    // TODO(acdvorak): Find a better way to do this
     const screenshotQueues = [
       [true, screenshotQueueAll.filter((screenshot) => this.isSmallComponent_(screenshot.html_file_path))],
       [false, screenshotQueueAll.filter((screenshot) => !this.isSmallComponent_(screenshot.html_file_path))],
     ];
 
     for (const [isSmallComponent, screenshotQueue] of screenshotQueues) {
+      if (screenshotQueue.length === 0) {
+        continue;
+      }
+
       await this.resizeWindow_({driver, isSmallComponent});
 
       for (const screenshot of screenshotQueue) {
@@ -386,10 +514,23 @@ class SeleniumApi {
         screenshot.diff_image_result = diffImageResult;
         screenshot.diff_image_file = diffImageResult.diff_image_file;
 
+        this.numPending_--;
+        this.numCompleted_++;
+
+        const message = `${screenshot.actual_html_file.public_url} > ${screenshot.user_agent.alias}`;
+
         if (diffImageResult.has_changed) {
           changedScreenshots.push(screenshot);
+          this.numChanged_++;
+          this.logStatus_(CliStatuses.FAIL, message);
         } else {
           unchangedScreenshots.push(screenshot);
+
+          if (screenshot.inclusion_type === InclusionType.ADD) {
+            this.logStatus_(CliStatuses.ADD, message);
+          } else {
+            this.logStatus_(CliStatuses.PASS, message);
+          }
         }
       }
     }
@@ -513,7 +654,7 @@ class SeleniumApi {
   async capturePageAsPng_({driver, userAgent, url, delayMs = 0}) {
     this.logStatus_(CliStatuses.GET, `${url} > ${userAgent.alias}...`);
 
-    const isOnline = await this.cli_.isOnline();
+    const isOnline = this.cli_.isOnline();
     const fontTimeoutMs = isOnline ? SELENIUM_FONT_LOAD_WAIT_MS : 500;
 
     await driver.get(url);
@@ -539,6 +680,56 @@ class SeleniumApi {
     return croppedImageBuffer;
   }
 
+  /** @private */
+  killBrowsersOnExit_() {
+    // catches ctrl+c event
+    process.on('SIGINT', () => {
+      const exit = () => process.exit(ExitCode.SIGINT);
+      this.killBrowsers_().then(exit, exit);
+    });
+
+    // catches "kill pid"
+    process.on('SIGTERM', () => {
+      const exit = () => process.exit(ExitCode.SIGTERM);
+      this.killBrowsers_().then(exit, exit);
+    });
+
+    process.on('uncaughtException', (err) => {
+      console.error(err);
+      const exit = () => process.exit(ExitCode.UNCAUGHT_EXCEPTION);
+      this.killBrowsers_().then(exit, exit);
+    });
+
+    process.on('unhandledRejection', (err) => {
+      console.error(err);
+      const exit = () => process.exit(ExitCode.UNHANDLED_PROMISE_REJECTION);
+      this.killBrowsers_().then(exit, exit);
+    });
+  }
+
+  /** @private */
+  async killBrowsers_() {
+    if (this.cli_.isOffline()) {
+      return;
+    }
+
+    const ids = Array.from(this.seleniumSessionIds_);
+    const wasAlreadyKilled = this.isKilled_;
+
+    if (!wasAlreadyKilled) {
+      console.log('\n');
+    }
+
+    this.isKilled_ = true;
+
+    await this.cbtApi_.killSeleniumTests(ids, /* silent */ wasAlreadyKilled);
+
+    if (!wasAlreadyKilled && ids.length > 0) {
+      console.log('\nWaiting for CBT cancellation requests to complete...');
+      await this.sleep_(Duration.seconds(4).toMillis());
+    }
+  }
+
   /**
    * @param {number} ms
    * @return {!Promise<void>}
@@ -554,8 +745,51 @@ class SeleniumApi {
    * @private
    */
   logStatus_(status, ...args) {
-    const maxWidth = Object.values(CliStatuses).map((status) => status.name.length).sort().reverse()[0];
-    console.log(status.color(status.name.toUpperCase().padStart(maxWidth, ' ')) + ':', ...args);
+    // Don't output misleading errors
+    if (this.isKilled_) {
+      return;
+    }
+
+    // https://stackoverflow.com/a/6774395/467582
+    const escape = String.fromCodePoint(27);
+    const eraseCurrentLine = `\r${escape}[K`;
+    const maxStatusWidth = Object.values(CliStatuses).map((status) => status.name.length).sort().reverse()[0];
+    const statusName = status.name.toUpperCase();
+    const paddingSpaces = ''.padStart(maxStatusWidth - statusName.length, ' ');
+
+    console.log(eraseCurrentLine + paddingSpaces + status.color(statusName) + ':', ...args);
+
+    const numDone = this.numCompleted_;
+    const strDone = numDone.toLocaleString();
+
+    const numTotal = numDone + this.numPending_;
+    const strTotal = numTotal.toLocaleString();
+
+    const numChanged = this.numChanged_;
+    const strChanged = numChanged.toLocaleString();
+
+    const numPercent = numTotal > 0 ? (100 * numDone / numTotal) : 0;
+    const strPercent = numPercent.toFixed(1);
+
+    if (process.env.TRAVIS === 'true') {
+      this.gitHubApi_.setPullRequestStatusManual({
+        state: GitHubApi.PullRequestState.PENDING,
+        description: `${strDone} of ${strTotal} (${strPercent}%) - ${strChanged} diffs`,
+      });
+      return;
+    }
+
+    const pending = this.numPending_;
+    const completed = numDone;
+    const total = pending + completed;
+    const percent = (total === 0 ? 0 : (100 * completed / total).toFixed(1));
+
+    const colorCaptured = CliStatuses.CAPTURED.color(CliStatuses.CAPTURED.name.toUpperCase());
+    const colorCompleted = colors.bold.white(completed.toLocaleString());
+    const colorTotal = colors.bold.white(total.toLocaleString());
+    const colorPercent = colors.bold.white(`${percent}%`);
+
+    process.stdout.write(`${colorCaptured}: ${colorCompleted} of ${colorTotal} screenshots (${colorPercent} complete)`);
   }
 }
 
diff --git a/test/screenshot/infra/lib/stacktrace.js b/test/screenshot/infra/lib/stacktrace.js
new file mode 100644
index 00000000000..3c7f4b026d5
--- /dev/null
+++ b/test/screenshot/infra/lib/stacktrace.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {!CliColor} */
+const colors = require('colors');
+
+/**
+ * @param {string} className
+ * @param {*=} infoData
+ * @return {function(methodName: string): string}
+ */
+module.exports = function(className, infoData = undefined) {
+  /**
+   * @param {string} methodName
+   * @return {string}
+   */
+  function getStackTrace(methodName) {
+    const infoStr = typeof infoData === 'object' ? '\n' + JSON.stringify(infoData, null, 2) : '';
+    const fullStack = new Error(`${className}.${methodName}()`).stack;
+    // Remove THIS function from the stack trace because it's not useful
+    return fullStack.split('\n').filter((line, index) => index !== 1).join('\n') + infoStr;
+  }
+
+  return getStackTrace;
+};
+
+module.exports.formatError = formatError;
+
+/**
+ * @param {!Error|!VError|*} err
+ * @return {string}
+ */
+function formatError(err) {
+  return formatErrorInternal(err)
+    .replace(/^([^\n]+)/, (fullMatch, line) => colors.bold.red(line))
+  ;
+}
+
+/**
+ * @param {!Error|!VError|*} err
+ * @return {string}
+ */
+function formatErrorInternal(err) {
+  const parentStr = stringifyError(err);
+  if (err.jse_cause) {
+    const childStr = formatError(err.jse_cause);
+    return `${childStr}\n\n${colors.italic('called from:')}\n\n${parentStr}`;
+  }
+  return parentStr;
+}
+
+/**
+ * @param {!Error|!VError|*} err
+ * @return {string}
+ */
+function stringifyError(err) {
+  if (err.toString !== Error.prototype.toString) {
+    return sanitizeErrorString(err.toString());
+  }
+
+  const lines = [err.code, err.message, err.stack].filter((str) => Boolean(str));
+  return sanitizeErrorString(lines.join('\n'));
+}
+
+/**
+ * @param {string} errorStr
+ * @return {string}
+ */
+function sanitizeErrorString(errorStr) {
+  const lines = errorStr.replace(/^((VError|Error|):\s*)+/i, '').split('\n');
+  if (lines[1] && lines[1].includes(lines[0].replace(/\(\):?$/, ''))) {
+    lines.splice(0, 1);
+  }
+  return lines
+    .map((line) => {
+      let formatted = line;
+      formatted = formatClassMethod(formatted);
+      formatted = formatNamedFunction(formatted);
+      formatted = formatAnonymousFunction(formatted);
+      return formatted;
+    })
+    .join('\n')
+    .replace(/^ +at +/, '')
+  ;
+}
+
+/**
+ * @param {string} errorLine
+ * @return {string}
+ */
+function formatClassMethod(errorLine) {
+  return errorLine
+    .replace(/^( +)(at) (\w+)\.(\w+)(.+)$/, (fullMatch, leadingSpaces, atPrefix, className, methodName, rest) => {
+      if (className === 'process' && methodName === '_tickCallback') {
+        return colors.dim(fullMatch);
+      }
+      rest = formatFileNameAndLineNumber(rest);
+      return `${leadingSpaces}${atPrefix} ${colors.underline(className)}.${colors.bold(methodName)}${rest}`;
+    })
+  ;
+}
+
+/**
+ * @param {string} errorLine
+ * @return {string}
+ */
+function formatNamedFunction(errorLine) {
+  return errorLine
+    .replace(/^( +)(at) (\w+)([^.].+)$/, (fullMatch, leadingSpaces, atPrefix, functionName, rest) => {
+      rest = formatFileNameAndLineNumber(rest);
+      return `${leadingSpaces}${atPrefix} ${colors.bold(functionName)}${rest}`;
+    })
+  ;
+}
+
+/**
+ * @param {string} errorLine
+ * @return {string}
+ */
+function formatAnonymousFunction(errorLine) {
+  return errorLine.replace(/^ +at <anonymous>.*$/, (fullMatch) => {
+    return colors.dim(fullMatch);
+  });
+}
+
+/**
+ * @param {string} errorLine
+ * @return {string}
+ */
+function formatFileNameAndLineNumber(errorLine) {
+  return errorLine.replace(/\/([^/]+\.\w+):(\d+):(\d+)(\).*)$/, (fullMatch, fileName, lineNumber, colNumber, rest) => {
+    return `/${colors.underline(fileName)}:${colors.bold(lineNumber)}:${colNumber}${rest}`;
+  });
+}
diff --git a/test/screenshot/infra/lib/user-agent-store.js b/test/screenshot/infra/lib/user-agent-store.js
index e828633a448..ec7f2122b6b 100644
--- a/test/screenshot/infra/lib/user-agent-store.js
+++ b/test/screenshot/infra/lib/user-agent-store.js
@@ -82,7 +82,7 @@ Expected format: 'desktop_windows_chrome@latest'.
     const [, formFactorName, osVendorName, browserVendorName, browserVersionName] = matchArray;
 
     const getEnumKeysLowerCase = (enumeration) => {
-      return Object.keys(enumeration).map((key) => key.toLowerCase());
+      return Object.keys(enumeration).filter((key) => key !== 'UNKNOWN').map((key) => key.toLowerCase());
     };
 
     // In proto3, the first enum value must always be 0.
@@ -132,7 +132,7 @@ Expected browser vendor to be one of [${validBrowserVendors}], but got '${browse
       );
     }
 
-    const isOnline = await this.cli_.isOnline();
+    const isOnline = this.cli_.isOnline();
     const isEnabledByCli = this.isAliasEnabled_(alias);
     const isAvailableLocally = await this.isAvailableLocally_(browserVendorType);
     const isRunnable = isEnabledByCli && (isOnline || isAvailableLocally);
diff --git a/test/screenshot/infra/proto/mdc.pb.js b/test/screenshot/infra/proto/mdc.pb.js
index 1f1e2cffbaa..680c85befba 100644
--- a/test/screenshot/infra/proto/mdc.pb.js
+++ b/test/screenshot/infra/proto/mdc.pb.js
@@ -2120,7 +2120,6 @@ $root.mdc = (function() {
              * @memberof mdc.proto
              * @interface ILibraryVersion
              * @property {string|null} [version_string] LibraryVersion version_string
-             * @property {number|null} [commit_offset] LibraryVersion commit_offset
              */
 
             /**
@@ -2146,14 +2145,6 @@ $root.mdc = (function() {
              */
             LibraryVersion.prototype.version_string = "";
 
-            /**
-             * LibraryVersion commit_offset.
-             * @member {number} commit_offset
-             * @memberof mdc.proto.LibraryVersion
-             * @instance
-             */
-            LibraryVersion.prototype.commit_offset = 0;
-
             /**
              * Creates a new LibraryVersion instance using the specified properties.
              * @function create
@@ -2180,8 +2171,6 @@ $root.mdc = (function() {
                     writer = $Writer.create();
                 if (message.version_string != null && message.hasOwnProperty("version_string"))
                     writer.uint32(/* id 1, wireType 2 =*/10).string(message.version_string);
-                if (message.commit_offset != null && message.hasOwnProperty("commit_offset"))
-                    writer.uint32(/* id 2, wireType 0 =*/16).int32(message.commit_offset);
                 return writer;
             };
 
@@ -2219,9 +2208,6 @@ $root.mdc = (function() {
                     case 1:
                         message.version_string = reader.string();
                         break;
-                    case 2:
-                        message.commit_offset = reader.int32();
-                        break;
                     default:
                         reader.skipType(tag & 7);
                         break;
@@ -2260,9 +2246,6 @@ $root.mdc = (function() {
                 if (message.version_string != null && message.hasOwnProperty("version_string"))
                     if (!$util.isString(message.version_string))
                         return "version_string: string expected";
-                if (message.commit_offset != null && message.hasOwnProperty("commit_offset"))
-                    if (!$util.isInteger(message.commit_offset))
-                        return "commit_offset: integer expected";
                 return null;
             };
 
@@ -2280,8 +2263,6 @@ $root.mdc = (function() {
                 var message = new $root.mdc.proto.LibraryVersion();
                 if (object.version_string != null)
                     message.version_string = String(object.version_string);
-                if (object.commit_offset != null)
-                    message.commit_offset = object.commit_offset | 0;
                 return message;
             };
 
@@ -2298,14 +2279,10 @@ $root.mdc = (function() {
                 if (!options)
                     options = {};
                 var object = {};
-                if (options.defaults) {
+                if (options.defaults)
                     object.version_string = "";
-                    object.commit_offset = 0;
-                }
                 if (message.version_string != null && message.hasOwnProperty("version_string"))
                     object.version_string = message.version_string;
-                if (message.commit_offset != null && message.hasOwnProperty("commit_offset"))
-                    object.commit_offset = message.commit_offset;
                 return object;
             };
 
diff --git a/test/screenshot/infra/proto/mdc.proto b/test/screenshot/infra/proto/mdc.proto
index b06d502ba3c..131859bf75d 100644
--- a/test/screenshot/infra/proto/mdc.proto
+++ b/test/screenshot/infra/proto/mdc.proto
@@ -109,7 +109,6 @@ message User {
 
 message LibraryVersion {
   string version_string = 1;
-  int32 commit_offset = 2;
 }
 
 message UserAgents {
diff --git a/test/screenshot/infra/types/cbt-api-externs.js b/test/screenshot/infra/types/cbt-api-externs.js
new file mode 100644
index 00000000000..7056a98f3dd
--- /dev/null
+++ b/test/screenshot/infra/types/cbt-api-externs.js
@@ -0,0 +1,162 @@
+/*
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * CBT (CrossBrowserTesting.com)
+ */
+
+
+/**
+ * @typedef {{
+ *   width: number,
+ *   height: number,
+ *   desktop_width: number,
+ *   desktop_height: number,
+ *   name: number,
+ *   requested_name: number,
+ * }} CbtSeleniumResolution
+ */
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   type: string,
+ *   version: string,
+ *   api_name: string,
+ *   device: string,
+ *   device_type: ?string,
+ *   icon_class: string,
+ *   requested_api_name: string,
+ * }} CbtSeleniumOs
+ */
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   type: string,
+ *   version: string,
+ *   api_name: string,
+ *   icon_class: string,
+ *   requested_api_name: string,
+ * }} CbtSeleniumBrowser
+ */
+
+/**
+ * @typedef {{
+ *   hash: string,
+ *   date_added: string,
+ *   is_finished: boolean,
+ *   description: ?string,
+ *   tags: !Array<?>,
+ *   show_result_web_url: ?string,
+ *   show_result_public_url: ?string,
+ *   video: ?string,
+ *   image: ?string,
+ *   thumbnail_image: ?string,
+ * }} CbtSeleniumVideo
+ */
+
+/**
+ * @typedef {{
+ *   hash: string,
+ *   date_added: string,
+ *   is_finished: boolean,
+ *   description: ?string,
+ *   tags: !Array<?>,
+ *   show_result_web_url: ?string,
+ *   show_result_public_url: ?string,
+ *   video: ?string,
+ *   pcap: ?string,
+ *   har: ?string,
+ * }} CbtSeleniumNetwork
+ */
+
+/**
+ * @typedef {{
+ *   body: string,
+ *   method: string,
+ *   path: string,
+ *   date_issued: string,
+ *   hash: ?string,
+ *   response_code: number,
+ *   response_body: ?string,
+ *   step_number: ?number,
+ * }} CbtSeleniumCommand
+ */
+
+/**
+ * @typedef {{
+ *   selenium: !Array<!CbtSeleniumListItem>,
+ * }} CbtSeleniumListResponse
+ */
+
+/**
+ * @typedef {{
+ *   selenium_test_id: string,
+ *   selenium_session_id: string,
+ *   start_date: string,
+ *   finish_date: ?string,
+ *   test_score: string,
+ *   active: boolean,
+ *   state: string,
+ *   show_result_web_url: ?string,
+ *   show_result_public_url: ?string,
+ *   download_results_zip_url: ?string,
+ *   download_results_zip_public_url: ?string,
+ *   launch_live_test_url: ?string,
+ *   resolution: !CbtSeleniumResolution,
+ *   os: !CbtSeleniumOs,
+ *   browser: !CbtSeleniumBrowser,
+ * }} CbtSeleniumListItem
+ */
+
+/**
+ * @typedef {{
+ *   selenium_test_id: string,
+ *   selenium_session_id: string,
+ *   start_date: string,
+ *   finish_date: ?string,
+ *   test_score: string,
+ *   active: boolean,
+ *   state: string,
+ *   startup_finish_date: string,
+ *   url: string,
+ *   client_platform: string,
+ *   client_browser: string,
+ *   use_copyrect: boolean,
+ *   scale: string,
+ *   is_packet_capturing: number,
+ *   tunnel_id: number,
+ *   archived: number,
+ *   selenium_version: string,
+ *   show_result_web_url: ?string,
+ *   show_result_public_url: ?string,
+ *   download_results_zip_url: ?string,
+ *   download_results_zip_public_url: ?string,
+ *   launch_live_test_url: ?string,
+ *   resolution: !CbtSeleniumResolution,
+ *   os: !CbtSeleniumOs,
+ *   browser: !CbtSeleniumBrowser,
+ *   requestMethod: string,
+ *   api_version: string,
+ *   description: ?string,
+ *   tags: !Array<?>,
+ *   videos: !Array<!CbtSeleniumVideo>,
+ *   snapshots: !Array<?>,
+ *   networks: !Array<!CbtSeleniumNetwork>,
+ *   commands: !Array<!CbtSeleniumNetwork>,
+ * }} CbtSeleniumInfoResponse
+ */
diff --git a/test/screenshot/infra/types/cli-types.js b/test/screenshot/infra/types/cli-types.js
new file mode 100644
index 00000000000..71e5821eefa
--- /dev/null
+++ b/test/screenshot/infra/types/cli-types.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @typedef {{
+ *   optionNames: !Array<string>,
+ *   description: string,
+ *   isRequired: ?boolean,
+ *   type: ?string,
+ *   defaultValue: ?*,
+ *   exampleValue: ?string,
+ * }} CliOptionConfig
+ */
diff --git a/test/screenshot/infra/types/node-api-externs.js b/test/screenshot/infra/types/node-api-externs.js
new file mode 100644
index 00000000000..6ef804c90cf
--- /dev/null
+++ b/test/screenshot/infra/types/node-api-externs.js
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Node.js API
+ */
+
+
+/**
+ * @typedef {{
+ *   cwd: ?string,
+ *   env: ?Object,
+ *   argv0: ?string,
+ *   stdio: ?Array<string>,
+ *   detached: ?boolean,
+ *   uid: ?number,
+ *   gid: ?number,
+ *   shell: ?boolean,
+ *   windowsVerbatimArguments: ?boolean,
+ *   windowsHide: ?boolean,
+ * }} ChildProcessSpawnOptions
+ */
+
+
+/*
+ * Resemble.js API
+ */
+
+
+/**
+ * @typedef {{
+ *   rawMisMatchPercentage: number,
+ *   misMatchPercentage: string,
+ *   diffBounds: !ResembleApiBoundingBox,
+ *   analysisTime: number,
+ *   getImageDataUrl: function(text: string): string,
+ *   getBuffer: function(includeOriginal: boolean): !Buffer,
+ * }} ResembleApiComparisonResult
+ */
+
+/**
+ * @typedef {{
+ *   top: number,
+ *   left: number,
+ *   bottom: number,
+ *   right: number,
+ * }} ResembleApiBoundingBox
+ */
+
+/**
+ * @typedef {{
+ *   r: number, g: number, b: number, a: number
+ * }} RGBA
+ */
+
+
+/*
+ * ps-node API
+ */
+
+
+/**
+ * @typedef {{
+ *   pid: number,
+ *   ppid: number,
+ *   command: string,
+ *   arguments: !Array<string>,
+ * }} PsNodeProcess
+ */
diff --git a/test/screenshot/infra/lib/externs.js b/test/screenshot/infra/types/report-ui-types.js
similarity index 55%
rename from test/screenshot/infra/lib/externs.js
rename to test/screenshot/infra/types/report-ui-types.js
index c3d334fdd37..e4884d1fbb3 100644
--- a/test/screenshot/infra/lib/externs.js
+++ b/test/screenshot/infra/types/report-ui-types.js
@@ -5,7 +5,7 @@
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *      https://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-unused-vars */
-
-
 /*
  * Report UI
  */
@@ -70,100 +67,3 @@
 /**
  * @typedef {!Object<string, number>} ReportUiReviewStatusCountDict
  */
-
-
-/*
- * CLI args
- */
-
-
-/**
- * @typedef {{
- *   optionNames: !Array<string>,
- *   description: string,
- *   isRequired: ?boolean,
- *   type: ?string,
- *   defaultValue: ?*,
- *   exampleValue: ?string,
- * }} CliOptionConfig
- */
-
-
-/*
- * Resemble.js API externs
- */
-
-
-/**
- * @typedef {{
- *   rawMisMatchPercentage: number,
- *   misMatchPercentage: string,
- *   diffBounds: !ResembleApiBoundingBox,
- *   analysisTime: number,
- *   getImageDataUrl: function(text: string): string,
- *   getBuffer: function(includeOriginal: boolean): !Buffer,
- * }} ResembleApiComparisonResult
- */
-
-/**
- * @typedef {{
- *   top: number,
- *   left: number,
- *   bottom: number,
- *   right: number,
- * }} ResembleApiBoundingBox
- */
-
-
-/*
- * ps-node API externs
- */
-
-
-/**
- * @typedef {{
- *   pid: number,
- *   ppid: number,
- *   command: string,
- *   arguments: !Array<string>,
- * }} PsNodeProcess
- */
-
-
-/*
- * Node.js API
- */
-
-
-/**
- * @typedef {{
- *   cwd: ?string,
- *   env: ?Object,
- *   argv0: ?string,
- *   stdio: ?Array<string>,
- *   detached: ?boolean,
- *   uid: ?number,
- *   gid: ?number,
- *   shell: ?boolean,
- *   windowsVerbatimArguments: ?boolean,
- *   windowsHide: ?boolean,
- * }} ChildProcessSpawnOptions
- */
-
-/**
- * @typedef {{
- *   status: number,
- *   signal: ?string,
- *   pid: number,
- * }} ChildProcessSpawnResult
- */
-
-
-/*
- * Image cropping
- */
-
-
-/**
- * @typedef {{r: number, g: number, b: number, a: number}} RGBA
- */
diff --git a/test/screenshot/report/_collection.hbs b/test/screenshot/report/_collection.hbs
index a7c8b4e4c60..bb037ce104e 100644
--- a/test/screenshot/report/_collection.hbs
+++ b/test/screenshot/report/_collection.hbs
@@ -103,6 +103,9 @@
                         ../html_file_path
                         user_agent.alias
                     }}{{/createApprovalStatusElement}}
+                    <a href="#{{../html_file_path}}:{{user_agent.alias}}"
+                       id="{{../html_file_path}}:{{user_agent.alias}}"
+                       class="report-user-agent__deeplink">#</a>
                   </span>
                 </summary>
                 <div class="report-user-agent__content">
diff --git a/test/screenshot/report/_footer.hbs b/test/screenshot/report/_footer.hbs
index b7869b6170c..6a28ef74723 100644
--- a/test/screenshot/report/_footer.hbs
+++ b/test/screenshot/report/_footer.hbs
@@ -46,10 +46,10 @@
     <span class="report-toolbar__column-label">Collapse:</span>
     <div class="report-toolbar__column-content">
       <button class="report-toolbar__button" onclick="mdc.reportUi.collapseAll()">
-        ▼ All
+        ▶ All
       </button>
       <button class="report-toolbar__button" onclick="mdc.reportUi.collapseNone()">
-        ▶ None
+        ▼ None
       </button>
       <button class="report-toolbar__button" onclick="mdc.reportUi.collapseImages()">
         🌅 Images
diff --git a/test/screenshot/report/_metadata.hbs b/test/screenshot/report/_metadata.hbs
index 650ec7cae23..910a05056e9 100644
--- a/test/screenshot/report/_metadata.hbs
+++ b/test/screenshot/report/_metadata.hbs
@@ -53,9 +53,6 @@
           <th class="report-metadata__cell report-metadata__cell--key">MDC Version:</th>
           <td class="report-metadata__cell report-metadata__cell--val">
             <a href="https://github.com/material-components/material-components-web/releases/tag/v{{meta.mdc_version.version_string}}">{{meta.mdc_version.version_string}}</a>
-            {{#if meta.mdc_version.commit_offset}}
-              <span class="report-metadata__commit-offset">+ {{meta.mdc_version.commit_offset}} commits</span>
-            {{/if}}
           </td>
         </tr>
         <tr class="report-metadata__row--top-divider">
diff --git a/test/screenshot/report/report.js b/test/screenshot/report/report.js
index 03a5ba7656e..81d6d977219 100644
--- a/test/screenshot/report/report.js
+++ b/test/screenshot/report/report.js
@@ -21,6 +21,7 @@ window.mdc.reportUi = (() => {
   class ReportUi {
     constructor() {
       this.bindEventListeners_();
+      this.collapseAllExceptDeepLink_();
 
       this.fetchReportData_().then((reportData) => {
         /**
@@ -116,6 +117,28 @@ window.mdc.reportUi = (() => {
       });
     }
 
+    collapseAllExceptDeepLink_() {
+      const [, id] = (/^#(.+)$/.exec(location.hash || '') || []);
+      if (!id) {
+        return;
+      }
+      const deepLinkElem = document.getElementById(id);
+      if (!deepLinkElem) {
+        return;
+      }
+      const htmlFileDetailsElems = Array.from(document.querySelectorAll('details.report-html-file'));
+      for (const htmlFileDetailsElem of htmlFileDetailsElems) {
+        htmlFileDetailsElem.open = htmlFileDetailsElem.contains(deepLinkElem);
+        if (htmlFileDetailsElem.open) {
+          htmlFileDetailsElem.querySelectorAll('details.report-user-agent').forEach((userAgentDetailsElem) => {
+            userAgentDetailsElem.open = userAgentDetailsElem.contains(deepLinkElem);
+          });
+          htmlFileDetailsElem.parentElement.closest('details').open = true;
+          break;
+        }
+      }
+    }
+
     collapseAll() {
       const allDetailsElems = Array.from(document.querySelectorAll('details'));
       allDetailsElems.forEach((detailsElem) => detailsElem.open = false);
@@ -127,15 +150,6 @@ window.mdc.reportUi = (() => {
     }
 
     collapseImages() {
-      this.collapseNone();
-
-      const collectionDetailsElems = Array.from(document.querySelectorAll('.report-collection'));
-      collectionDetailsElems.forEach((detailsElem) => {
-        const hasScreenshots = Number(detailsElem.getAttribute('data-num-screenshots')) > 0;
-        const isComparable = !['skipped', 'unchanged'].includes(detailsElem.getAttribute('data-collection-type'));
-        detailsElem.open = hasScreenshots && isComparable;
-      });
-
       const userAgentDetailsElems = Array.from(document.querySelectorAll('.report-user-agent'));
       userAgentDetailsElems.forEach((detailsElem) => detailsElem.open = false);
     }
diff --git a/test/screenshot/report/report.scss b/test/screenshot/report/report.scss
index 04621515169..79d74c9e373 100644
--- a/test/screenshot/report/report.scss
+++ b/test/screenshot/report/report.scss
@@ -316,7 +316,7 @@ th {
 }
 
 .report-review-status--hidden {
-  visibility: hidden;
+  display: none;
 }
 
 .report-review-status[data-review-status="approve"] {
diff --git a/test/screenshot/run.js b/test/screenshot/run.js
index 31ec450d1bf..36ee21e3ac7 100644
--- a/test/screenshot/run.js
+++ b/test/screenshot/run.js
@@ -17,86 +17,86 @@
 'use strict';
 
 const Cli = require('./infra/lib/cli');
+const CliColor = require('./infra/lib/logger').colors;
 const Duration = require('./infra/lib/duration');
 const {ExitCode} = require('./infra/lib/constants');
+const {formatError} = require('./infra/lib/stacktrace');
 
-const COMMAND_MAP = {
-  async approve() {
-    return require('./infra/commands/approve').runAsync();
+const COMMANDS = {
+  get approve() {
+    return require('./infra/commands/approve');
   },
-
-  async build() {
-    return require('./infra/commands/build').runAsync();
+  get build() {
+    return require('./infra/commands/build');
   },
-
-  async clean() {
-    return require('./infra/commands/clean').runAsync();
+  get clean() {
+    return require('./infra/commands/clean');
   },
-
-  async demo() {
-    return require('./infra/commands/demo').runAsync();
+  get demo() {
+    return require('./infra/commands/demo');
   },
-
-  async index() {
-    return require('./infra/commands/index').runAsync();
+  get index() {
+    return require('./infra/commands/index');
   },
-
-  async proto() {
-    return require('./infra/commands/proto').runAsync();
+  get proto() {
+    return require('./infra/commands/proto');
   },
-
-  async serve() {
-    return require('./infra/commands/serve').runAsync();
+  get serve() {
+    return require('./infra/commands/serve');
   },
-
-  async test() {
-    return require('./infra/commands/test').runAsync();
+  get test() {
+    return require('./infra/commands/test');
   },
 };
 
-async function run() {
+async function runAsync() {
   const cli = new Cli();
-  const cmd = COMMAND_MAP[cli.command];
+  const CmdClass = COMMANDS[cli.command];
 
-  if (cmd) {
-    const isOnline = await cli.isOnline();
-    if (!isOnline) {
-      console.log('Offline mode!');
-    }
-
-    cmd().then(
-      (exitCode = 0) => {
-        if (exitCode !== 0) {
-          process.exit(exitCode);
-        }
-      },
-      (err) => {
-        console.error(err);
-        process.exit(ExitCode.UNKNOWN_ERROR);
-      }
-    );
-  } else {
+  if (!CmdClass) {
     console.error(`Error: Unknown command: '${cli.command}'`);
     process.exit(ExitCode.UNSUPPORTED_CLI_COMMAND);
+    return;
+  }
+
+  const cmd = new CmdClass();
+  const isOnline = await cli.checkIsOnline();
+  if (!isOnline) {
+    console.log('Offline mode!');
   }
+
+  cmd.runAsync().then(
+    (exitCode = ExitCode.OK) => {
+      if (exitCode !== ExitCode.OK) {
+        process.exit(exitCode);
+      }
+    },
+    (err) => {
+      console.error('\n\n' + CliColor.bold.red('ERROR:'), formatError(err));
+      process.exit(ExitCode.UNKNOWN_ERROR);
+    }
+  );
 }
 
 const startTimeMs = new Date();
 
+// TODO(acdvorak): Create a centralized class to manage global exit handlers
 process.on('exit', () => {
   const elapsedTimeHuman = Duration.elapsed(startTimeMs, new Date()).toHumanShort();
   console.log(`\nRun time: ${elapsedTimeHuman}\n`);
 });
 
-process.on('unhandledRejection', (error) => {
+// TODO(acdvorak): Create a centralized class to manage global exit handlers
+process.on('unhandledRejection', (err) => {
   const message = [
     'UnhandledPromiseRejectionWarning: Unhandled promise rejection.',
     'This error originated either by throwing inside of an async function without a catch block,',
     'or by rejecting a promise which was not handled with .catch().',
   ].join(' ');
+  console.error('\n');
   console.error(message);
-  console.error(error);
+  console.error(formatError(err));
   process.exit(ExitCode.UNHANDLED_PROMISE_REJECTION);
 });
 
-run();
+runAsync();
diff --git a/test/screenshot/spec/mdc-drawer/classes/permanent.html b/test/screenshot/spec/mdc-drawer/classes/permanent.html
index fc3bbba7455..18802a568b9 100644
--- a/test/screenshot/spec/mdc-drawer/classes/permanent.html
+++ b/test/screenshot/spec/mdc-drawer/classes/permanent.html
@@ -83,7 +83,7 @@
         </header>
 
         <div class="mdc-top-app-bar--fixed-adjust">
-          <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>
@@ -92,7 +92,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -101,7 +101,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -110,7 +110,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
diff --git a/test/screenshot/spec/mdc-drawer/classes/persistent.html b/test/screenshot/spec/mdc-drawer/classes/persistent.html
index 158a8d3e346..489c46611be 100644
--- a/test/screenshot/spec/mdc-drawer/classes/persistent.html
+++ b/test/screenshot/spec/mdc-drawer/classes/persistent.html
@@ -84,7 +84,7 @@
         </header>
 
         <div class="mdc-top-app-bar--fixed-adjust">
-          <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>
@@ -93,7 +93,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -102,7 +102,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -111,7 +111,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
diff --git a/test/screenshot/spec/mdc-drawer/classes/temporary.html b/test/screenshot/spec/mdc-drawer/classes/temporary.html
index f5ed276b3af..f202c83fff4 100644
--- a/test/screenshot/spec/mdc-drawer/classes/temporary.html
+++ b/test/screenshot/spec/mdc-drawer/classes/temporary.html
@@ -84,7 +84,7 @@
         </header>
 
         <div class="mdc-top-app-bar--fixed-adjust">
-          <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>
@@ -93,7 +93,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -102,7 +102,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -111,7 +111,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
diff --git a/test/screenshot/spec/mdc-drawer/fixture.scss b/test/screenshot/spec/mdc-drawer/fixture.scss
index 374aba1f664..2d3c98a23d6 100644
--- a/test/screenshot/spec/mdc-drawer/fixture.scss
+++ b/test/screenshot/spec/mdc-drawer/fixture.scss
@@ -30,6 +30,11 @@ $custom-drawer-color: $material-color-orange-900;
   flex-direction: column;
 }
 
+.test-drawer-paragraph {
+  margin: 1em 0 0 0;
+  line-height: 1;
+}
+
 .custom-drawer--fill-color {
   @include mdc-drawer-fill-color($custom-drawer-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 2008b347205..f4881967fa1 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
@@ -83,7 +83,7 @@
         </header>
 
         <div class="mdc-top-app-bar--fixed-adjust">
-          <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>
@@ -92,7 +92,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -101,7 +101,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -110,7 +110,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
diff --git a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
index 152952e33b4..f76d51e3332 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
@@ -83,7 +83,7 @@
         </header>
 
         <div class="mdc-top-app-bar--fixed-adjust">
-          <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>
@@ -92,7 +92,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -101,7 +101,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -110,7 +110,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
diff --git a/test/screenshot/spec/mdc-drawer/mixins/ink-color.html b/test/screenshot/spec/mdc-drawer/mixins/ink-color.html
index faf8d921d22..79cd1651e8f 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/ink-color.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/ink-color.html
@@ -83,7 +83,7 @@
         </header>
 
         <div class="mdc-top-app-bar--fixed-adjust">
-          <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>
@@ -92,7 +92,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -101,7 +101,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
@@ -110,7 +110,7 @@
             occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit<br>
             anim id est laborum.
           </p>
-          <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>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-textfield.html b/test/screenshot/spec/mdc-textfield/classes/baseline-textfield.html
new file mode 100644
index 00000000000..1be4e61a6ac
--- /dev/null
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-textfield.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Baseline Text Field Element - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.textfield.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-textfield/fixture.css">
+  </head>
+
+  <body class="test-body mdc-typography">
+    <main class="test-main test-main--mobile-viewport">
+      <div class="test-grid">
+        <div class="test-cell test-cell--textfield">
+          <div class="mdc-text-field mdc-text-field--box">
+            <input type="text" id="filled-text-field" class="mdc-text-field__input">
+            <label class="mdc-floating-label" for="filled-text-field">Label</label>
+            <div class="mdc-line-ripple"></div>
+          </div>
+        </div>
+
+        <div class="test-cell test-cell--textfield">
+          <div class="mdc-text-field mdc-text-field--outlined">
+            <input type="text" id="outlined-text-field" class="mdc-text-field__input">
+            <label for="outlined-text-field" class="mdc-floating-label">Label</label>
+            <div class="mdc-notched-outline">
+              <svg>
+                <path class="mdc-notched-outline__path"/>
+              </svg>
+            </div>
+            <div class="mdc-notched-outline__idle"></div>
+          </div>
+        </div>
+      </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-textfield/fixture.js"></script>
+  </body>
+</html>
diff --git a/test/screenshot/spec/mdc-textfield/fixture.js b/test/screenshot/spec/mdc-textfield/fixture.js
new file mode 100644
index 00000000000..1f072ea4821
--- /dev/null
+++ b/test/screenshot/spec/mdc-textfield/fixture.js
@@ -0,0 +1,3 @@
+[].forEach.call(document.querySelectorAll('.mdc-text-field'), function(el) {
+  mdc.textField.MDCTextField.attachTo(el);
+});
diff --git a/test/screenshot/spec/mdc-textfield/fixture.scss b/test/screenshot/spec/mdc-textfield/fixture.scss
new file mode 100644
index 00000000000..4f9ed82738b
--- /dev/null
+++ b/test/screenshot/spec/mdc-textfield/fixture.scss
@@ -0,0 +1,23 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "../../../../packages/mdc-textfield/mixins";
+@import "../../../../packages/mdc-theme/color-palette";
+
+.test-cell--textfield {
+  width: 301px;
+  height: 101px;
+}
diff --git a/test/unit/mdc-chips/mdc-chip-set.foundation.test.js b/test/unit/mdc-chips/mdc-chip-set.foundation.test.js
index 4ef7e085317..5e9ec9d3361 100644
--- a/test/unit/mdc-chips/mdc-chip-set.foundation.test.js
+++ b/test/unit/mdc-chips/mdc-chip-set.foundation.test.js
@@ -34,7 +34,7 @@ test('exports cssClasses', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCChipSetFoundation, [
-    'hasClass', 'registerInteractionHandler', 'deregisterInteractionHandler', 'removeChip',
+    'hasClass', 'removeChip',
   ]);
 });
 
@@ -56,35 +56,13 @@ const setupTest = () => {
   return {foundation, mockAdapter, chipA, chipB};
 };
 
-test('#init adds event listeners', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.init();
-
-  td.verify(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)));
-});
-
-test('#destroy removes event listeners', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.destroy();
-
-  td.verify(mockAdapter.deregisterInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)));
-});
-
-test('in choice chips, on custom MDCChip:interaction event selects chip if no chips are selected', () => {
+test('in choice chips, #handleChipInteraction selects chip if no chips are selected', () => {
   const {foundation, mockAdapter, chipA} = setupTest();
-  let chipInteractionHandler;
-  td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      chipInteractionHandler = handler;
-    });
   td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(true);
-
   td.when(chipA.foundation.isSelected()).thenReturn(false);
   assert.equal(foundation.selectedChips_.length, 0);
 
-  foundation.init();
-
-  chipInteractionHandler({
+  foundation.handleChipInteraction({
     detail: {
       chip: chipA,
     },
@@ -93,23 +71,15 @@ test('in choice chips, on custom MDCChip:interaction event selects chip if no ch
   assert.equal(foundation.selectedChips_.length, 1);
 });
 
-test('in choice chips, on custom MDCChip:interaction event deselects chip if another chip is selected', () => {
+test('in choice chips, #handleChipInteraction deselects chip if another chip is selected', () => {
   const {foundation, mockAdapter, chipA, chipB} = setupTest();
-  let chipInteractionHandler;
-  td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      chipInteractionHandler = handler;
-    });
   td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(true);
-
   foundation.select(chipB.foundation);
   td.when(chipA.foundation.isSelected()).thenReturn(false);
   td.when(chipB.foundation.isSelected()).thenReturn(true);
   assert.equal(foundation.selectedChips_.length, 1);
 
-  foundation.init();
-
-  chipInteractionHandler({
+  foundation.handleChipInteraction({
     detail: {
       chip: chipA,
     },
@@ -119,22 +89,14 @@ test('in choice chips, on custom MDCChip:interaction event deselects chip if ano
   assert.equal(foundation.selectedChips_.length, 1);
 });
 
-test('in filter chips, on custom MDCChip:interaction event selects multiple chips', () => {
+test('in filter chips, #handleChipInteraction selects multiple chips', () => {
   const {foundation, mockAdapter, chipA, chipB} = setupTest();
-  let chipInteractionHandler;
-  td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      chipInteractionHandler = handler;
-    });
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(true);
-
   td.when(chipA.foundation.isSelected()).thenReturn(false);
   td.when(chipB.foundation.isSelected()).thenReturn(false);
   assert.equal(foundation.selectedChips_.length, 0);
 
-  foundation.init();
-
-  chipInteractionHandler({
+  foundation.handleChipInteraction({
     detail: {
       chip: chipA,
     },
@@ -142,7 +104,7 @@ test('in filter chips, on custom MDCChip:interaction event selects multiple chip
   td.verify(chipA.foundation.setSelected(true));
   assert.equal(foundation.selectedChips_.length, 1);
 
-  chipInteractionHandler({
+  foundation.handleChipInteraction({
     detail: {
       chip: chipB,
     },
@@ -151,24 +113,16 @@ test('in filter chips, on custom MDCChip:interaction event selects multiple chip
   assert.equal(foundation.selectedChips_.length, 2);
 });
 
-test('in filter chips, on custom MDCChip:interaction event deselects selected chips', () => {
+test('in filter chips, #handleChipInteraction event deselects selected chips', () => {
   const {foundation, mockAdapter, chipA, chipB} = setupTest();
-  let chipInteractionHandler;
-  td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      chipInteractionHandler = handler;
-    });
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(true);
-
   foundation.select(chipA.foundation);
   foundation.select(chipB.foundation);
   td.when(chipA.foundation.isSelected()).thenReturn(true);
   td.when(chipB.foundation.isSelected()).thenReturn(true);
   assert.equal(foundation.selectedChips_.length, 2);
 
-  foundation.init();
-
-  chipInteractionHandler({
+  foundation.handleChipInteraction({
     detail: {
       chip: chipB,
     },
@@ -176,7 +130,7 @@ test('in filter chips, on custom MDCChip:interaction event deselects selected ch
   td.verify(chipB.foundation.setSelected(false));
   assert.equal(foundation.selectedChips_.length, 1);
 
-  chipInteractionHandler({
+  foundation.handleChipInteraction({
     detail: {
       chip: chipA,
     },
@@ -185,16 +139,10 @@ test('in filter chips, on custom MDCChip:interaction event deselects selected ch
   assert.equal(foundation.selectedChips_.length, 0);
 });
 
-test('on custom MDCChip:removal event removes chip', () => {
+test('#handleChipRemoval removes chip', () => {
   const {foundation, mockAdapter, chipA} = setupTest();
-  let chipRemovalHandler;
-  td.when(mockAdapter.registerInteractionHandler('MDCChip:removal', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      chipRemovalHandler = handler;
-    });
-
-  foundation.init();
-  chipRemovalHandler({
+
+  foundation.handleChipRemoval({
     detail: {
       chip: chipA,
     },
diff --git a/test/unit/mdc-chips/mdc-chip-set.test.js b/test/unit/mdc-chips/mdc-chip-set.test.js
index 93d17c3b852..bb402f2607c 100644
--- a/test/unit/mdc-chips/mdc-chip-set.test.js
+++ b/test/unit/mdc-chips/mdc-chip-set.test.js
@@ -15,7 +15,6 @@
  */
 
 import bel from 'bel';
-import domEvents from 'dom-events';
 import {assert} from 'chai';
 import td from 'testdouble';
 
@@ -112,25 +111,6 @@ test('#adapter.hasClass returns true if class is set on chip set element', () =>
   assert.isTrue(component.getDefaultFoundation().adapter_.hasClass('foo'));
 });
 
-test('#adapter.registerInteractionHandler adds a handler to the root element for a given event', () => {
-  const {root, component} = setupTest();
-  const handler = td.func('eventHandler');
-
-  component.getDefaultFoundation().adapter_.registerInteractionHandler('click', handler);
-  domEvents.emit(root, 'click');
-  td.verify(handler(td.matchers.anything()));
-});
-
-test('#adapter.deregisterInteractionHandler removes a handler from the root element for a given event', () => {
-  const {root, component} = setupTest();
-  const handler = td.func('eventHandler');
-
-  root.addEventListener('click', handler);
-  component.getDefaultFoundation().adapter_.deregisterInteractionHandler('click', handler);
-  domEvents.emit(root, 'click');
-  td.verify(handler(td.matchers.anything()), {times: 0});
-});
-
 test('#adapter.removeChip removes the chip object from the chip set', () => {
   const root = getFixture();
   const component = new MDCChipSet(root, undefined, (el) => new FakeChip(el));
diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js
index a8fec52df7b..a31a2c627ce 100644
--- a/test/unit/mdc-chips/mdc-chip.foundation.test.js
+++ b/test/unit/mdc-chips/mdc-chip.foundation.test.js
@@ -17,7 +17,7 @@
 import {assert} from 'chai';
 import td from 'testdouble';
 
-import {verifyDefaultAdapter, captureHandlers} from '../helpers/foundation';
+import {verifyDefaultAdapter} from '../helpers/foundation';
 import {createMockRaf} from '../helpers/raf';
 import {setupFoundationTest} from '../helpers/setup';
 import {MDCChipFoundation} from '../../../packages/mdc-chips/chip/foundation';
@@ -37,9 +37,7 @@ test('exports cssClasses', () => {
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCChipFoundation, [
     'addClass', 'removeClass', 'hasClass', 'addClassToLeadingIcon',
-    'removeClassFromLeadingIcon', 'eventTargetHasClass', 'registerEventHandler',
-    'deregisterEventHandler', 'registerTrailingIconInteractionHandler',
-    'deregisterTrailingIconInteractionHandler', 'notifyInteraction',
+    'removeClassFromLeadingIcon', 'eventTargetHasClass', 'notifyInteraction',
     'notifyTrailingIconInteraction', 'notifyRemoval',
     'getComputedStyleValue', 'setStyleProperty',
   ]);
@@ -47,34 +45,6 @@ test('defaultAdapter returns a complete adapter implementation', () => {
 
 const setupTest = () => setupFoundationTest(MDCChipFoundation);
 
-test('#init adds event listeners', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.init();
-
-  td.verify(mockAdapter.registerEventHandler('click', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerEventHandler('keydown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerEventHandler('transitionend', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerTrailingIconInteractionHandler('click', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerTrailingIconInteractionHandler('keydown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerTrailingIconInteractionHandler('touchstart', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerTrailingIconInteractionHandler('pointerdown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.registerTrailingIconInteractionHandler('mousedown', td.matchers.isA(Function)));
-});
-
-test('#destroy removes event listeners', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.destroy();
-
-  td.verify(mockAdapter.deregisterEventHandler('click', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterEventHandler('keydown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterEventHandler('transitionend', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('click', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('keydown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('touchstart', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('pointerdown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('mousedown', td.matchers.isA(Function)));
-});
-
 test('#isSelected returns true if mdc-chip--selected class is present', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(true);
@@ -105,22 +75,19 @@ test(`#beginExit adds ${cssClasses.CHIP_EXIT} class`, () => {
   td.verify(mockAdapter.addClass(cssClasses.CHIP_EXIT));
 });
 
-test('on click, emit custom event', () => {
+test('#handleInteraction emits custom event on click', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'click',
   };
 
-  foundation.init();
-  handlers.click(mockEvt);
+  foundation.handleInteraction(mockEvt);
 
   td.verify(mockAdapter.notifyInteraction());
 });
 
-test('on chip width transition end, notify removal of chip', () => {
+test('#handleTransitionEnd notifies removal of chip on width transition end', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'transitionend',
     target: {},
@@ -128,16 +95,14 @@ test('on chip width transition end, notify removal of chip', () => {
   };
   td.when(mockAdapter.eventTargetHasClass(mockEvt.target, cssClasses.CHIP_EXIT)).thenReturn(true);
 
-  foundation.init();
-  handlers.transitionend(mockEvt);
+  foundation.handleTransitionEnd(mockEvt);
 
   td.verify(mockAdapter.notifyRemoval());
 });
 
-test('on chip opacity transition end, animate width if chip is exiting', () => {
+test('#handleTransitionEnd animates width if chip is exiting on chip opacity transition end', () => {
   const {foundation, mockAdapter} = setupTest();
   const raf = createMockRaf();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'transitionend',
     target: {},
@@ -146,8 +111,7 @@ test('on chip opacity transition end, animate width if chip is exiting', () => {
   td.when(mockAdapter.eventTargetHasClass(mockEvt.target, cssClasses.CHIP_EXIT)).thenReturn(true);
   td.when(mockAdapter.getComputedStyleValue('width')).thenReturn('100px');
 
-  foundation.init();
-  handlers.transitionend(mockEvt);
+  foundation.handleTransitionEnd(mockEvt);
 
   raf.flush();
   td.verify(mockAdapter.setStyleProperty('width', '100px'));
@@ -158,10 +122,9 @@ test('on chip opacity transition end, animate width if chip is exiting', () => {
   td.verify(mockAdapter.setStyleProperty('width', '0'));
 });
 
-test(`on leading icon opacity transition end, add ${cssClasses.HIDDEN_LEADING_ICON}` +
-  'class to leading icon if chip is selected', () => {
+test(`#handleTransitionEnd adds ${cssClasses.HIDDEN_LEADING_ICON} class to leading icon ` +
+  'on leading icon opacity transition end, if chip is selected', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'transitionend',
     target: {},
@@ -170,15 +133,14 @@ test(`on leading icon opacity transition end, add ${cssClasses.HIDDEN_LEADING_IC
   td.when(mockAdapter.eventTargetHasClass(mockEvt.target, cssClasses.LEADING_ICON)).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(true);
 
-  foundation.init();
-  handlers.transitionend(mockEvt);
+  foundation.handleTransitionEnd(mockEvt);
 
   td.verify(mockAdapter.addClassToLeadingIcon(cssClasses.HIDDEN_LEADING_ICON));
 });
 
-test('on leading icon opacity transition end, do nothing if chip is not selected', () => {
+test('#handleTransitionEnd does nothing on leading icon opacity transition end,' +
+  'if chip is not selected', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'transitionend',
     target: {},
@@ -187,16 +149,14 @@ test('on leading icon opacity transition end, do nothing if chip is not selected
   td.when(mockAdapter.eventTargetHasClass(mockEvt.target, cssClasses.LEADING_ICON)).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(false);
 
-  foundation.init();
-  handlers.transitionend(mockEvt);
+  foundation.handleTransitionEnd(mockEvt);
 
   td.verify(mockAdapter.addClassToLeadingIcon(cssClasses.HIDDEN_LEADING_ICON), {times: 0});
 });
 
-test(`on checkmark opacity transition end, remove ${cssClasses.HIDDEN_LEADING_ICON}` +
-  'class from leading icon if chip is not selected', () => {
+test(`#handleTransitionEnd removes ${cssClasses.HIDDEN_LEADING_ICON} class from leading icon ` +
+  'on checkmark opacity transition end, if chip is not selected', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'transitionend',
     target: {},
@@ -205,15 +165,13 @@ test(`on checkmark opacity transition end, remove ${cssClasses.HIDDEN_LEADING_IC
   td.when(mockAdapter.eventTargetHasClass(mockEvt.target, cssClasses.CHECKMARK)).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(false);
 
-  foundation.init();
-  handlers.transitionend(mockEvt);
+  foundation.handleTransitionEnd(mockEvt);
 
   td.verify(mockAdapter.removeClassFromLeadingIcon(cssClasses.HIDDEN_LEADING_ICON));
 });
 
-test('on checkmark opacity transition end, do nothing if chip is selected', () => {
+test('#handleTransitionEnd does nothing on checkmark opacity transition end, if chip is selected', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
   const mockEvt = {
     type: 'transitionend',
     target: {},
@@ -222,58 +180,49 @@ test('on checkmark opacity transition end, do nothing if chip is selected', () =
   td.when(mockAdapter.eventTargetHasClass(mockEvt.target, cssClasses.CHECKMARK)).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(true);
 
-  foundation.init();
-  handlers.transitionend(mockEvt);
+  foundation.handleTransitionEnd(mockEvt);
 
   td.verify(mockAdapter.removeClassFromLeadingIcon(cssClasses.HIDDEN_LEADING_ICON), {times: 0});
 });
 
-test('on click in trailing icon, emit custom event', () => {
+test('#handleTrailingIconInteraction emits custom event on click in trailing icon', () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerTrailingIconInteractionHandler');
   const mockEvt = {
     type: 'click',
     stopPropagation: td.func('stopPropagation'),
   };
 
-  foundation.init();
-  handlers.click(mockEvt);
-
+  foundation.handleTrailingIconInteraction(mockEvt);
   td.verify(mockAdapter.notifyTrailingIconInteraction());
   td.verify(mockEvt.stopPropagation());
 });
 
-test(`on click in trailing icon, add ${cssClasses.CHIP_EXIT} class by default`, () => {
+test(`#handleTrailingIconInteraction adds ${cssClasses.CHIP_EXIT} class by default on click in trailing icon`, () => {
   const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerTrailingIconInteractionHandler');
   const mockEvt = {
     type: 'click',
     stopPropagation: td.func('stopPropagation'),
   };
 
-  foundation.init();
-  handlers.click(mockEvt);
+  foundation.handleTrailingIconInteraction(mockEvt);
 
   assert.isTrue(foundation.getShouldRemoveOnTrailingIconClick());
   td.verify(mockAdapter.addClass(cssClasses.CHIP_EXIT));
   td.verify(mockEvt.stopPropagation());
 });
 
-test(`on click in trailing icon, do not add ${cssClasses.CHIP_EXIT} class if shouldRemoveOnTrailingIconClick_ is false`,
-  () => {
-    const {foundation, mockAdapter} = setupTest();
-    const handlers = captureHandlers(mockAdapter, 'registerTrailingIconInteractionHandler');
-    const mockEvt = {
-      type: 'click',
-      stopPropagation: td.func('stopPropagation'),
-    };
-
-    foundation.init();
-    foundation.setShouldRemoveOnTrailingIconClick(false);
-    handlers.click(mockEvt);
-
-    assert.isFalse(foundation.getShouldRemoveOnTrailingIconClick());
-    td.verify(mockAdapter.addClass(cssClasses.CHIP_EXIT), {times: 0});
-    td.verify(mockEvt.stopPropagation());
-  }
-);
+test(`#handleTrailingIconInteraction does not add ${cssClasses.CHIP_EXIT} class on click in trailing icon ` +
+  'if shouldRemoveOnTrailingIconClick_ is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const mockEvt = {
+    type: 'click',
+    stopPropagation: td.func('stopPropagation'),
+  };
+
+  foundation.setShouldRemoveOnTrailingIconClick(false);
+  foundation.handleTrailingIconInteraction(mockEvt);
+
+  assert.isFalse(foundation.getShouldRemoveOnTrailingIconClick());
+  td.verify(mockAdapter.addClass(cssClasses.CHIP_EXIT), {times: 0});
+  td.verify(mockEvt.stopPropagation());
+});
diff --git a/test/unit/mdc-chips/mdc-chip.test.js b/test/unit/mdc-chips/mdc-chip.test.js
index 1b5298609e1..9d3b0bce73d 100644
--- a/test/unit/mdc-chips/mdc-chip.test.js
+++ b/test/unit/mdc-chips/mdc-chip.test.js
@@ -17,7 +17,6 @@
 import bel from 'bel';
 import {assert} from 'chai';
 import td from 'testdouble';
-import domEvents from 'dom-events';
 
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {MDCChip, MDCChipFoundation} from '../../../packages/mdc-chips/chip';
@@ -106,56 +105,6 @@ test('adapter#eventTargetHasClass returns true if given element has class', () =
   assert.isTrue(component.getDefaultFoundation().adapter_.eventTargetHasClass(mockEventTarget, 'foo'));
 });
 
-test('#adapter.registerEventHandler adds event listener for a given event to the root element', () => {
-  const {root, component} = setupTest();
-  const handler = td.func('click handler');
-  component.getDefaultFoundation().adapter_.registerEventHandler('click', handler);
-  domEvents.emit(root, 'click');
-
-  td.verify(handler(td.matchers.anything()));
-});
-
-test('#adapter.deregisterEventHandler removes event listener for a given event from the root element', () => {
-  const {root, component} = setupTest();
-  const handler = td.func('click handler');
-
-  root.addEventListener('click', handler);
-  component.getDefaultFoundation().adapter_.deregisterEventHandler('click', handler);
-  domEvents.emit(root, 'click');
-
-  td.verify(handler(td.matchers.anything()), {times: 0});
-});
-
-test('#adapter.registerTrailingIconInteractionHandler adds event listener for a given event to the trailing' +
-'icon element', () => {
-  const {root, component} = setupTest();
-  const icon = bel`
-    <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
-  `;
-  root.appendChild(icon);
-  const handler = td.func('click handler');
-  component.getDefaultFoundation().adapter_.registerTrailingIconInteractionHandler('click', handler);
-  domEvents.emit(icon, 'click');
-
-  td.verify(handler(td.matchers.anything()));
-});
-
-test('#adapter.deregisterTrailingIconInteractionHandler removes event listener for a given event from the trailing ' +
-'icon element', () => {
-  const {root, component} = setupTest();
-  const icon = bel`
-    <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
-  `;
-  root.appendChild(icon);
-  const handler = td.func('click handler');
-
-  icon.addEventListener('click', handler);
-  component.getDefaultFoundation().adapter_.deregisterTrailingIconInteractionHandler('click', handler);
-  domEvents.emit(icon, 'click');
-
-  td.verify(handler(td.matchers.anything()), {times: 0});
-});
-
 test('#adapter.notifyInteraction emits ' + MDCChipFoundation.strings.INTERACTION_EVENT, () => {
   const {component} = setupTest();
   const handler = td.func('interaction handler');
diff --git a/test/unit/mdc-select/foundation-events.test.js b/test/unit/mdc-select/foundation-events.test.js
deleted file mode 100644
index defea479a14..00000000000
--- a/test/unit/mdc-select/foundation-events.test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import td from 'testdouble';
-import {setupFoundationTest} from '../helpers/setup';
-import {captureHandlers} from '../helpers/foundation';
-
-import MDCSelectFoundation from '../../../packages/mdc-select/foundation';
-
-function setupTest() {
-  const {foundation, mockAdapter} = setupFoundationTest(MDCSelectFoundation);
-
-  const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');
-  foundation.init();
-
-  return {foundation, mockAdapter, handlers};
-}
-
-suite('MDCSelectFoundation - Events');
-
-test('on focus activates bottom line and floats label', () => {
-  const {mockAdapter, handlers} = setupTest();
-  handlers.focus();
-  td.verify(mockAdapter.activateBottomLine(), {times: 1});
-  td.verify(mockAdapter.floatLabel(true), {times: 1});
-});
-
-test('on blur deactivates bottom line', () => {
-  const {mockAdapter, handlers} = setupTest();
-  td.when(mockAdapter.getValue()).thenReturn('');
-  handlers.blur();
-  td.verify(mockAdapter.deactivateBottomLine(), {times: 1});
-});
-
-test('on blur with no value defloats label', () => {
-  const {mockAdapter, handlers} = setupTest();
-  td.when(mockAdapter.getValue()).thenReturn('');
-  handlers.blur();
-  td.verify(mockAdapter.floatLabel(false), {times: 1});
-});
-
-test('on blur with value floats label', () => {
-  const {mockAdapter, handlers} = setupTest();
-  td.when(mockAdapter.getValue()).thenReturn('some value');
-  handlers.blur();
-  td.verify(mockAdapter.floatLabel(true), {times: 1});
-});
-
-test('on select value change with option value', () => {
-  const {mockAdapter, handlers} = setupTest();
-  td.when(mockAdapter.getSelectedIndex()).thenReturn(1);
-  td.when(mockAdapter.getValue()).thenReturn('abc');
-  td.when(mockAdapter.setSelectedIndex(1)).thenReturn();
-  handlers.change({
-    target: {value: 'abc'},
-  });
-  td.verify(mockAdapter.floatLabel(true), {times: 1});
-});
diff --git a/test/unit/mdc-select/foundation.test.js b/test/unit/mdc-select/foundation.test.js
index 06a1189878a..e2f00942f9c 100644
--- a/test/unit/mdc-select/foundation.test.js
+++ b/test/unit/mdc-select/foundation.test.js
@@ -40,9 +40,8 @@ test('exports strings', () => {
 test('default adapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCSelectFoundation, [
     'addClass', 'removeClass', 'hasClass', 'floatLabel', 'activateBottomLine',
-    'deactivateBottomLine', 'setDisabled', 'registerInteractionHandler',
-    'deregisterInteractionHandler', 'getValue', 'setValue', 'getSelectedIndex',
-    'setSelectedIndex', 'isRtl', 'hasLabel', 'getLabelWidth', 'hasOutline',
+    'deactivateBottomLine', 'getValue',
+    'isRtl', 'hasLabel', 'getLabelWidth', 'hasOutline',
     'notchOutline', 'closeOutline',
   ]);
 });
@@ -53,72 +52,18 @@ function setupTest() {
   return {mockAdapter, foundation};
 }
 
-test('#setDisabled to true calls adapter.setDisabled and adapter.addClass', () => {
+test('#updateDisabledStyle(true) calls adapter.addClass', () => {
   const {mockAdapter, foundation} = setupTest();
-  foundation.setDisabled(true);
-  td.verify(mockAdapter.setDisabled(true));
+  foundation.updateDisabledStyle(true);
   td.verify(mockAdapter.addClass(MDCSelectFoundation.cssClasses.DISABLED));
 });
 
-test('#setDisabled to false calls adapter.setDisabled false and adapter.removeClass', () => {
+test('#updateDisabledStyle(false) calls adapter.removeClass', () => {
   const {mockAdapter, foundation} = setupTest();
-  foundation.setDisabled(false);
-  td.verify(mockAdapter.setDisabled(false));
+  foundation.updateDisabledStyle(false);
   td.verify(mockAdapter.removeClass(MDCSelectFoundation.cssClasses.DISABLED));
 });
 
-test('#init registers focus, blur, and change handlers', () => {
-  const {mockAdapter, foundation} = setupTest();
-  foundation.init();
-  td.verify(mockAdapter.registerInteractionHandler('focus', foundation.focusHandler_));
-  td.verify(mockAdapter.registerInteractionHandler('blur', foundation.blurHandler_));
-  td.verify(mockAdapter.registerInteractionHandler('change', foundation.selectionHandler_));
-});
-
-test('#destroy deregisters focus, blur, and change handlers', () => {
-  const {mockAdapter, foundation} = setupTest();
-  foundation.destroy();
-  td.verify(mockAdapter.deregisterInteractionHandler('focus', foundation.focusHandler_));
-  td.verify(mockAdapter.deregisterInteractionHandler('blur', foundation.blurHandler_));
-  td.verify(mockAdapter.deregisterInteractionHandler('change', foundation.selectionHandler_));
-});
-
-test('#setSelectedIndex calls adapter.setSelectedIndex', () => {
-  const {mockAdapter, foundation} = setupTest();
-  foundation.setSelectedIndex(1);
-  td.verify(mockAdapter.setSelectedIndex(1));
-});
-
-
-test('#setSelectedIndex floats label', () => {
-  const {mockAdapter, foundation} = setupTest();
-  td.when(mockAdapter.getValue()).thenReturn('value');
-  foundation.setSelectedIndex(1);
-  td.verify(mockAdapter.floatLabel(true));
-});
-
-test('#setSelectedIndex with index of an empty value defloats label', () => {
-  const {mockAdapter, foundation} = setupTest();
-  td.when(mockAdapter.getValue(1)).thenReturn('');
-  foundation.setSelectedIndex(1);
-  td.verify(mockAdapter.floatLabel(false));
-});
-
-test('#setValue calls setValue on adapter', () => {
-  const {mockAdapter, foundation} = setupTest();
-  td.when(mockAdapter.getSelectedIndex()).thenReturn(1);
-  foundation.setValue('value');
-  td.verify(mockAdapter.setValue('value'));
-});
-
-test('#setValue calls setSelectedIndex, which calls floatLabel true', () => {
-  const {mockAdapter, foundation} = setupTest();
-  td.when(mockAdapter.getValue()).thenReturn('value');
-  td.when(mockAdapter.getSelectedIndex()).thenReturn(1);
-  foundation.setValue('value');
-  td.verify(mockAdapter.floatLabel(true));
-});
-
 test('#notchOutline updates the SVG path of the outline element', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getLabelWidth()).thenReturn(30);
@@ -157,3 +102,70 @@ test('#notchOutline calls updates notched outline to return to idle state when '
   foundation.notchOutline(false);
   td.verify(mockAdapter.closeOutline());
 });
+
+test('#handleChange calls adapter.floatLabel(true) when there is a value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getValue()).thenReturn('value');
+
+  foundation.handleChange();
+  td.verify(mockAdapter.floatLabel(true), {times: 1});
+});
+
+test('#handleChange calls adapter.floatLabel(false) when there is no value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getValue()).thenReturn('');
+
+  foundation.handleChange();
+  td.verify(mockAdapter.floatLabel(false), {times: 1});
+});
+
+test('#handleChange calls foundation.notchOutline(true) when there is a value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.notchOutline = td.func();
+  td.when(mockAdapter.getValue()).thenReturn('value');
+
+  foundation.handleChange();
+  td.verify(foundation.notchOutline(true), {times: 1});
+});
+
+test('#handleChange calls foundation.notchOutline(false) when there is no value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.notchOutline = td.func();
+  td.when(mockAdapter.getValue()).thenReturn('');
+
+  foundation.handleChange();
+  td.verify(foundation.notchOutline(false), {times: 1});
+});
+
+test('#handleFocus calls adapter.floatLabel(true)', () => {
+  const {foundation, mockAdapter} = setupTest();
+
+  foundation.handleFocus();
+  td.verify(mockAdapter.floatLabel(true), {times: 1});
+});
+
+test('#handleFocus calls foundation.notchOutline(true)', () => {
+  const {foundation} = setupTest();
+  foundation.notchOutline = td.func();
+  foundation.handleFocus();
+  td.verify(foundation.notchOutline(true), {times: 1});
+});
+
+test('#handleFocus calls adapter.activateBottomLine()', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.handleFocus();
+  td.verify(mockAdapter.activateBottomLine(), {times: 1});
+});
+
+test('#handleBlur calls foundation.handleChange()', () => {
+  const {foundation} = setupTest();
+  foundation.handleChange = td.func();
+  foundation.handleBlur();
+  td.verify(foundation.handleChange(), {times: 1});
+});
+
+test('#handleBlur calls adapter.deactivateBottomLine()', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.handleBlur();
+  td.verify(mockAdapter.deactivateBottomLine(), {times: 1});
+});
diff --git a/test/unit/mdc-select/mdc-select.test.js b/test/unit/mdc-select/mdc-select.test.js
index 69d95c53a36..efd057c8f78 100644
--- a/test/unit/mdc-select/mdc-select.test.js
+++ b/test/unit/mdc-select/mdc-select.test.js
@@ -106,7 +106,7 @@ test('#get/setSelectedIndex', () => {
   assert.equal(component.selectedIndex, 1);
 });
 
-test('#get/setDisabled', () => {
+test('#get/set disabled', () => {
   const {component} = setupTest();
   assert.isFalse(component.disabled);
   component.disabled = true;
@@ -128,6 +128,27 @@ test('#set value sets the value on the <select>', () => {
   assert.equal(nativeControl.value, 'orange');
 });
 
+test('#set value calls foundation.handleChange', () => {
+  const {component} = setupTest();
+  component.foundation_.handleChange = td.func();
+  component.value = 'orange';
+  td.verify(component.foundation_.handleChange(), {times: 1});
+});
+
+test('#set selectedIndex calls foundation.handleChange', () => {
+  const {component} = setupTest();
+  component.foundation_.handleChange = td.func();
+  component.selectedIndex = 1;
+  td.verify(component.foundation_.handleChange(), {times: 1});
+});
+
+test('#set disabled calls foundation.updateDisabledStyle', () => {
+  const {component} = setupTest();
+  component.foundation_.updateDisabledStyle = td.func();
+  component.disabled = true;
+  td.verify(component.foundation_.updateDisabledStyle(true), {times: 1});
+});
+
 test('#initialSyncWithDOM sets the selected index if an option has the selected attr', () => {
   const fixture = bel`
     <div class="mdc-select">
@@ -338,37 +359,47 @@ test('adapter#deactivateBottomLine removes active class from the bottom line', (
   td.verify(bottomLine.deactivate());
 });
 
-test('adapter#registerInteractionHandler adds an event listener to the nativeControl element', () => {
+test('change event triggers foundation.handleChange()', () => {
+  const {component, nativeControl} = setupTest();
+  component.foundation_.handleChange = td.func();
+  domEvents.emit(nativeControl, 'change');
+  td.verify(component.foundation_.handleChange(), {times: 1});
+});
+
+test('focus event triggers foundation.handleFocus()', () => {
   const {component, nativeControl} = setupTest();
-  const listener = td.func('eventlistener');
-  component.getDefaultFoundation().adapter_.registerInteractionHandler('click', listener);
-  domEvents.emit(nativeControl, 'click');
-  td.verify(listener(td.matchers.anything()));
+  component.foundation_.handleFocus = td.func();
+  domEvents.emit(nativeControl, 'focus');
+  td.verify(component.foundation_.handleFocus(), {times: 1});
 });
 
-test('adapter#deregisterInteractionHandler removes an event listener from the nativeControl element', () => {
+test('blur event triggers foundation.handleBlur()', () => {
   const {component, nativeControl} = setupTest();
-  const listener = td.func('eventlistener');
-  nativeControl.addEventListener('click', listener);
-  component.getDefaultFoundation().adapter_.deregisterInteractionHandler('click', listener);
-  domEvents.emit(nativeControl, 'click');
-  td.verify(listener(td.matchers.anything()), {times: 0});
+  component.foundation_.handleBlur = td.func();
+  domEvents.emit(nativeControl, 'blur');
+  td.verify(component.foundation_.handleBlur(), {times: 1});
 });
 
-test('adapter#setValue sets the value of the select to the correct option', () => {
-  const {nativeControl, component} = setupTest();
-  component.getDefaultFoundation().adapter_.setValue('orange');
-  assert.equal(nativeControl.value, 'orange');
+test('#destroy removes the change handler', () => {
+  const {component, nativeControl} = setupTest();
+  component.foundation_.handleChange = td.func();
+  component.destroy();
+  domEvents.emit(nativeControl, 'change');
+  td.verify(component.foundation_.handleChange(), {times: 0});
 });
 
-test('adapter#getValue returns the nativeControl value', () => {
-  const {nativeControl, component} = setupTest();
-  nativeControl.value = 'orange';
-  assert.equal(component.getDefaultFoundation().adapter_.getValue(), 'orange');
+test('#destroy removes the focus handler', () => {
+  const {component, nativeControl} = setupTest();
+  component.foundation_.handleFocus = td.func();
+  component.destroy();
+  domEvents.emit(nativeControl, 'focus');
+  td.verify(component.foundation_.handleFocus(), {times: 0});
 });
 
-test('adapter#getSelectedIndex returns selected index', () => {
-  const {component} = setupTest();
-  component.selectedIndex = 1;
-  assert.equal(component.getDefaultFoundation().adapter_.getSelectedIndex(), 1);
+test('#destroy removes the blur handler', () => {
+  const {component, nativeControl} = setupTest();
+  component.foundation_.handleBlur = td.func();
+  component.destroy();
+  domEvents.emit(nativeControl, 'blur');
+  td.verify(component.foundation_.handleBlur(), {times: 0});
 });