Skip to content

Commit

Permalink
Cherry-pick 270068@main (af06b86). https://bugs.webkit.org/show_bug.c…
Browse files Browse the repository at this point in the history 
…gi?id=263921

    Strong Password button is clipped on google.com and imdb.com
    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 @aperezdc
pxlcoder authored and aperezdc committed Jan 25, 2024
1 parent 1507cdd commit 47c5ed1
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 @@ -2204,6 +2204,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 47c5ed1

Please sign in to comment.