1728976 - checkbox baseline is inconsistent; uses content-edge in inline layout, vs. border-edge in other layout modes (e.g. flexbox)

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Nathan Hammond]

Attachment: test.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0

Actual results:

When compared to a fully-inline element, checkbox descendants of a flexbox set to align on baseline do not appear on a consistent baseline.

Comment 1

[Nathan Hammond]

Attachment: Firefox Alignment Differences.png

Comment 2

[Nathan Hammond]

• Chrome: Alignment is consistent.
• Safari: https://bugs.webkit.org/show_bug.cgi?id=229856

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 4

[Daniel Holbert [:dholbert]]

Two notes:
(1) It's not necessarily valid to expect consistent baseline-alignment behavior in these two scenarios (inline layout vs. flex layout). See the note at https://www.w3.org/TR/css-align-3/#synthesize-baseline (emphasis added by me):

Note: The edges used to synthesize baselines from a box depend on their formatting context:
inline-level boxes synthesize from their margin edges [CSS-INLINE-3],
[...]
and grid and flex items synthesize from their border edges [CSS-GRID-1] [CSS-FLEXBOX-1].

So, for an element with a synthesized baseline (roughly: an element without a clearly-defined baseline that it could pull from its contents), it's correct for the baseline to be different. And Firefox and Chrome agree that it's different, in e.g. a modified version of your testcase where I change checkboxes to be simple red squares (with nontrivial margin) with the CSS rule input[type="checkbox]{appearance:none; border:2px solid red; margin-bottom:30px}.

(2) Having said that: I don't think this^ is actually the explanation for what's going on in your original testcase, since we don't seem to be using the checkbox's margin-edge in the inline-layout part (the top part) -- we instead seem to be using its content-box edge. So there must be something else going on.

Comment 5

[Daniel Holbert [:dholbert]]

It looks like our inline-layout checkbox baseline behavior (where we put their baseline at the bottom content edge, i.e. inside the border) dates back to bug 402940 comment 29 where dbaron proposed a patch to do that (and bug 402940 comment 32, where reviewer bz agreed).

I suspect this behavior (the implementation details of checkbox rendering) was undefined and probably continues to be ~undefined for the purposes of this bug. Still, it seems useful to have internal consistency between inline layout & non-inline-layout cases, as well as interoperability with Chromium, in the absence of a compelling reason to have these cases differ.

Personally I think it looks a tad nicer to have the checkbox's content-edge as the baseline (as we do in inline-layout), but Chrome seems to use the border-edge in all cases, and we use the border-edge in flexbox and probably other cases. So that provides some proof that we could probably change to use the border-edge for checkboxes in inline layout, without significantly breaking any web content.

For reference, the relevant code for inline layout is probably here (where we subtract off the bottom border/padding):
https://searchfox.org/mozilla-central/rev/21bc5c03762fc8547a8a0011a5769d130a8ecccf/layout/forms/nsCheckboxRadioFrame.cpp#99-101
...whereas for flexbox, we'll probably trigger nsLayoutUtils::GetFirstLineBaseline, which calls nsLayoutUtils::GetFirstLinePosition, which has some special cases for frames that have interesting contents, and in this case will fail and fall back to the "synthesize a baseline" codepath (which, per comment 4, will return the border-box end edge).