From 0a40ced406f96b5c84cf39457ffe880d00999714 Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Fri, 3 Jan 2020 11:04:44 -0600
Subject: [PATCH] fix(textfield): add placeholder mixins and fix disabled
 colors (#5360)

* fix(textfield): add placeholder mixins and disabled placeholder color

* fix(textfield): update disabled opacity to match spec's 38%

* chore(textfield): lint fixes

* chore(textfield): update disabled color screenshots

* chore(textfield): review updates
---
 packages/mdc-select/_variables.scss           |  8 +-
 packages/mdc-textfield/README.md              |  2 +
 packages/mdc-textfield/_mixins.scss           | 35 +++++++-
 packages/mdc-textfield/_variables.scss        |  7 +-
 packages/mdc-textfield/mdc-text-field.scss    |  8 +-
 test/screenshot/golden.json                   | 32 +++++---
 .../classes/baseline-placeholder.html         | 37 ++-------
 .../classes/disabled-placeholder.html         | 79 +++++++++++++++++++
 .../spec/mdc-textfield/fixture.scss           |  4 +
 .../spec/mdc-textfield/mixins/disabled-2.html | 25 ++++++
 10 files changed, 181 insertions(+), 56 deletions(-)
 create mode 100644 test/screenshot/spec/mdc-textfield/classes/disabled-placeholder.html

diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
index 905300f4b7d..8d9e186251a 100644
--- a/packages/mdc-select/_variables.scss
+++ b/packages/mdc-select/_variables.scss
@@ -42,11 +42,11 @@ $mdc-select-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-val
 $mdc-select-dropdown-opacity: .54 !default;
 
 // Disabled Styles
-$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
-$mdc-select-disabled-icon-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
-$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
+$mdc-select-disabled-icon-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
+$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
 $mdc-select-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%) !default;
-$mdc-select-disabled-dropdown-opacity: .37 !default;
+$mdc-select-disabled-dropdown-opacity: .38 !default;
 
 $mdc-select-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .38) !default;
 $mdc-select-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87) !default;
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index e1d56f4ef25..1501c3ec2fc 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -292,7 +292,9 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 Mixin | Description
 --- | ---
 `mdc-text-field-ink-color($color)` | Customizes the color of the text entered into an enabled text field.
+`mdc-text-field-placeholder-color($color)` | Customizes the color of the placeholder in an enabled text field.
 `mdc-text-field-disabled-ink-color($color)` | Customizes the color of the entered text in a disabled text field.
+`mdc-text-field-disabled-placeholder-color($color)` | Customizes the color of the placeholder in a disabled text field.
 `mdc-text-field-label-color($color)` | Customizes the text color of the label in an enabled text field.
 `mdc-text-field-disabled-label-color($color)` | Customizes the text color of the label in a disabled text field.
 `mdc-text-field-caret-color($color)` | Customizes the color of the cursor caret of the text field.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 7f6a99aa2e0..c581fed2b55 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -221,6 +221,26 @@
   }
 }
 
+///
+/// Customizes the color of the placeholder in an enabled text field.
+/// @param {Color} $color - The desired placeholder text color.
+///
+@mixin mdc-text-field-placeholder-color($color) {
+  @include mdc-text-field-if-enabled_ {
+    @include mdc-text-field-placeholder-color_($color);
+  }
+}
+
+///
+/// Customizes the color of the placeholder in a disabled text field.
+/// @param {Color} $color - The desired placeholder text color.
+///
+@mixin mdc-text-field-disabled-placeholder-color($color) {
+  @include mdc-text-field-if-disabled_ {
+    @include mdc-text-field-placeholder-color_($color);
+  }
+}
+
 ///
 /// Customizes the background color of the text field or textarea when enabled.
 /// @param {Color} $color - The desired background color.
@@ -233,7 +253,7 @@
 
 ///
 /// Customizes the background color of the text field or textarea when disabled.
