Measure nodes which have margin: auto and align-item: stretch

Summary: If you have a measurable node and set ```marign-left: auto``` + ```align-item:stretch``` on it, it won't get measured and they get a width/height of ```-(nan)```. This change fixes that behaviour. Fixes #644. Closes #645 Differential Revision: D6413512 Pulled By: emilsjolander fbshipit-source-id: 755febeb33bb0d4520ca6b3c28d56ac333e4a14d
facebook · Nov 27, 2017 · afaafb4 · afaafb4
1 parent e566fcc
commit afaafb4
Show file tree

Hide file tree

Showing 7 changed files with 505 additions and 2 deletions.
diff --git a/csharp/tests/Facebook.Yoga/YGMarginTest.cs b/csharp/tests/Facebook.Yoga/YGMarginTest.cs
@@ -1607,5 +1607,121 @@ public void Test_margin_auto_left_fix_right_child_bigger_than_parent()
             Assert.AreEqual(72f, root_child0.LayoutHeight);
         }
 
+        [Test]
+        public void Test_margin_auto_top_stretching_child()
+        {
+            YogaConfig config = new YogaConfig();
+
+            YogaNode root = new YogaNode(config);
+            root.AlignItems = YogaAlign.Center;
+            root.Width = 200;
+            root.Height = 200;
+
+            YogaNode root_child0 = new YogaNode(config);
+            root_child0.FlexGrow = 1;
+            root_child0.FlexShrink = 1;
+            root_child0.FlexBasis = 0.Percent();
+            root_child0.MarginTop = YogaValue.Auto();
+            root.Insert(0, root_child0);
+
+            YogaNode root_child1 = new YogaNode(config);
+            root_child1.Width = 50;
+            root_child1.Height = 50;
+            root.Insert(1, root_child1);
+            root.StyleDirection = YogaDirection.LTR;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0f, root.LayoutX);
+            Assert.AreEqual(0f, root.LayoutY);
+            Assert.AreEqual(200f, root.LayoutWidth);
+            Assert.AreEqual(200f, root.LayoutHeight);
+
+            Assert.AreEqual(100f, root_child0.LayoutX);
+            Assert.AreEqual(0f, root_child0.LayoutY);
+            Assert.AreEqual(0f, root_child0.LayoutWidth);
+            Assert.AreEqual(150f, root_child0.LayoutHeight);
+
+            Assert.AreEqual(75f, root_child1.LayoutX);
+            Assert.AreEqual(150f, root_child1.LayoutY);
+            Assert.AreEqual(50f, root_child1.LayoutWidth);
+            Assert.AreEqual(50f, root_child1.LayoutHeight);
+
+            root.StyleDirection = YogaDirection.RTL;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0f, root.LayoutX);
+            Assert.AreEqual(0f, root.LayoutY);
+            Assert.AreEqual(200f, root.LayoutWidth);
+            Assert.AreEqual(200f, root.LayoutHeight);
+
+            Assert.AreEqual(100f, root_child0.LayoutX);
+            Assert.AreEqual(0f, root_child0.LayoutY);
+            Assert.AreEqual(0f, root_child0.LayoutWidth);
+            Assert.AreEqual(150f, root_child0.LayoutHeight);
+
+            Assert.AreEqual(75f, root_child1.LayoutX);
+            Assert.AreEqual(150f, root_child1.LayoutY);
+            Assert.AreEqual(50f, root_child1.LayoutWidth);
+            Assert.AreEqual(50f, root_child1.LayoutHeight);
+        }
+
+        [Test]
+        public void Test_margin_auto_left_stretching_child()
+        {
+            YogaConfig config = new YogaConfig();
+
+            YogaNode root = new YogaNode(config);
+            root.AlignItems = YogaAlign.Center;
+            root.Width = 200;
+            root.Height = 200;
+
+            YogaNode root_child0 = new YogaNode(config);
+            root_child0.FlexGrow = 1;
+            root_child0.FlexShrink = 1;
+            root_child0.FlexBasis = 0.Percent();
+            root_child0.MarginLeft = YogaValue.Auto();
+            root.Insert(0, root_child0);
+
+            YogaNode root_child1 = new YogaNode(config);
+            root_child1.Width = 50;
+            root_child1.Height = 50;
+            root.Insert(1, root_child1);
+            root.StyleDirection = YogaDirection.LTR;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0f, root.LayoutX);
+            Assert.AreEqual(0f, root.LayoutY);
+            Assert.AreEqual(200f, root.LayoutWidth);
+            Assert.AreEqual(200f, root.LayoutHeight);
+
+            Assert.AreEqual(200f, root_child0.LayoutX);
+            Assert.AreEqual(0f, root_child0.LayoutY);
+            Assert.AreEqual(0f, root_child0.LayoutWidth);
+            Assert.AreEqual(150f, root_child0.LayoutHeight);
+
+            Assert.AreEqual(75f, root_child1.LayoutX);
+            Assert.AreEqual(150f, root_child1.LayoutY);
+            Assert.AreEqual(50f, root_child1.LayoutWidth);
+            Assert.AreEqual(50f, root_child1.LayoutHeight);
+
+            root.StyleDirection = YogaDirection.RTL;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0f, root.LayoutX);
+            Assert.AreEqual(0f, root.LayoutY);
+            Assert.AreEqual(200f, root.LayoutWidth);
+            Assert.AreEqual(200f, root.LayoutHeight);
+
+            Assert.AreEqual(200f, root_child0.LayoutX);
+            Assert.AreEqual(0f, root_child0.LayoutY);
+            Assert.AreEqual(0f, root_child0.LayoutWidth);
+            Assert.AreEqual(150f, root_child0.LayoutHeight);
+
+            Assert.AreEqual(75f, root_child1.LayoutX);
+            Assert.AreEqual(150f, root_child1.LayoutY);
+            Assert.AreEqual(50f, root_child1.LayoutWidth);
+            Assert.AreEqual(50f, root_child1.LayoutHeight);
+        }
+
     }
 }
