<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[209719] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/209719">209719</a></dd>
<dt>Author</dt> <dd>zalan@apple.com</dd>
<dt>Date</dt> <dd>2016-12-12 12:17:50 -0800 (Mon, 12 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>The CSS 'columns' property when set on the <body> element makes short columns
https://bugs.webkit.org/show_bug.cgi?id=164891
Reviewed by Darin Adler and David Hyatt.
Source/WebCore:
Currently when the body has auto height, we use the height of the viewport as
the available height for the columns defined on the body element.
This is the desired behaviour for paginated content.
However in case of a simple, non-paginated multicolumn context, we should let the columns grow beyond
the viewport vertically. This is also what other browsers do.
This patch sets the available height on columns (in non-paginated context) only if the logical height
is defined (we are right before layout, so applying non-defined values does not make much sense anyway).
The reason why it is only broken on the <body> is because it stretches to the viewport by
default (see stretchesToViewport()) while other block renderers do not.
Test: fast/multicol/columns-on-body.html
* rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::checkForPaginationLogicalHeightChange):
LayoutTests:
* fast/multicol/columns-on-body-expected.html: Added.
* fast/multicol/columns-on-body.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBlockFlowcpp">trunk/Source/WebCore/rendering/RenderBlockFlow.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastmulticolcolumnsonbodyexpectedhtml">trunk/LayoutTests/fast/multicol/columns-on-body-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastmulticolcolumnsonbodyhtml">trunk/LayoutTests/fast/multicol/columns-on-body.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209718 => 209719)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-12 19:55:12 UTC (rev 209718)
+++ trunk/LayoutTests/ChangeLog 2016-12-12 20:17:50 UTC (rev 209719)
</span><span class="lines">@@ -1,3 +1,13 @@
</span><ins>+2016-12-12 Zalan Bujtas <zalan@apple.com>
+
+ The CSS 'columns' property when set on the <body> element makes short columns
+ https://bugs.webkit.org/show_bug.cgi?id=164891
+
+ Reviewed by Darin Adler and David Hyatt.
+
+ * fast/multicol/columns-on-body-expected.html: Added.
+ * fast/multicol/columns-on-body.html: Added.
+
</ins><span class="cx"> 2016-12-11 Dave Hyatt <hyatt@apple.com>
</span><span class="cx">
</span><span class="cx"> [CSS Parser] Implement deferred parsing of properties, @media, @supports and @keyframes
</span></span></pre></div>
<a id="trunkLayoutTestsfastmulticolcolumnsonbodyexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/multicol/columns-on-body-expected.html (0 => 209719)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/multicol/columns-on-body-expected.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/columns-on-body-expected.html 2016-12-12 20:17:50 UTC (rev 209719)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+<html>
+<head>
+<title>This tests columns on the body element.</title>
+<style>
+body {
+ font-size: 30px;
+ width: 600px;
+}
+</style>
+</head>
+<body>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur a magna sit amet elementum. Sed accumsan sem quis ipsum aliquet faucibus. Maecenas molestie aliquam augue, sed iaculis quam. Aenean condimentum sapien a facilisis scelerisque. Sed dapibus in risus vel molestie. Fusce sodales viverra massa, sit amet ornare tortor blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut elit venenatis, vulputate tellus et, maximus felis.
+Nam ligula magna, laoreet eu ultrices sed, mollis sit amet sapien. Aliquam vulputate consequat quam, eget imperdiet libero. Praesent a est pulvinar, egestas nunc eu, blandit lacus. Morbi lobortis quam at risus sagittis, quis vehicula ex euismod. Donec imperdiet, enim placerat finibus tempor, sem felis dapibus ante, at placerat tortor erat interdum ante. Etiam ornare ullamcorper nibh, ut facilisis urna rhoncus at. Phasellus tempus orci ex, a porttitor ante laoreet a. Suspendisse sed est ut ante ultricies malesuada. Vivamus rhoncus aliquet est eu rutrum. Donec hendrerit, diam vel sollicitudin ullamcorper, urna massa dictum odio, hendrerit laoreet magna velit vel tellus. Vestibulum non lectus neque. Aliquam consequat consequat consequat.
+Donec sapien diam, gravida in sapien eget, lacinia porta nulla. Suspendisse volutpat laoreet varius. Fusce arcu orci, dignissim ac mollis vitae, rhoncus non erat. Cras eu lorem scelerisque, luctus risus vel, dignissim ipsum. Suspendisse ac suscipit libero. Donec aliquam, metus at dapibus consequat, metus augue aliquam magna, in scelerisque diam odio non urna. Aenean porttitor commodo diam a dignissim. Phasellus eu lectus vel erat vehicula scelerisque molestie eu erat. Cras egestas quam augue, sed mattis nulla iaculis eget. Nunc risus tellus, fermentum vitae sagittis et, viverra venenatis nibh. Duis blandit velit nec tortor posuere lobortis eu nec ante. Sed lectus eros, rutrum et maximus a, ullamcorper non metus. Donec iaculis in purus ac feugiat.
+Suspendisse fringilla non dui nec interdum. Etiam mollis enim a leo tempus scelerisque. Pellentesque sodales convallis lorem. Aenean commodo augue lacus, nec egestas ex ornare rhoncus. Nam at libero tempor, pellentesque sem sollicitudin, suscipit sem. Mauris lectus urna, volutpat eget est eu, cursus dictum lectus. Quisque porttitor mattis est quis pretium. Nunc porta, sem nec efficitur placerat, felis leo vulputate purus, eu tristique diam augue at lorem. Sed et massa aliquet, aliquam massa in, maximus enim. Phasellus eu rhoncus lacus, sit amet fermentum mauris.
+Aenean in lorem venenatis, finibus lacus lobortis, accumsan turpis. Aliquam sed pretium sapien. Donec hendrerit egestas ligula vitae facilisis. Cras ullamcorper, mi eu sollicitudin volutpat, arcu nisi pharetra erat, id volutpat mi ligula ultricies turpis. Etiam auctor vitae orci et sodales. In viverra turpis fermentum ex auctor, sit amet sollicitudin sem facilisis. Phasellus at viverra ligula. Donec non vestibulum leo. Nunc vestibulum, sapien in convallis bibendum, arcu libero euismod tellus, sit amet varius odio urna at odio. Nam at ante nulla. Cras eu efficitur diam. Nullam sodales bibendum posuere.
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastmulticolcolumnsonbodyhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/multicol/columns-on-body.html (0 => 209719)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/multicol/columns-on-body.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/columns-on-body.html 2016-12-12 20:17:50 UTC (rev 209719)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+<html>
+<head>
+<title>This tests columns on the body element.</title>
+<style>
+body {
+ font-size: 30px;
+ columns: 600px;
+ width: 600px;
+}
+</style>
+</head>
+<body>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur a magna sit amet elementum. Sed accumsan sem quis ipsum aliquet faucibus. Maecenas molestie aliquam augue, sed iaculis quam. Aenean condimentum sapien a facilisis scelerisque. Sed dapibus in risus vel molestie. Fusce sodales viverra massa, sit amet ornare tortor blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut elit venenatis, vulputate tellus et, maximus felis.
+Nam ligula magna, laoreet eu ultrices sed, mollis sit amet sapien. Aliquam vulputate consequat quam, eget imperdiet libero. Praesent a est pulvinar, egestas nunc eu, blandit lacus. Morbi lobortis quam at risus sagittis, quis vehicula ex euismod. Donec imperdiet, enim placerat finibus tempor, sem felis dapibus ante, at placerat tortor erat interdum ante. Etiam ornare ullamcorper nibh, ut facilisis urna rhoncus at. Phasellus tempus orci ex, a porttitor ante laoreet a. Suspendisse sed est ut ante ultricies malesuada. Vivamus rhoncus aliquet est eu rutrum. Donec hendrerit, diam vel sollicitudin ullamcorper, urna massa dictum odio, hendrerit laoreet magna velit vel tellus. Vestibulum non lectus neque. Aliquam consequat consequat consequat.
+Donec sapien diam, gravida in sapien eget, lacinia porta nulla. Suspendisse volutpat laoreet varius. Fusce arcu orci, dignissim ac mollis vitae, rhoncus non erat. Cras eu lorem scelerisque, luctus risus vel, dignissim ipsum. Suspendisse ac suscipit libero. Donec aliquam, metus at dapibus consequat, metus augue aliquam magna, in scelerisque diam odio non urna. Aenean porttitor commodo diam a dignissim. Phasellus eu lectus vel erat vehicula scelerisque molestie eu erat. Cras egestas quam augue, sed mattis nulla iaculis eget. Nunc risus tellus, fermentum vitae sagittis et, viverra venenatis nibh. Duis blandit velit nec tortor posuere lobortis eu nec ante. Sed lectus eros, rutrum et maximus a, ullamcorper non metus. Donec iaculis in purus ac feugiat.
+Suspendisse fringilla non dui nec interdum. Etiam mollis enim a leo tempus scelerisque. Pellentesque sodales convallis lorem. Aenean commodo augue lacus, nec egestas ex ornare rhoncus. Nam at libero tempor, pellentesque sem sollicitudin, suscipit sem. Mauris lectus urna, volutpat eget est eu, cursus dictum lectus. Quisque porttitor mattis est quis pretium. Nunc porta, sem nec efficitur placerat, felis leo vulputate purus, eu tristique diam augue at lorem. Sed et massa aliquet, aliquam massa in, maximus enim. Phasellus eu rhoncus lacus, sit amet fermentum mauris.
+Aenean in lorem venenatis, finibus lacus lobortis, accumsan turpis. Aliquam sed pretium sapien. Donec hendrerit egestas ligula vitae facilisis. Cras ullamcorper, mi eu sollicitudin volutpat, arcu nisi pharetra erat, id volutpat mi ligula ultricies turpis. Etiam auctor vitae orci et sodales. In viverra turpis fermentum ex auctor, sit amet sollicitudin sem facilisis. Phasellus at viverra ligula. Donec non vestibulum leo. Nunc vestibulum, sapien in convallis bibendum, arcu libero euismod tellus, sit amet varius odio urna at odio. Nam at ante nulla. Cras eu efficitur diam. Nullam sodales bibendum posuere.
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209718 => 209719)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-12-12 19:55:12 UTC (rev 209718)
+++ trunk/Source/WebCore/ChangeLog 2016-12-12 20:17:50 UTC (rev 209719)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2016-12-12 Zalan Bujtas <zalan@apple.com>
+
+ The CSS 'columns' property when set on the <body> element makes short columns
+ https://bugs.webkit.org/show_bug.cgi?id=164891
+
+ Reviewed by Darin Adler and David Hyatt.
+
+ Currently when the body has auto height, we use the height of the viewport as
+ the available height for the columns defined on the body element.
+ This is the desired behaviour for paginated content.
+ However in case of a simple, non-paginated multicolumn context, we should let the columns grow beyond
+ the viewport vertically. This is also what other browsers do.
+ This patch sets the available height on columns (in non-paginated context) only if the logical height
+ is defined (we are right before layout, so applying non-defined values does not make much sense anyway).
+ The reason why it is only broken on the <body> is because it stretches to the viewport by
+ default (see stretchesToViewport()) while other block renderers do not.
+
+ Test: fast/multicol/columns-on-body.html
+
+ * rendering/RenderBlockFlow.cpp:
+ (WebCore::RenderBlockFlow::checkForPaginationLogicalHeightChange):
+
</ins><span class="cx"> 2016-12-11 Dave Hyatt <hyatt@apple.com>
</span><span class="cx">
</span><span class="cx"> [CSS Parser] Implement deferred parsing of properties, @media, @supports and @keyframes
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBlockFlowcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBlockFlow.cpp (209718 => 209719)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBlockFlow.cpp 2016-12-12 19:55:12 UTC (rev 209718)
+++ trunk/Source/WebCore/rendering/RenderBlockFlow.cpp 2016-12-12 20:17:50 UTC (rev 209719)
</span><span class="lines">@@ -3931,13 +3931,15 @@
</span><span class="cx">
</span><span class="cx"> // We don't actually update any of the variables. We just subclassed to adjust our column height.
</span><span class="cx"> if (RenderMultiColumnFlowThread* flowThread = multiColumnFlowThread()) {
</span><del>- LogicalExtentComputedValues computedValues;
- computeLogicalHeight(LayoutUnit(), logicalTop(), computedValues);
- LayoutUnit columnHeight = computedValues.m_extent - borderAndPaddingLogicalHeight() - scrollbarLogicalHeight();
- LayoutUnit oldHeightAvailable = flowThread->columnHeightAvailable();
- flowThread->setColumnHeightAvailable(std::max<LayoutUnit>(columnHeight, 0));
- if (oldHeightAvailable != flowThread->columnHeightAvailable())
- relayoutChildren = true;
</del><ins>+ LayoutUnit newColumnHeight;
+ if (hasDefiniteLogicalHeight() || view().frameView().pagination().mode != Pagination::Unpaginated) {
+ LogicalExtentComputedValues computedValues;
+ computeLogicalHeight(LayoutUnit(), logicalTop(), computedValues);
+ newColumnHeight = std::max<LayoutUnit>(computedValues.m_extent - borderAndPaddingLogicalHeight() - scrollbarLogicalHeight(), 0);
+ if (flowThread->columnHeightAvailable() != newColumnHeight)
+ relayoutChildren = true;
+ }
+ flowThread->setColumnHeightAvailable(newColumnHeight);
</ins><span class="cx"> } else if (is<RenderFlowThread>(*this)) {
</span><span class="cx"> RenderFlowThread& flowThread = downcast<RenderFlowThread>(*this);
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>