Fix flex within max width constraint

Summary: Max dimension constraints were not correctly passed down to children. see https://github.com/facebook/css-layout/issues/230 for more info fixes #230 Reviewed By: gkassabli Differential Revision: D4147199 fbshipit-source-id: feb335eb8687a1b7939ee8cd8649e455e0c069a9
2016-11-08 09:45:58 -08:00
parent 1baa239389
commit 3e567fdcae
5 changed files with 210 additions and 0 deletions
--- a/CSSLayout/CSSLayout.c
+++ b/CSSLayout/CSSLayout.c
@@ -964,6 +964,16 @@ static void computeChildFlexBasis(const CSSNodeRef node,
      childHeightMeasureMode = CSSMeasureModeExactly;
    }

+    if (!CSSValueIsUndefined(child->style.maxDimensions[CSSDimensionWidth])) {
+      childWidth = child->style.maxDimensions[CSSDimensionWidth];
+      childWidthMeasureMode = CSSMeasureModeAtMost;
+    }
+
+    if (!CSSValueIsUndefined(child->style.maxDimensions[CSSDimensionHeight])) {
+      childHeight = child->style.maxDimensions[CSSDimensionHeight];
+      childHeightMeasureMode = CSSMeasureModeAtMost;
+    }
+
    // Measure the child
    layoutNodeInternal(child,
                       childWidth,
@@ -1670,6 +1680,16 @@ static void layoutNodeImpl(const CSSNodeRef node,
          }
        }

+        if (!CSSValueIsUndefined(currentRelativeChild->style.maxDimensions[CSSDimensionWidth])) {
+          childWidth = currentRelativeChild->style.maxDimensions[CSSDimensionWidth];
+          childWidthMeasureMode = CSSMeasureModeAtMost;
+        }
+
+        if (!CSSValueIsUndefined(currentRelativeChild->style.maxDimensions[CSSDimensionHeight])) {
+          childHeight = currentRelativeChild->style.maxDimensions[CSSDimensionHeight];
+          childHeightMeasureMode = CSSMeasureModeAtMost;
+        }
+
        const bool requiresStretchLayout =
            !isStyleDimDefined(currentRelativeChild, crossAxis) &&
            getAlignItem(node, currentRelativeChild) == CSSAlignStretch;
@@ -1859,6 +1879,16 @@ static void layoutNodeImpl(const CSSNodeRef node,
                            getMarginAxis(child, CSSFlexDirectionColumn);
            }

+            if (!CSSValueIsUndefined(child->style.maxDimensions[CSSDimensionWidth])) {
+              childWidth = child->style.maxDimensions[CSSDimensionWidth];
+              childWidthMeasureMode = CSSMeasureModeAtMost;
+            }
+
+            if (!CSSValueIsUndefined(child->style.maxDimensions[CSSDimensionHeight])) {
+              childHeight = child->style.maxDimensions[CSSDimensionHeight];
+              childHeightMeasureMode = CSSMeasureModeAtMost;
+            }
+
            // If the child defines a definite size for its cross axis, there's
            // no need to stretch.
            if (!isCrossSizeDefinite) {
--- a/csharp/tests/Facebook.CSSLayout/CSSLayoutMinMaxDimensionTest.cs
+++ b/csharp/tests/Facebook.CSSLayout/CSSLayoutMinMaxDimensionTest.cs
@@ -41,6 +41,12 @@
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
 </div>
+
+<div id="flex_grow_within_max_width" style="width: 200px; height: 100px;">
+  <div style="flex-direction: row; max-width: 100px;">
+    <div style="height: 20px; flex-grow: 1;"></div>
+  </div>
+</div>
 *
 */

@@ -383,5 +389,58 @@ namespace Facebook.CSSLayout
            Assert.AreEqual(50, root_child2.LayoutHeight);
        }

+        [Test]
+        public void Test_flex_grow_within_max_width()
+        {
+            CSSNode root = new CSSNode();
+            root.StyleWidth = 200;
+            root.StyleHeight = 100;
+
+            CSSNode root_child0 = new CSSNode();
+            root_child0.FlexDirection = CSSFlexDirection.Row;
+            root_child0.StyleMaxWidth = 100;
+            root.Insert(0, root_child0);
+
+            CSSNode root_child0_child0 = new CSSNode();
+            root_child0_child0.FlexGrow = 1;
+            root_child0_child0.StyleHeight = 20;
+            root_child0.Insert(0, root_child0_child0);
+            root.StyleDirection = CSSDirection.LeftToRight;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0, root.LayoutX);
+            Assert.AreEqual(0, root.LayoutY);
+            Assert.AreEqual(200, root.LayoutWidth);
+            Assert.AreEqual(100, root.LayoutHeight);
+
+            Assert.AreEqual(0, root_child0.LayoutX);
+            Assert.AreEqual(0, root_child0.LayoutY);
+            Assert.AreEqual(100, root_child0.LayoutWidth);
+            Assert.AreEqual(20, root_child0.LayoutHeight);
+
+            Assert.AreEqual(0, root_child0_child0.LayoutX);
+            Assert.AreEqual(0, root_child0_child0.LayoutY);
+            Assert.AreEqual(100, root_child0_child0.LayoutWidth);
+            Assert.AreEqual(20, root_child0_child0.LayoutHeight);
+
+            root.StyleDirection = CSSDirection.RightToLeft;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0, root.LayoutX);
+            Assert.AreEqual(0, root.LayoutY);
+            Assert.AreEqual(200, root.LayoutWidth);
+            Assert.AreEqual(100, root.LayoutHeight);
+
+            Assert.AreEqual(100, root_child0.LayoutX);
+            Assert.AreEqual(0, root_child0.LayoutY);
+            Assert.AreEqual(100, root_child0.LayoutWidth);
+            Assert.AreEqual(20, root_child0.LayoutHeight);
+
+            Assert.AreEqual(0, root_child0_child0.LayoutX);
+            Assert.AreEqual(0, root_child0_child0.LayoutY);
+            Assert.AreEqual(100, root_child0_child0.LayoutWidth);
+            Assert.AreEqual(20, root_child0_child0.LayoutHeight);
+        }
+
    }
 }
