[forms] Remove anonymous button content-box, and use CSS rather than magic for input / button block axis centering.

[emilio]

This defines the (previously undefined, afaict) unsafe center alignment of text inputs and textarea, and makes the changes discussed by the CSS Working Group in w3c/csswg-drafts#14190.

• At least two implementers are interested (and none opposed):
  • Gecko
  • Blink
  • WebKit was supportive during the CSSWG meeting, see minutes.
• Tests are written and can be reviewed and commented upon at:
  • https://phabricator.services.mozilla.com/D312564
• Implementation bugs are filed:
  • Chromium: https://issues.chromium.org/issues/545527313
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=2055599
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=321599
• Corresponding HTML AAM & ARIA in HTML issues & PRs:
• MDN issue is filed: …
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

/rendering.html ( diff )

[emilio]

@zcorpan / @annevk the thing I'm not sure about how to best define is the select:not(:listbox) thing. Any pointers?

[josepharhar]

the thing I'm not sure about how to best define is the select:not(:listbox) thing. Any pointers?

Since adding a pseudo-class for listbox vs dropdown select elements didn't work out, we just reference the drop-down box definition explicitly with prose like this example in the rendering section:

The following styles are expected to apply to select elements when they are being rendered as a drop-down box with native appearance or primitive appearance:

@namespace "http://www.w3.org/1999/xhtml";

select {
  display: inline-block;
}

[emilio]

The following styles are expected to apply to select elements when they are being rendered as a drop-down box with native appearance or primitive appearance:

@namespace "http://www.w3.org/1999/xhtml";

select {
  display: inline-block;
}

I did this but trimmed out the appearance thing since I think this should apply regardless of appearance probably, see w3c/csswg-drafts#14319.

If you object to that I'm happy to reintroduce it tho.

[emilio]

Ah, actually for base appearance it would be a no-op (by default) because that's a flex container with flex-wrap: nowrap. So probably worth keeping consistency with input / button and specifying it.

[josepharhar]

The title says "Remove anonymous button content-box" and I'm trying to figure out if that means we would have to change the structure of the shadowroot of the select element or other elements. Otherwise it just sounds like its just replacing style/layout magic with UA stylesheet rules, right?

[emilio]

The title says "Remove anonymous button content-box" and I'm trying to figure out if that means we would have to change the structure of the shadowroot of the select element or other elements.

No, there's no change to the shadow root. Blink and Gecko no longer have an anonymous box for performing the centering. This was originally the way we implemented the vertical centering (before align-content: center). See also #12702, which this change fixes.

Otherwise it just sounds like its just replacing style/layout magic with UA stylesheet rules, right?

Yes, that's correct.