1431541 - Flex behavior different for input checkbox

Status: RESOLVED INVALID

(Core :: Layout, defect, P3)

Description

[andrewsmith]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20180103231032

Steps to reproduce:

Compare the two:

1. A flexed parent containing an input checkbox
1. A flexed parent containing a div that has an input checkbox

Comparison: https://jsbin.com/jazelekuhu/edit?html,css,output


Actual results:

For #1: vertically centers the checkbox
For #2: stays at the top


Expected results:

Both are expected to stay at the top. This behavior is observed in Chrome and Safari.

Comment 1

[Alice0775 White]

regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=a7000da4b6e2a79c5750dad71095865bdf75be04&tochange=db62e3ac853f7c4d8f045629358264ebf822398c

regressed by: Bug 605985

Comment 2

[Jet Villegas (inactive)]

[ Triage 2017/02/20: P3 ]

Comment 3

[Ryan VanderMeulen [:RyanVM]]

Mats, any chance you could take a look at this?

Comment 4

[Mats Palmgren (inactive)]

I tend to think our layout for this example is correct.
The checkbox is stretched and then renders centered in that size
as large as possible while keeping its aspect ratio.  It behaves
the same as type="button" or type="text" for example.  I don't
know why Chrome ignores stretching type="checkbox" specifically.
I don't see any support for that in any specs.  (If you manually
set the height, e.g.: <input type="checkbox" style="height:40px">
then you'll see that Chrome renders that the same as we do.)

dholbert knows Flexbox layout better than me though...

Comment 5

[Daniel Holbert [:dholbert]]

So the question here is really whether the implied/default "align-self:stretch" styling has any effect on the checkbox's height.

Here's a reduced testcase, comparing (implied) align-self:stretch to height:100%:

  https://jsfiddle.net/r60cpynb/

Chrome doesn't stretch the first checkbox. We do (making it look vertically centered). (The centering isn't quite the same between the left & right examples, because of box-sizing stuff & height:100%, but don't pay too much attention to that.)

Edge agrees with us, for what it's worth.

I'm guessing that something in Bug 605985 made us change our opinion internally about whether the checkbox (as a flex item) is considered to have a computed height of 'auto', which in turn impacts whether or not align-self:stretch gets applied or not, per https://drafts.csswg.org/css-align/#valdef-justify-self-stretch

Comment 6

[Mats Palmgren (inactive)]

Right, note that bug 605985 moves the "block/inline-size: 13px" under
the "%if defined(MOZ_WIDGET_ANDROID)..." conditional.
https://bugzilla.mozilla.org/attachment.cgi?id=8834700&action=diff#a/layout/style/res/forms.css_sec2
(and I think we've entirely removed it since then)

This is intentional since it's bogus to have styles like this in
the UA sheet, precisely because it inhibits stretching and other
CSS stuff that only applies when sizing is 'auto'.

I'd recommend closing this bug as invalid and filing a bug on Chrome.

Comment 7

[Daniel Holbert [:dholbert]]

Chrome & WebKit bugs already filed, actually:
  https://bugs.webkit.org/show_bug.cgi?id=177503
  https://bugs.chromium.org/p/chromium/issues/detail?id=768999

Also: I tested other input types and found that we do have this same issue (not stretching presumably due to non-'auto' height in UA stylesheet).  In Nightly on my system, input type="color" and "range" are not stretched in this example:
  https://jsfiddle.net/zjaox2hu/

I'll file a separate Firefox bug for that.

Comment 8

[Daniel Holbert [:dholbert]]

(I filed bug 1450117 for the issue identified at end of comment 7.)

Comment 9

[Daniel Holbert [:dholbert]]

(And it looks like this was basically a duplicate of bug 1377234, which had a slightly different testcase but the same expectations & underlying explanation)