428335 - max-content width calculation doesn't account for possibility that two floats in different blocks could be next to each other

Status: RESOLVED WONTFIX

(Core :: Layout: Floats, defect)

Description

[Noah Lamson]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13
Build Identifier: Mozilla/5.0 (Windows ows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13

FF3 shows the advert falling below
FF2, IE6+ show the page complete
http://kizn-fm.fimc.net/

Reproducible: Always

Steps to Reproduce:
1. Go to site in FF2
2. Go to site in FF3
3.


Expected Results:  
FF3 should handle the CSS the same

Comment 1

[Noah Lamson]

Attachment: FF3 - CSS handling

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase #1 (blocks corresponds to those on the site)

Comment 3

[Mats Palmgren (inactive)]

The difference is that #contentContainer ends up with a content width of 768px
in Fx3 and 773px in Fx2.  This is enough to fit the first two floats (yellow
and lime) on the first line. To fit #cubeAd on the 2nd line we would need
#video:227px + padding:5px + #tuneGenie:236px + padding:5px + #cubeAd:300px
= 773px, which fits exactly in Fx2, but not in Fx3.

So, why is #contentContainer sized too small in Fx3?
(it's a width:auto float, so it's "shrink-to-fit")
http://www.w3.org/TR/CSS21/visudet.html#float-width

The outer-most container #frameworkLeft (red) has 792px and its child
#contentContainer has horizontal padding of 19px, thus 773px is the
"available width" for the content.  The difference seems to be in
how we calculate the preferred width in Fx2/Fx3.
IIRC, in Fx2 we reflow the content with an unconstrained width to
figure out the preferred width, which correctly results in 773px.
In Fx3 we ask each block its preferred width without reflowing,
which does not take into account how floats in different blocks
potentially could stack up against each other.

Comment 4

[Mats Palmgren (inactive)]

Attachment: Testcase #2 (minimal testcase)

Comment 5

[Ciprian Muresan [:cmuresan], Ecosystem QA]

Attachment: FF2vsFF45tc2.png

Hi,

User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0

This issue is still reproducible on the latest Firefox release (45 Build ID 20160303134406) and on the latest Nightly (48.0a1 Build ID 20160313030418). I've added a screenshot of how FF2 handles this versus FF45. IE seems to be the only browser to handle this right.

Thanks,
Cipri

Comment 6

[Daniel Holbert [:dholbert]]

Looks like things are still as-described in comment 2 -- we don't lay out #contentContainer wide enough for #cubeAd to fit on the second line.

However, at this point, all 3 major browser engines (Blink, WebKit, and Gecko) agree exactly on the layout of both testcases here. So our behavior seems to be the consensus behavior, even if it differed from FF2 15 years ago. So we probably can't change at this point without interop issues.

So: For lack of a strong reason to change here (and given the strong interop reason to preserve our existing behavior), let's close this as WONTFIX.