Title: [101399] trunk
Revision
101399
Author
t...@chromium.org
Date
2011-11-29 11:07:57 -0800 (Tue, 29 Nov 2011)

Log Message

flex-align:stretch + max-height needs to clamp to max-height and position appropriately
https://bugs.webkit.org/show_bug.cgi?id=70780

Reviewed by David Hyatt.

Source/WebCore:

Test: css3/flexbox/flex-align-max.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::sizesToIntrinsicLogicalWidth): When laying out columns, if the flex item is stretching,
we don't need to shrink wrap.
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::isColumnFlow): Switch to RenderStyle helper method.
(WebCore::RenderFlexibleBox::alignChildrenBlockDirection): For columns, we don't need to do anything.
For rows, handle max logical height by setting the height and recomputing (which will take max-height
into consideration).
* rendering/style/RenderStyle.h:
(WebCore::InheritedFlags::isColumnFlexFlow): Helper method.

LayoutTests:

* css3/flexbox/flex-align-max-expected.txt: Added.
* css3/flexbox/flex-align-max.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (101398 => 101399)


--- trunk/LayoutTests/ChangeLog	2011-11-29 19:05:08 UTC (rev 101398)
+++ trunk/LayoutTests/ChangeLog	2011-11-29 19:07:57 UTC (rev 101399)
@@ -1,3 +1,13 @@
+2011-11-29  Tony Chang  <t...@chromium.org>
+
+        flex-align:stretch + max-height needs to clamp to max-height and position appropriately
+        https://bugs.webkit.org/show_bug.cgi?id=70780
+
+        Reviewed by David Hyatt.
+
+        * css3/flexbox/flex-align-max-expected.txt: Added.
+        * css3/flexbox/flex-align-max.html: Added.
+
 2011-11-29  Philippe Normand  <pnorm...@igalia.com>
 
         Unreviewed, other round of GTK rebaseline.

Added: trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt (0 => 101399)


--- trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt	2011-11-29 19:07:57 UTC (rev 101399)
@@ -0,0 +1,4 @@
+PASS
+PASS
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt
___________________________________________________________________

Added: svn:eol-style

Added: trunk/LayoutTests/css3/flexbox/flex-align-max.html (0 => 101399)


--- trunk/LayoutTests/css3/flexbox/flex-align-max.html	                        (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-align-max.html	2011-11-29 19:07:57 UTC (rev 101399)
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+    margin: 0;
+}
+.flexbox {
+    display: -webkit-flexbox;
+    background-color: #aaa;
+    position: relative;
+}
+.flexbox div {
+    border: 0;
+}
+.column {
+    -webkit-flex-flow: column;
+}
+.vertical-rl {
+    -webkit-writing-mode: vertical-rl;
+}
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+.flexbox :nth-child(2) {
+    background-color: green;
+}
+.flexbox :nth-child(3) {
+    background-color: red;
+}
+</style>
+<script>
+if (window.layoutTestController)
+    layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<div class="flexbox">
+  <div data-expected-height="50" style="width: -webkit-flex(1 0 0); max-height: 100px"></div>
+  <div data-expected-height="50" style="width: -webkit-flex(1 0 0); height: 50px"></div>
+  <div data-expected-height="25" style="width: -webkit-flex(1 0 0); max-height: 25px"></div>
+</div>
+
+<div class="flexbox column" style="width: 200px">
+  <div data-expected-width="150" style="height: -webkit-flex(1 0 20px); max-width: 150px"></div>
+  <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); width: 100px"></div>
+  <div data-expected-width="200" style="height: -webkit-flex(1 0 20px);"></div>
+</div>
+
+<div class="flexbox vertical-rl" style="height: 60px">
+  <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); max-width: 110px"></div>
+  <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); width: 100px"></div>
+  <div data-expected-width="50" style="height: -webkit-flex(1 0 20px); max-width: 50px"></div>
+</div>
+
+<div class="flexbox column vertical-rl" style="height: 50px">
+  <div data-expected-height="50" style="width: -webkit-flex(1 0 100px); max-height: 100px"></div>
+  <div data-expected-height="50" style="width: -webkit-flex(1 0 100px); height: 50px"></div>
+  <div data-expected-height="25" style="width: -webkit-flex(1 0 100px); max-height: 25px"></div>
+</div>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/flex-align-max.html
___________________________________________________________________

Added: svn:eol-style

Modified: trunk/Source/WebCore/ChangeLog (101398 => 101399)


