Baseline support #317

Closed
woehrl01 wants to merge 33 commits from baseline-support into master
20 changed files with 2941 additions and 7 deletions
Showing only changes of commit e87edbf206 - Show all commits

View File

@@ -786,22 +786,22 @@ namespace Facebook.Yoga
root.Insert(0, root_child0);
YogaNode root_child1 = new YogaNode();
root_child1.Width = 50;
root_child1.Width = 30;
root_child1.Height = 50;
root.Insert(1, root_child1);
YogaNode root_child1_child0 = new YogaNode();
root_child1_child0.Width = 50;
root_child1_child0.Height = 10;
root_child1_child0.Width = 20;
root_child1_child0.Height = 20;
root_child1.Insert(0, root_child1_child0);
YogaNode root_child2 = new YogaNode();
root_child2.Width = 50;
root_child2.Height = 20;
root_child2.Width = 40;
root_child2.Height = 70;
root.Insert(2, root_child2);
YogaNode root_child2_child0 = new YogaNode();
root_child2_child0.Width = 50;
root_child2_child0.Width = 10;
root_child2_child0.Height = 10;
root_child2.Insert(0, root_child2_child0);
@@ -824,26 +824,26 @@ namespace Facebook.Yoga
Assert.AreEqual(0f, root_child1.LayoutX);
Assert.AreEqual(50f, root_child1.LayoutY);
Assert.AreEqual(50f, root_child1.LayoutWidth);
Assert.AreEqual(30f, root_child1.LayoutWidth);
Assert.AreEqual(50f, 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(20f, root_child1_child0.LayoutWidth);
Assert.AreEqual(20f, root_child1_child0.LayoutHeight);
Assert.AreEqual(50f, root_child2.LayoutX);
Assert.AreEqual(0f, root_child2.LayoutY);
Assert.AreEqual(50f, root_child2.LayoutWidth);
Assert.AreEqual(20f, root_child2.LayoutHeight);
Assert.AreEqual(40f, root_child2.LayoutWidth);
Assert.AreEqual(70f, 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.LayoutWidth);
Assert.AreEqual(10f, root_child2_child0.LayoutHeight);
Assert.AreEqual(50f, root_child3.LayoutX);
Assert.AreEqual(20f, root_child3.LayoutY);
Assert.AreEqual(70f, root_child3.LayoutY);
Assert.AreEqual(50f, root_child3.LayoutWidth);
Assert.AreEqual(20f, root_child3.LayoutHeight);
@@ -860,28 +860,28 @@ namespace Facebook.Yoga
Assert.AreEqual(50f, root_child0.LayoutWidth);
Assert.AreEqual(50f, root_child0.LayoutHeight);
Assert.AreEqual(50f, root_child1.LayoutX);
Assert.AreEqual(70f, root_child1.LayoutX);
Assert.AreEqual(50f, root_child1.LayoutY);
Assert.AreEqual(50f, root_child1.LayoutWidth);
Assert.AreEqual(30f, root_child1.LayoutWidth);
Assert.AreEqual(50f, root_child1.LayoutHeight);
Assert.AreEqual(0f, root_child1_child0.LayoutX);
Assert.AreEqual(10f, 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(20f, root_child1_child0.LayoutWidth);
Assert.AreEqual(20f, root_child1_child0.LayoutHeight);
Assert.AreEqual(0f, root_child2.LayoutX);
Assert.AreEqual(10f, root_child2.LayoutX);
Assert.AreEqual(0f, root_child2.LayoutY);
Assert.AreEqual(50f, root_child2.LayoutWidth);
Assert.AreEqual(20f, root_child2.LayoutHeight);
Assert.AreEqual(40f, root_child2.LayoutWidth);
Assert.AreEqual(70f, root_child2.LayoutHeight);
Assert.AreEqual(0f, root_child2_child0.LayoutX);
Assert.AreEqual(30f, root_child2_child0.LayoutX);
Assert.AreEqual(0f, root_child2_child0.LayoutY);
Assert.AreEqual(50f, root_child2_child0.LayoutWidth);
Assert.AreEqual(10f, root_child2_child0.LayoutWidth);
Assert.AreEqual(10f, root_child2_child0.LayoutHeight);
Assert.AreEqual(0f, root_child3.LayoutX);
Assert.AreEqual(20f, root_child3.LayoutY);
Assert.AreEqual(70f, root_child3.LayoutY);
Assert.AreEqual(50f, root_child3.LayoutWidth);
Assert.AreEqual(20f, root_child3.LayoutHeight);
}

View File

@@ -75,11 +75,11 @@
<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: 50px; height: 50px;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 30px; height: 50px;">
<div style="width: 20px; height: 20px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 40px; height: 70px;">
<div style="width: 10px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>

View File

@@ -772,22 +772,22 @@ public class YGAlignItemsTest {
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = new YogaNode();
root_child1.setWidth(50f);
root_child1.setWidth(30f);
root_child1.setHeight(50f);
root.addChildAt(root_child1, 1);
final YogaNode root_child1_child0 = new YogaNode();
root_child1_child0.setWidth(50f);
root_child1_child0.setHeight(10f);
root_child1_child0.setWidth(20f);
root_child1_child0.setHeight(20f);
root_child1.addChildAt(root_child1_child0, 0);
final YogaNode root_child2 = new YogaNode();
root_child2.setWidth(50f);
root_child2.setHeight(20f);
root_child2.setWidth(40f);
root_child2.setHeight(70f);
root.addChildAt(root_child2, 2);
final YogaNode root_child2_child0 = new YogaNode();
root_child2_child0.setWidth(50f);
root_child2_child0.setWidth(10f);
root_child2_child0.setHeight(10f);
root_child2.addChildAt(root_child2_child0, 0);
@@ -810,26 +810,26 @@ public class YGAlignItemsTest {
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(50f, root_child1.getLayoutY(), 0.0f);
assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(30f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, 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(20f, root_child1_child0.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child1_child0.getLayoutHeight(), 0.0f);
assertEquals(50f, root_child2.getLayoutX(), 0.0f);
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child2.getLayoutHeight(), 0.0f);
assertEquals(40f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(70f, 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.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child2_child0.getLayoutHeight(), 0.0f);
assertEquals(50f, root_child3.getLayoutX(), 0.0f);
assertEquals(20f, root_child3.getLayoutY(), 0.0f);
assertEquals(70f, root_child3.getLayoutY(), 0.0f);
assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child3.getLayoutHeight(), 0.0f);
@@ -846,28 +846,28 @@ public class YGAlignItemsTest {
assertEquals(50f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(50f, root_child1.getLayoutX(), 0.0f);
assertEquals(70f, root_child1.getLayoutX(), 0.0f);
assertEquals(50f, root_child1.getLayoutY(), 0.0f);
assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(30f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child1_child0.getLayoutX(), 0.0f);
assertEquals(10f, 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(20f, root_child1_child0.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child1_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(10f, root_child2.getLayoutX(), 0.0f);
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child2.getLayoutHeight(), 0.0f);
assertEquals(40f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(70f, root_child2.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2_child0.getLayoutX(), 0.0f);
assertEquals(30f, 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.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child2_child0.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child3.getLayoutX(), 0.0f);
assertEquals(20f, root_child3.getLayoutY(), 0.0f);
assertEquals(70f, root_child3.getLayoutY(), 0.0f);
assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
assertEquals(20f, root_child3.getLayoutHeight(), 0.0f);
}

View File

@@ -755,22 +755,22 @@ TEST(YogaTest, align_baseline_multiline_column) {
YGNodeInsertChild(root, root_child0, 0);
const YGNodeRef root_child1 = YGNodeNew();
YGNodeStyleSetWidth(root_child1, 50);
YGNodeStyleSetWidth(root_child1, 30);
YGNodeStyleSetHeight(root_child1, 50);
YGNodeInsertChild(root, root_child1, 1);
const YGNodeRef root_child1_child0 = YGNodeNew();
YGNodeStyleSetWidth(root_child1_child0, 50);
YGNodeStyleSetHeight(root_child1_child0, 10);
YGNodeStyleSetWidth(root_child1_child0, 20);
YGNodeStyleSetHeight(root_child1_child0, 20);
YGNodeInsertChild(root_child1, root_child1_child0, 0);
const YGNodeRef root_child2 = YGNodeNew();
YGNodeStyleSetWidth(root_child2, 50);
YGNodeStyleSetHeight(root_child2, 20);
YGNodeStyleSetWidth(root_child2, 40);
YGNodeStyleSetHeight(root_child2, 70);
YGNodeInsertChild(root, root_child2, 2);
const YGNodeRef root_child2_child0 = YGNodeNew();
YGNodeStyleSetWidth(root_child2_child0, 50);
YGNodeStyleSetWidth(root_child2_child0, 10);
YGNodeStyleSetHeight(root_child2_child0, 10);
YGNodeInsertChild(root_child2, root_child2_child0, 0);
@@ -792,26 +792,26 @@ TEST(YogaTest, align_baseline_multiline_column) {
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(50, 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(20, YGNodeLayoutGetWidth(root_child1_child0));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child1_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child2));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child2));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child2));
ASSERT_FLOAT_EQ(40, YGNodeLayoutGetWidth(root_child2));
ASSERT_FLOAT_EQ(70, 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, YGNodeLayoutGetWidth(root_child2_child0));
ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child2_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child3));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetTop(root_child3));
ASSERT_FLOAT_EQ(70, YGNodeLayoutGetTop(root_child3));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child3));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child3));
@@ -827,28 +827,28 @@ TEST(YogaTest, align_baseline_multiline_column) {
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(70, YGNodeLayoutGetLeft(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetTop(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetWidth(root_child1));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child1));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child1_child0));
ASSERT_FLOAT_EQ(10, 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(20, YGNodeLayoutGetWidth(root_child1_child0));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child1_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
ASSERT_FLOAT_EQ(10, YGNodeLayoutGetLeft(root_child2));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child2));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child2));
ASSERT_FLOAT_EQ(40, YGNodeLayoutGetWidth(root_child2));
ASSERT_FLOAT_EQ(70, YGNodeLayoutGetHeight(root_child2));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2_child0));
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetLeft(root_child2_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child2_child0));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child2_child0));
ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child2_child0));
ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child2_child0));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child3));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetTop(root_child3));
ASSERT_FLOAT_EQ(70, YGNodeLayoutGetTop(root_child3));
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetWidth(root_child3));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetHeight(root_child3));

