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

CSSLayout/CSSLayout.c

@@ -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,
+            float childSize;
-                                        mainAxis,
+
+            if (totalFlexShrinkScaledFactors == 0) {
+              childSize = childFlexBasis + flexShrinkScaledFactor;
+            } else {
+              childSize =
                   childFlexBasis +
-                                            remainingFreeSpace / totalFlexShrinkScaledFactors *
+                  (remainingFreeSpace / totalFlexShrinkScaledFactors) *
-                                                flexShrinkScaledFactor);
+                  flexShrinkScaledFactor;
+            }
+
+            updatedMainSize = boundAxis(currentRelativeChild, mainAxis, childSize);
           }
         } else if (remainingFreeSpace > 0) {
           flexGrowFactor = currentRelativeChild->style.flexGrow;

tests/CSSLayoutFlexTest.cpp

@@ -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);
+}