Log Message
auto margins on flexbox should allocate space in the flex direction https://bugs.webkit.org/show_bug.cgi?id=83086
Reviewed by Ojan Vafai. Source/WebCore: Test: css3/flexbox/flex-flow-auto-margins.html * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis): (WebCore): (WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis): (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Update the margins on the RenderBox *after* we do the final child layout. * rendering/RenderFlexibleBox.h: LayoutTests: * css3/flexbox/flex-algorithm-with-margins-expected.txt: * css3/flexbox/flex-algorithm-with-margins.html: Added safe centering test case. * css3/flexbox/flex-flow-auto-margins-expected.txt: Added. * css3/flexbox/flex-flow-auto-margins.html: Added. * css3/flexbox/flex-pack.html: Fixed old results.
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt
- trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html
- trunk/LayoutTests/css3/flexbox/flex-pack.html
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
- trunk/Source/WebCore/rendering/RenderFlexibleBox.h
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (117896 => 117897)
--- trunk/LayoutTests/ChangeLog 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/LayoutTests/ChangeLog 2012-05-22 04:08:40 UTC (rev 117897)
@@ -1,3 +1,16 @@
+2012-05-21 Tony Chang <[email protected]>
+
+ auto margins on flexbox should allocate space in the flex direction
+ https://bugs.webkit.org/show_bug.cgi?id=83086
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/flex-algorithm-with-margins-expected.txt:
+ * css3/flexbox/flex-algorithm-with-margins.html: Added safe centering test case.
+ * css3/flexbox/flex-flow-auto-margins-expected.txt: Added.
+ * css3/flexbox/flex-flow-auto-margins.html: Added.
+ * css3/flexbox/flex-pack.html: Fixed old results.
+
2012-05-21 Abhishek Arya <[email protected]>
Unreviewed. Rebaseline for r117865.
Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt (117896 => 117897)
--- trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt 2012-05-22 04:08:40 UTC (rev 117897)
@@ -9,3 +9,4 @@
PASS
PASS
PASS
+PASS
Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html (117896 => 117897)
--- trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html 2012-05-22 04:08:40 UTC (rev 117897)
@@ -43,7 +43,7 @@
<div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
</div>
-<!-- Margins set to auto have a value of 0. -->
+<!-- Margins set to auto get space only if there's space available after flexing. -->
<div class="flexbox">
<div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
<div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto;"></div>
@@ -51,24 +51,28 @@
</div>
<div class="flexbox">
- <div data-expected-width="133" style="-webkit-flex: 1 0 0;"></div>
- <div data-expected-width="233" data-offset-x="133" style="-webkit-flex: 1 0 100px; margin-left: auto;"></div>
- <div data-expected-width="133" data-offset-x="366" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
+ <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
+ <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 100px; margin-left: auto;"></div>
+ <div data-expected-width="100" data-offset-x="400" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
</div>
-<!-- Margins set to auto don't have negative flex either. -->
+<!-- Margins set to auto don't have negative flex. -->
<div class="flexbox">
<div data-expected-width="150" style="-webkit-flex: 1 1 300px;"></div>
<div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
<div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 300px;"></div>
</div>
-<!-- Margins set to auto don't center in flexboxen. -->
<div class="flexbox">
- <div data-expected-width="300px" data-offset-x="0" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
+ <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
</div>
+<!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
<div class="flexbox">
+ <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 700px; margin: 0 auto;"></div>
+</div>
+
+<div class="flexbox">
<div data-expected-width="600px" data-offset-x="0" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
</div>
Added: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt (0 => 117897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt 2012-05-22 04:08:40 UTC (rev 117897)
@@ -0,0 +1,129 @@
+horizontal-tb ltr row physical
+PASS
+horizontal-tb rtl row physical
+PASS
+horizontal-tb ltr column physical
+PASS
+horizontal-tb rtl column physical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-tb ltr row-reverse physical
+PASS
+horizontal-tb rtl row-reverse physical
+PASS
+horizontal-bt ltr row physical
+PASS
+horizontal-bt rtl row physical
+PASS
+horizontal-bt ltr column physical
+PASS
+horizontal-bt rtl column physical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt rtl row-reverse physical
+PASS
+horizontal-bt ltr row-reverse physical
+PASS
+horizontal-bt rtl row-reverse physical
+PASS
+vertical-lr ltr row physical
+PASS
+vertical-lr rtl row physical
+PASS
+vertical-lr ltr column physical
+PASS
+vertical-lr rtl column physical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-lr ltr row-reverse physical
+PASS
+vertical-lr rtl row-reverse physical
+PASS
+vertical-rl ltr row physical
+PASS
+vertical-rl rtl row physical
+PASS
+vertical-rl ltr column physical
+PASS
+vertical-rl rtl column physical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl rtl row-reverse physical
+PASS
+vertical-rl ltr row-reverse physical
+PASS
+vertical-rl rtl row-reverse physical
+PASS
+horizontal-tb ltr row logical
+PASS
+horizontal-tb rtl row logical
+PASS
+horizontal-tb ltr column logical
+PASS
+horizontal-tb rtl column logical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-tb ltr row-reverse logical
+PASS
+horizontal-tb rtl row-reverse logical
+PASS
+horizontal-bt ltr row logical
+PASS
+horizontal-bt rtl row logical
+PASS
+horizontal-bt ltr column logical
+PASS
+horizontal-bt rtl column logical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+horizontal-bt ltr row-reverse logical
+PASS
+horizontal-bt rtl row-reverse logical
+PASS
+vertical-lr ltr row logical
+PASS
+vertical-lr rtl row logical
+PASS
+vertical-lr ltr column logical
+PASS
+vertical-lr rtl column logical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-lr ltr row-reverse logical
+PASS
+vertical-lr rtl row-reverse logical
+PASS
+vertical-rl ltr row logical
+PASS
+vertical-rl rtl row logical
+PASS
+vertical-rl ltr column logical
+PASS
+vertical-rl rtl column logical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+vertical-rl ltr row-reverse logical
+PASS
+vertical-rl rtl row-reverse logical
+PASS
+
Added: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html (0 => 117897)
--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html 2012-05-22 04:08:40 UTC (rev 117897)
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html>
+<style>
+.container {
+ position: relative;
+ background-color: pink;
+ outline: 1px solid black;
+ display: inline-block;
+}
+.flexbox {
+ display: -webkit-flex;
+ background-color: grey;
+ width: 100px;
+ height: 100px;
+}
+.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;
+}
+.physical {
+ margin: 10px 20px 30px 40px;
+}
+.physical > div {
+ margin: 13px auto 17px auto;
+}
+.logical {
+ -webkit-margin-before: 10px;
+ -webkit-margin-after: 30px;
+ -webkit-margin-start: 40px;
+ -webkit-margin-end: 20px;
+}
+.logical > div {
+ -webkit-margin-before: auto;
+ -webkit-margin-after: 17px;
+ -webkit-margin-start: auto;
+ -webkit-margin-end: 2px;
+}
+.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()">
+
+<script>
+function positionAsString(position)
+{
+ return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
+}
+
+function asString(expectations)
+{
+ return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
+}
+
+var physicalContainerSize = [160, 140];
+var physicalFlexBoxPosition = [40, 10];
+
+var physicalExpectations = {
+ 'horizontal-tb': {
+ rtl: {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 23],
+ row: [20, 20, 80, 23],
+ 'column-reverse': [20, 20, 80, 23],
+ 'row-reverse': [20, 20, 80, 23],
+ },
+ ltr : {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 23],
+ row: [20, 20, 80, 23],
+ 'column-reverse': [20, 20, 80, 23],
+ 'row-reverse': [20, 20, 80, 23],
+ }
+ },
+ 'horizontal-bt': {
+ rtl: {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 73],
+ row: [20, 20, 80, 73],
+ 'column-reverse': [20, 20, 80, 73],
+ 'row-reverse': [20, 20, 80, 73],
+ },
+ ltr : {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 73],
+ row: [20, 20, 80, 73],
+ 'column-reverse': [20, 20, 80, 73],
+ 'row-reverse': [20, 20, 80, 73],
+ }
+ },
+ 'vertical-lr': {
+ rtl: {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 73],
+ row: [20, 20, 40, 73],
+ 'column-reverse': [20, 20, 40, 73],
+ 'row-reverse': [20, 20, 40, 23],
+ },
+ ltr : {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 23],
+ row: [20, 20, 40, 23],
+ 'column-reverse': [20, 20, 40, 23],
+ 'row-reverse': [20, 20, 40, 73],
+ }
+ },
+ 'vertical-rl': {
+ rtl: {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 73],
+ row: [20, 20, 120, 73],
+ 'column-reverse': [20, 20, 48, 73],
+ 'row-reverse': [20, 20, 120, 23],
+ },
+ ltr : {
+ container: physicalContainerSize,
+ flexbox: physicalFlexBoxPosition,
+ column: [20, 20, 80, 23],
+ row: [20, 20, 120, 23],
+ 'column-reverse': [20, 20, 48, 23],
+ 'row-reverse': [20, 20, 120, 73],
+ }
+ }
+}
+
+var logicalExpectations = {
+ 'horizontal-tb': {
+ rtl: {
+ container: [160, 140],
+ flexbox: [20, 10],
+ column: [20, 20, 22, 73],
+ row: [20, 20, 22, 10],
+ 'column-reverse': [20, 20, 92, 10],
+ 'row-reverse': [20, 20, 22, 10],
+ },
+ ltr : {
+ container: [160, 140],
+ flexbox: [40, 10],
+ column: [20, 20, 118, 73],
+ row: [20, 20, 118, 10],
+ 'column-reverse': [20, 20, 48, 10],
+ 'row-reverse': [20, 20, 118, 10],
+ }
+ },
+ 'horizontal-bt': {
+ rtl: {
+ container: [160, 140],
+ flexbox: [20, 30],
+ column: [20, 20, 22, 47],
+ row: [20, 20, 22, 110],
+ 'column-reverse': [20, 20, 92, 47],
+ 'row-reverse': [20, 20, 22, 110],
+ },
+ ltr : {
+ container: [160, 140],
+ flexbox: [40, 30],
+ column: [20, 20, 118, 47],
+ row: [20, 20, 118, 110],
+ 'column-reverse': [20, 20, 48, 47],
+ 'row-reverse': [20, 20, 118, 110],
+ }
+ },
+ 'vertical-lr': {
+ rtl: {
+ container: [140, 160],
+ flexbox: [10, 20],
+ column: [20, 20, 73, 22],
+ row: [20, 20, 10, 22],
+ 'column-reverse': [20, 20, 23, 92],
+ 'row-reverse': [20, 20, 10, 22],
+ },
+ ltr : {
+ container: [140, 160],
+ flexbox: [10, 40],
+ column: [20, 20, 73, 118],
+ row: [20, 20, 10, 118],
+ 'column-reverse': [20, 20, 23, 48],
+ 'row-reverse': [20, 20, 10, 118],
+ }
+ },
+ 'vertical-rl': {
+ rtl: {
+ container: [140, 160],
+ flexbox: [30, 20],
+ column: [20, 20, 47, 22],
+ row: [20, 20, 110, 22],
+ 'column-reverse': [20, 20, 47, 92],
+ 'row-reverse': [20, 20, 110, 22],
+ },
+ ltr : {
+ container: [140, 160],
+ flexbox: [30, 40],
+ column: [20, 20, 47, 118],
+ row: [20, 20, 110, 118],
+ 'column-reverse': [20, 20, 47, 48],
+ 'row-reverse': [20, 20, 110, 118],
+ }
+ }
+}
+
+var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
+var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
+var directions = ['ltr', 'rtl'];
+var marginTypes = ['physical', 'logical'];
+
+marginTypes.forEach(function(marginType) {
+ writingModes.forEach(function(writingMode) {
+ flexFlows.forEach(function(flexFlow) {
+ directions.forEach(function(direction) {
+ var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
+ var title = document.createElement('div');
+ title.className = 'title';
+ title.innerHTML = flexboxClassName;
+ document.body.appendChild(title);
+
+ var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
+ expectations = expectations[writingMode][direction];
+ var flexboxExpectations = positionAsString(expectations.flexbox);
+
+ var flexItemExpectations = asString(expectations[flexFlow]);
+
+ var container = document.createElement('div');
+ container.className = 'container';
+ container.setAttribute('data-expected-width', expectations.container[0]);
+ container.setAttribute('data-expected-height', expectations.container[1]);
+
+ container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
+ '<div style="height: 20px; width: 20px;" ' + flexItemExpectations + '></div>\n' +
+ '</div>';
+
+ document.body.appendChild(container);
+ })
+ })
+ })
+})
+</script>
+</body>
+</html>
\ No newline at end of file
Modified: trunk/LayoutTests/css3/flexbox/flex-pack.html (117896 => 117897)
--- trunk/LayoutTests/css3/flexbox/flex-pack.html 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/LayoutTests/css3/flexbox/flex-pack.html 2012-05-22 04:08:40 UTC (rev 117897)
@@ -96,10 +96,10 @@
<!-- Make sure we don't crash with no children. -->
<div class="flexbox" style="-webkit-flex-pack: distribute"></div>
-<!-- margin:auto does nothing here. -->
+<!-- margin:auto applies before packing. -->
<div class="flexbox" style="-webkit-flex-pack: end">
- <div data-expected-width="100" data-offset-x="300" style="width: 100px;"></div>
- <div data-expected-width="100" data-offset-x="400" style="width: 100px; margin-right: auto"></div>
+ <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
+ <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin-right: auto"></div>
<div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
</div>
Modified: trunk/Source/WebCore/ChangeLog (117896 => 117897)
--- trunk/Source/WebCore/ChangeLog 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/Source/WebCore/ChangeLog 2012-05-22 04:08:40 UTC (rev 117897)
@@ -1,3 +1,19 @@
+2012-05-21 Tony Chang <[email protected]>
+
+ auto margins on flexbox should allocate space in the flex direction
+ https://bugs.webkit.org/show_bug.cgi?id=83086
+
+ Reviewed by Ojan Vafai.
+
+ Test: css3/flexbox/flex-flow-auto-margins.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):
+ (WebCore):
+ (WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):
+ (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Update the margins on the RenderBox *after* we do the final child layout.
+ * rendering/RenderFlexibleBox.h:
+
2012-05-21 Gyuyoung Kim <[email protected]>
[EFL] Add inital mediaControlsEflfullscreen.css for fullscreen control UI
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (117896 => 117897)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-05-22 04:08:40 UTC (rev 117897)
@@ -642,6 +642,52 @@
}
}
+LayoutUnit RenderFlexibleBox::autoMarginOffsetInMainAxis(const OrderedFlexItemList& children, LayoutUnit& availableFreeSpace)
+{
+ if (availableFreeSpace <= 0)
+ return 0;
+
+ int numberOfAutoMargins = 0;
+ bool isHorizontal = isHorizontalFlow();
+ for (size_t i = 0; i < children.size(); ++i) {
+ RenderBox* child = children[i];
+ if (child->isPositioned())
+ continue;
+ if (isHorizontal) {
+ if (child->style()->marginLeft().isAuto())
+ ++numberOfAutoMargins;
+ if (child->style()->marginRight().isAuto())
+ ++numberOfAutoMargins;
+ } else {
+ if (child->style()->marginTop().isAuto())
+ ++numberOfAutoMargins;
+ if (child->style()->marginBottom().isAuto())
+ ++numberOfAutoMargins;
+ }
+ }
+ if (!numberOfAutoMargins)
+ return 0;
+
+ LayoutUnit sizeOfAutoMargin = availableFreeSpace / numberOfAutoMargins;
+ availableFreeSpace = 0;
+ return sizeOfAutoMargin;
+}
+
+void RenderFlexibleBox::updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset)
+{
+ if (isHorizontalFlow()) {
+ if (child->style()->marginLeft().isAuto())
+ child->setMarginLeft(autoMarginOffset);
+ if (child->style()->marginRight().isAuto())
+ child->setMarginRight(autoMarginOffset);
+ } else {
+ if (child->style()->marginTop().isAuto())
+ child->setMarginTop(autoMarginOffset);
+ if (child->style()->marginBottom().isAuto())
+ child->setMarginBottom(autoMarginOffset);
+ }
+}
+
LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
{
LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
@@ -673,9 +719,8 @@
child->layoutIfNeeded();
}
- // We set the margins because we want to make sure 'auto' has a margin
- // of 0 and because if we're not auto sizing, we don't do a layout that
- // computes the start/end margins.
+ // Before running the flex algorithm, 'auto' has a margin of 0.
+ // Also, if we're not auto sizing, we don't do a layout that computes the start/end margins.
if (isHorizontalFlow()) {
child->setMarginLeft(minimumValueForLength(child->style()->marginLeft(), flexboxAvailableContentExtent, renderView));
child->setMarginRight(minimumValueForLength(child->style()->marginRight(), flexboxAvailableContentExtent, renderView));
@@ -881,6 +926,8 @@
void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts)
{
ASSERT(childSizes.size() == children.size());
+
+ LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
mainAxisOffset += initialPackingOffset(availableFreeSpace, style()->flexPack(), childSizes.size());
if (style()->flexDirection() == FlowRowReverse)
@@ -902,6 +949,8 @@
child->setChildNeedsLayout(true);
child->layoutIfNeeded();
+ updateAutoMarginsInMainAxis(child, autoMarginOffset);
+
LayoutUnit childCrossAxisMarginBoxExtent;
if (flexAlignForChild(child) == AlignBaseline) {
LayoutUnit ascent = marginBoxAscentForChild(child);
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (117896 => 117897)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-05-22 04:05:48 UTC (rev 117896)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-05-22 04:08:40 UTC (rev 117897)
@@ -101,6 +101,8 @@
LayoutUnit preferredMainAxisContentExtentForChild(RenderBox* child) const;
void layoutFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&);
+ LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&, LayoutUnit& availableFreeSpace);
+ void updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset);
void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox*);
_______________________________________________ webkit-changes mailing list [email protected] http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes
