Use opacity of 0.54 for placeholder text in input fields

Prior to this change, placeholder text in input fields was set to grey (#757575), but this did not apply to emojis. Now, we use an opacity value to control the placeholder appearance. 0.54 is used because in a white input field, regular placeholder text still appears as #757575. Bug: 932026 Change-Id: Iba02fe3eb31484255332f2f34a67f97b97f50cb8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1754086 Commit-Queue: Jeffrey C <jeffreyca16@gmail.com> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Alice Boxhall <aboxhall@chromium.org> Cr-Commit-Position: refs/heads/master@{#691770}

Use opacity of 0.54 for placeholder text in input fields
Prior to this change, placeholder text in input fields was set to grey (#757575), but this did not apply to emojis. Now, we use an opacity value to control the placeholder appearance. 0.54 is used because in a white input field, regular placeholder text still appears as #757575. Bug: 932026 Change-Id: Iba02fe3eb31484255332f2f34a67f97b97f50cb8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1754086 Commit-Queue: Jeffrey C <jeffreyca16@gmail.com> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Alice Boxhall <aboxhall@chromium.org> Cr-Commit-Position: refs/heads/master@{#691770}
30d3999b · JeffreyCA · Commit Bot · 1f62c926 · 30d3999b · 30d3999b
Commit 30d3999b authored Aug 29, 2019 by JeffreyCA Committed by Commit Bot Aug 29, 2019
23 changed files
--- a/third_party/blink/renderer/core/html/resources/html.css
+++ b/third_party/blink/renderer/core/html/resources/html.css
@@ -511,7 +511,7 @@ textarea {

 ::-webkit-input-placeholder {
    -webkit-text-security: none;
-    color: #757575;
+    color: rgba(0, 0, 0, 0.54);
    pointer-events: none !important;
 }


--- a/third_party/blink/web_tests/fast/forms/password-placeholder-text-security-expected.html
+++ b/third_party/blink/web_tests/fast/forms/password-placeholder-text-security-expected.html
@@ -2,7 +2,7 @@
 <head>
 <style>
 #pass1, #pass3 {
-    color: #757575;
+    color: rgba(0, 0, 0, 0.54);
 }
 </style>
 </head>

--- a/third_party/blink/web_tests/fast/forms/text/input-placeholder-text-indent-expected.html
+++ b/third_party/blink/web_tests/fast/forms/text/input-placeholder-text-indent-expected.html
 <style>
-input { color: #757575; font-size: 30px; width: 500px; }
+input { color: rgba(0, 0, 0, 0.54); font-size: 30px; width: 500px; }
 input.a { text-indent: 0px; }
 input.b { text-indent: 10px; }
 input.c { text-indent: 200px; }

--- a/third_party/blink/web_tests/fast/forms/text/placeholder-containing-emoji-expected.html
+++ b/third_party/blink/web_tests/fast/forms/text/placeholder-containing-emoji-expected.html
+<!DOCTYPE html>
+<style>
+input {
+    color: rgba(0, 0, 0, 0.54);
+    line-height: 15px;
+}
+</style>
+This tests that emojis in placeholders appear faded along with the text.
+<div>
+<input value="default 😊">
+<input disabled value="default disabled 😊">
+</div>
--- a/third_party/blink/web_tests/fast/forms/text/placeholder-containing-emoji.html
+++ b/third_party/blink/web_tests/fast/forms/text/placeholder-containing-emoji.html
+<!DOCTYPE html>
+<style>
+input {
+    line-height: 15px;
+}
+</style>
+This tests that emojis in placeholders appear faded along with the text.
+<div>
+<input placeholder="default 😊">
+<input disabled placeholder="default disabled 😊">
+</div>
--- a/third_party/blink/web_tests/fast/forms/text/placeholder-pseudo-style-expected.html
+++ b/third_party/blink/web_tests/fast/forms/text/placeholder-pseudo-style-expected.html
 <!DOCTYPE html>
 <style>
 input {
-    color: #757575;
+    color: rgba(0, 0, 0, 0.54);
 }

 input.red {
@@ -31,7 +31,7 @@ This tests that you can set the placeholder text color.
 <div>
 Default style:
 <input value="default">
-<input value="default disabled">
+<input disabled value="default disabled">
 </div>

 <div>

--- a/third_party/blink/web_tests/fast/forms/text/placeholder-pseudo-style.html
+++ b/third_party/blink/web_tests/fast/forms/text/placeholder-pseudo-style.html
@@ -27,7 +27,7 @@ This tests that you can set the placeholder text color.
 <div>
 Default style:
 <input placeholder="default">
-<input placeholder="default disabled">
+<input disabled placeholder="default disabled">
 </div>

 <div>

--- a/third_party/blink/web_tests/fast/forms/text/placeholder-with-positioned-element-expected.html
+++ b/third_party/blink/web_tests/fast/forms/text/placeholder-with-positioned-element-expected.html
@@ -2,4 +2,4 @@
 <div>aaa</div>
 <div>bbb</div>
 </div>
-<input style="color: #757575;" value="placeholder">
+<input style="color: rgba(0, 0, 0, 0.54);" value="placeholder">
--- a/third_party/blink/web_tests/fast/forms/textarea/textarea-placeholder-pseudo-style-expected.html
+++ b/third_party/blink/web_tests/fast/forms/textarea/textarea-placeholder-pseudo-style-expected.html
 <!DOCTYPE html>
 <style>
 textarea {
-    color: #757575;
+    color: rgba(0, 0, 0, 0.54);
 }

 .red {

--- a/third_party/blink/web_tests/fast/forms/textarea/textarea-placeholder-wrapping-expected.html
+++ b/third_party/blink/web_tests/fast/forms/textarea/textarea-placeholder-wrapping-expected.html
 <textarea rows=8>
 A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.
 </textarea>
-<textarea rows=8 style="color: #757575;">
+<textarea rows=8 style="color: rgba(0, 0, 0, 0.54);">
 A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.
 </textarea>
--- a/third_party/blink/web_tests/platform/linux/fast/css/text-overflow-input-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/css/text-overflow-input-expected.png
--- a/third_party/blink/web_tests/platform/linux/fast/forms/placeholder-position-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/forms/placeholder-position-expected.png
--- a/third_party/blink/web_tests/platform/linux/fast/forms/text/input-placeholder-visibility-1-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/forms/text/input-placeholder-visibility-1-expected.png
--- a/third_party/blink/web_tests/platform/linux/fast/forms/text/input-placeholder-visibility-3-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/forms/text/input-placeholder-visibility-3-expected.png
--- a/third_party/blink/web_tests/platform/linux/fast/forms/textarea/placeholder-appearance-textarea-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/forms/textarea/placeholder-appearance-textarea-expected.png
--- a/third_party/blink/web_tests/platform/linux/fast/forms/textarea/textarea-placeholder-visibility-1-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/forms/textarea/textarea-placeholder-visibility-1-expected.png
--- a/third_party/blink/web_tests/platform/linux/fast/forms/textarea/textarea-placeholder-visibility-2-expected.png
+++ b/third_party/blink/web_tests/platform/linux/fast/forms/textarea/textarea-placeholder-visibility-2-expected.png
--- a/third_party/blink/web_tests/platform/mac-mac10.10/fast/forms/placeholder-position-expected.png
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/fast/forms/placeholder-position-expected.png
--- a/third_party/blink/web_tests/platform/mac-mac10.10/fast/forms/search/search-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/mac-mac10.10/fast/forms/search/search-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/mac-mac10.11/fast/forms/search/search-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/mac-mac10.11/fast/forms/search/search-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/mac-mac10.12/fast/forms/search/search-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/mac-mac10.12/fast/forms/search/search-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/mac/fast/forms/search/search-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/mac/fast/forms/search/search-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/win/fast/forms/placeholder-position-expected.png
+++ b/third_party/blink/web_tests/platform/win/fast/forms/placeholder-position-expected.png