Define rendering rules for all widgets in their native appearance and primitive appearance + pseudo-elements

[zcorpan]

Follow-up from #7839.

Define the expected rendering for the native appearance and the primitive appearance for:

• [ ] button, input type=button/reset/submit
• [ ] input type=text/tel/url/email/search/password + pseudo-elements
• [ ] input type=date/month/week/time/datetime-local + pseudo-elements
• [ ] input type=number + pseudo-elements
• [ ] input type=range + pseudo-elements
• [ ] input type=color + pseudo-elements
• [ ] input type=checkbox/radio + pseudo-elements
• [ ] input type=file + pseudo-elements
• [ ] meter + pseudo-elements
• [ ] progress + pseudo-elements
• [ ] select as a listbox + optgroup + option
  • https://github.com/w3c/csswg-drafts/issues/7422
  • https://github.com/web-platform-tests/wpt/pull/35801
• [ ] select as a drop-down box + pseudo-elements
• [ ] textarea

Also, define the expected rendering for:

• [ ] select as a drop-down box in the devolved state or appearance: menulist-button

I think various pseudo-elements that browsers support are necessary to specify the native appearance, but right now only a few are standardized.

The relevant pseudo-classes and pseudo-elements I see in Chromium's html.css are:

input::-webkit-textfield-decoration-container
input::-webkit-clear-button
input[type="search" i]::-webkit-search-cancel-button
input[type="search" i]::-webkit-search-results-decoration
input::-webkit-inner-spin-button
::-webkit-input-placeholder
input::-internal-input-suggested
textarea::-internal-input-suggested
input[type="password" i]::-internal-reveal
input[type="file" i]::-webkit-file-upload-button
input[type="range" i]::-webkit-slider-container
input[type="range" i]::-webkit-media-slider-container
input[type="range" i]:-internal-has-datalist::-webkit-slider-container
input[type="range" i]::-webkit-slider-runnable-track
input[type="range" i]::-webkit-slider-thumb
input[type="range" i]::-webkit-media-slider-thumb
input[type="color" i]::-webkit-color-swatch-wrapper
input[type="color" i]::-webkit-color-swatch
input::-webkit-calendar-picker-indicator
select:-internal-list-box
meter::-webkit-meter-inner-element
meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance
meter::-internal-fallback:-internal-shadow-host-has-appearance
meter::-webkit-meter-bar
meter::-webkit-meter-optimum-value
meter::-webkit-meter-suboptimum-value
meter::-webkit-meter-even-less-good-value
progress::-webkit-progress-inner-element
progress::-webkit-progress-bar
progress::-webkit-progress-value
input::-webkit-datetime-edit-ampm-field
input::-webkit-datetime-edit-day-field
input::-webkit-datetime-edit-hour-field
input::-webkit-datetime-edit-millisecond-field
input::-webkit-datetime-edit-minute-field
input::-webkit-datetime-edit-month-field
input::-webkit-datetime-edit-second-field
input::-webkit-datetime-edit-week-field
input::-webkit-datetime-edit-year-field

(Are ::webkit-media-slider-container and ::webkit-media-slider-thumb used in the <video controls> shadow tree?)

The ::-internal-* ones are not exposed to author CSS and so don't need to be standardized (but expected rendering can still be defined in prose). I think all of the others can be used by web developers.

Gecko's forms.css:

::file-selector-button
::placeholder
::-moz-text-control-editing-root
::-moz-text-control-preview
:placeholder-shown
:autofill
::-moz-display-comboboxcontrol-frame
::-moz-dropdown-list
::-moz-color-swatch
::-moz-button-content
::-moz-progress-bar
::-moz-meter-bar
:-moz-meter-optimum::-moz-meter-bar
:-moz-meter-sub-optimum::-moz-meter-bar
:-moz-meter-sub-sub-optimum::-moz-meter-bar
input[type=range]::-moz-range-progress
input[type=number]::-moz-number-spin-box
input[type=number]::-moz-number-spin-up
input[type=number]::-moz-number-spin-down
input::-moz-search-clear-button
input::-moz-reveal

::file-selector-button and ::placeholder are defined in https://drafts.csswg.org/css-pseudo/

:placeholder-shown and :autofill are defined in HTML.

Gecko also has a -moz-default-appearance property, but I believe it's not exposed to author CSS.

(Open issues for css-pseudo: https://github.com/w3c/csswg-drafts/issues?q=is%3Aopen+label%3Acss-pseudo-4%2Ccss-pseudo-5 )

cc @whatwg/css @whatwg/forms

[zcorpan]

This issue corresponds to the inline issues in the spec's rendering section saying

Need to define the expected primitive appearance.

or

Need to detail the expected native appearance and primitive appearance.

[zcorpan]

Filed an issue for the Selectors spec to consider adding a pseudo-class for select as a list box: https://github.com/w3c/csswg-drafts/issues/7422