Bug 122754

Summary: [New Multicolumn] Child top margin sometimes ignored for column balancing
Product: WebKit Reporter: Morten Stenshorne <mstensho>
Component: Layout and RenderingAssignee: Morten Stenshorne <mstensho>
Status: RESOLVED FIXED    
Severity: Normal CC: andymercer, commit-queue, esprehn+autocc, glenn, hyatt, kondapallykalyan, WebkitBugTracker
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Test case
none
Patch none

Description Morten Stenshorne 2013-10-14 08:10:45 PDT 
During the first layout pass, the code incorrectly believes that the element ends up in the next column (or page), and eats the margin. Apart from broken layout, this may even cause an assertion failure:

ASSERTION FAILED: currentMinSpaceShortage != LayoutUnit::max()
../../Source/WebCore/rendering/RenderMultiColumnSet.cpp(112) : bool WebCore::RenderMultiColumnSet::calculateBalancedHeight(bool)

... because the column heights don't become tall enough in the initial balancing pass.
Comment 1 Morten Stenshorne 2013-10-14 08:11:58 PDT 
Created attachment 214152 [details]
Test case
Comment 2 Morten Stenshorne 2014-03-28 08:46:41 PDT 
Corresponding bug in Blink: http://code.google.com/p/chromium/issues/detail?id=353587
Comment 3 Morten Stenshorne 2014-03-28 09:16:54 PDT 
Created attachment 228054 [details]
Patch
Comment 4 Morten Stenshorne 2014-03-28 09:18:22 PDT 
@dave - can you review this, please? I couldn't really avoid fixing this one while working on spanners support.
Comment 5 Dave Hyatt 2014-04-04 11:19:44 PDT 
Comment on attachment 228054 [details]
Patch

r=me
Comment 6 WebKit Commit Bot 2014-04-08 11:20:14 PDT 
Comment on attachment 228054 [details]
Patch

Clearing flags on attachment: 228054

Committed r166938: <http://trac.webkit.org/changeset/166938>
Comment 7 WebKit Commit Bot 2014-04-08 11:20:17 PDT 
All reviewed patches have been landed.  Closing bug.
Comment 8 Andy Mercer 2014-05-19 12:42:47 PDT 
This was landed back in April, but it appears to still be broken. See:

http://stackoverflow.com/questions/23745077/block-elements-inside-multicolumn-layout-padding-issue-in-chrome-ie

http://jsfiddle.net/6cVqZ/
Comment 9 Morten Stenshorne 2014-08-27 12:47:58 PDT 
That's unrelated to this bug, but it seems that someone answered your stackoverflow question while I was gone. The clue is to use break-inside:avoid . This property doesn't yet exist in Blink, though (and I assume the same is still the case for WebKit as well). You have to say li { -webkit-column-break-inside:avoid; } instead.