-/// @param {Color} $color - The desired label text color.
+/// @param {Color} $color - The desired background color.
 ///
 @mixin mdc-text-field-disabled-fill-color($color) {
   @include mdc-text-field-if-disabled_ {
@@ -358,6 +378,7 @@
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color);
+  @include mdc-text-field-placeholder-color_($mdc-text-field-disabled-placeholder-ink-color);
   @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
   @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
   @include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
@@ -816,6 +837,18 @@
   }
 }
 
+@mixin mdc-text-field-placeholder-color_($color) {
+  .mdc-text-field__input::placeholder {
+    @include mdc-theme-prop(color, $color);
+  }
+
+  // Override the placeholder styles in IE with important rule to improve specificity.
+  // stylelint-disable-next-line selector-no-vendor-prefix
+  .mdc-text-field__input:-ms-input-placeholder {
+    @include mdc-theme-prop(color, $color, $important: true);
+  }
+}
+
 @mixin mdc-text-field-fill-color_($color) {
   @include mdc-theme-prop(background-color, $color);
 }
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index 911fc977aac..539d1f4b7d3 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -49,9 +49,10 @@ $mdc-text-field-icon-color: rgba(mdc-theme-prop-value(on-surface), .54) !default
 $mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value(primary), .87) !default;
 $mdc-text-field-placeholder-ink-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
 
-$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
-$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
-$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
+$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
+$mdc-text-field-disabled-placeholder-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
+$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;
 
 $mdc-text-field-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%) !default;
 $mdc-text-field-disabled-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%) !default;
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index dbd5e961500..fa78be090d0 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -56,6 +56,7 @@
   // Colors
   @include mdc-text-field-label-color($mdc-text-field-label);
   @include mdc-text-field-ink-color($mdc-text-field-ink-color);
+  @include mdc-text-field-placeholder-color($mdc-text-field-placeholder-ink-color);
   @include mdc-text-field-caret-color(primary);
   @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
   @include mdc-text-field-hover-bottom-line-color($mdc-text-field-bottom-line-hover);
@@ -98,13 +99,6 @@
   &::placeholder {
     transition: mdc-text-field-transition(opacity, $duration: 67ms);
     opacity: 0;
-    color: $mdc-text-field-placeholder-ink-color;
-  }
-
-  // Override the placeholder styles in IE with important rule to improve specificity.
-  // stylelint-disable-next-line selector-no-vendor-prefix
-  &:-ms-input-placeholder {
-    color: $mdc-text-field-placeholder-ink-color !important;
   }
 
   // Always show placeholder for text fields that has no label and show only on focused state when label is present.
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index ecfe40ccdca..4c6b9bd8d55 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -1272,11 +1272,11 @@
     }
   },
   "spec/mdc-textfield/classes/baseline-placeholder.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html.windows_chrome_77.png",
-      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html.windows_firefox_69.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/baseline-placeholder.html.windows_ie_11.png"
+      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html.windows_chrome_77.png",
+      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/baseline-placeholder.html.windows_ie_11.png"
     }
   },
   "spec/mdc-textfield/classes/baseline-trailing-icon.html": {
@@ -1367,6 +1367,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-textfield/classes/disabled-placeholder.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html.windows_chrome_77.png",
+      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/classes/disabled-placeholder.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-textfield/classes/disabled-trailing-icon.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/11/01/18_25_15_143/spec/mdc-textfield/classes/disabled-trailing-icon.html?utm_source=golden_json",
     "screenshots": {
@@ -1704,19 +1712,19 @@
     }
   },
   "spec/mdc-textfield/mixins/disabled-1.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html.windows_chrome_77.png",
-      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html.windows_firefox_69.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-1.html.windows_ie_11.png"
+      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html.windows_chrome_77.png",
+      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/12/18/18_58_50_809/spec/mdc-textfield/mixins/disabled-1.html.windows_ie_11.png"
     }
   },
   "spec/mdc-textfield/mixins/disabled-2.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html.windows_chrome_77.png",
