Fix flex-shrink when shrinking to zero size

Summary: Fix flex-shrink when shrinking to zero size

Reviewed By: gkassabli

Differential Revision: D4036345

fbshipit-source-id: f6848d7a316a694426f761d5e51d972bd379d90e
This commit is contained in:
Emil Sjolander
2016-10-18 09:19:22 -07:00
committed by Facebook Github Bot
parent 6152ca46c8
commit 9c3970dd75
2 changed files with 84 additions and 6 deletions

View File

@@ -1550,14 +1550,20 @@ static void layoutNodeImpl(const CSSNodeRef node,
if (remainingFreeSpace < 0) {
flexShrinkScaledFactor = -currentRelativeChild->style.flexShrink * childFlexBasis;
// Is this child able to shrink?
if (flexShrinkScaledFactor != 0) {
updatedMainSize = boundAxis(currentRelativeChild,
mainAxis,
childFlexBasis +
remainingFreeSpace / totalFlexShrinkScaledFactors *
flexShrinkScaledFactor);
float childSize;
if (totalFlexShrinkScaledFactors == 0) {
childSize = childFlexBasis + flexShrinkScaledFactor;
} else {
childSize =
childFlexBasis +
(remainingFreeSpace / totalFlexShrinkScaledFactors) *
flexShrinkScaledFactor;
}
updatedMainSize = boundAxis(currentRelativeChild, mainAxis, childSize);
}
} else if (remainingFreeSpace > 0) {
flexGrowFactor = currentRelativeChild->style.flexGrow;

View File

@@ -29,6 +29,12 @@
<div style="flex-basis: 100px; flex-shrink: 1;"></div>
<div style="flex-basis: 50px;"></div>
</div>
<div id="flex_shrink_to_zero" style="height: 75px;">
<div style="width: 50px; height: 50px; flex-shrink:0;"></div>
<div style="width: 50px; height: 50px; flex-shrink:1;"></div>
<div style="width: 50px; height: 50px; flex-shrink:0;"></div>
</div>
*
*/
@@ -236,3 +242,69 @@ TEST(CSSLayoutTest, flex_basis_flex_shrink_row) {
CSSNodeFreeRecursive(root);
}
TEST(CSSLayoutTest, flex_shrink_to_zero) {
const CSSNodeRef root = CSSNodeNew();
CSSNodeStyleSetHeight(root, 75);
const CSSNodeRef root_child0 = CSSNodeNew();
CSSNodeStyleSetWidth(root_child0, 50);
CSSNodeStyleSetHeight(root_child0, 50);
CSSNodeInsertChild(root, root_child0, 0);
const CSSNodeRef root_child1 = CSSNodeNew();
CSSNodeStyleSetFlexShrink(root_child1, 1);
CSSNodeStyleSetWidth(root_child1, 50);
CSSNodeStyleSetHeight(root_child1, 50);
CSSNodeInsertChild(root, root_child1, 1);
const CSSNodeRef root_child2 = CSSNodeNew();
CSSNodeStyleSetWidth(root_child2, 50);
CSSNodeStyleSetHeight(root_child2, 50);
CSSNodeInsertChild(root, root_child2, 2);
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root));
ASSERT_EQ(75, CSSNodeLayoutGetHeight(root));
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child0));
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child0));
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child1));
ASSERT_EQ(50, CSSNodeLayoutGetTop(root_child1));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child1));
ASSERT_EQ(0, CSSNodeLayoutGetHeight(root_child1));
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
ASSERT_EQ(50, CSSNodeLayoutGetTop(root_child2));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child2));
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child2));
CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionRTL);
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root));
ASSERT_EQ(75, CSSNodeLayoutGetHeight(root));
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child0));
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child0));
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child1));
ASSERT_EQ(50, CSSNodeLayoutGetTop(root_child1));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child1));
ASSERT_EQ(0, CSSNodeLayoutGetHeight(root_child1));
ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
ASSERT_EQ(50, CSSNodeLayoutGetTop(root_child2));
ASSERT_EQ(50, CSSNodeLayoutGetWidth(root_child2));
ASSERT_EQ(50, CSSNodeLayoutGetHeight(root_child2));
CSSNodeFreeRecursive(root);
}