--- trunk/Source/WebCore/ChangeLog	2011-11-29 19:05:08 UTC (rev 101398)
+++ trunk/Source/WebCore/ChangeLog	2011-11-29 19:07:57 UTC (rev 101399)
@@ -1,5 +1,25 @@
 2011-11-29  Tony Chang  <t...@chromium.org>
 
+        flex-align:stretch + max-height needs to clamp to max-height and position appropriately
+        https://bugs.webkit.org/show_bug.cgi?id=70780
+
+        Reviewed by David Hyatt.
+
+        Test: css3/flexbox/flex-align-max.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::sizesToIntrinsicLogicalWidth): When laying out columns, if the flex item is stretching,
+        we don't need to shrink wrap.
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::isColumnFlow): Switch to RenderStyle helper method.
+        (WebCore::RenderFlexibleBox::alignChildrenBlockDirection): For columns, we don't need to do anything.
+        For rows, handle max logical height by setting the height and recomputing (which will take max-height
+        into consideration).
+        * rendering/style/RenderStyle.h:
+        (WebCore::InheritedFlags::isColumnFlexFlow): Helper method.
+
+2011-11-29  Tony Chang  <t...@chromium.org>
+
         [chromium] Remove unused variable (gcc 4.6 complains about this)
         https://bugs.webkit.org/show_bug.cgi?id=73335
 

Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (101398 => 101399)


--- trunk/Source/WebCore/rendering/RenderBox.cpp	2011-11-29 19:05:08 UTC (rev 101398)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp	2011-11-29 19:07:57 UTC (rev 101399)
@@ -1801,7 +1801,10 @@
             return true;
     }
 
-    if (parent()->isFlexibleBox())
+    // Flexible box items should shrink wrap, so we lay them out at their intrinsic widths.
+    // In the case of columns that have a stretch alignment, we go ahead and layout at the
+    // stretched size to avoid an extra layout when applying alignment.
+    if (parent()->isFlexibleBox() && (!parent()->style()->isColumnFlexFlow() || style()->flexAlign() != AlignStretch))
         return true;
 
     // Flexible horizontal boxes lay out children at their intrinsic widths.  Also vertical boxes

Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (101398 => 101399)


--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp	2011-11-29 19:05:08 UTC (rev 101398)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp	2011-11-29 19:07:57 UTC (rev 101399)
@@ -204,8 +204,7 @@
 
 bool RenderFlexibleBox::isColumnFlow() const
 {
-    EFlexFlow flow = style()->flexFlow();
-    return flow == FlowColumn || flow == FlowColumnReverse;
+    return style()->isColumnFlexFlow();
 }
 
 bool RenderFlexibleBox::isHorizontalFlow() const
@@ -718,14 +717,11 @@
         // FIXME: Make sure this does the right thing with column flows.
         switch (child->style()->flexAlign()) {
         case AlignStretch: {
-            Length height = isHorizontalFlow() ? child->style()->height() : child->style()->width();
-            if (height.isAuto()) {
-                // FIXME: Clamp to max-height once it's spec'ed (should we align towards the start or center?).
-                LayoutUnit stretchedHeight = crossAxisExtentForChild(child) + RenderFlexibleBox::availableAlignmentSpaceForChild(child);
-                if (isHorizontalFlow())
-                    child->setHeight(stretchedHeight);
-                else
-                    child->setWidth(stretchedHeight);
+            if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
+                LayoutUnit stretchedLogicalHeight = child->logicalHeight() + RenderFlexibleBox::availableAlignmentSpaceForChild(child);
+                child->setLogicalHeight(stretchedLogicalHeight);
+                child->computeLogicalHeight();
+                // FIXME: We need to relayout if the height changed.
             }
             break;
         }

Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (101398 => 101399)


--- trunk/Source/WebCore/rendering/style/RenderStyle.h	2011-11-29 19:05:08 UTC (rev 101398)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h	2011-11-29 19:07:57 UTC (rev 101399)
@@ -726,6 +726,7 @@
     EFlexPack flexPack() const { return static_cast<EFlexPack>(rareNonInheritedData->m_flexibleBox->m_flexPack); }
     EFlexAlign flexAlign() const { return static_cast<EFlexAlign>(rareNonInheritedData->m_flexibleBox->m_flexAlign); }
     EFlexFlow flexFlow() const { return static_cast<EFlexFlow>(rareNonInheritedData->m_flexibleBox->m_flexFlow); }
+    bool isColumnFlexFlow() const { return flexFlow() == FlowColumn || flexFlow() == FlowColumnReverse; }
 
 #if ENABLE(CSS_GRID_LAYOUT)
     Length gridColumns() const { return rareNonInheritedData->m_grid->m_gridColumns; }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to