Title: [209719] trunk
Revision
209719
Author
[email protected]
Date
2016-12-12 12:17:50 -0800 (Mon, 12 Dec 2016)

Log Message

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.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (209718 => 209719)


--- trunk/LayoutTests/ChangeLog	2016-12-12 19:55:12 UTC (rev 209718)
+++ trunk/LayoutTests/ChangeLog	2016-12-12 20:17:50 UTC (rev 209719)
@@ -1,3 +1,13 @@
+2016-12-12  Zalan Bujtas  <[email protected]>
+
+        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.
+
 2016-12-11  Dave Hyatt  <[email protected]>
 
         [CSS Parser] Implement deferred parsing of properties, @media, @supports and @keyframes

Added: trunk/LayoutTests/fast/multicol/columns-on-body-expected.html (0 => 209719)


--- 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)
@@ -0,0 +1,18 @@
+<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>

Added: trunk/LayoutTests/fast/multicol/columns-on-body.html (0 => 209719)


--- 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)
@@ -0,0 +1,19 @@
+<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>

Modified: trunk/Source/WebCore/ChangeLog (209718 => 209719)


--- 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)
@@ -1,3 +1,25 @@
+2016-12-12  Zalan Bujtas  <[email protected]>
+
+        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):
+
 2016-12-11  Dave Hyatt  <[email protected]>
 
         [CSS Parser] Implement deferred parsing of properties, @media, @supports and @keyframes

Modified: trunk/Source/WebCore/rendering/RenderBlockFlow.cpp (209718 => 209719)


--- 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)
@@ -3931,13 +3931,15 @@
     
     // We don't actually update any of the variables. We just subclassed to adjust our column height.
     if (RenderMultiColumnFlowThread* flowThread = multiColumnFlowThread()) {
-        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;
+        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);
     } else if (is<RenderFlowThread>(*this)) {
         RenderFlowThread& flowThread = downcast<RenderFlowThread>(*this);
 
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to