Baseline support

Summary:
Added baseline support (see #132)

You have the ability for a custom baseline function (```float(*YGBaselineFunc)(YGNodeRef node);```) to return whatever baseline you want.
Closes facebook/yoga#317

Reviewed By: splhack

Differential Revision: D4385061

Pulled By: emilsjolander

fbshipit-source-id: cb8a59a09237c840fa3e21753ab68239997dab0c

csharp/Facebook.Yoga/YogaAlign.cs

@@ -16,5 +16,6 @@ public enum YogaAlign
         Center,
         FlexEnd,
         Stretch,
+        Baseline,
     }
 }

csharp/tests/Facebook.Yoga/YGAlignSelfTest.cs

@@ -174,5 +174,76 @@ public void Test_align_self_flex_end_override_flex_start()
             Assert.AreEqual(10f, root_child0.LayoutHeight);
         }
 
+        [Test]
+        public void Test_align_self_baseline()
+        {
+            YogaNode root = new YogaNode();
+            root.FlexDirection = YogaFlexDirection.Row;
+            root.Width = 100;
+            root.Height = 100;
+
+            YogaNode root_child0 = new YogaNode();
+            root_child0.AlignSelf = YogaAlign.Baseline;
+            root_child0.Width = 50;
+            root_child0.Height = 50;
+            root.Insert(0, root_child0);
+
+            YogaNode root_child1 = new YogaNode();
+            root_child1.AlignSelf = YogaAlign.Baseline;
+            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);
+            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);
+
+            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);
+        }
+
     }
 }

enums.py

@@ -46,6 +46,7 @@
         'Center',
         'FlexEnd',
         'Stretch',
+        'Baseline',
     ],
     'PositionType': [
         'Relative',

gentest/fixtures/YGAlignItemsTest.html

@@ -13,3 +13,135 @@
 <div id="align_items_flex_end" style="width: 100px; height: 100px; align-items: flex-end;">
   <div style="height: 10px; width: 10px;"></div>
 </div>
+
+<div id="align_baseline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 50px; height: 20px;"></div>
+</div>
+
+<div id="align_baseline_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 50px; height: 20px;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+</div>
+
+<div id="align_baseline_child_multiline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 60px;"></div>
+  <div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
+    <div style="width: 25px; height: 20px;"></div>
+    <div style="width: 25px; height: 10px;"></div>
+    <div style="width: 25px; height: 20px;"></div>
+    <div style="width: 25px; height: 10px;"></div>
+  </div>
+</div>
+
+<div id="align_baseline_child_multiline_override" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 60px;"></div>
+  <div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
+    <div style="width: 25px; height: 20px;"></div>
+    <div style="width: 25px; height: 10px;align-self:baseline;"></div>
+    <div style="width: 25px; height: 20px;"></div>
+    <div style="width: 25px; height: 10px;align-self:baseline;"></div>
+  </div>
+</div>
+
+<div id="align_baseline_child_multiline_no_override_on_secondline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 60px;"></div>
+  <div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
+    <div style="width: 25px; height: 20px;"></div>
+    <div style="width: 25px; height: 10px;"></div>
+    <div style="width: 25px; height: 20px;"></div>
+    <div style="width: 25px; height: 10px;align-self:baseline;"></div>
+  </div>
+</div>
+
+
+<div id="align_baseline_child_top" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;top:10px;"></div>
+  <div style="width: 50px; height: 20px;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+</div>
+
+<div id="align_baseline_child_top2" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 50px; height: 20px;top:5px">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+</div>
+
+<div id="align_baseline_double_nested_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;">
+    <div style="width: 50px; height: 20px;"></div>
+  </div>
+  <div style="width: 50px; height: 20px;">
+    <div style="width: 50px; height: 15px;"></div>
+  </div>
+</div>
+
+
+<div id="align_baseline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 50px; height: 20px;"></div>
+</div>
+
+<div id="align_baseline_child_margin" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;margin: 5px;"></div>
+  <div style="width: 50px; height: 20px;">
+    <div style="width: 50px; height: 10px;margin: 1px;"></div>
+  </div>
+</div>
+
+<div id="align_baseline_child_padding" style="width: 100px; height: 100px; padding:5px; flex-direction:row; align-items: baseline;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 50px; height: 20px;padding:5px;">
+    <div style="width: 50px; height: 10px;"></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;"></div>
+  <div style="width: 50px; height: 20px;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+  <div style="width: 50px; height: 20px;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="align_baseline_multiline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 30px; height: 50px;">
+    <div style="width: 20px; height: 20px;"></div>
+  </div>
+  <div style="width: 40px; height: 70px;">
+    <div style="width: 10px; height: 10px;"></div>
+  </div>
+  <div style="width: 50px; height: 20px;"></div>
+</div>
+
+<div id="align_baseline_multiline_column2" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
+  <div style="width: 50px; height: 50px;flex-direction:column;"></div>
+  <div style="width: 30px; height: 50px;flex-direction:column;">
+    <div style="width: 20px; height: 20px;flex-direction:column;"></div>
+  </div>
+  <div style="width: 40px; height: 70px;flex-direction:column;">
+    <div style="width: 10px; height: 10px;flex-direction:column;"></div>
+  </div>
+  <div style="width: 50px; height: 20px;flex-direction:column;"></div>
+</div>
+
+
+
+<div id="align_baseline_multiline_row_and_column" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
+  <div style="width: 50px; height: 50px;"></div>
+  <div style="width: 50px; height: 50px;flex-direction:column;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+  <div style="width: 50px; height: 20px;flex-direction:column;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+  <div style="width: 50px; height: 20px;"></div>
+</div>

gentest/fixtures/YGAlignSelfTest.html

@@ -13,3 +13,11 @@
 <div id="align_self_flex_end_override_flex_start" style="width:100px; height: 100px; align-items: flex-start;">
   <div style="height: 10px; width: 10px; align-self: flex-end;"></div>
 </div>
+
+
+<div id="align_self_baseline" style="width: 100px; height: 100px; flex-direction:row;">
+  <div style="width: 50px; height: 50px;align-self: baseline;"></div>
+  <div style="width: 50px; height: 20px;align-self: baseline;">
+    <div style="width: 50px; height: 10px;"></div>
+  </div>
+</div>

gentest/gentest-cpp.js

@@ -83,6 +83,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexStart:{value:'YGAlignFlexStart'},
   YGAlignStretch:{value:'YGAlignStretch'},
 
+  YGAlignBaseline:{value:'YGAlignBaseline'},
+
   YGDirectionInherit:{value:'YGDirectionInherit'},
   YGDirectionLTR:{value:'YGDirectionLTR'},
   YGDirectionRTL:{value:'YGDirectionRTL'},

gentest/gentest-cs.js

@@ -96,6 +96,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'YogaAlign.FlexEnd'},
   YGAlignFlexStart:{value:'YogaAlign.FlexStart'},
   YGAlignStretch:{value:'YogaAlign.Stretch'},
