393528 - [reflow branch] shrink-to-fit float is made too wide to fit next to previous float

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Kevin Zhang]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20070723 Iceweasel/2.0.0.6 (Debian-2.0.0.6-0etch1)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a8pre) Gecko/2007082201 SeaMonkey/2.0a1pre

the layout of the page can not be rendered properly.

Reproducible: Always

Steps to Reproduce:
1.open http://chat.icq.com

Actual Results:  
the layout of the page is broken

Expected Results:  
page is rendered properly

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase #1

Comment 2

[Mats Palmgren (inactive)]

It's a regression from bug 300030.  I think we're calculating the
"available width" in 10.3.5 wrong - we should subtract the width of the
first float ("d1-2").
http://www.w3.org/TR/CSS21/visudet.html#float-width

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The available width very clearly doesn't say to subtract widths of other floats.  If that happens at all, it should be quirks mode only.  It causes very bad behavior with multiple floats.

That said, that's not the only possible reason other browsers might behave differently on that testcase.

Comment 4

[Mats Palmgren (inactive)]

(In reply to comment #3)
> The available width very clearly doesn't say to subtract widths of other
> floats.  

Right, I missed that somehow... So, the current layout looks to be
in accordance with the spec then.  FWIW, Safari/Webkit have the same layout
as Firefox trunk.  IE7 and Opera 9.20 places the floats to the right as
Firefox 1.5/2.0.

Comment 5

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Slightly more reduced testcase.

Comment 6

[Mats Palmgren (inactive)]

Attachment: reftest

I made a reftest from Testcase #2

Comment 7

[Martijn Wargers (dead)]

Attachment: testcase, deduced from flexmarkt.nl

It seems to me this is the bug why http://www.flexmarkt.nl/ is looking wrong now in current trunk build.

Comment 8

[philippe (part-time)]

(In reply to comment #7)

> It seems to me this is the bug why http://www.flexmarkt.nl/ is looking wrong
> now in current trunk build.

fwiw, that site displays the same in Safari 2.04, Safari 3beta and latest WebKit builds as it does on current Gecko trunk builds. 

Comment 9

[Pardal Freudenthal (:ShareBird)]

(In reply to comment #7)
> Created an attachment (id=285356) [details]
> testcase, deduced from flexmarkt.nl
> 
> It seems to me this is the bug why http://www.flexmarkt.nl/ is looking wrong
> now in current trunk build.
> 

So, just trying to understand this bug. 

The CSS 2.0 specifications recommend to give a width for every floated element. Actually in this testcase, if you give a width to the floated element, it will render properly.
According to CSS 2.1 specifications, this isn't necessary anymore and browsers should render it properly, meaning the floated element should take the width from content.

Since FF3.0 get parent's width I consider this is a bug...

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

CSS2.1 specifically says what information is used in the shrink-to-fit algorithm (although it doesn't define the algorithm precisely); the available width inside the containing block is used; the positions of other floats or space next to them are not.

Doing what you propose has very bad consequences when pages are resized, since floats can become very tall and narrow before "wrapping", breaking the layout much more severely than it would be if they "wrapped" earlier.

Comment 12

[Martijn Wargers (dead)]

I'm also seeing this problem on http://www.zdnet.be/news.cfm?id=88954&mxp=100 .

Comment 14

[Guilherme Lima]

All the testcases look exactly the same on Nightly, Chrome 31 and IE 11.

Comment 15

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I think INVALID is more accurate here, since we're choosing not to fix the bug as reported, and choosing not to fix matches the relevant specs (and other browsers).