Specify where text baseline is for form controls / widgets

[zcorpan]

In https://github.com/whatwg/html/issues/4082#issuecomment-550356936 @MatsPalmgren wrote

I added three more columns that check each of the existing cases but with -webkit-appearance:none. [...] Chrome also synthesizes the baseline differently depending on that property for type=checkbox for example (content-box vs margin-box).

It's also worth noting that the baseline is different for some of these controls. For example, type=color uses the content-box edges, whereas type=range use the margin-box edges in Firefox but the border-box edges in Chrome. We need to agree on these baselines and specify them somewhere.

Firefox and Safari also has different baseline for radio and checkbox depending on -webkit-appearance.

[zcorpan]

The test in https://github.com/web-platform-tests/wpt/pull/20306 has a comment that could be used as a starting point for specifying this.

[bfgeek]

This also needs to specify how baselines are synthesized in an inline context. My default baselines are synthesized off the margin box.

I did some basic testing here: https://github.com/web-platform-tests/wpt/issues/45889#issue-2262046512

But TL;DR:

• <input type=radio>/<inpput type=checkbox> - with effective appearance they synthesize off the border-box edges, and with appearance:none of the margin-box edges.
• <input type=range> in Blink/Webkit synthesizes off the border-box edge, Firefox margin-box.
• <button>/<input type=button>/<input type=submit>/<input type=reset> synthesizes off the content-box edge.