Closed Bug 1322698 Opened 5 years ago Closed 5 years ago

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

Categories

(Core :: Layout: Form Controls, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla53
Tracking Status
firefox53 --- fixed

People

(Reporter: mats, Assigned: mats)

Details

(Keywords: testcase, Whiteboard: [parity-chrome][parity-edge][parity-safari])

Attachments

(5 files, 1 obsolete file)

Attached file 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.
Attached file Testcase #2
Apparently, that behavior ONLY applies when 'appearance' is 'none'.
Summary: [css-align] The checkbox/radio baseline is derived from its content-box → [css-align] The checkbox/radio baseline is derived from its content-box with 'appearance:none'
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.))
Attachment #8818004 - Flags: review?(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...]
Flags: needinfo?(mats)
(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.)
Yeah, that's better, thanks.
Attachment #8818004 - Attachment is obsolete: true
Attachment #8818004 - Flags: review?(dholbert)
Flags: needinfo?(mats)
Attachment #8820480 - Flags: review?(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
Attachment #8820480 - Flags: review?(dholbert) → review+
Pushed by mpalmgren@mozilla.com:
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.
https://hg.mozilla.org/mozilla-central/rev/c718681647c7
https://hg.mozilla.org/mozilla-central/rev/326d947d6bb6
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla53
You need to log in before you can comment on or make changes to this bug.