Commit 197c34b6 authored by tony@chromium.org's avatar tony@chromium.org
Browse files

Implement absolutely positioned flex items

https://bugs.webkit.org/show_bug.cgi?id=93798

Reviewed by Ojan Vafai.

Source/WebCore:

Previously, we treated absolutely positioned flex items as a 0x0 placeholder element.
Now we position the 0x0 placeholder where the next item would go. This causes the
following changes:
- justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items.
- alignment doesn't change the placement of absolutely positioned flex items.
- auto margins in the alignment direction don't do anything on absolutely positioned flex items.

Test: css3/flexbox/position-absolute-children.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this.
(WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this.
(WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item.
(WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around.
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start.
* rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method.

LayoutTests:

Fix position of absolute flex items and add some additional tests.

* css3/flexbox/align-absolute-child-expected.txt:
* css3/flexbox/align-absolute-child.html: New test cases and update expectations.
* css3/flexbox/position-absolute-child.html: Update expectations.
* css3/flexbox/position-absolute-children-expected.txt: Added.
* css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@129154 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 1125f778
2012-09-20 Tony Chang <tony@chromium.org>
Implement absolutely positioned flex items
https://bugs.webkit.org/show_bug.cgi?id=93798
Reviewed by Ojan Vafai.
Fix position of absolute flex items and add some additional tests.
* css3/flexbox/align-absolute-child-expected.txt:
* css3/flexbox/align-absolute-child.html: New test cases and update expectations.
* css3/flexbox/position-absolute-child.html: Update expectations.
* css3/flexbox/position-absolute-children-expected.txt: Added.
* css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children.
2012-09-20 Ojan Vafai <ojan@chromium.org>
 
Remove now passing test.
......@@ -11,3 +11,5 @@ PASS
PASS
PASS
PASS
PASS
PASS
......@@ -66,6 +66,10 @@ body {
direction: ltr;
}
.wrap {
-webkit-flex-wrap: wrap;
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
}
......@@ -104,7 +108,7 @@ body {
<div class='flexbox relative align-center'>
<div data-offset-x=0 data-offset-y=40></div>
<div class='absolute' data-offset-x=20 data-offset-y=50></div>
<div class='absolute' data-offset-x=20 data-offset-y=0></div>
<div data-offset-x=20 data-offset-y=40></div>
<div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
</div>
......@@ -112,7 +116,7 @@ body {
<div class="relative">
<div class='flexbox align-center'>
<div data-offset-x=10 data-offset-y=40></div>
<div class='absolute' data-offset-x=30 data-offset-y=50></div>
<div class='absolute' data-offset-x=30 data-offset-y=0></div>
<div data-offset-x=30 data-offset-y=40></div>
<div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
</div>
......@@ -139,8 +143,8 @@ body {
<div class='flexbox relative'>
<div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
<div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=50></div>
<div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=50></div>
<div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
<div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
<div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
</div>
......@@ -150,6 +154,24 @@ body {
<div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
</div>
<div class="flexbox wrap relative">
<div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
<div class="absolute" data-offset-x=100 data-offset-y=0></div>
<div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
<div class="absolute" data-offset-x=50 data-offset-y=50></div>
<div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
<div class="absolute" data-offset-x=100 data-offset-y=50></div>
</div>
<div class="flexbox wrap relative" style="-webkit-align-items: flex-end">
<div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
<div class="absolute" data-offset-x=100 data-offset-y=0></div>
<div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
<div class="absolute" data-offset-x=50 data-offset-y=50></div>
<div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
<div class="absolute" data-offset-x=100 data-offset-y=50></div>
</div>
<script>
var absolute = document.getElementById('placed-absolute');
......
horizontal-tb ltr row justify-content-flex-start
PASS
horizontal-tb ltr row justify-content-flex-end
PASS
horizontal-tb ltr row justify-content-center
PASS
horizontal-tb ltr row justify-content-space-between
PASS
horizontal-tb ltr row justify-content-space-around
PASS
horizontal-tb rtl row justify-content-flex-start
PASS
horizontal-tb rtl row justify-content-flex-end
PASS
horizontal-tb rtl row justify-content-center
PASS
horizontal-tb rtl row justify-content-space-between
PASS
horizontal-tb rtl row justify-content-space-around
PASS
horizontal-tb ltr column justify-content-flex-start
PASS
horizontal-tb ltr column justify-content-flex-end
PASS
horizontal-tb ltr column justify-content-center
PASS
horizontal-tb ltr column justify-content-space-between
PASS
horizontal-tb ltr column justify-content-space-around
PASS
horizontal-tb rtl column justify-content-flex-start
PASS
horizontal-tb rtl column justify-content-flex-end
PASS
horizontal-tb rtl column justify-content-center
PASS
horizontal-tb rtl column justify-content-space-between
PASS
horizontal-tb rtl column justify-content-space-around
PASS
horizontal-tb ltr row-reverse justify-content-flex-start
PASS
horizontal-tb ltr row-reverse justify-content-flex-end
PASS
horizontal-tb ltr row-reverse justify-content-center
PASS
horizontal-tb ltr row-reverse justify-content-space-between
PASS
horizontal-tb ltr row-reverse justify-content-space-around
PASS
horizontal-tb rtl row-reverse justify-content-flex-start
PASS
horizontal-tb rtl row-reverse justify-content-flex-end
PASS
horizontal-tb rtl row-reverse justify-content-center
PASS
horizontal-tb rtl row-reverse justify-content-space-between
PASS
horizontal-tb rtl row-reverse justify-content-space-around
PASS
horizontal-tb ltr column-reverse justify-content-flex-start
PASS
horizontal-tb ltr column-reverse justify-content-flex-end
PASS
horizontal-tb ltr column-reverse justify-content-center
PASS
horizontal-tb ltr column-reverse justify-content-space-between
PASS
horizontal-tb ltr column-reverse justify-content-space-around
PASS
horizontal-tb rtl column-reverse justify-content-flex-start
PASS
horizontal-tb rtl column-reverse justify-content-flex-end
PASS
horizontal-tb rtl column-reverse justify-content-center
PASS
horizontal-tb rtl column-reverse justify-content-space-between
PASS
horizontal-tb rtl column-reverse justify-content-space-around
PASS
horizontal-bt ltr row justify-content-flex-start
PASS
horizontal-bt ltr row justify-content-flex-end
PASS
horizontal-bt ltr row justify-content-center
PASS
horizontal-bt ltr row justify-content-space-between
PASS
horizontal-bt ltr row justify-content-space-around
PASS
horizontal-bt rtl row justify-content-flex-start
PASS
horizontal-bt rtl row justify-content-flex-end
PASS
horizontal-bt rtl row justify-content-center
PASS
horizontal-bt rtl row justify-content-space-between
PASS
horizontal-bt rtl row justify-content-space-around
PASS
horizontal-bt ltr column justify-content-flex-start
PASS
horizontal-bt ltr column justify-content-flex-end
PASS
horizontal-bt ltr column justify-content-center
PASS
horizontal-bt ltr column justify-content-space-between
PASS
horizontal-bt ltr column justify-content-space-around
PASS
horizontal-bt rtl column justify-content-flex-start
PASS
horizontal-bt rtl column justify-content-flex-end
PASS
horizontal-bt rtl column justify-content-center
PASS
horizontal-bt rtl column justify-content-space-between
PASS
horizontal-bt rtl column justify-content-space-around
PASS
horizontal-bt ltr row-reverse justify-content-flex-start
PASS
horizontal-bt ltr row-reverse justify-content-flex-end
PASS
horizontal-bt ltr row-reverse justify-content-center
PASS
horizontal-bt ltr row-reverse justify-content-space-between
PASS
horizontal-bt ltr row-reverse justify-content-space-around
PASS
horizontal-bt rtl row-reverse justify-content-flex-start
PASS
horizontal-bt rtl row-reverse justify-content-flex-end
PASS
horizontal-bt rtl row-reverse justify-content-center
PASS
horizontal-bt rtl row-reverse justify-content-space-between
PASS
horizontal-bt rtl row-reverse justify-content-space-around
PASS
horizontal-bt ltr column-reverse justify-content-flex-start
PASS
horizontal-bt ltr column-reverse justify-content-flex-end
PASS
horizontal-bt ltr column-reverse justify-content-center
PASS
horizontal-bt ltr column-reverse justify-content-space-between
PASS
horizontal-bt ltr column-reverse justify-content-space-around
PASS
horizontal-bt rtl column-reverse justify-content-flex-start
PASS
horizontal-bt rtl column-reverse justify-content-flex-end
PASS
horizontal-bt rtl column-reverse justify-content-center
PASS
horizontal-bt rtl column-reverse justify-content-space-between
PASS
horizontal-bt rtl column-reverse justify-content-space-around
PASS
vertical-rl ltr row justify-content-flex-start
PASS
vertical-rl ltr row justify-content-flex-end
PASS
vertical-rl ltr row justify-content-center
PASS
vertical-rl ltr row justify-content-space-between
PASS
vertical-rl ltr row justify-content-space-around
PASS
vertical-rl rtl row justify-content-flex-start
PASS
vertical-rl rtl row justify-content-flex-end
PASS
vertical-rl rtl row justify-content-center
PASS
vertical-rl rtl row justify-content-space-between
PASS
vertical-rl rtl row justify-content-space-around
PASS
vertical-rl ltr column justify-content-flex-start
PASS
vertical-rl ltr column justify-content-flex-end
PASS
vertical-rl ltr column justify-content-center
PASS
vertical-rl ltr column justify-content-space-between
PASS
vertical-rl ltr column justify-content-space-around
PASS
vertical-rl rtl column justify-content-flex-start
PASS
vertical-rl rtl column justify-content-flex-end
PASS
vertical-rl rtl column justify-content-center
PASS
vertical-rl rtl column justify-content-space-between
PASS
vertical-rl rtl column justify-content-space-around
PASS
vertical-rl ltr row-reverse justify-content-flex-start
PASS
vertical-rl ltr row-reverse justify-content-flex-end
PASS
vertical-rl ltr row-reverse justify-content-center
PASS
vertical-rl ltr row-reverse justify-content-space-between
PASS
vertical-rl ltr row-reverse justify-content-space-around
PASS
vertical-rl rtl row-reverse justify-content-flex-start
PASS
vertical-rl rtl row-reverse justify-content-flex-end
PASS
vertical-rl rtl row-reverse justify-content-center
PASS
vertical-rl rtl row-reverse justify-content-space-between
PASS
vertical-rl rtl row-reverse justify-content-space-around
PASS
vertical-rl ltr column-reverse justify-content-flex-start
PASS
vertical-rl ltr column-reverse justify-content-flex-end
PASS
vertical-rl ltr column-reverse justify-content-center
PASS
vertical-rl ltr column-reverse justify-content-space-between
PASS
vertical-rl ltr column-reverse justify-content-space-around
PASS
vertical-rl rtl column-reverse justify-content-flex-start
PASS
vertical-rl rtl column-reverse justify-content-flex-end
PASS
vertical-rl rtl column-reverse justify-content-center
PASS
vertical-rl rtl column-reverse justify-content-space-between
PASS
vertical-rl rtl column-reverse justify-content-space-around
PASS
vertical-lr ltr row justify-content-flex-start
PASS
vertical-lr ltr row justify-content-flex-end
PASS
vertical-lr ltr row justify-content-center
PASS
vertical-lr ltr row justify-content-space-between
PASS
vertical-lr ltr row justify-content-space-around
PASS
vertical-lr rtl row justify-content-flex-start
PASS
vertical-lr rtl row justify-content-flex-end
PASS
vertical-lr rtl row justify-content-center
PASS
vertical-lr rtl row justify-content-space-between
PASS
vertical-lr rtl row justify-content-space-around
PASS
vertical-lr ltr column justify-content-flex-start
PASS
vertical-lr ltr column justify-content-flex-end
PASS
vertical-lr ltr column justify-content-center
PASS
vertical-lr ltr column justify-content-space-between
PASS
vertical-lr ltr column justify-content-space-around
PASS
vertical-lr rtl column justify-content-flex-start
PASS
vertical-lr rtl column justify-content-flex-end
PASS
vertical-lr rtl column justify-content-center
PASS
vertical-lr rtl column justify-content-space-between
PASS
vertical-lr rtl column justify-content-space-around
PASS
vertical-lr ltr row-reverse justify-content-flex-start
PASS
vertical-lr ltr row-reverse justify-content-flex-end
PASS
vertical-lr ltr row-reverse justify-content-center
PASS
vertical-lr ltr row-reverse justify-content-space-between
PASS
vertical-lr ltr row-reverse justify-content-space-around
PASS
vertical-lr rtl row-reverse justify-content-flex-start
PASS
vertical-lr rtl row-reverse justify-content-flex-end
PASS
vertical-lr rtl row-reverse justify-content-center
PASS
vertical-lr rtl row-reverse justify-content-space-between
PASS
vertical-lr rtl row-reverse justify-content-space-around
PASS
vertical-lr ltr column-reverse justify-content-flex-start
PASS
vertical-lr ltr column-reverse justify-content-flex-end
PASS
vertical-lr ltr column-reverse justify-content-center
PASS
vertical-lr ltr column-reverse justify-content-space-between
PASS
vertical-lr ltr column-reverse justify-content-space-around
PASS
vertical-lr rtl column-reverse justify-content-flex-start
PASS
vertical-lr rtl column-reverse justify-content-flex-end
PASS
vertical-lr rtl column-reverse justify-content-center
PASS
vertical-lr rtl column-reverse justify-content-space-between
PASS
vertical-lr rtl column-reverse justify-content-space-around
PASS
This diff is collapsed.
2012-09-20 Tony Chang <tony@chromium.org>
Implement absolutely positioned flex items
https://bugs.webkit.org/show_bug.cgi?id=93798
Reviewed by Ojan Vafai.
Previously, we treated absolutely positioned flex items as a 0x0 placeholder element.
Now we position the 0x0 placeholder where the next item would go. This causes the
following changes:
- justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items.
- alignment doesn't change the placement of absolutely positioned flex items.
- auto margins in the alignment direction don't do anything on absolutely positioned flex items.
Test: css3/flexbox/position-absolute-children.html
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this.
(WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this.
(WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item.
(WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around.
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start.
* rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method.
2012-09-20 Sheriff Bot <webkit.review.bot@gmail.com>
 
Unreviewed, rolling out r129144.
......@@ -689,14 +689,15 @@ bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox* child)
LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
{
LayoutUnit childCrossExtent = 0;
if (!child->isOutOfFlowPositioned())
childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
ASSERT(!child->isOutOfFlowPositioned());
LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
return lineCrossAxisExtent - childCrossExtent;
}
bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace)
{
ASSERT(!child->isOutOfFlowPositioned());
bool isHorizontal = isHorizontalFlow();
Length start = isHorizontal ? child->style()->marginTop() : child->style()->marginLeft();
Length end = isHorizontal ? child->style()->marginBottom() : child->style()->marginRight();
......@@ -899,7 +900,7 @@ static LayoutUnit initialJustifyContentOffset(LayoutUnit availableFreeSpace, EJu
if (justifyContent == JustifySpaceAround) {
if (availableFreeSpace > 0 && numberOfChildren)
return availableFreeSpace / (2 * numberOfChildren);
if (availableFreeSpace < 0)
else
return availableFreeSpace / 2;
}
return 0;
......@@ -958,25 +959,37 @@ static EAlignItems alignmentForChild(RenderBox* child)
return align;
}
size_t RenderFlexibleBox::numberOfInFlowPositionedChildren(const OrderedFlexItemList& children) const
{
size_t count = 0;
for (size_t i = 0; i < children.size(); ++i) {
RenderBox* child = children[i];
if (!child->isOutOfFlowPositioned())
++count;
}
return count;
}
void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts)
{
ASSERT(childSizes.size() == children.size());
size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());
mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
if (style()->flexDirection() == FlowRowReverse)
mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
LayoutUnit totalMainExtent = mainAxisExtent();
LayoutUnit maxAscent = 0, maxDescent = 0; // Used when align-items: baseline.
LayoutUnit maxChildCrossAxisExtent = 0;
size_t seenInFlowPositionedChildren = 0;
bool shouldFlipMainAxis = !isColumnFlow() && !isLeftToRightFlow();
for (size_t i = 0; i < children.size(); ++i) {
RenderBox* child = children[i];
if (child->isOutOfFlowPositioned()) {
prepareChildForPositionedLayout(child, mainAxisOffset, crossAxisOffset, FlipForRowReverse);
mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
continue;
}
LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);
......@@ -1012,7 +1025,9 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
setFlowAwareLocationForChild(child, childLocation);
mainAxisOffset += childMainExtent + flowAwareMarginEndForChild(child);
mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
++seenInFlowPositionedChildren;
if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
}
if (isColumnFlow())
......@@ -1022,27 +1037,28 @@ void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
// We have to do an extra pass for column-reverse to reposition the flex items since the start depends
// on the height of the flexbox, which we only know after we've positioned all the flex items.
updateLogicalHeight();
layoutColumnReverse(children, childSizes, crossAxisOffset, availableFreeSpace);
layoutColumnReverse(children, crossAxisOffset, availableFreeSpace);
}
lineContexts.append(LineContext(crossAxisOffset, maxChildCrossAxisExtent, children.size(), maxAscent));
crossAxisOffset += maxChildCrossAxisExtent;
}
void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
{
// This is similar to the logic in layoutAndPlaceChildren, except we place the children
// starting from the end of the flexbox. We also don't need to layout anything since we're
// just moving the children to a new position.
size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());
mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
size_t seenInFlowPositionedChildren = 0;
for (size_t i = 0; i < children.size(); ++i) {
RenderBox* child = children[i];
if (child->isOutOfFlowPositioned()) {
child->layer()->setStaticBlockPosition(mainAxisOffset);
mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
continue;
}
mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);
......@@ -1053,7 +1069,10 @@ void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children,
child->repaintDuringLayoutIfMoved(oldRect);
mainAxisOffset -= flowAwareMarginStartForChild(child);
mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
++seenInFlowPositionedChildren;
if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
}
}
......@@ -1141,6 +1160,12 @@ void RenderFlexibleBox::alignChildren(OrderIterator& iterator, const WTF::Vector
for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
ASSERT(child);
if (child->isOutOfFlowPositioned()) {
if (style()->flexWrap() == FlexWrapReverse)
adjustAlignmentForChild(child, lineCrossAxisExtent);
continue;
}
if (updateAutoMarginsInCrossAxis(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child)))
continue;
......
......@@ -130,8 +130,9 @@ private:
void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
void prepareChildForPositionedLayout(RenderBox* child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset, PositionedLayoutMode);
size_t numberOfInFlowPositionedChildren(const OrderedFlexItemList&) const;
void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>&);
void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
void layoutColumnReverse(const OrderedFlexItemList&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
void alignFlexLines(OrderIterator&, WTF::Vector<LineContext>&);
void alignChildren(OrderIterator&, const WTF::Vector<LineContext>&);
void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment