1322698 - [css-align] The checkbox/radio baseline is derived from its content-box with 'appearance:none'

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Mats Palmgren (inactive)]

Attachment: Testcase

Edge, Chrome and Safari are using the margin-box (in a block context).
I think that is what the spec says:
https://drafts.csswg.org/css-align-3/#baseline-terms

We should do the same for compatibility.

Comment 1

[Mats Palmgren (inactive)]

Attachment: Screenshot of Testcase in a few UAs

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Apparently, that behavior ONLY applies when 'appearance' is 'none'.

Comment 3

[Mats Palmgren (inactive)]

Attachment: Synthesize an 'appearance:none' checkbox/radio baseline from its margin-box by default (in an inline context).

Note: this is lower prio to review since it's not necessary for v52 (IMO).

The baseline behavior here is quite bizarre, if a checkbox/radio is themed
then it uses its content-box, otherwise (appearance:none) then it uses
the margin-box (in a block context - it will be the border-box if it's
a flex/grid item).  But this is what other UAs do so...

I had to keep the old behavior intact for Android though, because
checkbox/radio controls have 'appearance:none' *by default* there.
I suspect that might cause web-compat problems if we change it
to use the margin-box by default.  (Which implies that our Android
browser probably is *already* displaying this edge case differently
from desktop UAs.  (I haven't tested mobile UAs from other vendors
though, so I don't know if they have similar issues.))

Comment 4

[Mats Palmgren (inactive)]

Attachment: reftest

https://treeherder.mozilla.org/#/jobs?repo=try&revision=2f85fdd77882dbc83f96763f95ac0207772fc631&exclusion_profile=false

Comment 5

[Daniel Holbert [:dholbert]]

Comment on attachment 8818004 [details] [diff] [review]
Synthesize an 'appearance:none' checkbox/radio baseline from its margin-box by default (in an inline context).

Review of attachment 8818004 [details] [diff] [review]:
-----------------------------------------------------------------

::: layout/forms/nsFormControlFrame.cpp
@@ +107,5 @@
> +      // so the different layout for appearance:none we have on other platforms
> +      // doesn't work here. *shrug*
> +      || true
> +#endif
> +      ) {

I think this might be better if you reversed the logic? Both from an understandability & from a code-churn perspective.  (And it'd be nice to avoid the "|| true" hack in the if-condition.)

How about something like:

#if !defined(MOZ_WIDGET_ANDROID)
  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
    [...appearance:none-specific code here...]
  } 
#endif
  [...old code here...]

Comment 6

[Daniel Holbert [:dholbert]]

(This conveniently would mean you could avoid reindenting all of the existing code, which is nice for blame-preservation. That's not the chief goal here, but it's a happy side-effect of flipping the logic.)

Comment 7

[Mats Palmgren (inactive)]

Attachment: Synthesize an 'appearance:none' checkbox/radio baseline from its margin-box by default (in an inline context).

Yeah, that's better, thanks.

Comment 8

[Daniel Holbert [:dholbert]]

Comment on attachment 8820480 [details] [diff] [review]
Synthesize an 'appearance:none' checkbox/radio baseline from its margin-box by default (in an inline context).

Review of attachment 8820480 [details] [diff] [review]:
-----------------------------------------------------------------

r=me

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c718681647c7
Synthesize an 'appearance:none' checkbox/radio baseline from its margin-box by default (in an inline context).  r=dholbert
https://hg.mozilla.org/integration/mozilla-inbound/rev/326d947d6bb6
Reftest for 'appearance:none' checkbox/radio baseline alignment.

Comment 10

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/c718681647c7
https://hg.mozilla.org/mozilla-central/rev/326d947d6bb6