View File

@@ -938,7 +938,14 @@ static inline float YGNodePaddingAndBorderForAxis(const YGNodeRef node,
}
emilsjolander commented 2017-01-05 11:03:20 -08:00 (Migrated from github.com)
Review

const

const
static inline YGAlign YGNodeAlignItem(const YGNodeRef node, const YGNodeRef child) {
return child->style.alignSelf == YGAlignAuto ? node->style.alignItems : child->style.alignSelf;
YGAlign align =
child->style.alignSelf == YGAlignAuto ? node->style.alignItems : child->style.alignSelf;
if (align == YGAlignBaseline &&
YGFlexDirectionIsRow(node->style.flexDirection) ==
YGFlexDirectionIsRow(child->style.flexDirection)) {
return YGAlignFlexStart;
}
return align;
}
emilsjolander commented 2017-01-05 05:43:58 -08:00 (Migrated from github.com)
Review

YGNodeBaseline

`YGNodeBaseline`
static inline YGDirection YGNodeResolveDirection(const YGNodeRef node,
@@ -950,7 +957,9 @@ static inline YGDirection YGNodeResolveDirection(const YGNodeRef node,
}
}
static float YGBaseline(const YGNodeRef node, const YGFlexDirection crossAxis) {
static float YGBaseline(const YGNodeRef node,
const YGFlexDirection crossAxis,
const YGFlexDirection mainAxis) {
if (node->baseline != NULL) {
const float baseline = node->baseline(node);
if (YGFloatIsUndefined(baseline)) {
@@ -979,7 +988,18 @@ static float YGBaseline(const YGNodeRef node, const YGFlexDirection crossAxis) {
if (baselineChild == NULL) {
return node->layout.measuredDimensions[dim[crossAxis]];
}
const float baseline = YGBaseline(baselineChild, crossAxis);
float baseline = YGUndefined;
if (YGFlexDirectionIsRow(node->style.flexDirection) &&
YGFlexDirectionIsColumn(baselineChild->style.flexDirection)) {
baseline = baselineChild->layout.measuredDimensions[dim[crossAxis]];
} else if (YGFlexDirectionIsColumn(node->style.flexDirection) &&
YGFlexDirectionIsRow(baselineChild->style.flexDirection)) {
baseline = baselineChild->layout.measuredDimensions[dim[mainAxis]];
} else {
baseline = YGBaseline(baselineChild, crossAxis, mainAxis);
}
return baseline + baselineChild->layout.position[pos[crossAxis]];
}
emilsjolander commented 2017-01-05 12:09:44 -08:00 (Migrated from github.com)
Review

not quite sure why we break if a child has more than one line. That would mean if the first child of this node has two lines then the baseline would default to the height of the node. I'm not sure why that would be correct.

not quite sure why we break if a child has more than one line. That would mean if the first child of this node has two lines then the baseline would default to the height of the node. I'm not sure why that would be correct.
woehrl01 commented 2017-01-05 12:15:22 -08:00 (Migrated from github.com)
Review

we break as only childs on the first line which have align baseline are taken into account. I already added a testcase for this.

we break as only childs on the first line which have align baseline are taken into account. I already added a testcase for this.
woehrl01 commented 2017-01-05 12:21:22 -08:00 (Migrated from github.com)
Review

oh, I see the confusion, child->lineIndex does not mean that it has more than one line. It means it is itself on the seconds (or later) line.

oh, I see the confusion, ```child->lineIndex``` does not mean that it has more than one line. It means it is itself on the seconds (or later) line.
emilsjolander commented 2017-01-05 12:45:58 -08:00 (Migrated from github.com)
Review

@woehrl01 yeah that was my confusion, i'm not super familiar with the multi line code and read it too quickly 🐱

@woehrl01 yeah that was my confusion, i'm not super familiar with the multi line code and read it too quickly 🐱
@@ -2524,7 +2544,7 @@ static void YGNodelayoutImpl(const YGNodeRef node,
YGNodeMarginForAxis(child, crossAxis, availableInnerWidth));
}
if (YGNodeAlignItem(node, child) == YGAlignBaseline) {
const float ascent = YGBaseline(child, crossAxis) +
const float ascent = YGBaseline(child, crossAxis, mainAxis) +
YGNodeLeadingMargin(child, crossAxis, availableInnerWidth);
const float descent = child->layout.measuredDimensions[dim[crossAxis]] +
YGNodeMarginForAxis(child, crossAxis, availableInnerWidth) -
@@ -2571,7 +2591,7 @@ static void YGNodelayoutImpl(const YGNodeRef node,
}
case YGAlignBaseline: {
child->layout.position[pos[crossAxis]] =
currentLead + maxAscentForCurrentLine - YGBaseline(child, crossAxis) +
currentLead + maxAscentForCurrentLine - YGBaseline(child, crossAxis, mainAxis) +
YGNodeLeadingPosition(child, crossAxis, availableInnerCrossDim);
break;
}