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

RESOLVED DUPLICATE of bug 958714

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 958714
4 years ago
4 years ago

People

(Reporter: hunboy, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

4 years ago
Created attachment 8445079 [details]
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.
Flags: needinfo?(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
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
Duplicate of bug: 958714
Created attachment 8445288 [details]
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.
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.
Created attachment 8445294 [details]
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.
You need to log in before you can comment on or make changes to this bug.