fix multiline baseline layout

csharp/tests/Facebook.Yoga/YGAlignBaseline.cs

@@ -359,5 +359,121 @@ namespace Facebook.Yoga
             Assert.AreEqual(10f, root_child1_child0.LayoutHeight);
         }
 
+        [Test]
+        public void Test_align_baseline_multiline()
+        {
+            YogaNode root = new YogaNode();
+            root.FlexDirection = YogaFlexDirection.Row;
+            root.AlignItems = YogaAlign.Baseline;
+            root.Wrap = YogaWrap.Wrap;
+            root.Width = 100;
+            root.Height = 100;
+
+            YogaNode root_child0 = new YogaNode();
+            root_child0.Width = 50;
+            root_child0.Height = 50;
+            root.Insert(0, root_child0);
+
+            YogaNode root_child1 = new YogaNode();
+            root_child1.Width = 50;
+            root_child1.Height = 20;
+            root.Insert(1, root_child1);
+
+            YogaNode root_child1_child0 = new YogaNode();
+            root_child1_child0.Width = 50;
+            root_child1_child0.Height = 10;
+            root_child1.Insert(0, root_child1_child0);
+
+            YogaNode root_child2 = new YogaNode();
+            root_child2.Width = 50;
+            root_child2.Height = 20;
+            root.Insert(2, root_child2);
+
+            YogaNode root_child2_child0 = new YogaNode();
+            root_child2_child0.Width = 50;
+            root_child2_child0.Height = 10;
+            root_child2.Insert(0, root_child2_child0);
+
+            YogaNode root_child3 = new YogaNode();
+            root_child3.Width = 50;
+            root_child3.Height = 50;
+            root.Insert(3, root_child3);
+            root.StyleDirection = YogaDirection.LTR;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0f, root.LayoutX);
+            Assert.AreEqual(0f, root.LayoutY);
+            Assert.AreEqual(100f, root.LayoutWidth);
+            Assert.AreEqual(100f, root.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child0.LayoutX);
+            Assert.AreEqual(0f, root_child0.LayoutY);
+            Assert.AreEqual(50f, root_child0.LayoutWidth);
+            Assert.AreEqual(50f, root_child0.LayoutHeight);
+
+            Assert.AreEqual(50f, root_child1.LayoutX);
+            Assert.AreEqual(40f, root_child1.LayoutY);
+            Assert.AreEqual(50f, root_child1.LayoutWidth);
+            Assert.AreEqual(20f, root_child1.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child1_child0.LayoutX);
+            Assert.AreEqual(0f, root_child1_child0.LayoutY);
+            Assert.AreEqual(50f, root_child1_child0.LayoutWidth);
+            Assert.AreEqual(10f, root_child1_child0.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child2.LayoutX);
+            Assert.AreEqual(100f, root_child2.LayoutY);
+            Assert.AreEqual(50f, root_child2.LayoutWidth);
+            Assert.AreEqual(20f, root_child2.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child2_child0.LayoutX);
+            Assert.AreEqual(0f, root_child2_child0.LayoutY);
+            Assert.AreEqual(50f, root_child2_child0.LayoutWidth);
+            Assert.AreEqual(10f, root_child2_child0.LayoutHeight);
+
+            Assert.AreEqual(50f, root_child3.LayoutX);
+            Assert.AreEqual(60f, root_child3.LayoutY);
+            Assert.AreEqual(50f, root_child3.LayoutWidth);
+            Assert.AreEqual(50f, root_child3.LayoutHeight);
+
+            root.StyleDirection = YogaDirection.RTL;
+            root.CalculateLayout();
+
+            Assert.AreEqual(0f, root.LayoutX);
+            Assert.AreEqual(0f, root.LayoutY);
+            Assert.AreEqual(100f, root.LayoutWidth);
+            Assert.AreEqual(100f, root.LayoutHeight);
+
+            Assert.AreEqual(50f, root_child0.LayoutX);
+            Assert.AreEqual(0f, root_child0.LayoutY);
+            Assert.AreEqual(50f, root_child0.LayoutWidth);
+            Assert.AreEqual(50f, root_child0.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child1.LayoutX);
+            Assert.AreEqual(40f, root_child1.LayoutY);
+            Assert.AreEqual(50f, root_child1.LayoutWidth);
+            Assert.AreEqual(20f, root_child1.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child1_child0.LayoutX);
+            Assert.AreEqual(0f, root_child1_child0.LayoutY);
+            Assert.AreEqual(50f, root_child1_child0.LayoutWidth);
+            Assert.AreEqual(10f, root_child1_child0.LayoutHeight);
+
+            Assert.AreEqual(50f, root_child2.LayoutX);
+            Assert.AreEqual(100f, root_child2.LayoutY);
+            Assert.AreEqual(50f, root_child2.LayoutWidth);
+            Assert.AreEqual(20f, root_child2.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child2_child0.LayoutX);
+            Assert.AreEqual(0f, root_child2_child0.LayoutY);
+            Assert.AreEqual(50f, root_child2_child0.LayoutWidth);
+            Assert.AreEqual(10f, root_child2_child0.LayoutHeight);
+
+            Assert.AreEqual(0f, root_child3.LayoutX);
+            Assert.AreEqual(60f, root_child3.LayoutY);
+            Assert.AreEqual(50f, root_child3.LayoutWidth);
+            Assert.AreEqual(50f, root_child3.LayoutHeight);
+        }
+
     }
 }

