Bug 61303 – [CSS3 multi-col] Floats at the bottom of columns can overwrite text, have strange spacing behavior

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Brady Duga]

Created attachment 94477 [details]
Zip of columns fail html

SVN Rev. 87089, 534+

At least in some circumstances floats at the bottom of columns exhibit odd behavior. There may be more then 1 bug here, but I am not entirely sure. In the attached archive you can see the problem. It looks like space is being made in the column to accomodate the image by both moving the wrapping text to "properly" wrap and pushing down the top of the lines of text that start the wrap to make space vertically in the column. Then that gets ignored and the image is placed in the second column, partially obscuring the text. I would expect the image to be moved to the second column, with the text wrapping it their, and no extra space (horizontal or vertical) in the first column.  The is the behavior exhibited in FireFox 4.0.1.

[Brady Duga]

Created attachment 94478 [details]
Screenshot of the problem

[Alexandru Chiculita]

There are two issues:

1. When a float is moved to the following column, it also moves the line of text to that new column, although it is not necessary. The current line would only get wider, because the float just moved away from it. That's why there's a big empty space in the first column.

2. Because of the moving float, the layout is done multiple times. It tries to calculate the height of the column, so that it gets a perfect balance between the columns. The layout is first done with a column height of 432 while the second layout is done with a height of 441 pixels. The problem is that second time, it doesn't invalidate the lines correctly, it just moves the float from one region to another, but it doesn't take into account the change in strut height. That's why the text and the float get out of sync.

[Alexandru Chiculita]

Created attachment 96744 [details]
Patch

Just saved my work for this bug. I didn't had time to add a new test, nor run the tests. I will send for review when ready.

[Brent Fulgham]

Safari and Chrome display this properly, with the image in the proper space and text flowing around it. Firefox seems to lack the multi-column behavior.