69960 - Overlap of two constrained right-floats on the same 'line' [FLOAT]

Status: VERIFIED FIXED

(Core :: Layout, defect)

Description

[Tim Hunt]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Win98; en-US; 0.8) Gecko/20010222
BuildID:    2001022209

In a situation where there are two side-by-side right floats. If you shrink the
width of the browser window enough, they no longer fit on one line, so they
wrap. At this point the two images should be both be right aligned on the right
margin. In fact, the second one does not get aligned properly.

Reproducible: Always
Steps to Reproduce:
1. Load the URL referred to above.
2. Look at the two test-cases on the page. They are separated by a horizontal rule.
3. Make the page narrower until the two floats no longer fit side-by-side (about
200px wide). (Note: to perform this step you may have to expand your side-bar!)

Actual Results:  In the top test: The second box moves down to below the first
(correct) but its horizontal position is wrong, it seems to stay a constant
distance from the left margin.

In the second test: The second box does not wrap onto the next line at all.
Instead the two boxes start to overlap.

Expected Results:  Whe the page is too narrow for the images to be displayed
side-by-side, the images should appear one above the other, right aligned
against the right margin.

Note that the top test gets this correct for a narrow range of page-widths just
after the wrap happens.

The original page on which I spotted the bug is:

http://www.britgo.org/clubs/mk/mk.html (at the bottom of the page)

The bug only seems to appear if the content of the float is sized automatically,
e.g. an image or some text with no width or height style rules.

If you replace:

<span class="floatright">XXXXX</span>

with

<img class="floatright" ... />

the page behaves properly.

If you replace it with

<span class="floatright"><img ... /></span>

then the bug occurs.

The difference between the two tests is that in the first test, the float is
given a 10px left margin.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Ian, is this related to one of our other float bugs?

Comment 2

[Hixie (not reading bugmail)]

The first problem (with the margins) is bug 59200.
The second problem appears to be new though. 

T.J.Hunt: Good catches! I thought we'd caught all the floater bugs, so 
congratulations on finding a new one!!! Cheers!

Comment 3

[Hixie (not reading bugmail)]

Attachment: Simple testcase. Resize the window to see the effect.

Comment 4

[Marc Attinasi]

Accepting: hmm - why doesn't the second float simply move down to the next line 
when there is not enough room for it on the first line? 

Comment 5

[Chris Waterson]

The last patch in bug 59200 fixes this.

Comment 6

[Chris Waterson]

Fixed with checkin for bug 59200.

Comment 7

[Hixie (not reading bugmail)]

VERIFIED FIXED, weeee!