--- a/gentest/fixtures/CSSLayoutMinMaxDimensionTest.html
+++ b/gentest/fixtures/CSSLayoutMinMaxDimensionTest.html
@@ -29,3 +29,9 @@
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
 </div>
+
+<div id="flex_grow_within_max_width" style="width: 200px; height: 100px;">
+  <div style="flex-direction: row; max-width: 100px;">
+    <div style="height: 20px; flex-grow: 1;"></div>
+  </div>
+</div>
--- a/java/tests/com/facebook/csslayout/CSSLayoutMinMaxDimensionTest.java
+++ b/java/tests/com/facebook/csslayout/CSSLayoutMinMaxDimensionTest.java
@@ -41,6 +41,12 @@
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
 </div>
+
+<div id="flex_grow_within_max_width" style="width: 200px; height: 100px;">
+  <div style="flex-direction: row; max-width: 100px;">
+    <div style="height: 20px; flex-grow: 1;"></div>
+  </div>
+</div>
 *
 */

@@ -375,4 +381,56 @@ public class CSSLayoutMinMaxDimensionTest {
    assertEquals(50, root_child2.getLayoutHeight(), 0.0f);
  }

+  @Test
+  public void test_flex_grow_within_max_width() {
+    final CSSNode root = new CSSNode();
+    root.setStyleWidth(200);
+    root.setStyleHeight(100);
+
+    final CSSNode root_child0 = new CSSNode();
+    root_child0.setFlexDirection(CSSFlexDirection.ROW);
+    root_child0.setStyleMaxWidth(100);
+    root.addChildAt(root_child0, 0);
+
+    final CSSNode root_child0_child0 = new CSSNode();
+    root_child0_child0.setFlexGrow(1);
+    root_child0_child0.setStyleHeight(20);
+    root_child0.addChildAt(root_child0_child0, 0);
+    root.setDirection(CSSDirection.LTR);
+    root.calculateLayout(null);
+
+    assertEquals(0, root.getLayoutX(), 0.0f);
+    assertEquals(0, root.getLayoutY(), 0.0f);
+    assertEquals(200, root.getLayoutWidth(), 0.0f);
+    assertEquals(100, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0, root_child0.getLayoutY(), 0.0f);
+    assertEquals(100, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(100, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20, root_child0_child0.getLayoutHeight(), 0.0f);
+
+    root.setDirection(CSSDirection.RTL);
+    root.calculateLayout(null);
+
+    assertEquals(0, root.getLayoutX(), 0.0f);
+    assertEquals(0, root.getLayoutY(), 0.0f);
+    assertEquals(200, root.getLayoutWidth(), 0.0f);
+    assertEquals(100, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(100, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0, root_child0.getLayoutY(), 0.0f);
+    assertEquals(100, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(100, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20, root_child0_child0.getLayoutHeight(), 0.0f);
+  }
+
 }
--- a/tests/CSSLayoutMinMaxDimensionTest.cpp
+++ b/tests/CSSLayoutMinMaxDimensionTest.cpp
@@ -41,6 +41,12 @@
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
 </div>
+
+<div id="flex_grow_within_max_width" style="width: 200px; height: 100px;">
+  <div style="flex-direction: row; max-width: 100px;">
+    <div style="height: 20px; flex-grow: 1;"></div>
+  </div>
+</div>
 *
 */

@@ -363,3 +369,54 @@ TEST(CSSLayoutTest, justify_content_overflow_min_max) {

  CSSNodeFreeRecursive(root);
 }
+
+TEST(CSSLayoutTest, flex_grow_within_max_width) {
+  const CSSNodeRef root = CSSNodeNew();
+  CSSNodeStyleSetWidth(root, 200);
+  CSSNodeStyleSetHeight(root, 100);
+
+  const CSSNodeRef root_child0 = CSSNodeNew();
+  CSSNodeStyleSetFlexDirection(root_child0, CSSFlexDirectionRow);
+  CSSNodeStyleSetMaxWidth(root_child0, 100);
+  CSSNodeInsertChild(root, root_child0, 0);
+
+  const CSSNodeRef root_child0_child0 = CSSNodeNew();
+  CSSNodeStyleSetFlexGrow(root_child0_child0, 1);
+  CSSNodeStyleSetHeight(root_child0_child0, 20);
+  CSSNodeInsertChild(root_child0, root_child0_child0, 0);
+  CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionLTR);
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
+  ASSERT_EQ(200, 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(20, CSSNodeLayoutGetHeight(root_child0));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0_child0));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0_child0));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child0_child0));
+
+  CSSNodeCalculateLayout(root, CSSUndefined, CSSUndefined, CSSDirectionRTL);
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root));
+  ASSERT_EQ(200, CSSNodeLayoutGetWidth(root));
+  ASSERT_EQ(100, CSSNodeLayoutGetHeight(root));
+
+  ASSERT_EQ(100, CSSNodeLayoutGetLeft(root_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child0));
+
+  ASSERT_EQ(0, CSSNodeLayoutGetLeft(root_child0_child0));
+  ASSERT_EQ(0, CSSNodeLayoutGetTop(root_child0_child0));
+  ASSERT_EQ(100, CSSNodeLayoutGetWidth(root_child0_child0));
+  ASSERT_EQ(20, CSSNodeLayoutGetHeight(root_child0_child0));
+
+  CSSNodeFreeRecursive(root);
+}