Allow align-self: stretch to cause the item size to shrink below its intrinsic size
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jun 2012 02:36:41 +0000 (02:36 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jun 2012 02:36:41 +0000 (02:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=90304

Reviewed by Ojan Vafai.

Source/WebCore:

The spec used to say that stretch could only make items grow, but now
it allows items to shrink.
http://dev.w3.org/csswg/css3-flexbox/#align-items-stretch

Tests: css3/flexbox/flex-align-stretch.html Updated expectations.
       css3/flexbox/child-overflow.html Updated expectations.

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::applyStretchAlignmentToChild):

LayoutTests:

* css3/flexbox/child-overflow-expected.html:
* css3/flexbox/child-overflow.html:
* css3/flexbox/flex-align-stretch.html:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@121611 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.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp

index 58f781d..af7edd7 100644 (file)
@@ -1,3 +1,14 @@
+2012-06-29  Tony Chang  <tony@chromium.org>
+
+        Allow align-self: stretch to cause the item size to shrink below its intrinsic size
+        https://bugs.webkit.org/show_bug.cgi?id=90304
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/child-overflow-expected.html:
+        * css3/flexbox/child-overflow.html:
+        * css3/flexbox/flex-align-stretch.html:
+
 2012-06-29  James Weatherall  <wez@chromium.org>
 
         NPObjectWrapper may not address all window script object lifetime issues
index b688e66..2581602 100644 (file)
@@ -29,28 +29,27 @@ p {
 </style>
 </head>
 <body>
-    <p>Scrollbars should work in all the flexboxes. The first and third
-    columns should overflow the logical height. Each row should be aligned
+    <p>Scrollbars should work in all the flexboxes. 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>
+    <div class="container bottomLeft"><div><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>
+    <div class="container topRight"><div><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>
+    <div class="container"><div><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>
+    <div class="container"><div><div></div></div></div>
     <div class="container"><div><div></div></div></div>
 
 <script>
index 05547af..6c28052 100644 (file)
@@ -62,8 +62,7 @@ p {
 </style>
 </head>
 <body>
-    <p>Scrollbars should work in all the flexboxes. The first and third
-    columns should overflow the logical height. Each row should be aligned
+    <p>Scrollbars should work in all the flexboxes. Each row should be aligned
     to the same corner.</p>
 </body>
 <script>
index 2654a21..2c4c4ff 100644 (file)
@@ -82,14 +82,12 @@ if (window.testRunner)
 </div>
 </div>
 
-<!-- When overflowing the height, align-items: 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="50" 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 align-items: 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>
index a20cff6..cbf2c26 100644 (file)
@@ -1,3 +1,20 @@
+2012-06-29  Tony Chang  <tony@chromium.org>
+
+        Allow align-self: stretch to cause the item size to shrink below its intrinsic size
+        https://bugs.webkit.org/show_bug.cgi?id=90304
+
+        Reviewed by Ojan Vafai.
+
+        The spec used to say that stretch could only make items grow, but now
+        it allows items to shrink.
+        http://dev.w3.org/csswg/css3-flexbox/#align-items-stretch
+
+        Tests: css3/flexbox/flex-align-stretch.html Updated expectations.
+               css3/flexbox/child-overflow.html Updated expectations.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild):
+
 2012-06-29  James Weatherall  <wez@chromium.org>
 
         NPObjectWrapper may not address all window script object lifetime issues
index 47289cf..f6f1f51 100644 (file)
@@ -1198,8 +1198,6 @@ void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUni
     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();