1587614 - Firefox uses horizontal margin/border/padding when sizing <option> elements, but otherwise ignores these properties (and other browsers ignore them completely)

Status: NEW

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

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:

1. Load attached testcase.

ACTUAL RESULTS:
The select elements are all different sizes -- i.e. their sizes are influenced by the margin/border/padding specified styles on their option elements.

EXPECTED RESULTS:
The select elements should perhaps all be the same size.

Chrome and Edge and Safari all give EXPECTED RESULTS.

One further observation: in Firefox, the option contents (the "a" characters) are all left-aligned at the same position, and the 20px solid pink border doesn't ever paint. That means we don't actually use these properties (margin/border/padding) when positioning/painting the content. We simply factor them in for sizing purposes, for probably no-good-reason...

Comment 1

[Daniel Holbert [:dholbert]]

(Also notable: Firefox ignores the block-axis components of these properties entirely as well -- the margin/border/padding doesn't make these form controls or their option entries any taller.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with <select multiple>), just for comparison

For <select multiple>, browsers do consistently honor the margin/border/padding (and do draw the border, and do offset the "a" from the left edge). Here's a testcase to demonstrate that.

So, we don't want to break that currently-interoperably-implemented behavior. This bug is just focused on the dropdown-menu version of <select>, which is not interoperable on this right now and where our behavior doesn't really make any sense.

Comment 3

[Daniel Holbert [:dholbert]]

(Actually -- just for the record -- testcase 2 isn't entirely interoperable, but Firefox & Chrome seem to agree on honoring all the properties, and Edge does as well though they also make the block-level select elements stretch to fill the width of the viewport. Safari 12.1 is the odd one out -- they don't honor the margin/border/padding at all in testcase 2.)

But anyway -- bottom line, the point of this bug is to fix testcase 1 to be interoperable, but probably without changing our behavior on testcase 2.