1110305 - In a flex container whose main-size depends on its children, we resolve percent-valued margins only if they're horizontal

Status: NEW

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Bogdan Gribincea and I arrived at an interesting inconsistency in bug 958714 comment 21 - 22.

Basically: our flexbox layout implementation is inconsistent about whether it resolves percent margins/padding, when the container's size depends on the children's size.  It *does* resolve these percent values in the horizontal axis (e.g. margin-left, margin-right); it *does not* in the vertical axis (margin-top, margin-bottom).

As noted in bug 958714 comment 23, CSS 2.1 explicitly says that the layout is  *undefined* for percent margin-values, when the container's width depends on its content.
http://www.w3.org/TR/CSS2/box.html#margin-properties

We've apparently chosen to let those percent values resolve, after we've sized the container. However, for margins in the vertical axis (which only resolve against the container's height in a flexbox), we've chosen to treat those percent values as "0", which is closer to how CSS says to resolve percent height values when the container's height depends on content. (it says to treat them as "auto", in the case of the "height" property.)

I'm not sure if we should change either of our margin behaviors here to be consistent with the other one; just filing this bug for now, to cover the inconsistency.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

(Note that Chrome superficially seems to be more consistent than we are here -- i.e. they render "testcase 1" with space between the items in both the horizontal & vertical flexbox. That's because Chrome hasn't implemented http://dev.w3.org/csswg/css-flexbox/#item-margins yet -- they incorrectly resolve *all* percent-margins against the container's width (even vertical ones). That's covered in http://code.google.com/p/chromium/issues/detail?id=333533 .)