[webkit-changes] [WebKit/WebKit] 1446d6: wrong input text position with line-height

[Alan Baradlay]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 1446d6fed86f0accd9c62011898eee344726da90
      https://github.com/WebKit/WebKit/commit/1446d6fed86f0accd9c62011898eee344726da90
  Author: Alan Baradlay <zalan at apple.com>
  Date:   2023-05-26 (Fri, 26 May 2023)

  Changed paths:
    A LayoutTests/fast/forms/single-line-text-with-line-height-expected.html
    A LayoutTests/fast/forms/single-line-text-with-line-height.html
    M Source/WebCore/html/HTMLInputElement.cpp

  Log Message:
  -----------
  wrong input text position with line-height
https://bugs.webkit.org/show_bug.cgi?id=245225
<rdar://problem/100278323>

Reviewed by Simon Fraser.

Non-initial line-height value gets leaked into the inner text control making the associated inline-block inline level box too tall.
It causes 2 highly visible bugs with single-line type of text controls.
1, it results in tall line box pushing the rest of the baseline align inline content downward (test case #1)
2, text content inside the input is not visible at all unless the input is active and user starts typing (test case #2)
(It's quite bad as focusing the input still produces blank content and the user has to start typing to see existing text in the input).

<div>some text<input style="height: 50px; line-height: 1000" placeholder="and more"></div>

            _______________
           | _____________ |   <- input
           ||  and more   ||   <- "forced positioned" placeholder control
           ||_____________||
            |             |    <- inner text control
            |             |
            |             |
 some text  |             |    <- computed baseline position (this is where the input box value ("text content") would end up)
            |             |
            |             |
            |_____________|

Note that this is normal inline-block behavior where the baseline alignment is based off of the inline-block's last line even
when this last line overflows the border box (and produces layout overflow).

However not only does it look unacceptable for single-line input boxes but also our custom layout and painting logic inside
RenderTextControlSingleLine slightly disagrees with this constrained set and produces unexpected content placement.
(Current behavior is closer to what happens if the inline-block had "overflow: hidden", -which puts the baseline position at the bottom of the margin box)

In this patch we override the inherited line-height value to initial unless the input box's height is auto -in which case it is
actually ok to be driven by the content height (i.e. line-height based inflate is ok).

This change improves interoperability and makes WebKit match other rendering engines' behavior.

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

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