Bug 65474 – display:table-* does not work on input, select, and textarea elements

• Component: New Bugs
• Status: UNCONFIRMED

[Marc Hoyois]

Created attachment 102524 [details]
HTML file reproducing the bug

Overview:

On an input, select, or textarea element, display:table (resp. display:table-*) is computed as display:block (resp. display:inline-block).

As an example of a undesirable behavior, if a display:table-cell has text spanning multiple lines, the vertical-align:bottom property on an adjacent input cell aligns the bottom of that cell with the bottom of the FIRST LINE of the multiline cell.

Steps to reproduce: Open attached HTML file.

Actual results: The bottom of the input element is aligned with the bottom of the first line of the label.

Expected results: According to http://www.w3.org/TR/CSS2/tables.html#height-layout, the bottom of a table-cell element with vertical-align:bottom should lie at the bottom of the enclosing table-row, i.e., should be aligned with the bottom of the second line of the label.

Build Date & Platform:
Tested in OS X 10.7.0 with Safari 5.1 and WebKit r92092.

Additional Information:
A workaround is to include the <input> element in a span or div with display:table-cell, but that shouldn't be necessary.

[Ahmad Saleem]

Created attachment 461201 [details]
Safari 15.6 matches with other browsers

I am unable to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case (it does not have any vendor prefixes for styling and no console error) and it is matching other browsers as can be seen in attached screenshot.

Can this be considered as "RESOLVED CONFIGURATION CHANGED"? Thanks!

[Alexey Proskuryakov]

My reading of the expected results is that all browsers fail the test. Presumably we're sticking to the interoperable behavior, not changing it.