diff --git a/gentest/fixtures/YGMarginTest.html b/gentest/fixtures/YGMarginTest.html
@@ -140,3 +140,13 @@
 <div id="margin_auto_left_fix_right_child_bigger_than_parent" style="height: 52px; width: 52px; justify-content: center;">
   <div style="width: 72px; height: 72px; margin-left: auto; margin-right: 10px;"></div>
 </div>
+
+<div id="margin_auto_top_stretching_child" style="width: 200px; height: 200px; align-items: center;">
+  <div style="flex: 1; margin-top:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_left_stretching_child" style="width: 200px; height: 200px; align-items: center;">
+  <div style="flex: 1; margin-left:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
diff --git a/java/tests/com/facebook/yoga/YGMarginTest.java b/java/tests/com/facebook/yoga/YGMarginTest.java
@@ -1575,4 +1575,118 @@ public void test_margin_auto_left_fix_right_child_bigger_than_parent() {
     assertEquals(72f, root_child0.getLayoutHeight(), 0.0f);
   }
 
+  @Test
+  public void test_margin_auto_top_stretching_child() {
+    YogaConfig config = new YogaConfig();
+
+    final YogaNode root = new YogaNode(config);
+    root.setAlignItems(YogaAlign.CENTER);
+    root.setWidth(200f);
+    root.setHeight(200f);
+
+    final YogaNode root_child0 = new YogaNode(config);
+    root_child0.setFlexGrow(1f);
+    root_child0.setFlexShrink(1f);
+    root_child0.setFlexBasisPercent(0f);
+    root_child0.setMarginAuto(YogaEdge.TOP);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child1 = new YogaNode(config);
+    root_child1.setWidth(50f);
+    root_child1.setHeight(50f);
+    root.addChildAt(root_child1, 1);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(200f, root.getLayoutWidth(), 0.0f);
+    assertEquals(200f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(100f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(150f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(75f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(150f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
+
+    root.setDirection(YogaDirection.RTL);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(200f, root.getLayoutWidth(), 0.0f);
+    assertEquals(200f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(100f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(150f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(75f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(150f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
+  }
+
+  @Test
+  public void test_margin_auto_left_stretching_child() {
+    YogaConfig config = new YogaConfig();
+
+    final YogaNode root = new YogaNode(config);
+    root.setAlignItems(YogaAlign.CENTER);
+    root.setWidth(200f);
+    root.setHeight(200f);
+
+    final YogaNode root_child0 = new YogaNode(config);
+    root_child0.setFlexGrow(1f);
+    root_child0.setFlexShrink(1f);
+    root_child0.setFlexBasisPercent(0f);
+    root_child0.setMarginAuto(YogaEdge.LEFT);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child1 = new YogaNode(config);
+    root_child1.setWidth(50f);
+    root_child1.setHeight(50f);
+    root.addChildAt(root_child1, 1);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(200f, root.getLayoutWidth(), 0.0f);
+    assertEquals(200f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(150f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(75f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(150f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
+
+    root.setDirection(YogaDirection.RTL);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(200f, root.getLayoutWidth(), 0.0f);
+    assertEquals(200f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(200f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(150f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(75f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(150f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
+  }
+
 }
diff --git a/javascript/tests/Facebook.Yoga/YGMarginTest.js b/javascript/tests/Facebook.Yoga/YGMarginTest.js
@@ -1694,3 +1694,125 @@ it("margin_auto_left_fix_right_child_bigger_than_parent", function () {
     config.free();
   }
 });
+it("margin_auto_top_stretching_child", function () {
+  var config = Yoga.Config.create();
+
+  try {
+    var root = Yoga.Node.create(config);
+    root.setAlignItems(Yoga.ALIGN_CENTER);
+    root.setWidth(200);
+    root.setHeight(200);
+
+    var root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexShrink(1);
+    root_child0.setFlexBasis("0%");
+    root_child0.setMargin(Yoga.EDGE_TOP, "auto");
+    root.insertChild(root_child0, 0);
+
+    var root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(50);
+    root_child1.setHeight(50);
+    root.insertChild(root_child1, 1);
+    root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
+
+    console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
+    console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
+    console.assert(200 === root.getComputedWidth(), "200 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
+    console.assert(200 === root.getComputedHeight(), "200 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
+
+    console.assert(100 === root_child0.getComputedLeft(), "100 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
+    console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
+    console.assert(0 === root_child0.getComputedWidth(), "0 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
+    console.assert(150 === root_child0.getComputedHeight(), "150 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
+
+    console.assert(75 === root_child1.getComputedLeft(), "75 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
+    console.assert(150 === root_child1.getComputedTop(), "150 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
+    console.assert(50 === root_child1.getComputedWidth(), "50 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
+    console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
+
+    root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
+
+    console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
+    console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
+    console.assert(200 === root.getComputedWidth(), "200 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
+    console.assert(200 === root.getComputedHeight(), "200 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
+
+    console.assert(100 === root_child0.getComputedLeft(), "100 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
+    console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
+    console.assert(0 === root_child0.getComputedWidth(), "0 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
+    console.assert(150 === root_child0.getComputedHeight(), "150 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
+
+    console.assert(75 === root_child1.getComputedLeft(), "75 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
+    console.assert(150 === root_child1.getComputedTop(), "150 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
+    console.assert(50 === root_child1.getComputedWidth(), "50 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
+    console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
+  } finally {
+    if (typeof root !== "undefined") {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+it("margin_auto_left_stretching_child", function () {
+  var config = Yoga.Config.create();
+
+  try {
+    var root = Yoga.Node.create(config);
+    root.setAlignItems(Yoga.ALIGN_CENTER);
+    root.setWidth(200);
+    root.setHeight(200);
+
+    var root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexShrink(1);
+    root_child0.setFlexBasis("0%");
+    root_child0.setMargin(Yoga.EDGE_LEFT, "auto");
+    root.insertChild(root_child0, 0);
+
+    var root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(50);
+    root_child1.setHeight(50);
+    root.insertChild(root_child1, 1);
+    root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
+
+    console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
+    console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
+    console.assert(200 === root.getComputedWidth(), "200 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
+    console.assert(200 === root.getComputedHeight(), "200 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
+
+    console.assert(200 === root_child0.getComputedLeft(), "200 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
+    console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
+    console.assert(0 === root_child0.getComputedWidth(), "0 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
+    console.assert(150 === root_child0.getComputedHeight(), "150 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
+
+    console.assert(75 === root_child1.getComputedLeft(), "75 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
+    console.assert(150 === root_child1.getComputedTop(), "150 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
+    console.assert(50 === root_child1.getComputedWidth(), "50 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
+    console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
+
+    root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
+
+    console.assert(0 === root.getComputedLeft(), "0 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
+    console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
+    console.assert(200 === root.getComputedWidth(), "200 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
+    console.assert(200 === root.getComputedHeight(), "200 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
+
+    console.assert(200 === root_child0.getComputedLeft(), "200 === root_child0.getComputedLeft() (" + root_child0.getComputedLeft() + ")");
+    console.assert(0 === root_child0.getComputedTop(), "0 === root_child0.getComputedTop() (" + root_child0.getComputedTop() + ")");
+    console.assert(0 === root_child0.getComputedWidth(), "0 === root_child0.getComputedWidth() (" + root_child0.getComputedWidth() + ")");
+    console.assert(150 === root_child0.getComputedHeight(), "150 === root_child0.getComputedHeight() (" + root_child0.getComputedHeight() + ")");
+
+    console.assert(75 === root_child1.getComputedLeft(), "75 === root_child1.getComputedLeft() (" + root_child1.getComputedLeft() + ")");
+    console.assert(150 === root_child1.getComputedTop(), "150 === root_child1.getComputedTop() (" + root_child1.getComputedTop() + ")");
+    console.assert(50 === root_child1.getComputedWidth(), "50 === root_child1.getComputedWidth() (" + root_child1.getComputedWidth() + ")");
+    console.assert(50 === root_child1.getComputedHeight(), "50 === root_child1.getComputedHeight() (" + root_child1.getComputedHeight() + ")");
+  } finally {
+    if (typeof root !== "undefined") {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});