Skip to content

Commit

Permalink
Strong Password button is clipped on google.com and imdb.com
Browse files Browse the repository at this point in the history 
https://bugs.webkit.org/show_bug.cgi?id=263921
rdar://113701243

Reviewed by Alan Baradlay.

Descenders in the "Strong Password" button in autofilled fields with strong
passwords are clipped on google.com and imdb. This issue is exacerbated when
the user has a system language which has very tall descenders, such as Hindi.

There are two distinct issues contributing to the clipping, both as a
consequence of the behavior added in 200350@main, which made it so that
"Strong Password" is hidden in narrow inputs.

1. 200350@main began forcing the height of the text container in input
   elements to equal the height of the inner text. This was done so that
   the "Strong Password" button could overflow (and be hidden) on to the
   next line in narrow inputs. However, this is problematic, as in cases
   where the button does not overflow, and is taller than the inner text,
   the button is clipped to match the height of the inner text. This
   scenario commonly occurs for users with a Hindi language set, as the tall
   descenders in Hindi often result in the button being taller than the
   password text.

2. Following the changes in 232913@main to correct inline block baseline
   behavior, the inner text element receives a "synthesized" baseline. This
   means that the text sits on the baseline with the bottom of the inline-block
   box and not with the baseline of the last (only) line. Consequently, the
   flex item that wraps the text ends up taller than the actual text. Then, the
   "Strong Password" button, which is also a flex item, gets pushed lower due
   to `align-items: center` alongside the taller flex item. Finally, it gets
   clipped for the same reason as clipping in (1). If (1) were fixed, clipping
   would not occur, but the "Strong Password" button would still be misaligned
   with the text.

To fix (1), take the taller of the inner text and "Strong Password" button in
order to determine the height to use for the container. This ensures that the
container will not have a height smaller than the button's height in cases where
the button is visible.

To fix (2), simply stop synthesizing the baseline for the inner text renderer.

* LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment-expected.html: Added.
* LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment.html: Added.
* LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-taller-button-height-expected.html: Added.
* LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-taller-button-height.html: Added.
* LayoutTests/platform/gtk/TestExpectations:
* 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-password-auto-fill-button-expected.txt:

Rebaseline the test to reflect the new positions and heights of the shadow tree
elements. Notably, all the issues described in this commit message are already
observable in this test. However, because it is a render tree dump test that
also involves additional user input, the issue was never observed.

Due to this testing flaw, additional ref tests have been added as part of this change.

* Source/WebCore/rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::inlineBlockBaseline const):
* Source/WebCore/rendering/RenderTextControlSingleLine.cpp:
(WebCore::RenderTextControlSingleLine::layout):

Canonical link: https://commits.webkit.org/270068@main
  • Loading branch information
@pxlcoder
pxlcoder committed Nov 1, 2023
1 parent f9d66b7 commit af06b86
Show file tree
Hide file tree
Showing 9 changed files with 294 additions and 114 deletions.
50 changes: 50 additions & 0 deletions ...st/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment-expected.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<style>

.password-box {
background-color: rgb(250, 255, 189);
border: 1px solid black;
padding: 1px;
height: 40px;
width: 200px;
font-size: 11px;
color: rgba(0, 0, 0, 0.6);
}

.container {
display: flex;
align-items: center;
height: 40px;
}

.inner-text {
display: inline-block;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
mask-image: linear-gradient(90deg, black 50%, transparent 100%);
}

.autofill-button {
flex-shrink: 0;
font-family: -apple-system;
text-align: right;
color: rgba(0, 0, 0, 0.8);
padding-left: 6px;
white-space: nowrap;
}

</style>
</head>
<body>
<div class="password-box">
<div class="container">
<div class="inner-text">thisisaverystrongpassword</div>
<div class="autofill-button">Strong Password</div>
</div>
</div>
</body>
</html>
28 changes: 28 additions & 0 deletions ...tTests/fast/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style>

input {
font-size: 11px;
background-color: white;
border: 1px solid black;
border-radius: 0px;
padding: 1px;
width: 200px;
height: 40px;
}

</style>
</head>
<body>
<input type="password" value="thisisaverystrongpassword">
<script>
if (window.internals) {
var input = document.querySelector("input");
internals.setAutoFilledAndViewable(input, true);
internals.setShowAutoFillButton(input, "StrongPassword");
}
</script>
</body>
</html>
51 changes: 51 additions & 0 deletions .../forms/auto-fill-button/input-strong-password-viewable-taller-button-height-expected.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<style>

.password-box {
background-color: rgb(250, 255, 189);
border: 1px solid black;
padding: 1px;
height: 40px;
width: 200px;
font-size: 11px;
color: rgba(0, 0, 0, 0.6);
}

.container {
display: flex;
align-items: center;
height: 40px;
}

