Change flex basis to override main axis size

Summary: Flex basis should override height/width. Not the other way around.

Reviewed By: gkassabli

Differential Revision: D4029374

fbshipit-source-id: bc3c72879f3937a50bf8a636b547adc7b9a4f5a7

CSSLayout/CSSLayout.c

@@ -839,7 +839,13 @@ static void computeChildFlexBasis(
   CSSMeasureMode childWidthMeasureMode;
   CSSMeasureMode childHeightMeasureMode;
 
-  if (isMainAxisRow && isStyleDimDefined(child, CSSFlexDirectionRow)) {
+  if (!CSSValueIsUndefined(child->style.flexBasis) &&
+      !CSSValueIsUndefined(isMainAxisRow ? width : height)) {
+    if (CSSValueIsUndefined(child->layout.computedFlexBasis)) {
+      child->layout.computedFlexBasis =
+          fmaxf(child->style.flexBasis, getPaddingAndBorderAxis(child, mainAxis));
+    }
+  } else if (isMainAxisRow && isStyleDimDefined(child, CSSFlexDirectionRow)) {
     // The width is definite, so use that as the flex basis.
     child->layout.computedFlexBasis =
         fmaxf(child->style.dimensions[CSSDimensionWidth],
@@ -849,12 +855,6 @@ static void computeChildFlexBasis(
     child->layout.computedFlexBasis =
         fmaxf(child->style.dimensions[CSSDimensionHeight],
               getPaddingAndBorderAxis(child, CSSFlexDirectionColumn));
-  } else if (!CSSValueIsUndefined(child->style.flexBasis) &&
-             !CSSValueIsUndefined(isMainAxisRow ? width : height)) {
-    if (CSSValueIsUndefined(child->layout.computedFlexBasis)) {
-      child->layout.computedFlexBasis =
-          fmaxf(child->style.flexBasis, getPaddingAndBorderAxis(child, mainAxis));
-    }
   } else {
     // Compute the flex basis and hypothetical main size (i.e. the clamped
     // flex basis).

tests/CSSLayoutFlexTest.cpp

@@ -35,6 +35,12 @@
   <div style="width: 50px; height: 50px; flex-shrink:1;"></div>
   <div style="width: 50px; height: 50px; flex-shrink:0;"></div>
 </div>
+
+<div id="flex_basis_overrides_main_size" style="height: 100px; width: 100px;">
+  <div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+</div>
  *
  */
 
@@ -308,3 +314,70 @@ TEST(CSSLayoutTest, flex_shrink_to_zero) {
 
   CSSNodeFreeRecursive(root);
 }
+
+TEST(CSSLayoutTest, flex_basis_overrides_main_size) {
+  const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetWidth(root, 100);
+  CSSNodeStyleSetHeight(root, 100);
+
+  const CSSNodeRef root_child0 = CSSNodeNew();
+  CSSNodeStyleSetFlexGrow(root_child0, 1);
+  CSSNodeStyleSetFlexBasis(root_child0, 50);
+  CSSNodeStyleSetHeight(root_child0, 20);
+  CSSNodeInsertChild(root, root_child0, 0);
+
+  const CSSNodeRef root_child1 = CSSNodeNew();
+  CSSNodeStyleSetFlexGrow(root_child1, 1);
+  CSSNodeStyleSetHeight(root_child1, 10);
+  CSSNodeInsertChild(root, root_child1, 1);
+
+  const CSSNodeRef root_child2 = CSSNodeNew();
+  CSSNodeStyleSetFlexGrow(root_child2, 1);
+  CSSNodeStyleSetHeight(root_child2, 10);
+  CSSNodeInsertChild(root, root_child2, 2);
+  CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
+  ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0));
+  ASSERT_EQ(60, CSSNodeLayoutGetHeight(root_child0));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child1));
+  ASSERT_EQ(60, CSSNodeLayoutGetTop(root_child1));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child1));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child1));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
+  ASSERT_EQ(80, CSSNodeLayoutGetTop(root_child2));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child2));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child2));
+
+  CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionRTL);
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root));
+  ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0));
+  ASSERT_EQ(60, CSSNodeLayoutGetHeight(root_child0));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child1));
+  ASSERT_EQ(60, CSSNodeLayoutGetTop(root_child1));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child1));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child1));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child2));
+  ASSERT_EQ(80, CSSNodeLayoutGetTop(root_child2));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child2));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child2));
+
+  CSSNodeFreeRecursive(root);
+}