+  YGAlignBaseline:{value:'YogaAlign.Baseline'},
 
   YGDirectionInherit:{value:'YogaDirection.Inherit'},
   YGDirectionLTR:{value:'YogaDirection.LTR'},

gentest/gentest-java.js

@@ -100,6 +100,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'YogaAlign.FLEX_END'},
   YGAlignFlexStart:{value:'YogaAlign.FLEX_START'},
   YGAlignStretch:{value:'YogaAlign.STRETCH'},
+  YGAlignBaseline:{value:'YogaAlign.BASELINE'},
 
   YGDirectionInherit:{value:'YogaDirection.INHERIT'},
   YGDirectionLTR:{value:'YogaDirection.LTR'},

gentest/gentest-javascript.js

@@ -90,6 +90,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'Yoga.ALIGN_FLEX_END'},
   YGAlignFlexStart:{value:'Yoga.ALIGN_FLEX_START'},
   YGAlignStretch:{value:'Yoga.ALIGN_STRETCH'},
+  YGAlignBaseline:{value:'Yoga.ALIGN_BASELINE'},
 
   YGDirectionInherit:{value:'Yoga.DIRECTION_INHERIT'},
   YGDirectionLTR:{value:'Yoga.DIRECTION_LTR'},

gentest/gentest.js

@@ -377,6 +377,7 @@ function alignValue(e, value) {
     case 'stretch': return e.YGAlignStretch;
     case 'flex-start': return e.YGAlignFlexStart;
     case 'flex-end': return e.YGAlignFlexEnd;
+    case 'baseline': return e.YGAlignBaseline;
   }
 }
 

java/com/facebook/yoga/YogaAlign.java

@@ -17,7 +17,8 @@ public enum YogaAlign {
   FLEX_START(1),
   CENTER(2),
   FLEX_END(3),
-  STRETCH(4);
+  STRETCH(4),
+  BASELINE(5);
 
   private int mIntValue;
 
@@ -36,6 +37,7 @@ public static YogaAlign fromInt(int value) {
       case 2: return CENTER;
       case 3: return FLEX_END;
       case 4: return STRETCH;
+      case 5: return BASELINE;
       default: throw new IllegalArgumentException("Unkown enum value: " + value);
     }
   }