1029463 - flexbox doesn't stretch with background-image cover and a widget

Status: RESOLVED DUPLICATE of bug 958714

(Core :: Layout, defect)

Description

[Robert Utasi [:hunboy]]

Attachment: testcase

I've reduced the testcase as well as possible.
The flex doesn't stretch with background-image-cover next to a widget.
This testcase works in webkit,IE,Opera classic but fails in Gecko.

Comment 1

[Daniel Holbert [:dholbert]]

Comment on attachment 8445079 [details]
testcase

>main > section > article.widget::before {
>    content:"";
>    display: block;
>    padding-top: 100%;
>}


This is the primary thing responsible for the rendering difference between Chrome and Firefox.

The flexbox spec says that percentages for vertical padding properties (like padding-top) are resolved against the flex container's height (and end up being 0, if the container's height depends on its content). Chrome has not yet implemented this, which is why we differ from them. I assume the same is true of IE and Opera Classic.

See https://bugzilla.mozilla.org/show_bug.cgi?id=958714#c3 and https://code.google.com/p/chromium/issues/detail?id=333533

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase edited to replace "padding-top:100%" with "0"

Here's the testcase with the padding-top:100% replaced with 0, which is what it should resolve to in the original testcase. With this change, Chrome's rendering matches Firefox.

Comment 4

[Daniel Holbert [:dholbert]]

Spec reference:
> Percentage margins and paddings on flex items are
> always resolved against their respective dimensions;
> unlike blocks, they do not always resolve against
> the inline dimension of their containing block.
http://dev.w3.org/csswg/css-flexbox/#item-margins

As noted above, Blink has not yet implemented this change, and I don't believe Presto (opera classic) ever implemented it either. (It was a ~mid-term tweak to the flexbox spec) Not sure about IE, but I assume they're still getting to it as well.

Attachment 8358774 [details] (from bug 958714) is a good testcase to demonstrate this -- it fails if any red is visible.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase edited to replace "padding-top:100%" with "400px"

Just for good measure, here's the testcase again, now with the padding-top:100% replaced with 400px, to approximate Chrome's (broken) behavior. (resolving the padding to something nonzero)

Firefox matches the Chrome behavior (and the author's expected behavior) in this case.

This confirms that bug 958714 is really the only issue here.