1623124 - Minimum height of a single-line <input> is not interoperable with webkit/blink browsers

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[Jonathan Kew [:jfkthame]]

Attachment: testcase

See testcase. In Firefox (on macOS), the descenders of "g" and "y" are clipped in the last three examples (colored red), whereas in Safari and Chrome, those three elements all have significantly larger heights and do not clip descenders.

The heights of the elements are reported as:

Firefox    Chrome/Safari
  40px       40px
  40px       40px
  40px       47px
  50px       59px
  60px       71px

(Exact results will vary on different platforms depending on metrics of the platform's font.)

We have code in ReflowInput::CalcLineHeight that is relevant here: the comment tells us that "for Web-compatibility, single-line text input elements cannot have a line-height smaller than one." This is why we get heights of 50px and 60px for the last two elements, even though their specified line-height remains 40px.

This matches what the HTML spec says:

the 'line-height' property, if it has a computed value equivalent to a value that is less than 1.0, must have a used value of 1.0.

However, it appears that what webkit and blink actually implement in this scenario is a different rule: "single-line text input elements cannot have a line-height smaller than normal line-height for their font". As normal line height is usually larger than 1 (typically about 1.2), this results in the larger heights seen in the testcase.

I think we should align our behavior with this, to improve interop and web compatibility; I just filed https://github.com/whatwg/html/issues/5366 to suggest modifying the HTML spec accordingly.

(For an example of a site that renders poorly in Firefox due to our current behavior, see https://github.com/webcompat/web-bugs/issues/47819. We've seen other cases that would similarly benefit, I believe.)

Comment 1

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1623124 - Min used line-height for a single-line input element should be the font's 'normal' line-height. r=dholbert

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8e3cf2cbb2dc
Min used line-height for a single-line input element should be the font's 'normal' line-height. r=dholbert

Comment 3

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/8e3cf2cbb2dc