Commit d7bf4b0c authored by tony@chromium.org's avatar tony@chromium.org

Need to relayout when stretching the height of a flex item

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

Reviewed by Ojan Vafai.

Source/WebCore:

Test: css3/flexbox/flex-align-stretch.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computePreferredMainAxisExtent): Always clear the override size since
it may be set when aligning.
(WebCore::RenderFlexibleBox::alignChildren): Only relayout if the height changed.

LayoutTests:

* css3/flexbox/flex-align-stretch-expected.txt: Added.
* css3/flexbox/flex-align-stretch.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@104313 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 2957b0c5
2012-01-06 Tony Chang <tony@chromium.org>
Need to relayout when stretching the height of a flex item
https://bugs.webkit.org/show_bug.cgi?id=75661
Reviewed by Ojan Vafai.
* css3/flexbox/flex-align-stretch-expected.txt: Added.
* css3/flexbox/flex-align-stretch.html: Added.
2012-01-06 Dmitry Lomov <dslomov@google.com>
Unreviewed: [Chromium] rebaselining IMAGE expectations after http://trac.webkit.org/changeset/104240/
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
}
.flexbox {
display: -webkit-flexbox;
background-color: #aaa;
position: relative;
}
.flexbox div {
border: 0;
}
.flexbox > :nth-child(1) {
background-color: blue;
}
.flexbox > :nth-child(2) {
background-color: green;
}
.flexbox > :nth-child(3) {
background-color: red;
}
.absolute {
position: absolute;
width: 50px;
height: 50px;
background-color: yellow !important;
}
</style>
<script>
if (window.layoutTestController)
layoutTestController.dumpAsText();
</script>
<script src="resources/flexbox.js"></script>
<body onload="checkFlexBoxen()">
<div class="flexbox" style="width: 600px">
<div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
</div>
<div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
<div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
</div>
</div>
<div style="-webkit-writing-mode: horizontal-bt">
<div class="flexbox" style="width: 600px">
<div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></div>
</div>
<div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
<div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
</div>
</div>
</div>
<div style="-webkit-writing-mode: vertical-rl">
<div class="flexbox" style="height: 200px">
<div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
</div>
<div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
<div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
</div>
</div>
</div>
<div style="-webkit-writing-mode: vertical-lr">
<div class="flexbox" style="height: 200px">
<div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="50" data-offset-y="0" class="absolute" style="right:0;"></div>
</div>
<div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
<div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
<div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
</div>
</div>
</div>
</html>
2012-01-06 Tony Chang <tony@chromium.org>
Need to relayout when stretching the height of a flex item
https://bugs.webkit.org/show_bug.cgi?id=75661
Reviewed by Ojan Vafai.
Test: css3/flexbox/flex-align-stretch.html
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computePreferredMainAxisExtent): Always clear the override size since
it may be set when aligning.
(WebCore::RenderFlexibleBox::alignChildren): Only relayout if the height changed.
2012-01-06 Anders Carlsson <andersca@apple.com>
Add ScrollElasticityControllerClient::immediateScrollBy
......@@ -488,8 +488,8 @@ void RenderFlexibleBox::computePreferredMainAxisExtent(bool relayoutChildren, Tr
LayoutUnit flexboxAvailableContentExtent = mainAxisContentExtent();
for (RenderBox* child = iterator.first(); child; child = iterator.next()) {
child->clearOverrideSize();
if (mainAxisLengthForChild(child).isAuto()) {
child->clearOverrideSize();
if (!relayoutChildren)
child->setChildNeedsLayout(true);
child->layoutIfNeeded();
......@@ -698,10 +698,17 @@ void RenderFlexibleBox::alignChildren(FlexOrderIterator& iterator, LayoutUnit ma
switch (child->style()->flexAlign()) {
case AlignStretch: {
if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
LayoutUnit logicalHeightBefore = child->logicalHeight();
LayoutUnit stretchedLogicalHeight = child->logicalHeight() + RenderFlexibleBox::availableAlignmentSpaceForChild(child);
child->setLogicalHeight(stretchedLogicalHeight);
child->computeLogicalHeight();
// FIXME: We need to relayout if the height changed.
if (child->logicalHeight() != logicalHeightBefore) {
child->setOverrideHeight(child->logicalHeight());
child->setLogicalHeight(0);
child->setChildNeedsLayout(true);
child->layoutIfNeeded();
}
}
break;
}
......
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