[webkit-changes] [WebKit/WebKit] 3eca5e: REGRESSION (264613 at main): Strong password is clipp...

[Aditya Keerthi]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 3eca5e06b905dc7451687e13117b17bde6287cff
      https://github.com/WebKit/WebKit/commit/3eca5e06b905dc7451687e13117b17bde6287cff
  Author: Aditya Keerthi <akeerthi at apple.com>
  Date:   2023-10-20 (Fri, 20 Oct 2023)

  Changed paths:
    A LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-line-height-expected.html
    A LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-line-height.html
    M Source/WebCore/html/HTMLInputElement.cpp

  Log Message:
  -----------
  REGRESSION (264613 at main): Strong password is clipped on ambetterhealth.com
https://bugs.webkit.org/show_bug.cgi?id=263427
rdar://114359535

Reviewed by Alan Baradlay.

Consider the shadow tree for input elements:

<input>
    <container>
        <inner-block>
            <inner-text>

Input elements with a strong password autofilled force the height of the
container renderer to be equal to the height of the inner text renderer.

Following 264613 at main, the height of the inner text renderer can be reduced, as
the line height is reset to initial if the input has an explicitly specified
height. However, the inner block renderer, which sits in between the inner text
and the container in the tree, does not have its line height adjusted.

Consequently, it's possible to have an inner block which is larger than both
the container and inner text elements, which themselves have equal height.
Since the container is center-aligned in the input, the inner block is
top-aligned in the container, and the inner text is center-aligned in the
inner block, it will be clipped.

To fix, partially revert 264613 at main, for inputs that have been strong password
autofilled. This is fine since the height of the container renderer is forced
to be equal to the height of the inner text renderer.

* LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-line-height-expected.html: Added.
* LayoutTests/fast/forms/auto-fill-button/input-strong-password-viewable-line-height.html: Added.

The added test uses two different line-heights on an input with the same height
and ensures the appearance is the same, since the strong password text should
be centered just the same in the input. A black box is added to the trailing edge
of the input in order to avoid differences due to the gradient password mask, and
another issue with the strong password "button" (tracked in rdar://113701243).

* Source/WebCore/html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::createInnerTextStyle):

Canonical link: https://commits.webkit.org/269606@main