Bug 164891

Summary:

The CSS 'columns' property when set on the <body> element makes short columns

Product:

WebKit

Reporter:

Bert Bos <bert>

Component:

New Bugs

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

commit-queue, esprehn+autocc, francois.remy.dev, glenn, hyatt, jcraig, jens, kondapallykalyan, simon.fraser, zalan

Priority:

Version:

Safari 10

Hardware:

Mac

OS:

OS X 10.11

Bug Depends on:

165667

Bug Blocks:

Attachments:

Description	Flags
A simple file with long content and 'columns: 10em' on the <body>	none
A similar file, but with the content in a <div> and the 'columns: 10em' on the <div>	none
Patch	none
Patch	none

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

Comment 2 2016-12-10 08:05:51 PST

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

alan

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

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

Comment 5 2016-12-10 10:46:57 PST

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

alan

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

Comment 8 2016-12-12 09:40:06 PST

Created attachment 296926 [details] Patch

alan

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.