Bug 269197 – [css-multicol-1] Nested multi-columns are laid out incorrectly

• Component: Layout and Rendering
• Status: NEW

[Brad Andalman]

Created attachment 469821 [details]
HTML exhibiting the bug (numbers out of order)

In the attached HTML, I have two nested multi-column layouts: the outer sets a specific `column-width` while the inner one sets the `column-count` to 2.

Without the inner multi-column layout, the numbers appear in order: 1 2 3 4.
With the inner multi-column layout (as attached), the numbers appear out of order: 1 3 2 4.

In Safari, it seems that the inner multi-column layout is not respecting the outer one. The inner multi-column layout appears to be laid out first – into 2 long columns - which is then split up by the outer multi-column layout into a number of different columns of a specific width. This renders correctly in Chrome and Firefox, however.

To submit a reduced case, I’ve included very little text. However, that makes it a little difficult to see the motivation, which is to create a layout like the index in a book. The outer multi-column layout would represent the pages, and the inner one would represent the two columns of text on each page. This is perhaps easier to visualize with more text. To see that, remove all the comments from the attached HTML. Then, in each gray box, we’d expect to see an ordered sequence: 1-6 in the first box, 7-12 in the second.

[Brad Andalman]

Created attachment 469822 [details]
Rendered HTML in Safari (incorrect), Chrome (correct), and Firefox (correct)

[Brad Andalman]

Created attachment 469824 [details]
Same HTML structure, but more text (for context)

Each gray box should have an ordered sequence of numbers: 1-6 for the first box, 7-12  for the second.

[Radar WebKit Bug Importer]

<rdar://problem/122980697>

[fantasai]

*** Bug 138159 has been marked as a duplicate of this bug. ***

[Frank Illenberger]

vote +1 from me