[webkit-changes] [WebKit/WebKit] af06b8: Strong Password button is clipped on google.com an...

[Aditya Keerthi]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: af06b864403c001c463f12589bedb1a9865b5e8c
      https://github.com/WebKit/WebKit/commit/af06b864403c001c463f12589bedb1a9865b5e8c
  Author: Aditya Keerthi <akeerthi at apple.com>
  Date:   2023-11-01 (Wed, 01 Nov 2023)

  Changed paths:
    A LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment-expected.html
    A LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-baseline-alignment.html
    A LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-taller-button-height-expected.html
    A LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-taller-button-height.html
    M LayoutTests/platform/gtk/TestExpectations
    M LayoutTests/platform/ios/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
    M LayoutTests/platform/mac/fast/forms/auto-fill-button/input-strong-password-auto-fill-button-expected.txt
    M Source/WebCore/rendering/RenderBlockFlow.cpp
    M Source/WebCore/rendering/RenderTextControlSingleLine.cpp

  Log Message:
  -----------
  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 at main, which made it so that
"Strong Password" is hidden in narrow inputs.

1. 200350 at 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 at 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