Baseline support #317

Closed
woehrl01 wants to merge 33 commits from baseline-support into master
16 changed files with 1618 additions and 4 deletions
Showing only changes of commit eaa2501c76 - Show all commits

View File

@@ -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);
}
}
}

View File

@@ -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>

View File

@@ -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);
}
}

View File

@@ -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);
}

View File

@@ -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;
}
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;