-      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html.windows_firefox_69.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/06/23_03_42_080/spec/mdc-textfield/mixins/disabled-2.html.windows_ie_11.png"
+      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html.windows_chrome_77.png",
+      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/lizmitchell/2019/12/18/21_25_01_625/spec/mdc-textfield/mixins/disabled-2.html.windows_ie_11.png"
     }
   },
   "spec/mdc-textfield/mixins/outline-shape-radius.html": {
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html b/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
index e4ad1e747cd..32800b558b2 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
@@ -45,42 +45,21 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
-            <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text">
-            <label class="mdc-floating-label" for="filled-text-field">Label</label>
+          <div class="mdc-text-field mdc-text-field--no-label">
+            <!-- htmllint-disable -->
+            <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text">
+            <!-- htmllint-enable -->
             <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 test-text-field__input" placeholder="Placeholder text">
+          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
+            <!-- htmllint-disable -->
+            <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text">
+            <!-- htmllint-enable -->
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
-              <div class="mdc-notched-outline__notch">
-                <label for="outlined-text-field" class="mdc-floating-label">Label</label>
-              </div>
-              <div class="mdc-notched-outline__trailing"></div>
-            </div>
-          </div>
-        </div>
-
-        <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
-            <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text" value="Filled value">
-            <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">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-with-value" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text" value="Filled value">
-            <div class="mdc-notched-outline mdc-notched-outline--notched">
-              <div class="mdc-notched-outline__leading"></div>
-              <div class="mdc-notched-outline__notch">
-                <label for="outlined-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
-              </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-placeholder.html b/test/screenshot/spec/mdc-textfield/classes/disabled-placeholder.html
new file mode 100644
index 00000000000..806fc7a0921
--- /dev/null
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-placeholder.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2019 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Disabled Text Field Element with Placeholder - 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/mdc.typography.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-textfield/fixture.css">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
+  </head>
+
+  <body class="test-container">
+    <main class="test-viewport test-viewport--mobile">
+      <div class="test-layout">
+
+        <div class="test-cell test-cell--textfield">
+          <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--disabled">
+            <!-- htmllint-disable -->
+            <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text" disabled>
+            <!-- htmllint-enable -->
+            <div class="mdc-line-ripple"></div>
+          </div>
+        </div>
+
+        <div class="test-cell test-cell--textfield">
+          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--disabled">
+            <!-- htmllint-disable -->
+            <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text" disabled>
+            <!-- htmllint-enable -->
+            <div class="mdc-notched-outline">
+              <div class="mdc-notched-outline__leading"></div>
+              <div class="mdc-notched-outline__trailing"></div>
+            </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.scss b/test/screenshot/spec/mdc-textfield/fixture.scss
index 3345837d600..59c2cfe5565 100644
--- a/test/screenshot/spec/mdc-textfield/fixture.scss
+++ b/test/screenshot/spec/mdc-textfield/fixture.scss
@@ -93,6 +93,10 @@ $custom-disabled-ink-color: rgba(purple, .6);
   @include mdc-text-field-disabled-ink-color($custom-disabled-ink-color);
 }
 
+.custom-disabled-colors-text-field--placeholder-color {
+  @include mdc-text-field-disabled-placeholder-color($custom-disabled-ink-color);
+}
+
 .custom-disabled-colors-text-field--label-color {
   @include mdc-text-field-disabled-label-color($custom-disabled-ink-color);
 }
diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
index 4458117cbc6..874f4ab420a 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
@@ -185,6 +185,31 @@
 
       </div>
 
+      <div class="test-layout">
+
+        <div class="test-cell test-cell--light test-cell--textfield-small">
+          <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--disabled custom-disabled-colors-text-field--placeholder-color">
+            <!-- htmllint-disable -->
+            <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" disabled placeholder="Placeholder text">
+            <!-- htmllint-enable -->
+            <div class="mdc-line-ripple"></div>
+          </div>
+        </div>
+
+        <div class="test-cell test-cell--light test-cell--textfield-small">
+          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--disabled custom-disabled-colors-text-field--placeholder-color">
+            <!-- htmllint-disable -->
+            <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" disabled placeholder="Placeholder text">
+            <!-- htmllint-enable -->
+            <div class="mdc-notched-outline">
+              <div class="mdc-notched-outline__leading"></div>
+              <div class="mdc-notched-outline__trailing"></div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textarea">