Bug 61303 - [CSS3 multi-col] Floats at the bottom of columns can overwrite text, have strange spacing behavior
Summary: [CSS3 multi-col] Floats at the bottom of columns can overwrite text, have str...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-05-23 13:42 PDT by Brady Duga
Modified: 2022-07-12 14:41 PDT (History)
3 users (show)

See Also:


Attachments
Zip of columns fail html (28.64 KB, application/zip)
2011-05-23 13:42 PDT, Brady Duga
no flags Details
Screenshot of the problem (109.09 KB, image/png)
2011-05-23 13:44 PDT, Brady Duga
no flags Details
Patch (2.57 KB, patch)
2011-06-10 07:49 PDT, Alexandru Chiculita
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Brady Duga 2011-05-23 13:42:09 PDT
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.
Comment 1 Brady Duga 2011-05-23 13:44:24 PDT
Created attachment 94478 [details]
Screenshot of the problem
Comment 2 Alexandru Chiculita 2011-06-10 07:45:56 PDT
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.
Comment 3 Alexandru Chiculita 2011-06-10 07:49:24 PDT
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.
Comment 4 Brent Fulgham 2022-07-12 14:41:37 PDT
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.