Diff
Modified: trunk/LayoutTests/ChangeLog (98627 => 98628)
--- trunk/LayoutTests/ChangeLog 2011-10-27 20:28:40 UTC (rev 98627)
+++ trunk/LayoutTests/ChangeLog 2011-10-27 20:30:08 UTC (rev 98628)
@@ -1,3 +1,16 @@
+2011-10-27 Tony Chang <[email protected]>
+
+ fix sizing of auto sized flexbox
+ https://bugs.webkit.org/show_bug.cgi?id=70839
+
+ Reviewed by David Hyatt.
+
+ * css3/flexbox/columns-auto-size-expected.txt: Added.
+ * css3/flexbox/columns-auto-size.html: Added.
+ * css3/flexbox/flex-flow-margins-auto-size-expected.txt: Added.
+ * css3/flexbox/flex-flow-margins-auto-size.html: Added.
+ A bunch of these cases fail, but that's because of bug 70769.
+
2011-10-25 Vangelis Kokkevis <[email protected]>
Adding tests for fixed positioned elements getting their own composited layer.
Added: trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt (0 => 98628)
--- trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt 2011-10-27 20:30:08 UTC (rev 98628)
@@ -0,0 +1,6 @@
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/columns-auto-size.html (0 => 98628)
--- trunk/LayoutTests/css3/flexbox/columns-auto-size.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/columns-auto-size.html 2011-10-27 20:30:08 UTC (rev 98628)
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ margin: 0;
+}
+
+.flexbox {
+ display: -webkit-flexbox;
+ -webkit-flex-flow: column;
+ background-color: #aaa;
+ position: relative;
+}
+.horizontal {
+ width: 400px;
+}
+
+.horizontal div {
+ width: 100%;
+}
+.vertical {
+ -webkit-writing-mode: vertical-rl;
+ height: 50px;
+}
+.vertical div {
+ height: 100%;
+}
+
+.flexbox > :nth-child(1) {
+ background-color: blue;
+}
+.flexbox > :nth-child(2) {
+ background-color: green;
+}
+.flexbox > :nth-child(3) {
+ background-color: red;
+}
+.flexbox > :nth-child(4) {
+ background-color: orange;
+}
+.child-div {
+ background-color: yellow;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+<div class="flexbox horizontal">
+ <div data-expected-height="10" data-offset-y="0" style="height: -webkit-flex(1 0 10px)"></div>
+ <div data-expected-height="10" data-offset-y="10" style="height: 10px;"></div>
+ <div data-expected-height="10" data-offset-y="20"><div data-expected-height="10" data-offset-y="20" style="height: 10px"></div></div>
+</div>
+
+<!-- The last div is sized to 0 because there is no available space, however its child overflows. -->
+<div class="flexbox horizontal">
+ <div data-expected-height="0" data-offset-y="0" style="height: -webkit-flex(1)"></div>
+ <div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div>
+ <div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 auto)"><div style="height: 10px"></div></div>
+ <div data-expected-height="0" data-offset-y="20" style="height: -webkit-flex(1)"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
+</div>
+
+<div class="flexbox horizontal">
+ <div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 0 10px); margin-top: 10px;"></div>
+ <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
+ <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
+</div>
+
+<!-- Same as previous test case but with a flex-pack set. Since there's no
+ available space, it should layout the same. -->
+<div class="flexbox horizontal" style="-webkit-flex-pack: justify">
+ <div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 0 10px); margin-top: 10px;"></div>
+ <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
+ <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
+</div>
+
+<div class="flexbox vertical">
+ <div data-expected-width="10" data-offset-x="20" style="width: -webkit-flex(1 0 10px)"></div>
+ <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
+ <div data-expected-width="10" data-offset-x="0"><div data-expected-width="10" data-offset-x="0" style="width: 10px"></div></div>
+</div>
+
+<!-- The first div overflows to the left, so give it a margin-left so we can see box it paints. -->
+<div class="flexbox vertical" style="margin-left: 100px;">
+ <div data-expected-width="0" data-offset-x="20" style="width: -webkit-flex(1)"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
+ <div data-expected-width="0" data-offset-x="20" style="width: -webkit-flex(1)"></div>
+ <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
+ <div data-expected-width="10" data-offset-x="0" style="width: -webkit-flex(1 auto)"><div style="width: 10px"></div></div>
+</div>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/columns-auto-size.html
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt (0 => 98628)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt 2011-10-27 20:30:08 UTC (rev 98628)
@@ -0,0 +1,73 @@
+horizontal-tb rtl row
+PASS
+horizontal-tb ltr row
+PASS
+horizontal-tb rtl column
+PASS
+horizontal-tb ltr column
+PASS
+horizontal-bt rtl row
+PASS
+horizontal-bt ltr row
+PASS
+horizontal-bt rtl column
+PASS
+horizontal-bt ltr column
+PASS
+vertical-lr rtl row
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl row" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-lr ltr row
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr row" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-lr rtl column
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl column" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-lr ltr column
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr column" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-rl rtl row
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl row" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-rl ltr row
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr row" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-rl rtl column
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl column" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+vertical-rl ltr column
+FAIL:
+Expected 90 for width, but got 60.
+
+<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr column" data-offset-x="40" data-offset-y="10">
+<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
+</div></div>
+
Property changes on: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html (0 => 98628)
--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html 2011-10-27 20:30:08 UTC (rev 98628)
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<style>
+.container {
+ position: relative;
+ background-color: pink;
+ outline: 1px solid black;
+ display: inline-block;
+}
+.flexbox {
+ display: -webkit-flexbox;
+ background-color: grey;
+ margin: 10px 20px 30px 40px;
+}
+.title {
+ margin-top: 1em;
+}
+.ltr {
+ direction: ltr;
+}
+.rtl {
+ direction: rtl;
+}
+.horizontal-tb {
+ -webkit-writing-mode: horizontal-tb;
+}
+.horizontal-bt {
+ -webkit-writing-mode: horizontal-bt;
+}
+.vertical-rl {
+ -webkit-writing-mode: vertical-rl;
+}
+.vertical-lr {
+ -webkit-writing-mode: vertical-lr;
+}
+.row {
+ -webkit-flex-flow: row;
+}
+.row-reverse {
+ -webkit-flex-flow: row-reverse;
+}
+.column {
+ -webkit-flex-flow: column;
+}
+.column-reverse {
+ -webkit-flex-flow: column-reverse;
+}
+.flexbox > div {
+ margin: 13px 2px 17px 8px;
+ background-color: blue;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+
+<script>
+
+// The vertical test cases are failing because of the orthogonal writing modes.
+// https://bugs.webkit.org/show_bug.cgi?id=70769
+var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
+// FIXME: Test row-reverse and column-reverse.
+var flexFlows = ['row', 'column'];
+var directions = ['rtl', 'ltr'];
+
+writingModes.forEach(function(writingMode) {
+ flexFlows.forEach(function(flexFlow) {
+ directions.forEach(function(direction) {
+ var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
+ var title = document.createElement('div');
+ title.className = 'title';
+ title.innerHTML = flexboxClassName;
+ document.body.appendChild(title);
+
+ var flexboxExpectations = 'data-offset-x="40" data-offset-y="10"';
+ var flexItemExpectations = 'data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"';
+
+ var container = document.createElement('div');
+ container.className = 'container';
+ container.setAttribute('data-expected-width', 90);
+ container.setAttribute('data-expected-height', 90);
+
+ container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
+ '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + flexItemExpectations + '></div>\n' +
+ '</div>';
+
+ document.body.appendChild(container);
+ })
+ })
+})
+</script>
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (98627 => 98628)
--- trunk/Source/WebCore/ChangeLog 2011-10-27 20:28:40 UTC (rev 98627)
+++ trunk/Source/WebCore/ChangeLog 2011-10-27 20:30:08 UTC (rev 98628)
@@ -1,3 +1,20 @@
+2011-10-27 Tony Chang <[email protected]>
+
+ fix sizing of auto sized flexbox
+ https://bugs.webkit.org/show_bug.cgi?id=70839
+
+ Reviewed by David Hyatt.
+
+ Correctly set the height of the flexbox when we have a column flow
+ and the height is auto.
+
+ Tests: css3/flexbox/columns-auto-size.html
+ css3/flexbox/flex-flow-margins-auto-size.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::layoutBlock): Always computeLogicalHeight() after we're done placing children.
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildrenInlineDirection): Set the height as we place children.
+
2011-10-25 Vangelis Kokkevis <[email protected]>
Add support for creating compositing layers for fixed position elements.
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (98627 => 98628)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-10-27 20:28:40 UTC (rev 98627)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2011-10-27 20:30:08 UTC (rev 98628)
@@ -183,10 +183,7 @@
layoutInlineDirection(relayoutChildren);
- if (isColumnFlow())
- computeLogicalWidth();
- else
- computeLogicalHeight();
+ computeLogicalHeight();
if (size() != previousSize)
relayoutChildren = true;
@@ -691,8 +688,10 @@
if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && style()->flexPack() == PackJustify && childSizes.size() > 1)
startEdge += availableFreeSpace / (childSizes.size() - 1);
- }
+ if (isColumnFlow())
+ setLogicalHeight(startEdge);
+ }
alignChildrenBlockDirection(iterator, maxAscent);
}
