RESOLVED FIXED 164891
The CSS 'columns' property when set on the <body> element makes short columns 
https://bugs.webkit.org/show_bug.cgi?id=164891
Summary The CSS 'columns' property when set on the <body> element makes short columns
Bert Bos
Reported 2016-11-17 14:40:06 PST
Created attachment 295088 [details] A simple file with long content and 'columns: 10em' on the <body> The 'columns' property works differently on the <body> element than on other elements. In particular, it makes short columns and causes overflow to the right, as if a small 'height' was set on the body.
Attachments
A simple file with long content and 'columns: 10em' on the <body> (1.02 KB, text/html)
2016-11-17 14:40 PST, Bert Bos 		no flags
Details
A similar file, but with the content in a <div> and the 'columns: 10em' on the <div> (1.03 KB, text/html)
2016-11-17 14:42 PST, Bert Bos 		no flags
Details
Patch (11.29 KB, patch)
2016-12-10 22:09 PST, alan baradlay 		no flags
DetailsFormatted DiffDiff
Patch (11.28 KB, patch)
2016-12-12 09:40 PST, alan baradlay 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Bert Bos
Comment 1 2016-11-17 14:42:16 PST
Created attachment 295089 [details] A similar file, but with the content in a <div> and the 'columns: 10em' on the <div>
alan baradlay
Comment 2 2016-12-10 08:05:51 PST
*** Bug 165667 has been marked as a duplicate of this bug. ***
alan baradlay
Comment 3 2016-12-10 08:23:13 PST
->working case with <div> (B)lock/(I)nline/I(N)line-block, (A)bsolute/Fi(X)ed/(R)elative/Stic(K)y, (F)loating, (O)verflow clip, Anon(Y)mous, (G)enerated, has(L)ayer, (C)omposited, (+)Dirty style, (+)Dirty layout B---YGL- --* RenderView (0.00, 0.00) (252.00, 584.00) renderer->(0x1107809c0) B-----L- -- HTML RenderBlock (0.00, 0.00) (252.00, 880.00) renderer->(0x122fe1000) node->(0x12316d888) B------- -- BODY RenderBody (8.00, 8.00) (236.00, 864.00) renderer->(0x122fe1e38) node->(0x12316d958) B-----L- -- DIV RenderBlock (0.00, 0.00) (236.00, 864.00) renderer->(0x122fe1af0) node->(0x12316d9c0) B---YGL- -- RenderMultiColumnFlowThread (0.00, 0.00) (236.00, 864.00) renderer->(0x11076adc0) [Rs:0x123160000 Re:0x123160000] B---YG-- -- RenderMultiColumnSet (0.00, 0.00) (236.00, 864.00) renderer->(0x123160000) ->failing case with <body> (B)lock/(I)nline/I(N)line-block, (A)bsolute/Fi(X)ed/(R)elative/Stic(K)y, (F)loating, (O)verflow clip, Anon(Y)mous, (G)enerated, has(L)ayer, (C)omposited, (+)Dirty style, (+)Dirty layout B---YGL- --* RenderView (0.00, 0.00) (252.00, 584.00) renderer->(0x110763a00) B-----L- -- HTML RenderBlock (0.00, 0.00) (252.00, 584.00) renderer->(0x10e2dac08) node->(0x12316d208) B-----L- -- BODY RenderBody (8.00, 8.00) (236.00, 568.00) renderer->(0x10e2da7a8) node->(0x12316d2d8) B---YGL- -- RenderMultiColumnFlowThread (0.00, 0.00) (236.00, 874.00) renderer->(0x11076b600) [Rs:0x1231601a0 Re:0x1231601a0] B---YG-- -- RenderMultiColumnSet (0.00, 0.00) (236.00, 568.00) renderer->(0x1231601a0) The column set's height is incorrect when the body owns the flowthread -> horizontal scrolling.
alan baradlay
Comment 4 2016-12-10 10:46:16 PST
When the <div> owns the flowthread, no height constraint is set (setColumnHeightAvailable) while in case of <body> we set the viewport as the height constraint -> column split. When the height constraint is not set, the <body> cases works fine. -it also fixes the https://www.w3.org/Style/CSS/Planet/ case; bug 165666.
alan baradlay
Comment 5 2016-12-10 10:46:57 PST
*** Bug 165666 has been marked as a duplicate of this bug. ***
alan baradlay
Comment 6 2016-12-10 22:09:52 PST
Created attachment 296853 [details] Patch
Darin Adler
Comment 7 2016-12-11 17:06:55 PST
Comment on attachment 296853 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=296853&action=review > Source/WebCore/rendering/RenderBlockFlow.cpp:3934 > + std::optional<LayoutUnit> newColumnHeight; The code below uses 0 when this is not set. So I think this can just be LayoutUnit and initialized to 0. The code isn’t better using an optional. > Source/WebCore/rendering/RenderBlockFlow.cpp:3937 > + LogicalExtentComputedValues computedValues; > + computeLogicalHeight(LayoutUnit(), logicalTop(), computedValues); Not new, but seems like this we should change this function to use a return value instead of an out argument.
alan baradlay
Comment 8 2016-12-12 09:40:06 PST
Created attachment 296926 [details] Patch
alan baradlay
Comment 9 2016-12-12 09:52:41 PST
(In reply to comment #7) > Comment on attachment 296853 [details] > Patch > > View in context: > https://bugs.webkit.org/attachment.cgi?id=296853&action=review > > > Source/WebCore/rendering/RenderBlockFlow.cpp:3934 > > + std::optional<LayoutUnit> newColumnHeight; > > The code below uses 0 when this is not set. So I think this can just be > LayoutUnit and initialized to 0. The code isn’t better using an optional. Done. > > > Source/WebCore/rendering/RenderBlockFlow.cpp:3937 > > + LogicalExtentComputedValues computedValues; > > + computeLogicalHeight(LayoutUnit(), logicalTop(), computedValues); > > Not new, but seems like this we should change this function to use a return > value instead of an out argument. Good point. I'll address it in a separate patch.
WebKit Commit Bot
Comment 10 2016-12-12 12:18:23 PST
Comment on attachment 296926 [details] Patch Clearing flags on attachment: 296926 Committed r209719: <http://trac.webkit.org/changeset/209719>
WebKit Commit Bot
Comment 11 2016-12-12 12:18:29 PST
All reviewed patches have been landed. Closing bug.
Francois Remy
Comment 12 2016-12-12 12:34:53 PST
Thanks!
Note You need to log in before you can comment on or make changes to this bug.