Bug 164891 - The CSS 'columns' property when set on the <body> element makes short columns
Summary: The CSS 'columns' property when set on the <body> element makes short columns
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari 10
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: zalan
URL:
Keywords:
: 165666 165667 (view as bug list)
Depends on: 165667
Blocks:
  Show dependency treegraph
 
Reported: 2016-11-17 14:40 PST by Bert Bos
Modified: 2016-12-12 12:34 PST (History)
10 users (show)

See Also:


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, zalan
no flags Details | Formatted Diff | Diff
Patch (11.28 KB, patch)
2016-12-12 09:40 PST, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Bert Bos 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.
Comment 1 Bert Bos 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>
Comment 2 zalan 2016-12-10 08:05:51 PST
*** Bug 165667 has been marked as a duplicate of this bug. ***
Comment 3 zalan 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.
Comment 4 zalan 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.
Comment 5 zalan 2016-12-10 10:46:57 PST
*** Bug 165666 has been marked as a duplicate of this bug. ***
Comment 6 zalan 2016-12-10 22:09:52 PST
Created attachment 296853 [details]
Patch
Comment 7 Darin Adler 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.
Comment 8 zalan 2016-12-12 09:40:06 PST
Created attachment 296926 [details]
Patch
Comment 9 zalan 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.
Comment 10 WebKit Commit Bot 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>
Comment 11 WebKit Commit Bot 2016-12-12 12:18:29 PST
All reviewed patches have been landed.  Closing bug.
Comment 12 Francois Remy 2016-12-12 12:34:53 PST
Thanks!