flex-item-align: stretch should only grow, never shrink
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 17 Mar 2012 00:16:37 +0000 (00:16 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 17 Mar 2012 00:16:37 +0000 (00:16 +0000)
https://bugs.webkit.org/show_bug.cgi?id=80882

Reviewed by Ojan Vafai.

Source/WebCore:

New test cases in css3/flexbox/flex-align-stretch.html.

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::alignChildren): Move stretch code into a separate function.
(WebCore::RenderFlexibleBox::alignChildStretch): Add an early return if our height is shrinking.
(WebCore):
* rendering/RenderFlexibleBox.h:
(RenderFlexibleBox):

LayoutTests:

* css3/flexbox/child-overflow-expected.html:
* css3/flexbox/child-overflow.html: For cases that overflow the height, we now just overflow rather than reducing the height.
* css3/flexbox/flex-align-stretch-expected.txt:
* css3/flexbox/flex-align-stretch.html: New test cases.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/child-overflow-expected.html
LayoutTests/css3/flexbox/child-overflow.html
LayoutTests/css3/flexbox/flex-align-stretch-expected.txt
LayoutTests/css3/flexbox/flex-align-stretch.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index 8f6aa05..1753ac0 100644 (file)
@@ -1,3 +1,15 @@
+2012-03-16  Tony Chang  <tony@chromium.org>
+
+        flex-item-align: stretch should only grow, never shrink
+        https://bugs.webkit.org/show_bug.cgi?id=80882
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/child-overflow-expected.html:
+        * css3/flexbox/child-overflow.html: For cases that overflow the height, we now just overflow rather than reducing the height.
+        * css3/flexbox/flex-align-stretch-expected.txt:
+        * css3/flexbox/flex-align-stretch.html: New test cases.
+
 2012-03-16  Daniel Cheng  <dcheng@chromium.org>
 
         Add layout tests that accidentally got left out of r111061
index 8d00b8a..b688e66 100644 (file)
@@ -4,14 +4,17 @@
 <style>
 .container {
     display: inline-block;
-    margin-right: 5px;
+    margin-right: 30px;
+    width: 100px;
+    height: 100px;
+    border: 5px solid pink;
+    position: relative;
 }
 
 .container > div {
-    border: 5px solid pink;
     overflow: auto;
-    height: 100px;
     width: 100px;
+    height: 100px;
 }
 
 .container > div > div {
     height: 120px;
     background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
 }
+
+p {
+    margin-bottom: 30px;
+}
 </style>
 </head>
 <body>
-    <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
-</body>
+    <p>Scrollbars should work in all the flexboxes. The first and third
+    columns should overflow the logical height. Each row should be aligned
+    to the same corner.</p>
+
+    <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
+    <div class="container bottomLeft"><div><div></div></div></div>
+    <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
+    <div class="container bottomLeft"><div><div></div></div></div>
+    <br>
+    <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
+    <div class="container topRight"><div><div></div></div></div>
+    <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
+    <div class="container topRight"><div><div></div></div></div>
+    <br>
+    <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
+    <div class="container"><div><div></div></div></div>
+    <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
+    <div class="container"><div><div></div></div></div>
+    <br>
+    <div class="container"><div style="height: auto"><div></div></div></div>
+    <div class="container"><div><div></div></div></div>
+    <div class="container"><div style="height: auto"><div></div></div></div>
+    <div class="container"><div><div></div></div></div>
+
 <script>
-var origins = ['', 'bottomLeft', 'topRight', ''];
-
-origins.forEach(function(origin) {
-    for (var i = 0; i < 4; ++i) {
-        var containerClass = 'container ' + origin;
-        document.body.innerHTML +=
-            "<div class='" + containerClass + "'>" +
-            "<div><div></div></div>" +
-            "</div>";
-    }
-    document.body.innerHTML += "<br>";
-});
 
 Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
     element.firstChild.scrollTop = 1000;
index f701319..c198bee 100644 (file)
@@ -4,7 +4,7 @@
 <style>
 .container {
     display: inline-block;
-    margin-right: 5px;
+    margin-right: 30px;
 }
 
 .horizontal-tb {
     height: 120px;
     background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
 }
+
+p {
+    margin-bottom: 30px;
+}
 </style>
 </head>
 <body>
-    <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
+    <p>Scrollbars should work in all the flexboxes. The first and third
+    columns should overflow the logical height. Each row should be aligned
+    to the same corner.</p>
 </body>
 <script>