gentest/fixtures/YGAlignBaseline.html

@@ -31,3 +31,14 @@
     <div style="width: 50px; height: 10px;margin: 1px;"></div>
   </div>
 </div>
+
+<div id="align_baseline_multiline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
+  <div style="width: 50px; height: 50px;background-color:green;"></div>
+  <div style="width: 50px; height: 20px;background-color:green;">
+    <div style="width: 50px; height: 10px;background-color:blue"></div>
+  </div>
+  <div style="width: 50px; height: 20px;background-color:green;">
+    <div style="width: 50px; height: 10px;background-color:blue"></div>
+  </div>
+    <div style="width: 50px; height: 50px;background-color:green;"></div>
+</div>

java/tests/com/facebook/yoga/YGAlignBaseline.java

@@ -353,4 +353,119 @@ public class YGAlignBaseline {
     assertEquals(10f, root_child1_child0.getLayoutHeight(), 0.0f);
   }
 
+  @Test
+  public void test_align_baseline_multiline() {
+    final YogaNode root = new YogaNode();
+    root.setFlexDirection(YogaFlexDirection.ROW);
+    root.setAlignItems(YogaAlign.BASELINE);
+    root.setWrap(YogaWrap.WRAP);
+    root.setWidth(100f);
+    root.setHeight(100f);
+
+    final YogaNode root_child0 = new YogaNode();
+    root_child0.setWidth(50f);
+    root_child0.setHeight(50f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child1 = new YogaNode();
+    root_child1.setWidth(50f);
+    root_child1.setHeight(20f);
+    root.addChildAt(root_child1, 1);
+
+    final YogaNode root_child1_child0 = new YogaNode();
+    root_child1_child0.setWidth(50f);
+    root_child1_child0.setHeight(10f);
+    root_child1.addChildAt(root_child1_child0, 0);
+
+    final YogaNode root_child2 = new YogaNode();
+    root_child2.setWidth(50f);
+    root_child2.setHeight(20f);
+    root.addChildAt(root_child2, 2);
+
+    final YogaNode root_child2_child0 = new YogaNode();
+    root_child2_child0.setWidth(50f);
+    root_child2_child0.setHeight(10f);
+    root_child2.addChildAt(root_child2_child0, 0);
+
+    final YogaNode root_child3 = new YogaNode();
+    root_child3.setWidth(50f);
+    root_child3.setHeight(50f);
+    root.addChildAt(root_child3, 3);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout();
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(100f, root.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(50f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(40f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child1_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child1_child0.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1_child0.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root_child1_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child2.getLayoutX(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child2_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child2_child0.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child2_child0.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root_child2_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(50f, root_child3.getLayoutX(), 0.0f);
+    assertEquals(60f, root_child3.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child3.getLayoutHeight(), 0.0f);
+
+    root.setDirection(YogaDirection.RTL);
+    root.calculateLayout();
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(100f, root.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(50f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child1.getLayoutX(), 0.0f);
+    assertEquals(40f, root_child1.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child1_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child1_child0.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child1_child0.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root_child1_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(50f, root_child2.getLayoutX(), 0.0f);
+    assertEquals(100f, root_child2.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child2_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child2_child0.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child2_child0.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root_child2_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child3.getLayoutX(), 0.0f);
+    assertEquals(60f, root_child3.getLayoutY(), 0.0f);
+    assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
+    assertEquals(50f, root_child3.getLayoutHeight(), 0.0f);
+  }
+
 }

tests/YGAlignBaseline.cpp

@@ -343,3 +343,117 @@ TEST(YogaTest, align_baseline_child_margin) {
 
   YGNodeFreeRecursive(root);
 }
+
+TEST(YogaTest, align_baseline_multiline) {
+  const YGNodeRef root = YGNodeNew();
+  YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
+  YGNodeStyleSetAlignItems(root, YGAlignBaseline);
+  YGNodeStyleSetFlexWrap(root, YGWrapWrap);
+  YGNodeStyleSetWidth(root, 100);
+  YGNodeStyleSetHeight(root, 100);
+
+  const YGNodeRef root_child0 = YGNodeNew();
+  YGNodeStyleSetWidth(root_child0, 50);
+  YGNodeStyleSetHeight(root_child0, 50);
+  YGNodeInsertChild(root, root_child0, 0);
+
+  const YGNodeRef root_child1 = YGNodeNew();
+  YGNodeStyleSetWidth(root_child1, 50);
+  YGNodeStyleSetHeight(root_child1, 20);
+  YGNodeInsertChild(root, root_child1, 1);
+
+  const YGNodeRef root_child1_child0 = YGNodeNew();
+  YGNodeStyleSetWidth(root_child1_child0, 50);
+  YGNodeStyleSetHeight(root_child1_child0, 10);
+  YGNodeInsertChild(root_child1, root_child1_child0, 0);
+
+  const YGNodeRef root_child2 = YGNodeNew();
+  YGNodeStyleSetWidth(root_child2, 50);
+  YGNodeStyleSetHeight(root_child2, 20);
+  YGNodeInsertChild(root, root_child2, 2);
+
+  const YGNodeRef root_child2_child0 = YGNodeNew();
+  YGNodeStyleSetWidth(root_child2_child0, 50);
+  YGNodeStyleSetHeight(root_child2_child0, 10);
+  YGNodeInsertChild(root_child2, root_child2_child0, 0);
+
+  const YGNodeRef root_child3 = YGNodeNew();
+  YGNodeStyleSetWidth(root_child3, 50);
+  YGNodeStyleSetHeight(root_child3, 50);
+  YGNodeInsertChild(root, root_child3, 3);
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
+
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child1));
+  ASSERT_FLOAT_EQ(40, YGNodeLayoutGetTop(root_child1));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child1));
+  ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child1));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child1_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child1_child0));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetTop(root_child2));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2));
+  ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child2));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child2_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child2_child0));
+
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child3));
+  ASSERT_FLOAT_EQ(60, YGNodeLayoutGetTop(root_child3));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child3));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child3));
+
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
+
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1));
+  ASSERT_FLOAT_EQ(40, YGNodeLayoutGetTop(root_child1));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child1));
+  ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child1));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child1_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child1_child0));
+
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child2));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetTop(root_child2));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2));
+  ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child2));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child2_child0));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child2_child0));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child3));
+  ASSERT_FLOAT_EQ(60, YGNodeLayoutGetTop(root_child3));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child3));
+  ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child3));
+
+  YGNodeFreeRecursive(root);
+}

