Title: [100324] trunk
Revision
100324
Author
o...@chromium.org
Date
2011-11-15 14:25:24 -0800 (Tue, 15 Nov 2011)

Log Message

Overflow and relayout are broken in the new flexboxes
https://bugs.webkit.org/show_bug.cgi?id=71161

Reviewed by David Hyatt.

Source/WebCore:

Tests: css3/flexbox/auto-height-dynamic.html
       css3/flexbox/flex-item-child-overflow-expected.html
       css3/flexbox/flex-item-child-overflow.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::layoutBlock):
-Always set the logical height to 0 to start with to ensure we don't
use the height from the previous layout when we are computing the
intrinsic size of the flexbox.
-Call computeOverflow after computeLogicalHeight so that flex-item's children's
overflow is properly rendered.

(WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
-Now that we setLogicalHeight in layoutBlock, we no longer need to do it here.
-Refactor flipping code. The behavior is the same, but the variable names are just
more correct.

LayoutTests:

* css3/flexbox/auto-height-dynamic-expected.txt: Added.
* css3/flexbox/auto-height-dynamic.html: Added.
* css3/flexbox/flex-item-child-overflow-expected.html: Added.
* css3/flexbox/flex-item-child-overflow.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (100323 => 100324)


--- trunk/LayoutTests/ChangeLog	2011-11-15 22:23:59 UTC (rev 100323)
+++ trunk/LayoutTests/ChangeLog	2011-11-15 22:25:24 UTC (rev 100324)
@@ -1,3 +1,15 @@
+2011-10-28  Ojan Vafai  <o...@chromium.org>
+
+        Overflow and relayout are broken in the new flexboxes
+        https://bugs.webkit.org/show_bug.cgi?id=71161
+
+        Reviewed by David Hyatt.
+
+        * css3/flexbox/auto-height-dynamic-expected.txt: Added.
+        * css3/flexbox/auto-height-dynamic.html: Added.
+        * css3/flexbox/flex-item-child-overflow-expected.html: Added.
+        * css3/flexbox/flex-item-child-overflow.html: Added.
+
 2011-11-15  Peter Kasting  <pkast...@google.com>
 
         Fix expectations after r100276.

Added: trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt (0 => 100324)


--- trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt	2011-11-15 22:25:24 UTC (rev 100324)
@@ -0,0 +1,2 @@
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt
___________________________________________________________________

Added: svn:eol-style

Added: trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html (0 => 100324)


--- trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html	                        (rev 0)
+++ trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html	2011-11-15 22:25:24 UTC (rev 100324)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<style>
+.flexbox {
+    width: 600px;
+    display: -webkit-flexbox;
+    background-color: #aaa;
+    position: relative;
+    -webkit-flex-flow: column;
+}
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+</style>
+<script>
+if (window.layoutTestController)
+    layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<div class="flexbox" data-expected-height=0>
+    <div class="flexitem" data-expected-height=0 style="height: 100px"></div>
+</div>
+
+<div class="flexbox" data-expected-height=0>
+    <div class="flexitem2" data-expected-height=0 style="height: 100px"></div>
+</div>
+
+<script>
+document.querySelector('.flexitem').offsetHeight;
+document.querySelector('.flexitem2').offsetHeight;
+document.querySelector('.flexitem').style.height = "-webkit-flex(1)";
+document.querySelector('.flexitem2').style.height = "-webkit-flex(1 auto)";
+</script>
+
+</body>
+</html>
\ No newline at end of file
Property changes on: trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html
___________________________________________________________________

Added: svn:eol-style

Added: trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.html (0 => 100324)


--- trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.html	                        (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.html	2011-11-15 22:25:24 UTC (rev 100324)
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body style="margin: 0">
+<div style="background-color: blue; width: 20px; height: 20px; position: absolute; top: 0;"></div>
+<pre>PASS</pre>
+</body>
+</html>
\ No newline at end of file
Property changes on: trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.html
___________________________________________________________________

Added: svn:eol-style

Added: trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html (0 => 100324)


--- trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html	                        (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html	2011-11-15 22:25:24 UTC (rev 100324)
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+    margin: 0;
+}
+.flexbox {
+    display: -webkit-flexbox;
+    position: relative;
+    -webkit-flex-flow: column;
+}
+.flexbox > div {
+    height: 0;
+}
+.flexbox > div > div {
+    width: 20px;
+    height: 20px;
+    line-height: 0px;
+    background-color: blue;
+}
+</style>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<div data-expected-height=0 class="flexbox">
+    <div data-expected-height=0>
+        <div data-offset-y=0 data-expected-height=20></div>
+    </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
Property changes on: trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html
___________________________________________________________________

Added: svn:eol-style

Modified: trunk/Source/WebCore/ChangeLog (100323 => 100324)


--- trunk/Source/WebCore/ChangeLog	2011-11-15 22:23:59 UTC (rev 100323)
+++ trunk/Source/WebCore/ChangeLog	2011-11-15 22:25:24 UTC (rev 100324)
@@ -1,3 +1,27 @@
+2011-10-28  Ojan Vafai  <o...@chromium.org>
+
+        Overflow and relayout are broken in the new flexboxes
+        https://bugs.webkit.org/show_bug.cgi?id=71161
+
+        Reviewed by David Hyatt.
+
+        Tests: css3/flexbox/auto-height-dynamic.html
+               css3/flexbox/flex-item-child-overflow-expected.html
+               css3/flexbox/flex-item-child-overflow.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::layoutBlock):
+        -Always set the logical height to 0 to start with to ensure we don't
+        use the height from the previous layout when we are computing the
+        intrinsic size of the flexbox.
+        -Call computeOverflow after computeLogicalHeight so that flex-item's children's
+        overflow is properly rendered.
+
+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection):
+        -Now that we setLogicalHeight in layoutBlock, we no longer need to do it here.
+        -Refactor flipping code. The behavior is the same, but the variable names are just
+        more correct.
+
 2011-11-15  Nate Chapin  <jap...@chromium.org>
 
         CachedResourceRequest is now the only SubresourceLoaderClient

Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (100323 => 100324)