.inner-text {
display: inline-block;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
mask-image: linear-gradient(90deg, black 50%, transparent 100%);
}

.autofill-button {
flex-shrink: 0;
font-size: 17px;
font-family: -apple-system;
text-align: right;
color: rgba(0, 0, 0, 0.8);
padding-left: 6px;
white-space: nowrap;
}

</style>
</head>
<body>
<div class="password-box">
<div class="container">
<div class="inner-text">thisisaverystrongpassword</div>
<div class="autofill-button">Strong Password</div>
</div>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions ...ests/fast/forms/auto-fill-button/input-strong-password-viewable-taller-button-height.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style>

input {
font-size: 11px;
background-color: white;
border: 1px solid black;
border-radius: 0px;
padding: 1px;
width: 200px;
height: 40px;
}

input::-webkit-strong-password-auto-fill-button {
font-size: 17px;
}

</style>
</head>
<body>
<input type="password" value="thisisaverystrongpassword">
<script>
if (window.internals) {
var input = document.querySelector("input");
internals.setAutoFilledAndViewable(input, true);
internals.setShowAutoFillButton(input, "StrongPassword");
}
</script>
</body>
</html>
1 change: 1 addition & 0 deletions LayoutTests/platform/gtk/TestExpectations
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2206,6 +2206,7 @@ webkit.org/b/179605 editing/execCommand/underline-selection-containing-image.htm
webkit.org/b/179722 compositing/accelerated-layers-after-back.html [ Failure ]

webkit.org/b/181662 fast/forms/auto-fill-button/input-strong-password-auto-fill-button.html [ Missing Failure ]
webkit.org/b/181662 fast/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment.html [ ImageOnlyFailure ]

