Hide Strong Password label when text field is too narrow
authordbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 21 Apr 2018 01:36:20 +0000 (01:36 +0000)
committerdbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 21 Apr 2018 01:36:20 +0000 (01:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=184785
<rdar://problem/38183939>

Reviewed by Zalan Bujtas.

Source/WebCore:

We accomplish this illusion by allowing the text field's decorations to wrap, specifying flex
shrink factors, a flex basis and hiding overflow. Hiding overflow is accomplished by a
combination of setting "overflow: hidden", "text-overflow: clip", and patching RenderTextControlSingleLine::layout()
to ensure that the height of the container element is equal to the intrinsic height of the
inner elements. Because the container is a flex box and we want to vertically center its
contents we also need to fix up the y-position of the container element as it may have flexed
as a result of forcing its height to match the intrinsic height of the inner elements.

* css/html.css:
(input::-webkit-strong-password-auto-fill-button): Specify a flex-shrink factor and prevent
wrapping of the "Strong Password" text when flexed.
* html/shadow/TextControlInnerElements.cpp:
(WebCore::TextControlInnerContainer::TextControlInnerContainer): Register for a custom style
resolution callback so that we can style the container if it is a Strong Password or Strong
Confirmation Password text field. Ideally we could accomplish this effect with a user agent-
specific pseudo class together with a selector definition in the user agent style sheet,
html.css. Unfortunately the style resolver does not seem to apply pseudo classes to
shadow DOM pseudo elements (why?). Therefore we use a custom style resolution callback to
achieve the same effect.
(WebCore::isStrongPasswordTextField): Returns whether the specified DOM element is a Strong
Password text field.
(WebCore::TextControlInnerContainer::resolveCustomStyle): Conditionally apply CSS properties
"flex-wrap: wrap" and overflow: hidden" if the shadow host of this container is a Strong
Password text field.
(WebCore::TextControlInnerElement::resolveCustomStyle): Conditionally style the inner text
if the shadow host of this container is a Strong Password text field. We need to apply these
styles here as opposed to in html.css for the same reason we need to apply the styles to
the container in a custom style resolution callback. See the comments for TextControlInnerContainer()
above for more details
* html/shadow/TextControlInnerElements.h:
* rendering/RenderTextControlSingleLine.cpp:
(WebCore::resetOverriddenHeight): Added. Incorporates the logic from setNeedsLayoutOnAncestors().
(WebCore::RenderTextControlSingleLine::layout): Override the height of the container element to
match the height of the inner elements when this text field is a Strong Password field. We cache
the container's logical top before adjusting its height so that we can restore it after performing
a second layout of this renderer. This is needed because we vertically center the elements in this
renderer and adjusting the height of the container may cause it to flex and re-position along its
cross axis when the container's height is taller than the inner element's height (e.g. the "Strong
Password" label wraps to the next line). This re-positioning causes a noticeable jitter when
transitioning from a field that has a visible "Strong Password" label to one that does not. Caching
and restoring the logical top of the container element avoids this jitter.
(WebCore::setNeedsLayoutOnAncestors): Deleted. Moved its implementation into resetOverriddenHeight().

LayoutTests:

Update existing tests to include narrow text fields.

* fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button.html:
* fast/forms/auto-fill-button/input-strong-password-auto-fill-button.html:
* 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@230874 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button.html
LayoutTests/fast/forms/auto-fill-button/input-strong-password-auto-fill-button.html
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/shadow/TextControlInnerElements.cpp
Source/WebCore/html/shadow/TextControlInnerElements.h
Source/WebCore/rendering/RenderTextControlSingleLine.cpp

index 6c7c324..fad2d42 100644 (file)
@@ -1,3 +1,18 @@
+2018-04-20  Daniel Bates  <dabates@apple.com>
+
+        Hide Strong Password label when text field is too narrow
+        https://bugs.webkit.org/show_bug.cgi?id=184785
+        <rdar://problem/38183939>
+
+        Reviewed by Zalan Bujtas.
+
+        Update existing tests to include narrow text fields.
+
+        * fast/forms/auto-fill-button/input-strong-confirmation-password-auto-fill-button.html:
+        * fast/forms/auto-fill-button/input-strong-password-auto-fill-button.html:
+        * 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-04-20  Dean Jackson  <dino@apple.com>
 
         Render a badge on system preview images
index 15941aa..d63dbea 100644 (file)
@@ -6,6 +6,9 @@
     <input type="text" value="A quick brown fox jumped over the lazy dog.">
     <input type="password" value="A quick brown fox jumped over the lazy dog.">
     <input type="password" value="A quick brown fox jumped over the lazy dog." style="width:300px">
+    <input type="password" value="A quick brown fox jumped over the lazy dog." style="width:20px">
+    <input type="password" value="A quick brown fox jumped over the lazy dog." style="height:100px">
+    <input type="password" value="A quick brown fox jumped over the lazy dog." style="width:20px; height:100px">
 </div>
 <script>
 if (window.internals) {
index 6c1f198..8d19304 100644 (file)
@@ -6,6 +6,9 @@
     <input type="text" value="A quick brown fox jumped over the lazy dog.">
     <input type="password" value="A quick brown fox jumped over the lazy dog.">
     <input type="password" value="A quick brown fox jumped over the lazy dog." style="width:300px">
+    <input type="password" value="A quick brown fox jumped over the lazy dog." style="width:20px">
+    <input type="password" value="A quick brown fox jumped over the lazy dog." style="height:100px">
+    <input type="password" value="A quick brown fox jumped over the lazy dog." style="width:20px; height:100px">
 </div>
 <script>
 if (window.internals) {
index f21ec94..7bbe0b5 100644 (file)
@@ -1,35 +1,66 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x128
-  RenderBlock {HTML} at (0,0) size 800x128
-    RenderBody {BODY} at (8,16) size 784x104
+layer at (0,0) size 800x211
+  RenderBlock {HTML} at (0,0) size 800x211
+    RenderBody {BODY} at (8,16) size 784x187
       RenderBlock {P} at (0,0) size 784x40
         RenderText {#text} at (0,0) size 766x39
           text run at (0,0) width 766: "This tests that the Strong Confirmation Password AutoFill button renders in an auto-filled input. It can only be tested in"
           text run at (0,20) width 79: "the test tool."
-      RenderBlock {DIV} at (0,56) size 784x48
+      RenderBlock {DIV} at (0,56) size 784x131
         RenderTextControl {INPUT} at (2,3) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 140x12
-            RenderBlock {DIV} at (140,6) size 0x0
         RenderText {#text} at (157,0) size 4x19
           text run at (157,0) width 4: " "
         RenderTextControl {INPUT} at (163,3) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 140x12
-            RenderBlock {DIV} at (140,6) size 0x0
         RenderText {#text} at (318,0) size 4x19
           text run at (318,0) width 4: " "
         RenderTextControl {INPUT} at (322,3) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,3) size 301x13
-            RenderBlock {DIV} at (0,0) size 300x12
-            RenderBlock {DIV} at (300,6) size 0x0
         RenderText {#text} at (635,0) size 4x19
           text run at (635,0) width 4: " "
-        RenderTextControl {INPUT} at (2,27) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 140x12
-            RenderBlock {DIV} at (140,6) size 0x0
+        RenderTextControl {INPUT} at (639,3) size 33x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (0,0) size 0x0
+        RenderTextControl {INPUT} at (2,24) size 153x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (157,65) size 4x19
+          text run at (157,65) width 4: " "
+        RenderTextControl {INPUT} at (161,24) size 33x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (194,65) size 4x19
+          text run at (194,65) width 4: " "
+        RenderTextControl {INPUT} at (200,68) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+layer at (17,78) size 140x12
+  RenderFlexibleBox {DIV} at (6,3) size 141x13
+    RenderBlock {DIV} at (140,6) size 0x0
+layer at (17,78) size 140x12
+  RenderBlock {DIV} at (0,0) size 140x12
+layer at (178,78) size 140x12
+  RenderFlexibleBox {DIV} at (6,3) size 141x13
+    RenderBlock {DIV} at (140,6) size 0x0
+layer at (178,78) size 140x12
+  RenderBlock {DIV} at (0,0) size 140x12
+layer at (337,78) size 300x12
+  RenderFlexibleBox {DIV} at (6,3) size 301x13
+    RenderBlock {DIV} at (300,6) size 0x0
+layer at (337,78) size 300x12
+  RenderBlock {DIV} at (0,0) size 300x12
+layer at (654,78) size 20x12
+  RenderFlexibleBox {DIV} at (6,3) size 21x13
+    RenderBlock {DIV} at (20,6) size 0x0
+layer at (654,78) size 20x12
+  RenderBlock {DIV} at (0,0) size 20x12
+layer at (17,99) size 140x100
+  RenderFlexibleBox {DIV} at (6,3) size 141x101
+    RenderBlock {DIV} at (140,50) size 0x0
+layer at (17,143) size 140x12
+  RenderBlock {DIV} at (0,44) size 140x12
+layer at (176,99) size 20x100
+  RenderFlexibleBox {DIV} at (6,3) size 21x101
+    RenderBlock {DIV} at (20,50) size 0x0
+layer at (176,143) size 20x12
+  RenderBlock {DIV} at (0,44) size 20x12
+layer at (215,143) size 140x12
+  RenderFlexibleBox {DIV} at (6,3) size 141x13
+    RenderBlock {DIV} at (140,6) size 0x0
+layer at (215,143) size 140x12
+  RenderBlock {DIV} at (0,0) size 140x12
 layer at (17,78) size 140x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 140x12 [color=#00000099]
     RenderText {#text} at (0,0) size 284x12
@@ -42,5 +73,17 @@ layer at (337,78) size 300x12
   RenderBlock {DIV} at (0,0) size 300x12 [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 (17,102) size 140x12
+layer at (654,78) 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 (17,143) 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 (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 0e8eb1c..00ca2f8 100644 (file)
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x106
-  RenderBlock {HTML} at (0,0) size 800x106
-    RenderBody {BODY} at (8,16) size 784x82
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,16) size 784x192
       RenderBlock {P} at (0,0) size 784x20
         RenderText {#text} at (0,0) size 758x19
           text run at (0,0) width 758: "This tests that the Strong Password AutoFill button renders in an auto-filled input. It can only be tested in the test tool."
-      RenderBlock {DIV} at (0,36) size 784x46
-        RenderTextControl {INPUT} at (2,2) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,2) size 141x15
-            RenderBlock {DIV} at (0,1) size 46x12
-            RenderBlock {DIV} at (45,0) size 95x14
-              RenderText {#text} at (6,0) size 89x14
-                text run at (6,0) width 89: "Strong Password"
-        RenderText {#text} at (157,0) size 4x19
-          text run at (157,0) width 4: " "
-        RenderTextControl {INPUT} at (163,2) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,2) size 141x15
-            RenderBlock {DIV} at (0,1) size 46x12
-            RenderBlock {DIV} at (45,0) size 95x14
-              RenderText {#text} at (6,0) size 89x14
-                text run at (6,0) width 89: "Strong Password"
-        RenderText {#text} at (318,0) size 4x19
-          text run at (318,0) width 4: " "
-        RenderTextControl {INPUT} at (322,2) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,2) size 301x15
-            RenderBlock {DIV} at (0,1) size 206x12
-            RenderBlock {DIV} at (205,0) size 95x14
-              RenderText {#text} at (6,0) size 89x14
-                text run at (6,0) width 89: "Strong Password"
-        RenderText {#text} at (635,0) size 4x19
-          text run at (635,0) width 4: " "
-        RenderTextControl {INPUT} at (2,25) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
-          RenderFlexibleBox {DIV} at (6,2) size 141x15
-            RenderBlock {DIV} at (0,1) size 46x12
-            RenderBlock {DIV} at (45,0) size 95x14
-              RenderText {#text} at (6,0) size 89x14
-                text run at (6,0) width 89: "Strong Password"
-layer at (17,57) size 46x12 backgroundClip at (17,57) size 45x12 clip at (17,57) size 45x12 scrollWidth 284
+      RenderBlock {DIV} at (0,36) size 784x156
+        RenderTextControl {INPUT} at (2,15) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (157,13) size 4x19
+          text run at (157,13) width 4: " "
+        RenderTextControl {INPUT} at (163,15) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (318,13) size 4x19
+          text run at (318,13) width 4: " "
+        RenderTextControl {INPUT} at (322,15) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (635,13) size 4x19
+          text run at (635,13) width 4: " "
+        RenderTextControl {INPUT} at (639,2) size 33x20 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (0,0) size 0x0
+        RenderTextControl {INPUT} at (2,49) size 153x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (157,91) size 4x19
+          text run at (157,91) width 4: " "
+        RenderTextControl {INPUT} at (161,36) size 33x108 [bgcolor=#FAFFBD] [border: (1px solid #4C4C4C)]
+        RenderText {#text} at (194,91) size 4x19
+          text run at (194,91) width 4: " "
+        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
+      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
+      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
+      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
+      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
+      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
+      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
+      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
+  RenderBlock {DIV} at (0,0) size 46x12
+layer at (17,70) size 46x12 backgroundClip at (17,70) size 45x12 clip at (17,70) size 45x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 46x12 [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 (178,57) size 46x12 backgroundClip at (178,57) size 45x12 clip at (178,57) size 45x12 scrollWidth 284
+layer at (178,70) size 46x12 backgroundClip at (178,70) size 45x12 clip at (178,70) size 45x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 46x12 [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,57) size 206x12 backgroundClip at (337,57) size 205x12 clip at (337,57) size 205x12 scrollWidth 284
+layer at (337,70) size 206x12 backgroundClip at (337,70) size 205x12 clip at (337,70) size 205x12 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 206x12 [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 (17,80) size 46x12 backgroundClip at (17,80) size 45x12 clip at (17,80) size 45x12
+layer at (654,57) 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 (17,148) size 46x12 backgroundClip at (17,148) size 45x12 clip at (17,148) size 45x12 scrollWidth 284
+  RenderBlock {DIV} at (0,0) size 46x12 [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 (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 e018733..d2bb0d1 100644 (file)
@@ -1,35 +1,66 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x122
-  RenderBlock {HTML} at (0,0) size 800x122
-    RenderBody {BODY} at (8,16) size 784x98
+layer at (0,0) size 800x205
+  RenderBlock {HTML} at (0,0) size 800x205
+    RenderBody {BODY} at (8,16) size 784x181
       RenderBlock {P} at (0,0) size 784x36
         RenderText {#text} at (0,0) size 764x36
           text run at (0,0) width 764: "This tests that the Strong Confirmation Password AutoFill button renders in an auto-filled input. It can only be tested in"
           text run at (0,18) width 79: "the test tool."
-      RenderBlock {DIV} at (0,52) size 784x46
+      RenderBlock {DIV} at (0,52) size 784x129
         RenderTextControl {INPUT} at (2,2) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 152x13
-            RenderBlock {DIV} at (0,0) size 152x13
-            RenderBlock {DIV} at (152,6) size 0x0
         RenderText {#text} at (162,1) size 4x18
           text run at (162,1) width 4: " "
         RenderTextControl {INPUT} at (168,2) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 152x13
-            RenderBlock {DIV} at (0,0) size 152x13
-            RenderBlock {DIV} at (152,6) size 0x0
         RenderText {#text} at (328,1) size 4x18
           text run at (328,1) width 4: " "
         RenderTextControl {INPUT} at (332,2) size 306x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 300x13
-            RenderBlock {DIV} at (0,0) size 300x13
-            RenderBlock {DIV} at (300,6) size 0x0
         RenderText {#text} at (638,1) size 4x18
           text run at (638,1) width 4: " "
-        RenderTextControl {INPUT} at (2,25) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 152x13
-            RenderBlock {DIV} at (0,0) size 152x13
-            RenderBlock {DIV} at (152,6) size 0x0
+        RenderTextControl {INPUT} at (642,2) size 26x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (0,0) size 0x0
+        RenderTextControl {INPUT} at (2,23) size 158x106 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (162,65) size 4x18
+          text run at (162,65) width 4: " "
+        RenderTextControl {INPUT} at (166,23) size 26x106 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (192,65) size 4x18
+          text run at (192,65) width 4: " "
+        RenderTextControl {INPUT} at (198,66) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+layer at (13,73) size 152x13
+  RenderFlexibleBox {DIV} at (3,3) size 152x13
+    RenderBlock {DIV} at (152,6) size 0x0
+layer at (13,73) size 152x13
+  RenderBlock {DIV} at (0,0) size 152x13
+layer at (179,73) size 152x13
+  RenderFlexibleBox {DIV} at (3,3) size 152x13
+    RenderBlock {DIV} at (152,6) size 0x0
+layer at (179,73) size 152x13
+  RenderBlock {DIV} at (0,0) size 152x13
+layer at (343,73) size 300x13
+  RenderFlexibleBox {DIV} at (3,3) size 300x13
+    RenderBlock {DIV} at (300,6) size 0x0
+layer at (343,73) size 300x13
+  RenderBlock {DIV} at (0,0) size 300x13
+layer at (653,73) size 20x13
+  RenderFlexibleBox {DIV} at (3,3) size 20x13
+    RenderBlock {DIV} at (20,6) size 0x0
+layer at (653,73) size 20x13
+  RenderBlock {DIV} at (0,0) size 20x13
+layer at (13,94) size 152x100
+  RenderFlexibleBox {DIV} at (3,3) size 152x100
+    RenderBlock {DIV} at (152,50) size 0x0
+layer at (13,138) size 152x13
+  RenderBlock {DIV} at (0,43) size 152x14
+layer at (177,94) size 20x100
+  RenderFlexibleBox {DIV} at (3,3) size 20x100
+    RenderBlock {DIV} at (20,50) size 0x0
+layer at (177,138) size 20x13
+  RenderBlock {DIV} at (0,43) size 20x14
+layer at (209,137) size 152x13
+  RenderFlexibleBox {DIV} at (3,3) size 152x13
+    RenderBlock {DIV} at (152,6) size 0x0
+layer at (209,137) size 152x13
+  RenderBlock {DIV} at (0,0) size 152x13
 layer at (13,73) size 152x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 152x13 [color=#00000099]
     RenderText {#text} at (0,0) size 284x13
@@ -42,5 +73,17 @@ layer at (343,73) size 300x13
   RenderBlock {DIV} at (0,0) size 300x13 [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 (13,96) size 152x13
+layer at (653,73) 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 (13,138) 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 (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 e4faf3a..3983771 100644 (file)
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x104
-  RenderBlock {HTML} at (0,0) size 800x104
-    RenderBody {BODY} at (8,16) size 784x80
+layer at (0,0) size 800x213
+  RenderBlock {HTML} at (0,0) size 800x213
+    RenderBody {BODY} at (8,16) size 784x189
       RenderBlock {P} at (0,0) size 784x18
         RenderText {#text} at (0,0) size 757x18
           text run at (0,0) width 757: "This tests that the Strong Password AutoFill button renders in an auto-filled input. It can only be tested in the test tool."
-      RenderBlock {DIV} at (0,34) size 784x46
-        RenderTextControl {INPUT} at (2,2) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 152x13
-            RenderBlock {DIV} at (0,0) size 58x13
-            RenderBlock {DIV} at (57,0) size 95x13
-              RenderText {#text} at (6,0) size 89x13
-                text run at (6,0) width 89: "Strong Password"
-        RenderText {#text} at (162,2) size 4x18
-          text run at (162,2) width 4: " "
-        RenderTextControl {INPUT} at (168,2) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 152x13
-            RenderBlock {DIV} at (0,0) size 58x13
-            RenderBlock {DIV} at (57,0) size 95x13
-              RenderText {#text} at (6,0) size 89x13
-                text run at (6,0) width 89: "Strong Password"
-        RenderText {#text} at (328,2) size 4x18
-          text run at (328,2) width 4: " "
-        RenderTextControl {INPUT} at (332,2) size 306x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 300x13
-            RenderBlock {DIV} at (0,0) size 206x13
-            RenderBlock {DIV} at (205,0) size 95x13
-              RenderText {#text} at (6,0) size 89x13
-                text run at (6,0) width 89: "Strong Password"
-        RenderText {#text} at (638,2) size 4x18
-          text run at (638,2) width 4: " "
-        RenderTextControl {INPUT} at (2,25) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 152x13
-            RenderBlock {DIV} at (0,0) size 58x13
-            RenderBlock {DIV} at (57,0) size 95x13
-              RenderText {#text} at (6,0) size 89x13
-                text run at (6,0) width 89: "Strong Password"
-layer at (13,55) size 58x13 scrollWidth 284
+      RenderBlock {DIV} at (0,34) size 784x155
+        RenderTextControl {INPUT} at (2,15) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (162,15) size 4x18
+          text run at (162,15) width 4: " "
+        RenderTextControl {INPUT} at (168,15) size 158x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (328,15) size 4x18
+          text run at (328,15) width 4: " "
+        RenderTextControl {INPUT} at (332,15) size 306x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (638,15) size 4x18
+          text run at (638,15) width 4: " "
+        RenderTextControl {INPUT} at (642,2) size 26x19 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (0,0) size 0x0
+        RenderTextControl {INPUT} at (2,49) size 158x106 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (162,92) size 4x18
+          text run at (162,92) width 4: " "
+        RenderTextControl {INPUT} at (166,36) size 26x106 [bgcolor=#FAFFBD] [border: (2px inset #000000)]
+        RenderText {#text} at (192,92) size 4x18
+          text run at (192,92) width 4: " "
+        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
+      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
+      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
+      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
+      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
+      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
+      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
+      RenderText {#text} at (6,0) size 89x13
+        text run at (6,0) width 89: "Strong Password"
+layer at (209,145) size 58x13
+  RenderBlock {DIV} at (0,0) size 58x13
+layer at (13,68) size 58x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 58x13 [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 (179,55) size 58x13 scrollWidth 284
+layer at (179,68) size 58x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 58x13 [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,55) size 206x13 scrollWidth 284
+layer at (343,68) size 206x13 scrollWidth 284
   RenderBlock {DIV} at (0,0) size 206x13 [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 (13,78) size 58x13
+layer at (653,55) 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 (13,146) size 58x13 scrollWidth 284
+  RenderBlock {DIV} at (0,0) size 58x13 [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 (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 af510d7..b1562f0 100644 (file)
@@ -1,3 +1,54 @@
+2018-04-20  Daniel Bates  <dabates@apple.com>
+
+        Hide Strong Password label when text field is too narrow
+        https://bugs.webkit.org/show_bug.cgi?id=184785
+        <rdar://problem/38183939>
+
+        Reviewed by Zalan Bujtas.
+
+        We accomplish this illusion by allowing the text field's decorations to wrap, specifying flex
+        shrink factors, a flex basis and hiding overflow. Hiding overflow is accomplished by a
+        combination of setting "overflow: hidden", "text-overflow: clip", and patching RenderTextControlSingleLine::layout()
+        to ensure that the height of the container element is equal to the intrinsic height of the
+        inner elements. Because the container is a flex box and we want to vertically center its
+        contents we also need to fix up the y-position of the container element as it may have flexed
+        as a result of forcing its height to match the intrinsic height of the inner elements.
+
+        * css/html.css:
+        (input::-webkit-strong-password-auto-fill-button): Specify a flex-shrink factor and prevent
+        wrapping of the "Strong Password" text when flexed.
+        * html/shadow/TextControlInnerElements.cpp:
+        (WebCore::TextControlInnerContainer::TextControlInnerContainer): Register for a custom style
+        resolution callback so that we can style the container if it is a Strong Password or Strong
+        Confirmation Password text field. Ideally we could accomplish this effect with a user agent-
+        specific pseudo class together with a selector definition in the user agent style sheet,
+        html.css. Unfortunately the style resolver does not seem to apply pseudo classes to
+        shadow DOM pseudo elements (why?). Therefore we use a custom style resolution callback to
+        achieve the same effect.
+        (WebCore::isStrongPasswordTextField): Returns whether the specified DOM element is a Strong
+        Password text field.
+        (WebCore::TextControlInnerContainer::resolveCustomStyle): Conditionally apply CSS properties
+        "flex-wrap: wrap" and overflow: hidden" if the shadow host of this container is a Strong
+        Password text field.
+        (WebCore::TextControlInnerElement::resolveCustomStyle): Conditionally style the inner text
+        if the shadow host of this container is a Strong Password text field. We need to apply these
+        styles here as opposed to in html.css for the same reason we need to apply the styles to
+        the container in a custom style resolution callback. See the comments for TextControlInnerContainer()
+        above for more details
+        * html/shadow/TextControlInnerElements.h:
+        * rendering/RenderTextControlSingleLine.cpp:
+        (WebCore::resetOverriddenHeight): Added. Incorporates the logic from setNeedsLayoutOnAncestors().
+        (WebCore::RenderTextControlSingleLine::layout): Override the height of the container element to
+        match the height of the inner elements when this text field is a Strong Password field. We cache
+        the container's logical top before adjusting its height so that we can restore it after performing
+        a second layout of this renderer. This is needed because we vertically center the elements in this
+        renderer and adjusting the height of the container may cause it to flex and re-position along its
+        cross axis when the container's height is taller than the inner element's height (e.g. the "Strong
+        Password" label wraps to the next line). This re-positioning causes a noticeable jitter when
+        transitioning from a field that has a visible "Strong Password" label to one that does not. Caching
+        and restoring the logical top of the container element avoids this jitter.
+        (WebCore::setNeedsLayoutOnAncestors): Deleted. Moved its implementation into resetOverriddenHeight().
+
 2018-04-20  Dean Jackson  <dino@apple.com>
 
         Render a badge on system preview images
index e6af6ac..be28566 100644 (file)
@@ -543,7 +543,7 @@ input::-webkit-inner-spin-button {
 }
 
 input::-webkit-strong-password-auto-fill-button {
-    flex: none !important;
+    flex-shrink: 1 !important;
     font-family: -apple-system !important;
     -webkit-text-security: none !important;
     -webkit-user-select: none !important;
@@ -551,6 +551,7 @@ input::-webkit-strong-password-auto-fill-button {
     text-align: right !important;
     color: black !important;
     padding-left: 6px !important;
+    white-space: nowrap !important;
 }
 
 input::-webkit-credentials-auto-fill-button {
index 7de16aa..6822599 100644 (file)
@@ -27,6 +27,8 @@
 #include "config.h"
 #include "TextControlInnerElements.h"
 
+#include "CSSPrimitiveValue.h"
+#include "CSSToLengthConversionData.h"
 #include "Document.h"
 #include "EventNames.h"
 #include "Frame.h"
@@ -60,6 +62,7 @@ using namespace HTMLNames;
 TextControlInnerContainer::TextControlInnerContainer(Document& document)
     : HTMLDivElement(divTag, document)
 {
+    setHasCustomStyleResolveCallbacks();
 }
 
 Ref<TextControlInnerContainer> TextControlInnerContainer::create(Document& document)
@@ -72,6 +75,22 @@ RenderPtr<RenderElement> TextControlInnerContainer::createElementRenderer(Render
     return createRenderer<RenderTextControlInnerContainer>(*this, WTFMove(style));
 }
 
+static inline bool isStrongPasswordTextField(const Element* element)
+{
+    return is<HTMLInputElement>(element) && downcast<HTMLInputElement>(element)->hasAutoFillStrongPasswordButton();
+}
+
+std::optional<ElementStyle> TextControlInnerContainer::resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle*)
+{
+    auto elementStyle = resolveStyle(&parentStyle);
+    if (isStrongPasswordTextField(shadowHost())) {
+        elementStyle.renderStyle->setFlexWrap(FlexWrap);
+        elementStyle.renderStyle->setOverflowX(OHIDDEN);
+        elementStyle.renderStyle->setOverflowY(OHIDDEN);
+    }
+    return WTFMove(elementStyle);
+}
+
 TextControlInnerElement::TextControlInnerElement(Document& document)
     : HTMLDivElement(divTag, document)
 {
@@ -93,6 +112,21 @@ std::optional<ElementStyle> TextControlInnerElement::resolveCustomStyle(const Re
     newStyle->setDirection(LTR);
     // We don't want the shadow DOM to be editable, so we set this block to read-only in case the input itself is editable.
     newStyle->setUserModify(READ_ONLY);
+
+    if (isStrongPasswordTextField(shadowHost())) {
+        newStyle->setFlexShrink(0);
+        newStyle->setTextOverflow(TextOverflowClip);
+        newStyle->setOverflowX(OHIDDEN);
+        newStyle->setOverflowY(OHIDDEN);
+
+        // Set "flex-basis: 1em". Note that CSSPrimitiveValue::computeLengthInt() only needs the element's
+        // style to calculate em lengths. Since the element might not be in a document, just pass nullptr
+        // for the root element style and the render view.
+        RefPtr<CSSPrimitiveValue> emSize = CSSPrimitiveValue::create(1, CSSPrimitiveValue::CSS_EMS);
+        int pixels = emSize->computeLength<int>(CSSToLengthConversionData { newStyle.get(), nullptr, nullptr, 1.0, false });
+        newStyle->setFlexBasis(Length { pixels, Fixed });
+    }
+
     return ElementStyle { WTFMove(newStyle) };
 }
 
index 85656f8..5145e1f 100644 (file)
@@ -40,6 +40,7 @@ public:
 protected:
     TextControlInnerContainer(Document&);
     RenderPtr<RenderElement> createElementRenderer(RenderStyle&&, const RenderTreePosition&) override;
+    std::optional<ElementStyle> resolveCustomStyle(const RenderStyle& parentStyle, const RenderStyle* shadowHostStyle) override;
 };
 
 class TextControlInnerElement final : public HTMLDivElement {
index 1ea4e8f..021d7e3 100644 (file)
@@ -71,10 +71,13 @@ void RenderTextControlSingleLine::centerRenderer(RenderBox& renderer) const
     renderer.setLogicalTop(renderer.logicalTop() - logicalHeightDiff / 2);
 }
 
-static void setNeedsLayoutOnAncestors(RenderObject* start, RenderObject* ancestor)
+static void resetOverriddenHeight(RenderBox* box, const RenderObject* ancestor)
 {
-    ASSERT(start != ancestor);
-    for (RenderObject* renderer = start; renderer != ancestor; renderer = renderer->parent()) {
+    ASSERT(box != ancestor);
+    if (!box || box->style().logicalHeight().isAuto())
+        return; // Null box or its height was not overridden.
+    box->mutableStyle().setLogicalHeight(Length { Auto });
+    for (RenderObject* renderer = box; renderer != ancestor; renderer = renderer->parent()) {
         ASSERT(renderer);
         renderer->setNeedsLayout(MarkOnlyThis);
     }
@@ -85,39 +88,39 @@ void RenderTextControlSingleLine::layout()
     StackStats::LayoutCheckPoint layoutCheckPoint;
 
     // FIXME: We should remove the height-related hacks in layout() and
-    // styleDidChange(). We need them because
+    // styleDidChange(). We need them because we want to:
     // - Center the inner elements vertically if the input height is taller than
     //   the intrinsic height of the inner elements.
-    // - Shrink the inner elment heights if the input height is samller than the
-    //   intrinsic heights of the inner elements.
-
+    // - Shrink the heights of the inner elements if the input height is smaller
+    //   than the intrinsic heights of the inner elements.
+    // - Make the height of the container element equal to the intrinsic height of
+    //   the inner elements when the field has a strong password or strong confirmation
+    //   password button.
+    //
     // We don't honor paddings and borders for textfields without decorations
     // and type=search if the text height is taller than the contentHeight()
     // because of compability.
 
     RenderTextControlInnerBlock* innerTextRenderer = innerTextElement()->renderer();
-    RenderBox* innerBlockRenderer = innerBlockElement() ? innerBlockElement()->renderBox() : 0;
+    RenderBox* innerBlockRenderer = innerBlockElement() ? innerBlockElement()->renderBox() : nullptr;
+    HTMLElement* container = containerElement();
+    RenderBox* containerRenderer = container ? container->renderBox() : nullptr;
 
-    // To ensure consistency between layouts, we need to reset any conditionally overriden height.
-    if (innerTextRenderer && !innerTextRenderer->style().logicalHeight().isAuto()) {
-        innerTextRenderer->mutableStyle().setLogicalHeight(Length(Auto));
-        setNeedsLayoutOnAncestors(innerTextRenderer, this);
-    }
-    if (innerBlockRenderer && !innerBlockRenderer->style().logicalHeight().isAuto()) {
-        innerBlockRenderer->mutableStyle().setLogicalHeight(Length(Auto));
-        setNeedsLayoutOnAncestors(innerBlockRenderer, this);
-    }
+    // To ensure consistency between layouts, we need to reset any conditionally overridden height.
+    resetOverriddenHeight(innerTextRenderer, this);
+    resetOverriddenHeight(innerBlockRenderer, this);
+    resetOverriddenHeight(containerRenderer, this);
 
     RenderBlockFlow::layoutBlock(false);
 
-    HTMLElement* container = containerElement();
-    RenderBox* containerRenderer = container ? container->renderBox() : 0;
-
     // Set the text block height
     LayoutUnit desiredLogicalHeight = textBlockLogicalHeight();
     LayoutUnit logicalHeightLimit = logicalHeight();
-    if (innerTextRenderer && innerTextRenderer->logicalHeight() > logicalHeightLimit) {
-        if (desiredLogicalHeight != innerTextRenderer->logicalHeight())
+    LayoutUnit innerTextLogicalHeight;
+    if (innerTextRenderer)
+        innerTextLogicalHeight = innerTextRenderer->logicalHeight();
+    if (innerTextRenderer && innerTextLogicalHeight > logicalHeightLimit) {
+        if (desiredLogicalHeight != innerTextLogicalHeight)
             setNeedsLayout(MarkOnlyThis);
 
         innerTextRenderer->mutableStyle().setLogicalHeight(Length(desiredLogicalHeight, Fixed));
@@ -126,12 +129,18 @@ void RenderTextControlSingleLine::layout()
             innerBlockRenderer->mutableStyle().setLogicalHeight(Length(desiredLogicalHeight, Fixed));
             innerBlockRenderer->setNeedsLayout(MarkOnlyThis);
         }
+        innerTextLogicalHeight = desiredLogicalHeight;
     }
     // The container might be taller because of decoration elements.
+    LayoutUnit oldContainerLogicalTop;
     if (containerRenderer) {
         containerRenderer->layoutIfNeeded();
+        oldContainerLogicalTop = containerRenderer->logicalTop();
         LayoutUnit containerLogicalHeight = containerRenderer->logicalHeight();
-        if (containerLogicalHeight > logicalHeightLimit) {
+        if (inputElement().hasAutoFillStrongPasswordButton() && innerTextRenderer && containerLogicalHeight != innerTextLogicalHeight) {
+            containerRenderer->mutableStyle().setLogicalHeight(Length { innerTextLogicalHeight, Fixed });
+            setNeedsLayout(MarkOnlyThis);
+        } else if (containerLogicalHeight > logicalHeightLimit) {
             containerRenderer->mutableStyle().setLogicalHeight(Length(logicalHeightLimit, Fixed));
             setNeedsLayout(MarkOnlyThis);
         } else if (containerRenderer->logicalHeight() < contentLogicalHeight()) {
@@ -145,6 +154,11 @@ void RenderTextControlSingleLine::layout()
     if (needsLayout())
         RenderBlockFlow::layoutBlock(true);
 
+    // Fix up the y-position of the container as it may have been flexed when the strong password or strong
+    // confirmation password button wraps to the next line.
+    if (inputElement().hasAutoFillStrongPasswordButton() && containerRenderer)
+        containerRenderer->setLogicalTop(oldContainerLogicalTop);
+
     // Center the child block in the block progression direction (vertical centering for horizontal text fields).
     if (!container && innerTextRenderer && innerTextRenderer->height() != contentLogicalHeight())
         centerRenderer(*innerTextRenderer);