--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp	2011-11-15 22:23:59 UTC (rev 100323)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp	2011-11-15 22:25:24 UTC (rev 100324)
@@ -167,15 +167,17 @@
 
     IntSize previousSize = size();
 
-    // FIXME: In theory we should only have to call one of these.
-    // computeLogicalWidth for flex-flow:row and computeLogicalHeight for flex-flow:column.
+    setLogicalHeight(0);
+    // We need to call both of these because we grab both crossAxisExtent and mainAxisExtent in layoutInlineDirection.
     computeLogicalWidth();
     computeLogicalHeight();
 
     m_overflow.clear();
 
+    // FIXME: This is no longer named correctly. This should just be layoutFlexItems.
     layoutInlineDirection(relayoutChildren);
 
+    LayoutUnit oldClientAfterEdge = clientLogicalBottom();
     computeLogicalHeight();
 
     if (size() != previousSize)
@@ -183,6 +185,8 @@
 
     layoutPositionedObjects(relayoutChildren || isRoot());
 
+    // FIXME: css3/flexbox/repaint-rtl-column.html seems to repaint more overflow than it needs to.
+    computeOverflow(oldClientAfterEdge);
     statePusher.pop();
 
     updateLayerTransform();
@@ -646,8 +650,6 @@
 
     LayoutUnit logicalTop = flowAwareBorderBefore() + flowAwarePaddingBefore();
     LayoutUnit totalMainExtent = mainAxisExtent();
-    if (crossAxisLength().isAuto())
-        setCrossAxisExtent(0);
     LayoutUnit maxAscent = 0, maxDescent = 0; // Used when flex-align: baseline.
     size_t i = 0;
     for (RenderBox* child = iterator.first(); child; child = iterator.next(), ++i) {
@@ -672,8 +674,8 @@
         startEdge += flowAwareMarginStartForChild(child);
 
         LayoutUnit childMainExtent = mainAxisExtentForChild(child);
-        bool shouldFlipInlineDirection = isColumnFlow() ? true : isLeftToRightFlow();
-        LayoutUnit logicalLeft = shouldFlipInlineDirection ? startEdge : totalMainExtent - startEdge - childMainExtent;
+        bool shouldFlipMainAxis = !isColumnFlow() && !isLeftToRightFlow();
+        LayoutUnit logicalLeft = shouldFlipMainAxis ? totalMainExtent - startEdge - childMainExtent : startEdge;
 
         // FIXME: Supporting layout deltas.
         setFlowAwareLocationForChild(child, IntPoint(logicalLeft, logicalTop + flowAwareMarginBeforeForChild(child)));
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to