webkit.org/b/182103 fast/forms/textarea-scrolled-type.html [ Failure ]
webkit.org/b/182103 fast/forms/focus-selection-textarea.html [ Failure ]
Expand Down
116 changes: 58 additions & 58 deletions ...tform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,100 @@
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x216
RenderBlock {HTML} at (0,0) size 800x216
RenderBody {BODY} at (8,16) size 784x192
layer at (0,0) size 800x212
RenderBlock {HTML} at (0,0) size 800x212
RenderBody {BODY} at (8,16) size 784x188
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 784x156
RenderTextControl {INPUT} at (0,15) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (153,14) size 4x19
text run at (153,14) width 4: " "
RenderTextControl {INPUT} at (157,15) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (310,14) size 4x19
text run at (310,14) width 4: " "
RenderTextControl {INPUT} at (314,15) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (627,14) size 4x19
text run at (627,14) width 4: " "
RenderBlock {DIV} at (0,36) size 784x152
RenderTextControl {INPUT} at (0,13) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (153,11) size 4x19
text run at (153,11) width 4: " "
RenderTextControl {INPUT} at (157,13) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (310,11) size 4x19
text run at (310,11) width 4: " "
RenderTextControl {INPUT} at (314,13) size 313x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (627,11) size 4x19
text run at (627,11) width 4: " "
RenderTextControl {INPUT} at (631,0) size 33x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (0,0) size 0x0
RenderTextControl {INPUT} at (0,49) size 153x108 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (153,92) size 4x19
text run at (153,92) width 4: " "
RenderTextControl {INPUT} at (157,34) size 33x108 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (190,92) size 4x19
text run at (190,92) width 4: " "
RenderTextControl {INPUT} at (194,93) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
layer at (15,70) size 140x12 scrollHeight 15
RenderFlexibleBox {DIV} at (6,3) size 141x13
RenderBlock {DIV} at (45,0) size 95x15 [color=#000000CC]
RenderTextControl {INPUT} at (0,45) size 153x108 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (153,87) size 4x19
text run at (153,87) width 4: " "
RenderTextControl {INPUT} at (157,32) size 33x108 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
RenderText {#text} at (190,87) size 4x19
text run at (190,87) width 4: " "
RenderTextControl {INPUT} at (194,89) size 153x20 [bgcolor=#FAFFBD] [border: (1px solid #3C3C4399)]
layer at (15,67) size 140x14
RenderFlexibleBox {DIV} at (6,2) size 141x15
RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (15,70) size 46x15 backgroundClip at (15,70) size 45x12 clip at (15,70) size 45x12
RenderBlock {DIV} at (0,0) size 46x15
layer at (172,70) size 140x12 scrollHeight 15
RenderFlexibleBox {DIV} at (6,3) size 141x13
RenderBlock {DIV} at (45,0) size 95x15 [color=#000000CC]
layer at (15,68) size 46x12 backgroundClip at (15,68) size 45x12 clip at (15,68) size 45x12
RenderBlock {DIV} at (0,1) size 46x12
layer at (172,67) size 140x14
RenderFlexibleBox {DIV} at (6,2) size 141x15
RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (172,70) size 46x15 backgroundClip at (172,70) size 45x12 clip at (172,70) size 45x12
RenderBlock {DIV} at (0,0) size 46x15
layer at (329,70) size 300x12 scrollHeight 15
RenderFlexibleBox {DIV} at (6,3) size 301x13
RenderBlock {DIV} at (205,0) size 95x15 [color=#000000CC]
layer at (172,68) size 46x12 backgroundClip at (172,68) size 45x12 clip at (172,68) size 45x12
RenderBlock {DIV} at (0,1) size 46x12
layer at (329,67) size 300x14
RenderFlexibleBox {DIV} at (6,2) size 301x15
RenderBlock {DIV} at (205,0) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (329,70) size 206x15 backgroundClip at (329,70) size 205x12 clip at (329,70) size 205x12
RenderBlock {DIV} at (0,0) size 206x15
layer at (646,55) size 20x12 scrollWidth 94 scrollHeight 29
layer at (329,68) size 206x12 backgroundClip at (329,68) size 205x12 clip at (329,68) size 205x12
RenderBlock {DIV} at (0,1) size 206x12
layer at (646,55) size 20x12 scrollWidth 94 scrollHeight 26
RenderFlexibleBox {DIV} at (6,3) size 21x13
RenderBlock {DIV} at (0,15) size 95x14 [color=#000000CC]
RenderBlock {DIV} at (0,12) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (646,55) size 20x15 backgroundClip at (646,55) size 20x12 clip at (646,55) size 20x12
RenderBlock {DIV} at (0,0) size 20x15
layer at (15,148) size 140x12 scrollHeight 15
RenderFlexibleBox {DIV} at (6,47) size 141x13
RenderBlock {DIV} at (45,0) size 95x15 [color=#000000CC]
layer at (646,55) size 20x12
RenderBlock {DIV} at (0,0) size 20x12
layer at (15,143) size 140x14
RenderFlexibleBox {DIV} at (6,46) size 141x15
RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (15,148) size 46x15 backgroundClip at (15,148) size 45x12 clip at (15,148) size 45x12
RenderBlock {DIV} at (0,0) size 46x15
layer at (172,133) size 20x12 scrollWidth 94 scrollHeight 29
layer at (15,144) size 46x12 backgroundClip at (15,144) size 45x12 clip at (15,144) size 45x12
RenderBlock {DIV} at (0,1) size 46x12
layer at (172,131) size 20x12 scrollWidth 94 scrollHeight 26
RenderFlexibleBox {DIV} at (6,47) size 21x13
RenderBlock {DIV} at (0,15) size 95x14 [color=#000000CC]
RenderBlock {DIV} at (0,12) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (172,133) size 20x15 backgroundClip at (172,133) size 20x12 clip at (172,133) size 20x12
RenderBlock {DIV} at (0,0) size 20x15
layer at (209,148) size 140x12 scrollHeight 15
RenderFlexibleBox {DIV} at (6,3) size 141x13
RenderBlock {DIV} at (45,0) size 95x15 [color=#000000CC]
layer at (172,131) size 20x12
RenderBlock {DIV} at (0,0) size 20x12
layer at (209,143) size 140x14
RenderFlexibleBox {DIV} at (6,2) size 141x15
RenderBlock {DIV} at (45,0) size 95x14 [color=#000000CC]
RenderText {#text} at (6,0) size 89x14
text run at (6,0) width 89: "Strong Password"
layer at (209,148) size 46x15 backgroundClip at (209,148) size 45x12 clip at (209,148) size 45x12
RenderBlock {DIV} at (0,0) size 46x15
layer at (15,70) size 46x12 backgroundClip at (15,70) size 45x12 clip at (15,70) size 45x12 scrollWidth 284
layer at (209,144) size 46x12 backgroundClip at (209,144) size 45x12 clip at (209,144) size 45x12
RenderBlock {DIV} at (0,1) size 46x12
layer at (15,68) size 46x12 backgroundClip at (15,68) size 45x12 clip at (15,68) 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 (172,70) size 46x12 backgroundClip at (172,70) size 45x12 clip at (172,70) size 45x12 scrollWidth 284
layer at (172,68) size 46x12 backgroundClip at (172,68) size 45x12 clip at (172,68) 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 (329,70) size 206x12 backgroundClip at (329,70) size 205x12 clip at (329,70) size 205x12 scrollWidth 284
layer at (329,68) size 206x12 backgroundClip at (329,68) size 205x12 clip at (329,68) 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 (646,55) 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 (15,148) size 46x12 backgroundClip at (15,148) size 45x12 clip at (15,148) size 45x12 scrollWidth 284
layer at (15,144) size 46x12 backgroundClip at (15,144) size 45x12 clip at (15,144) 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 (172,133) size 20x12 scrollWidth 284
layer at (172,131) 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."
Loading

0 comments on commit af06b86

Please sign in to comment.