servo icon indicating copy to clipboard operation
servo copied to clipboard

Text input with "display: inline" has takes up no horizontal space

Open jdm opened this issue 1 year ago • 3 comments

<input style="display: inline"></input>

Firefox: Screenshot 2024-10-05 at 9 20 06 PM Servo: Screenshot 2024-10-05 at 9 20 17 PM

jdm avatar Oct 06 '24 01:10 jdm

The default display value for input fields is inline-block: https://github.com/servo/servo/blob/main/resources/user-agent.css#L360

jdm avatar Oct 06 '24 01:10 jdm

This affects <textarea> the same way.

jdm avatar Oct 06 '24 01:10 jdm

https://html.spec.whatwg.org/multipage/rendering.html#form-controls

For input elements where the type attribute is not in the Hidden state or the Image Button state, and that are being rendered, are expected to act as follows:

So it should stay as an inline-block even with display: inline.

Loirooriol avatar Oct 06 '24 14:10 Loirooriol

I'd like to try this

PotatoCP avatar Mar 06 '25 09:03 PotatoCP

@Loirooriol do you think we should also apply the same behavior for textarea (display inline always 'flow-root')?

PotatoCP avatar Mar 11 '25 08:03 PotatoCP

Yes: https://html.spec.whatwg.org/multipage/rendering.html#the-textarea-element-2

The textarea element is a devolvable widget expected to render as an 'inline-block' box depicting a multiline text control.

Loirooriol avatar Mar 11 '25 08:03 Loirooriol