1487826 - empty <button> gets wrong position when being baseline-aligned (should use padding-box bottom, but doesn't)

Status: NEW

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

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase.
 2. Ask yourself: What part of the empty button (the teal box on the right) is aligned with the baseline of the text on the left?

ACTUAL RESULTS:
The vertical midpoint of the button (teal box) seems to be aligned with the baseline of the text.

EXPECTED RESULTS:
The bottom of the padding box (the bottom of the teal area) should be aligned with the baseline of the text.


This is the root cause of https://github.com/webcompat/web-bugs/issues/18396

Chrome, Edge, and Safari all give "EXPECTED RESULTS".
Firefox gives "ACTUAL RESULTS". I'm using Nightly 63.0a1 (2018-08-30) (64-bit)

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #0)
> EXPECTED RESULTS:
> The bottom of the padding box (the bottom of the teal area) should be
> aligned with the baseline of the text.
> [...]
> Chrome, Edge, and Safari all give "EXPECTED RESULTS".

Actually, Edge uses the bottom of the *border-box* (the thick black border) as the baseline here, whereas Chrome/Safari use the bottom of the padding box.

Not sure which is best; typically they're pretty close, because button borders aren't super thick.

I'm not sure where the spec text to cover this is, offhand (or if it exists).  FWIW, for flex-item baseline alignment, the spec says "If the item does not have a baseline in the necessary axis, then one is synthesized from the flex item’s border box."
https://drafts.csswg.org/css-flexbox-1/  (We're not doing flex-item baseline alignment here, but it seems like the behavior should probably be consistent between flex items & inline-level boxes.)

Comment 2

[Daniel Holbert [:dholbert]]

(It's possible we already have a bug on this, but I didn't find it with some quick searching.)

Comment 3

[Mats Palmgren (inactive)]

Attachment: Testcase #2

(In reply to Daniel Holbert [:dholbert] from comment #1)
> Actually, Edge uses the bottom of the *border-box*
> as the baseline here,

Nope, Edge uses the margin-box end edge for an empty button.

> whereas Chrome/Safari use the bottom of the padding box.

Nope, Chrome uses the content-box end edge for an empty button,
and Safari TP uses the content-box center (like Gecko).

Note also that both Chrome and Safari uses a non-empty <button>'s
first-baseline in an inline context, unlike regular inline-blocks
which use last-baseline. This seems wrong to me, especially since
<button> actually has display:inline-block in their UA sheets.

Comment 4

[Mats Palmgren (inactive)]

Fwiw, using first-baseline for <button> in Chrome/Safari is bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=690036

Comment 5

[Ksenia Berezina [:ksenia]]

Given that the site layout in https://github.com/webcompat/web-bugs/issues/18396 has changed and the issue no longer reproducible, resetting webcompat priority.