Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
  • Loading branch information
alanbaradlay committed May 27, 2023
1 parent 40fd93b commit 1446d6f
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 2 deletions.
@@ -0,0 +1,15 @@
<style>
* {
font-size: 20px;
font-family: Monospace;
}
div {
border: 1px solid green;
}
input {
-webkit-appearance: none;
height: 90px;
}
</style>
<div>some text<input type="text" placeholder="and more"></div>
<div>some text<input type="text" value="and more"></div>
16 changes: 16 additions & 0 deletions LayoutTests/fast/forms/single-line-text-with-line-height.html
@@ -0,0 +1,16 @@
<style>
* {
font-size: 20px;
font-family: Monospace;
}
div {
border: 1px solid green;
}
input {
-webkit-appearance: none;
height: 90px;
line-height: 30;
}
</style>
<div>some text<input type="text" placeholder="and more"></div>
<div>some text<input type="text" value="and more"></div>
9 changes: 7 additions & 2 deletions Source/WebCore/html/HTMLInputElement.cpp
Expand Up @@ -2229,8 +2229,13 @@ RenderStyle HTMLInputElement::createInnerTextStyle(const RenderStyle& style)
textBlockStyle.setUsedZIndex(0);
}

// Do not allow line-height to be smaller than our default.
if (textBlockStyle.metricsOfPrimaryFont().lineSpacing() > style.computedLineHeight())
auto shouldUseInitialLineHeight = [&] {
// Do not allow line-height to be smaller than our default.
if (textBlockStyle.metricsOfPrimaryFont().lineSpacing() > style.computedLineHeight())
return true;
return isText() && !style.logicalHeight().isAuto();
};
if (shouldUseInitialLineHeight())
textBlockStyle.setLineHeight(RenderStyle::initialLineHeight());

return textBlockStyle;
Expand Down

0 comments on commit 1446d6f

Please sign in to comment.