yoga/Yoga.c

@@ -337,12 +337,7 @@ YGMeasureFunc YGNodeGetMeasureFunc(const YGNodeRef node) {
 
 
 void YGNodeSetBaselineFunc(const YGNodeRef node, YGBaselineFunc baselineFunc) {
-  if (baselineFunc == NULL) {
-    node->baseline = NULL;
-  }
-  else {
   node->baseline = baselineFunc;
-  }
 }
 
 YGBaselineFunc YGNodeGetBaselineFunc(const YGNodeRef node) {
@@ -965,7 +960,7 @@ static float YGBaselineOfFirstLine(const YGNodeRef node, const YGFlexDirection m
   }
 
   YGNodeRef baselineChild = NULL;
-  for(unsigned int i = 0; i < YGNodeGetChildCount(node); ++i)
+  for(uint32_t i = 0; i < YGNodeGetChildCount(node); i++)
   {
     const YGNodeRef child = YGNodeGetChild(node, i);
     if(child->style.positionType == YGPositionTypeAbsolute || child->lineIndex > 0)
@@ -2524,6 +2519,7 @@ static void YGNodelayoutImpl(const YGNodeRef node,
       // compute the line's height and find the endIndex
       float lineHeight = 0;
       float maxAscentForCurrentLine = 0;
+	  float maxDescentForCurrentLine = 0;
       for (ii = startIndex; ii < childCount; ii++) {
         const YGNodeRef child = YGNodeListGet(node->children, ii);
 
@@ -2531,19 +2527,21 @@ static void YGNodelayoutImpl(const YGNodeRef node,
           if (child->lineIndex != i) {
             break;
           }
-
-          if (performLayout && YGNodeAlignItem(node, child) == YGAlignBaseline)
-          {
-            maxAscentForCurrentLine = fmaxf(maxAscentForCurrentLine, 
-                YGBaselineForNode(child, crossAxis, availableInnerWidth))
-                  + YGNodeLeadingMargin(child, crossAxis, availableInnerWidth);
-          }
-
           if (YGNodeIsLayoutDimDefined(child, crossAxis)) {
             lineHeight = fmaxf(lineHeight,
                                child->layout.measuredDimensions[dim[crossAxis]] +
                                    YGNodeMarginForAxis(child, crossAxis, availableInnerWidth));
           }
+          if (performLayout && YGNodeAlignItem(node, child) == YGAlignBaseline)
+          {
+            const float ascent = YGBaselineForNode(child, crossAxis, availableInnerWidth) +
+               YGNodeLeadingMargin(child, crossAxis, availableInnerWidth);
+            const float descent = child->layout.measuredDimensions[dim[crossAxis]] +
+               YGNodeMarginForAxis(child, crossAxis, availableInnerWidth) - ascent;
+            maxAscentForCurrentLine = fmaxf(maxAscentForCurrentLine, ascent);
+            maxDescentForCurrentLine = fmaxf(maxDescentForCurrentLine, descent);
+            lineHeight = fmaxf(lineHeight, maxAscentForCurrentLine + maxDescentForCurrentLine);
+          }
         }
       }
       endIndex = ii;