Update Strong Password appearance
authordbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Jun 2018 21:29:36 +0000 (21:29 +0000)
committerdbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 4 Jun 2018 21:29:36 +0000 (21:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=186239
<rdar://problem/38183795>

Reviewed by Brent Fulgham.

Source/WebCore:

Fix up the gradient mask to start half-way through the visible text and size it to the
width of the visible text. Also change the color of the Strong Password label to 80% black.

We achieve sizing of the gradient to the width of the visible text by changing the CSS display
of the inner text element to be an inline-block and specifying "max-width: 100%" so that
its maximum width is less than or equal to the width of its containing block. Additionally,
only apply strong password-specific inner text element styles when the field is not disabled
or read-only and has a strong password appearance. Otherwise these styles, specifically the
display type, will adversely effect rendering of the text when the field is disabled or readonly.

* css/html.css:
(input::-webkit-strong-password-auto-fill-button):
* html/HTMLInputElement.cpp:
(WebCore::autoFillStrongPasswordMaskImage):
(WebCore::HTMLInputElement::createInnerTextStyle):

LayoutTests:

Update expected results as necessary for the change in appearance.

* platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt:
* platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:
* platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt:
* platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@232480 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt
LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/html.css
Source/WebCore/html/HTMLInputElement.cpp

index 109d0e7..0c63ccd 100644 (file)
@@ -1,3 +1,18 @@
+2018-06-04  Daniel Bates  <dabates@apple.com>
+
+        Update Strong Password appearance
+        https://bugs.webkit.org/show_bug.cgi?id=186239
+        <rdar://problem/38183795>
+
+        Reviewed by Brent Fulgham.
+
+        Update expected results as necessary for the change in appearance.
+
+        * platform/ios/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt:
+        * platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:
+        * platform/mac/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button-expected.txt:
+        * platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt:
+
 2018-06-04  Per Arne Vollan  <pvollan@apple.com>
 
         Rebaseline editing/style/apply-style-iframe-crash.html on Windows.
index 7bbe0b5..4d2278f 100644 (file)
@@ -69,8 +69,8 @@ layer at (178,78) size 140x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 140x12 [color=#00000099]
     RenderText {#text} at (0,0) size 284x12
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
-layer at (337,78) size 300x12
-  RenderBlock {DIV} at (0,0) size 300x12 [color=#00000099]
+layer at (337,78) size 284x12 backgroundClip at (337,78) size 283x12 clip at (337,78) size 283x12
+  RenderBlock {DIV} at (0,0) size 284x12 [color=#00000099]
     RenderText {#text} at (0,0) size 284x12
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
 layer at (654,78) size 20x12 scrollWidth 284
@@ -85,5 +85,3 @@ layer at (176,143) size 20x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 20x12 [color=#00000099]
     RenderText {#text} at (0,0) size 284x12
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
-layer at (215,143) size 140x12
-  RenderBlock {DIV} at (0,0) size 140x12 [color=#00000099]
index 00ca2f8..12268fe 100644 (file)
@@ -27,49 +27,49 @@ layer at (0,0) size 800x216
         RenderTextControl {INPUT} at (200,93) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
 layer at (17,70) size 140x12 scrollHeight 13
   RenderFlexibleBox {DIV} at (6,3) size 141x13
-    RenderBlock {DIV} at (45,-1) size 95x14
+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x12 clip at (17,70) size 45x12
   RenderBlock {DIV} at (0,0) size 46x12
 layer at (178,70) size 140x12 scrollHeight 13
   RenderFlexibleBox {DIV} at (6,3) size 141x13
-    RenderBlock {DIV} at (45,-1) size 95x14
+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x12 clip at (178,70) size 45x12
   RenderBlock {DIV} at (0,0) size 46x12
 layer at (337,70) size 300x12 scrollHeight 13
   RenderFlexibleBox {DIV} at (6,3) size 301x13
-    RenderBlock {DIV} at (205,-1) size 95x14
+    RenderBlock {DIV} at (205,-1) size 95x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x12 clip at (337,70) size 205x12
   RenderBlock {DIV} at (0,0) size 206x12
 layer at (654,57) size 20x12 scrollWidth 94 scrollHeight 26
   RenderFlexibleBox {DIV} at (6,3) size 21x13
-    RenderBlock {DIV} at (0,12) size 20x14
+    RenderBlock {DIV} at (0,12) size 20x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (654,57) size 20x12
   RenderBlock {DIV} at (0,0) size 20x12
 layer at (17,148) size 140x12 scrollHeight 13
   RenderFlexibleBox {DIV} at (6,47) size 141x13
-    RenderBlock {DIV} at (45,-1) size 95x14
+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (17,148) size 46x12 backgroundClip at (17,148) size 45x12 clip at (17,148) size 45x12
   RenderBlock {DIV} at (0,0) size 46x12
 layer at (176,135) size 20x12 scrollWidth 94 scrollHeight 26
   RenderFlexibleBox {DIV} at (6,47) size 21x13
-    RenderBlock {DIV} at (0,12) size 20x14
+    RenderBlock {DIV} at (0,12) size 20x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (176,135) size 20x12
   RenderBlock {DIV} at (0,0) size 20x12
 layer at (215,148) size 140x12 scrollHeight 13
   RenderFlexibleBox {DIV} at (6,3) size 141x13
-    RenderBlock {DIV} at (45,-1) size 95x14
+    RenderBlock {DIV} at (45,-1) size 95x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x14
         text run at (6,0) width 89: "Strong Password"
 layer at (215,148) size 46x12 backgroundClip at (215,148) size 45x12 clip at (215,148) size 45x12
@@ -98,5 +98,3 @@ layer at (176,135) size 20x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 20x12 [color=#00000099]
     RenderText {#text} at (0,0) size 284x12
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
-layer at (215,148) size 46x12 backgroundClip at (215,148) size 45x12 clip at (215,148) size 45x12
-  RenderBlock {DIV} at (0,0) size 46x12 [color=#00000099]
index d2bb0d1..6337d2e 100644 (file)
@@ -69,8 +69,8 @@ layer at (179,73) size 152x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 152x13 [color=#00000099]
     RenderText {#text} at (0,0) size 284x13
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
-layer at (343,73) size 300x13
-  RenderBlock {DIV} at (0,0) size 300x13 [color=#00000099]
+layer at (343,73) size 284x13
+  RenderBlock {DIV} at (0,0) size 284x13 [color=#00000099]
     RenderText {#text} at (0,0) size 284x13
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
 layer at (653,73) size 20x13 scrollWidth 284
@@ -85,5 +85,3 @@ layer at (177,138) size 20x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 20x13 [color=#00000099]
     RenderText {#text} at (0,0) size 284x13
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
-layer at (209,137) size 152x13
-  RenderBlock {DIV} at (0,0) size 152x13 [color=#00000099]
index 3983771..413bbd5 100644 (file)
@@ -27,49 +27,49 @@ layer at (0,0) size 800x213
         RenderTextControl {INPUT} at (198,92) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
 layer at (13,68) size 152x13
   RenderFlexibleBox {DIV} at (3,3) size 152x13
-    RenderBlock {DIV} at (57,0) size 95x13
+    RenderBlock {DIV} at (57,0) size 95x13 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (13,68) size 58x13
   RenderBlock {DIV} at (0,0) size 58x13
 layer at (179,68) size 152x13
   RenderFlexibleBox {DIV} at (3,3) size 152x13
-    RenderBlock {DIV} at (57,0) size 95x13
+    RenderBlock {DIV} at (57,0) size 95x13 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (179,68) size 58x13
   RenderBlock {DIV} at (0,0) size 58x13
 layer at (343,68) size 300x13
   RenderFlexibleBox {DIV} at (3,3) size 300x13
-    RenderBlock {DIV} at (205,0) size 95x13
+    RenderBlock {DIV} at (205,0) size 95x13 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (343,68) size 206x13
   RenderBlock {DIV} at (0,0) size 206x13
 layer at (653,55) size 20x13 scrollWidth 94 scrollHeight 26
   RenderFlexibleBox {DIV} at (3,3) size 20x13
-    RenderBlock {DIV} at (0,13) size 20x13
+    RenderBlock {DIV} at (0,13) size 20x13 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (653,55) size 20x13
   RenderBlock {DIV} at (0,0) size 20x13
 layer at (13,102) size 152x100
   RenderFlexibleBox {DIV} at (3,3) size 152x100
-    RenderBlock {DIV} at (57,43) size 95x14
+    RenderBlock {DIV} at (57,43) size 95x14 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (13,146) size 58x13
   RenderBlock {DIV} at (0,43) size 58x14
 layer at (177,133) size 20x13 scrollWidth 94 scrollHeight 26
   RenderFlexibleBox {DIV} at (3,46) size 20x14
-    RenderBlock {DIV} at (0,13) size 20x13
+    RenderBlock {DIV} at (0,13) size 20x13 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (177,133) size 20x13
   RenderBlock {DIV} at (0,0) size 20x13
 layer at (209,145) size 152x13
   RenderFlexibleBox {DIV} at (3,3) size 152x13
-    RenderBlock {DIV} at (57,0) size 95x13
+    RenderBlock {DIV} at (57,0) size 95x13 [color=#000000CC]
       RenderText {#text} at (6,0) size 89x13
         text run at (6,0) width 89: "Strong Password"
 layer at (209,145) size 58x13
@@ -98,5 +98,3 @@ layer at (177,133) size 20x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 20x13 [color=#00000099]
     RenderText {#text} at (0,0) size 284x13
       text run at (0,0) width 284: "A quick brown fox jumped over the lazy dog."
-layer at (209,145) size 58x13
-  RenderBlock {DIV} at (0,0) size 58x13 [color=#00000099]
index 1283490..2ebe0b9 100644 (file)
@@ -1,3 +1,27 @@
+2018-06-04  Daniel Bates  <dabates@apple.com>
+
+        Update Strong Password appearance
+        https://bugs.webkit.org/show_bug.cgi?id=186239
+        <rdar://problem/38183795>
+
+        Reviewed by Brent Fulgham.
+
+        Fix up the gradient mask to start half-way through the visible text and size it to the
+        width of the visible text. Also change the color of the Strong Password label to 80% black.
+
+        We achieve sizing of the gradient to the width of the visible text by changing the CSS display
+        of the inner text element to be an inline-block and specifying "max-width: 100%" so that
+        its maximum width is less than or equal to the width of its containing block. Additionally,
+        only apply strong password-specific inner text element styles when the field is not disabled
+        or read-only and has a strong password appearance. Otherwise these styles, specifically the
+        display type, will adversely effect rendering of the text when the field is disabled or readonly.
+
+        * css/html.css:
+        (input::-webkit-strong-password-auto-fill-button):
+        * html/HTMLInputElement.cpp:
+        (WebCore::autoFillStrongPasswordMaskImage):
+        (WebCore::HTMLInputElement::createInnerTextStyle):
+
 2018-06-04  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         [WebKit on watchOS] Remove all uses of the EXTRA_ZOOM_MODE compiler flag
index be28566..3d4607a 100644 (file)
@@ -549,7 +549,7 @@ input::-webkit-strong-password-auto-fill-button {
     -webkit-user-select: none !important;
     pointer-events: none !important;
     text-align: right !important;
-    color: black !important;
+    color: rgba(0, 0, 0, 0.8) !important;
     padding-left: 6px !important;
     white-space: nowrap !important;
 }
index d220734..8e584d9 100644 (file)
@@ -2023,11 +2023,11 @@ static Ref<CSSLinearGradientValue> autoFillStrongPasswordMaskImage()
 {
     CSSGradientColorStop firstStop;
     firstStop.m_color = CSSValuePool::singleton().createColorValue(Color::black);
-    firstStop.m_position = CSSValuePool::singleton().createValue(3, CSSPrimitiveValue::UnitType::CSS_EMS);
+    firstStop.m_position = CSSValuePool::singleton().createValue(50, CSSPrimitiveValue::UnitType::CSS_PERCENTAGE);
 
     CSSGradientColorStop secondStop;
     secondStop.m_color = CSSValuePool::singleton().createColorValue(Color::transparent);
-    secondStop.m_position = CSSValuePool::singleton().createValue(7, CSSPrimitiveValue::UnitType::CSS_EMS);
+    secondStop.m_position = CSSValuePool::singleton().createValue(100, CSSPrimitiveValue::UnitType::CSS_PERCENTAGE);
 
     auto gradient = CSSLinearGradientValue::create(CSSGradientRepeat::NonRepeating, CSSGradientType::CSSLinearGradient);
     gradient->setAngle(CSSValuePool::singleton().createValue(90, CSSPrimitiveValue::UnitType::CSS_DEG));
@@ -2050,7 +2050,9 @@ RenderStyle HTMLInputElement::createInnerTextStyle(const RenderStyle& style)
 
     textBlockStyle.setDisplay(DisplayType::Block);
 
-    if (hasAutoFillStrongPasswordButton()) {
+    if (hasAutoFillStrongPasswordButton() && !isDisabledOrReadOnly()) {
+        textBlockStyle.setDisplay(DisplayType::InlineBlock);
+        textBlockStyle.setMaxWidth(Length { 100, Percent });
         textBlockStyle.setColor({ 0.0f, 0.0f, 0.0f, 0.6f });
         textBlockStyle.setTextOverflow(TextOverflow::Clip);
         textBlockStyle.setMaskImage(styleResolver().styleImage(autoFillStrongPasswordMaskImage()));