Rendering flexbox children across columns
authorhyatt@apple.com <hyatt@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 13 Apr 2017 16:37:00 +0000 (16:37 +0000)
committerhyatt@apple.com <hyatt@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 13 Apr 2017 16:37:00 +0000 (16:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=164166
<rdar://problem/29055587>

Reviewed by Zalan Bujtas.

Source/WebCore:

Added fast/multicol/flexbox-rows.html

* rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::adjustForUnsplittableChild):

LayoutTests:

* fast/multicol/flexbox-rows-expected.html: Added.
* fast/multicol/flexbox-rows.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@215320 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/multicol/flexbox-rows-expected.html [new file with mode: 0644]
LayoutTests/fast/multicol/flexbox-rows.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBlockFlow.cpp

index a7d1674..11a5306 100644 (file)
@@ -1,3 +1,14 @@
+2017-04-13  Dave Hyatt  <hyatt@apple.com>
+
+        Rendering flexbox children across columns
+        https://bugs.webkit.org/show_bug.cgi?id=164166
+        <rdar://problem/29055587>
+
+        Reviewed by Zalan Bujtas.
+
+        * fast/multicol/flexbox-rows-expected.html: Added.
+        * fast/multicol/flexbox-rows.html: Added.
+
 2017-04-13  Antti Koivisto  <antti@apple.com>
 
         Try to unflake a test.
diff --git a/LayoutTests/fast/multicol/flexbox-rows-expected.html b/LayoutTests/fast/multicol/flexbox-rows-expected.html
new file mode 100644 (file)
index 0000000..043e9f8
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html><html class=''>
+    <head><style>
+        .wrapper {
+            -webkit-column-count: 2;
+            -moz-column-count: 2;
+            column-count: 2;
+        }
+        
+              .pad-rows .row {
+            padding-top: 12px;
+        }
+        
+        /**
+         * Other styles
+         */
+        .description {
+            margin: 0 1em;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .description > ul > li + li {
+            margin-top: 1em;
+        }
+        .description em {
+            font-size: 0.875em;
+            color: darkgray;
+        }
+        
+        input {
+            margin-left: 1em;
+        }
+        
+        hr {
+            margin: 1em 0;
+        }
+        </style></head><body>
+            <div class="description">
+               
+            <div class="wrapper">
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            </div>
+            <hr>
+            <div class="wrapper pad-rows">
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            </div>
+            
+            </body></html>
diff --git a/LayoutTests/fast/multicol/flexbox-rows.html b/LayoutTests/fast/multicol/flexbox-rows.html
new file mode 100644 (file)
index 0000000..6c313a0
--- /dev/null
@@ -0,0 +1,62 @@
+<!DOCTYPE html><html class=''>
+    <head><style>
+        .wrapper {
+            -webkit-column-count: 2;
+            -moz-column-count: 2;
+            column-count: 2;
+        }
+        
+        .row {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+        }
+        
+        .pad-rows .row {
+            padding-top: 12px;
+        }
+        
+        /**
+         * Other styles
+         */
+        .description {
+            margin: 0 1em;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .description > ul > li + li {
+            margin-top: 1em;
+        }
+        .description em {
+            font-size: 0.875em;
+            color: darkgray;
+        }
+        
+        input {
+            margin-left: 1em;
+        }
+        
+        hr {
+            margin: 1em 0;
+        }
+        </style></head><body>
+            <div class="description">
+               
+            <div class="wrapper">
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            </div>
+            <hr>
+            <div class="wrapper pad-rows">
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            <div class="row"><label>Label</label><input type="text"></div>
+            </div>
+            
+            </body></html>
index 412781a..3b849b1 100644 (file)
@@ -3,3 +3,5 @@
 # See http://trac.webkit.org/wiki/TestExpectations for more information on this file.
 #
 
+fast/multicol/flexbox-rows.html [ Skip ]
+
index 69f720e..8a9843c 100644 (file)
@@ -1,3 +1,16 @@
+2017-04-13  Dave Hyatt  <hyatt@apple.com>
+
+        Rendering flexbox children across columns
+        https://bugs.webkit.org/show_bug.cgi?id=164166
+        <rdar://problem/29055587>
+
+        Reviewed by Zalan Bujtas.
+
+        Added fast/multicol/flexbox-rows.html
+
+        * rendering/RenderBlockFlow.cpp:
+        (WebCore::RenderBlockFlow::adjustForUnsplittableChild):
+
 2017-04-12  Alex Christensen  <achristensen@webkit.org>
 
         Clean up SharedBuffer public functions
index ce2cf19..ef49e2d 100644 (file)
@@ -36,6 +36,7 @@
 #include "LayoutRepainter.h"
 #include "Logging.h"
 #include "RenderCombineText.h"
+#include "RenderFlexibleBox.h"
 #include "RenderInline.h"
 #include "RenderIterator.h"
 #include "RenderLayer.h"
@@ -1865,14 +1866,19 @@ bool RenderBlockFlow::hasNextPage(LayoutUnit logicalOffset, PageBoundaryRule pag
 
 LayoutUnit RenderBlockFlow::adjustForUnsplittableChild(RenderBox& child, LayoutUnit logicalOffset, LayoutUnit childBeforeMargin, LayoutUnit childAfterMargin)
 {
-    if (!childBoxIsUnsplittableForFragmentation(child))
+    // When flexboxes are embedded inside a block flow, they don't perform any adjustments for unsplittable
+    // children. We'll treat flexboxes themselves as unsplittable just to get them to paginate properly inside
+    // a block flow.
+    bool isUnsplittable = childBoxIsUnsplittableForFragmentation(child);
+    if (!isUnsplittable && !(child.isFlexibleBox() && !downcast<RenderFlexibleBox>(child).isFlexibleBoxImpl()))
         return logicalOffset;
-
+    
     RenderFlowThread* flowThread = flowThreadContainingBlock();
     LayoutUnit childLogicalHeight = logicalHeightForChild(child) + childBeforeMargin + childAfterMargin;
     LayoutUnit pageLogicalHeight = pageLogicalHeightForOffset(logicalOffset);
     bool hasUniformPageLogicalHeight = !flowThread || flowThread->regionsHaveUniformLogicalHeight();
-    updateMinimumPageHeight(logicalOffset, childLogicalHeight);
+    if (isUnsplittable)
+        updateMinimumPageHeight(logicalOffset, childLogicalHeight);
     if (!pageLogicalHeight || (hasUniformPageLogicalHeight && childLogicalHeight > pageLogicalHeight)
         || !hasNextPage(logicalOffset))
         return logicalOffset;