Bug 167209 – Safari input elements don't respect line-heights smaller than 'normal'.

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Michelle]

Here's a minimal reproduction: https://jsfiddle.net/mchl/dxc9geqc/

The placeholder text respects the `0.9em` line-height. However, once you start typing, the input text does not.

[alan]

This looks like an incorrectly positioned (vertically centered) inner text control (shadow dom)

[alan]

Sadly RenderTextControlSingleLine does no support cases with layout overflow.
The attached test case sets the height of the input box to 0.9em causing layout overflow. Even if the inner renderer wascentered, since RenderTextControlSingleLine does not support proper clipping, text would simply spill out of the input box (on trunk, placeholder text already overflows :(
it requires
1, centering
2, loosening up on the height cap on the inner renderer (see desiredLogicalHeight in RenderTextControlSingleLine::layout)
3, adding clipping support

(see attached screen recordings)

[alan]

Created attachment 466519 [details]
Fixed centering and sizing

[alan]

Created attachment 466520 [details]
overflow content needs clipping (caret does not look ok either)

[alan]

Created attachment 466521 [details]
WIP

[alan]

Apparently clipping is reserved for text fields (?) with decorations.

bool RenderTextControlSingleLine::hasControlClip() const
{
    // Apply control clip for text fields with decorations.
    return !!containerElement();
}

will need to do some digging through history.

[alan]

1. hasControlClip was initially added at 19393@main to specifically clip overflowing magnifier glass/cancel button in search fields ( hasControlClip() const { return m_cancelButton; })

2. 79370@main slightly changed behavior by switching over to checking !!containerElement(). It expands clipping for other, single line text field types like password -anything with container based shadow DOM (not just a simple contenteditable inside input)

which introduced some inconsistencies

<style>
input {
  font-size: 38px;
  height: 20px;
}
</style>
<input type="password" placeholder="this is clipped">
<input type="text" placeholder="this is NOT clipped">

[alan]

Created attachment 466532 [details]
Patch

[alan]

Created attachment 466545 [details]
Patch

[alan]

Created attachment 466548 [details]
Patch

[alan]

Created attachment 466558 [details]
Patch

[alan]

Created attachment 466563 [details]
Patch

[EWS]

Committed 264802@main (7590b24a0d02): <https://commits.webkit.org/264802@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 466563 [details].

[Radar WebKit Bug Importer]

<rdar://problem/110126574>