Are form controls replaced elements?

[gsnedders]

From web-platform-tests/interop#1124 (cc @Loirooriol)

See previously: #1024.

CSS 2 says:

CSS 2 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

CSS 2, defining "replaced element", says:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.

CSS Display says:

An element whose content is outside the scope of the CSS formatting model, such as an image or embedded document.

CSS Display, defining display: contents, says:

This value computes to display: none on replaced elements and other elements whose rendering is not entirely controlled by CSS; see Appendix B: Effects of display: contents on Unusual Elements for details.

CSS Sizing says:

In addition to the replaced elements listed in HTML§14.4 [HTML], the following HTML elements are also considered to be replaced elements for the purpose of the percentage-sized replaced element rule above, and can have their min-content contribution compressed when their width/height or max-width/max-height is expressed with a cyclic percentage size: [<input>, <select>, <textarea>, <progress>, <meter>, <marquee>]

CSS UI says:

The term widget in this specification denotes replaced elements that can have native appearance, meaning that they are rendered like analogous native widgets or controls of the host operating system or platform, or with a look and feel not otherwise expressible in CSS.

HTML says:

The following elements can have a native appearance for the purpose of the CSS 'appearance' property.

• button
• input
• meter
• progress
• select
• textarea

So:

• CSS 2 explicitly leaves form controls undefined, and "replaced element" definition would presumably include them (because they're not defined by the CSS model),
• CSS Display has a similar definition of "replaced element", but also talks about form controls distinct to replaced elements,
• CSS Sizing implies that a number of HTML elements are to be considered replaced elements (implying they're not in general),
• CSS UI makes it clear that widgets are replaced elements,
• HTML defines them as widgets (per the CSS UI definition).

So on the whole to me it seems like the intention is that they are replaced elements, but we don't make this super obvious?

[Loirooriol]

If they are replaced elements, why does object-position: 100px have no effect on them? object-position applies to replaced elements.

If they are replaced elements (presumably with no natural sizes), then why do they not stretch when assigned a preferred aspect ratio with aspect-ratio?

If they are replaced elements, why do they stretch by default when they are grid items?

[emilio]

On the flip side, if they're not replaced elements, why do their children not render? :)

[bfgeek]

They aren't replaced elements from the perspective of layout engines anymore. Form controls once behaved more similar to replaced elements, however (at the request of FF I believe) engines moved the rules for form-controls closer to non-replaced (which IMO was a good thing).

Likely we need a definite term for these things, we've previously used "semi-replaced" which IMO is too confusing, likely just "form control" or "widget" is fine.