-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
+var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb'];
 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
 writingModes.forEach(function(writingMode) {
     flexDirections.forEach(function(flexDirection) {
@@ -72,7 +78,7 @@ writingModes.forEach(function(writingMode) {
             "<div class='" + flexboxClass + "'>" +
             "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
             "</div>" +
-            "</div>";
+            "</div> ";
     });
     document.body.innerHTML += "<br>";
 });
index ba603d7..b73169c 100644 (file)
@@ -82,4 +82,18 @@ if (window.layoutTestController)
 </div>
 </div>
 
+<!-- When overflowing the height, flex-align: stretch doesn't cause the flex item to get smaller. -->
+<div class="flexbox" style="height: 50px; width: 600px;">
+  <div data-expected-height="60" style="background-color: yellow; width: 300px">
+    <div data-expected-height="60" style="height: 60px; width: 10px; background-color: orange"></div>
+  </div>
+</div>
+
+<!-- In the column case, the width of the flex item is constrained by the width of the flexbox, so flex-align: stretch doesn't change the width. -->
+<div class="flexbox" style="-webkit-flex-direction: column; width: 100px;">
+  <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
+    <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>
+  </div>
+</div>
+
 </html>
index 3502448..a94ac61 100644 (file)
@@ -1,3 +1,19 @@
+2012-03-16  Tony Chang  <tony@chromium.org>
+
+        flex-item-align: stretch should only grow, never shrink
+        https://bugs.webkit.org/show_bug.cgi?id=80882
+
+        Reviewed by Ojan Vafai.
+
+        New test cases in css3/flexbox/flex-align-stretch.html.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::alignChildren): Move stretch code into a separate function.
+        (WebCore::RenderFlexibleBox::alignChildStretch): Add an early return if our height is shrinking.
+        (WebCore):
+        * rendering/RenderFlexibleBox.h:
+        (RenderFlexibleBox):
+
 2012-03-16  Raphael Kubo da Costa  <kubo@profusion.mobi>
 
         [EFL] Unreviewed, fix build after r111041.
index 78644d4..7194503 100644 (file)
@@ -974,25 +974,7 @@ void RenderFlexibleBox::alignChildren(const OrderedFlexItemList& children, Layou
             ASSERT_NOT_REACHED();
             break;
         case AlignStretch: {
-            if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
-                LayoutUnit logicalHeightBefore = child->logicalHeight();
-                LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
-                child->setLogicalHeight(stretchedLogicalHeight);
-                child->computeLogicalHeight();
-
-                if (child->logicalHeight() != logicalHeightBefore) {
-                    child->setOverrideHeight(child->logicalHeight());
-                    child->setLogicalHeight(0);
-                    child->setChildNeedsLayout(true);
-                    child->layoutIfNeeded();
-                }
-            } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
-                // FIXME: Handle min-width and max-width.
-                LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
-                child->setOverrideWidth(std::max(0, childWidth));
-                child->setChildNeedsLayout(true);
-                child->layoutIfNeeded();
-            }
+            applyStretchAlignmentToChild(child, lineCrossAxisExtent);
             // Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end.
             if (style()->flexWrap() == FlexWrapReverse)
                 adjustAlignmentForChild(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child));
@@ -1029,6 +1011,32 @@ void RenderFlexibleBox::alignChildren(const OrderedFlexItemList& children, Layou
     }
 }
 
+void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUnit lineCrossAxisExtent)
+{
+    if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
+        LayoutUnit logicalHeightBefore = child->logicalHeight();
+        LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
+        if (stretchedLogicalHeight < logicalHeightBefore)
+            return;
+
+        child->setLogicalHeight(stretchedLogicalHeight);
+        child->computeLogicalHeight();
+
+        if (child->logicalHeight() != logicalHeightBefore) {
+            child->setOverrideHeight(child->logicalHeight());
+            child->setLogicalHeight(0);
+            child->setChildNeedsLayout(true);
+            child->layoutIfNeeded();
+        }
+    } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
+        // FIXME: Handle min-width and max-width.
+        LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
+        child->setOverrideWidth(std::max(0, childWidth));
+        child->setChildNeedsLayout(true);
+        child->layoutIfNeeded();
+    }
+}
+
 void RenderFlexibleBox::flipForRightToLeftColumn(FlexOrderIterator& iterator)
 {
     if (style()->isLeftToRightDirection() || !isColumnFlow())
index 979c9aa..834e382 100644 (file)
@@ -112,6 +112,7 @@ private:
     void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace);
     void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
     void alignChildren(const OrderedFlexItemList&, LayoutUnit lineCrossAxisExtent, LayoutUnit maxAscent);
+    void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent);
     void flipForRightToLeftColumn(FlexOrderIterator&);
     void flipForWrapReverse(FlexOrderIterator&, const WrapReverseContext&);
 };