Skip to content

Commit

Permalink
Fix right/bottom in absolute layout.
Browse files Browse the repository at this point in the history 
Summary:
1, Change bottom to be based� on height of parent.
2, Respect margin value when layout with right/bottom.
Closes #552

Differential Revision: D5102090

Pulled By: emilsjolander

fbshipit-source-id: dca291413ffc2027d7628f4c8b8eeeb0b4823bc2
  • Loading branch information
@yihuang @facebook-github-bot
yihuang authored and facebook-github-bot committed May 22, 2017
1 parent f4c2b6a commit 629e401
Show file tree
Hide file tree
Showing 6 changed files with 494 additions and 2 deletions.
120 changes: 120 additions & 0 deletions csharp/tests/Facebook.Yoga/YGAbsolutePositionTest.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,30 @@ public void Test_absolute_layout_within_border()
root_child1.Width = 50;
root_child1.Height = 50;
root.Insert(1, root_child1);

YogaNode root_child2 = new YogaNode(config);
root_child2.PositionType = YogaPositionType.Absolute;
root_child2.Left = 0;
root_child2.Top = 0;
root_child2.MarginLeft = 10;
root_child2.MarginTop = 10;
root_child2.MarginRight = 10;
root_child2.MarginBottom = 10;
root_child2.Width = 50;
root_child2.Height = 50;
root.Insert(2, root_child2);

YogaNode root_child3 = new YogaNode(config);
root_child3.PositionType = YogaPositionType.Absolute;
root_child3.Right = 0;
root_child3.Bottom = 0;
root_child3.MarginLeft = 10;
root_child3.MarginTop = 10;
root_child3.MarginRight = 10;
root_child3.MarginBottom = 10;
root_child3.Width = 50;
root_child3.Height = 50;
root.Insert(3, root_child3);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Expand All @@ -303,6 +327,16 @@ public void Test_absolute_layout_within_border()
Assert.AreEqual(50f, root_child1.LayoutWidth);
Assert.AreEqual(50f, root_child1.LayoutHeight);

Assert.AreEqual(20f, root_child2.LayoutX);
Assert.AreEqual(20f, root_child2.LayoutY);
Assert.AreEqual(50f, root_child2.LayoutWidth);
Assert.AreEqual(50f, root_child2.LayoutHeight);

Assert.AreEqual(30f, root_child3.LayoutX);
Assert.AreEqual(30f, root_child3.LayoutY);
Assert.AreEqual(50f, root_child3.LayoutWidth);
Assert.AreEqual(50f, root_child3.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Expand All @@ -320,6 +354,16 @@ public void Test_absolute_layout_within_border()
Assert.AreEqual(40f, root_child1.LayoutY);
Assert.AreEqual(50f, root_child1.LayoutWidth);
Assert.AreEqual(50f, root_child1.LayoutHeight);

Assert.AreEqual(20f, root_child2.LayoutX);
Assert.AreEqual(20f, root_child2.LayoutY);
Assert.AreEqual(50f, root_child2.LayoutWidth);
Assert.AreEqual(50f, root_child2.LayoutHeight);

Assert.AreEqual(30f, root_child3.LayoutX);
Assert.AreEqual(30f, root_child3.LayoutY);
Assert.AreEqual(50f, root_child3.LayoutWidth);
Assert.AreEqual(50f, root_child3.LayoutHeight);
}

[Test]
Expand Down Expand Up @@ -745,5 +789,81 @@ public void Test_position_root_with_rtl_should_position_withoutdirection()
Assert.AreEqual(52f, root.LayoutHeight);
}

[Test]
public void Test_absolute_layout_percentage_bottom_based_on_parent_height()
{
YogaConfig config = new YogaConfig();

YogaNode root = new YogaNode(config);
root.Width = 100;
root.Height = 200;

YogaNode root_child0 = new YogaNode(config);
root_child0.PositionType = YogaPositionType.Absolute;
root_child0.Top = 50.Percent();
root_child0.Width = 10;
root_child0.Height = 10;
root.Insert(0, root_child0);

YogaNode root_child1 = new YogaNode(config);
root_child1.PositionType = YogaPositionType.Absolute;
root_child1.Bottom = 50.Percent();
root_child1.Width = 10;
root_child1.Height = 10;
root.Insert(1, root_child1);

YogaNode root_child2 = new YogaNode(config);
root_child2.PositionType = YogaPositionType.Absolute;
root_child2.Top = 10.Percent();
root_child2.Bottom = 10.Percent();
root_child2.Width = 10;
root.Insert(2, root_child2);
root.StyleDirection = YogaDirection.LTR;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(200f, root.LayoutHeight);

Assert.AreEqual(0f, root_child0.LayoutX);
Assert.AreEqual(100f, root_child0.LayoutY);
Assert.AreEqual(10f, root_child0.LayoutWidth);
Assert.AreEqual(10f, root_child0.LayoutHeight);

Assert.AreEqual(0f, root_child1.LayoutX);
Assert.AreEqual(90f, root_child1.LayoutY);
Assert.AreEqual(10f, root_child1.LayoutWidth);
Assert.AreEqual(10f, root_child1.LayoutHeight);

Assert.AreEqual(0f, root_child2.LayoutX);
Assert.AreEqual(20f, root_child2.LayoutY);
Assert.AreEqual(10f, root_child2.LayoutWidth);
Assert.AreEqual(160f, root_child2.LayoutHeight);

root.StyleDirection = YogaDirection.RTL;
root.CalculateLayout();

Assert.AreEqual(0f, root.LayoutX);
Assert.AreEqual(0f, root.LayoutY);
Assert.AreEqual(100f, root.LayoutWidth);
Assert.AreEqual(200f, root.LayoutHeight);

Assert.AreEqual(90f, root_child0.LayoutX);
Assert.AreEqual(100f, root_child0.LayoutY);
Assert.AreEqual(10f, root_child0.LayoutWidth);
Assert.AreEqual(10f, root_child0.LayoutHeight);

Assert.AreEqual(90f, root_child1.LayoutX);
Assert.AreEqual(90f, root_child1.LayoutY);
Assert.AreEqual(10f, root_child1.LayoutWidth);
Assert.AreEqual(10f, root_child1.LayoutHeight);

Assert.AreEqual(90f, root_child2.LayoutX);
Assert.AreEqual(20f, root_child2.LayoutY);
Assert.AreEqual(10f, root_child2.LayoutWidth);
Assert.AreEqual(160f, root_child2.LayoutHeight);
}

}
}
8 changes: 8 additions & 0 deletions gentest/fixtures/YGAbsolutePositionTest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@
<div id="absolute_layout_within_border" style="height:100px; width:100px; border-width: 10px; margin: 10px; padding: 10px;">
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px;"></div>
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px; margin: 10px;"></div>
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px; margin: 10px;"></div>
</div>

<div id="absolute_layout_align_items_and_justify_content_center" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
Expand Down Expand Up @@ -63,3 +65,9 @@

<div id="position_root_with_rtl_should_position_withoutdirection" style="height: 52px; width: 52px; left: 72px; ">
</div>

<div id="absolute_layout_percentage_bottom_based_on_parent_height" style="width: 100px; height: 200px;">
<div style="position: absolute; top: 50%; width: 10px; height: 10px;"></div>
<div style="position: absolute; bottom: 50%; width: 10px; height: 10px;"></div>
<div style="position: absolute; top: 10%; width: 10px; bottom: 10%;"></div>
</div>
119 changes: 119 additions & 0 deletions java/tests/com/facebook/yoga/YGAbsolutePositionTest.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,30 @@ public void test_absolute_layout_within_border() {
root_child1.setWidth(50f);
root_child1.setHeight(50f);
root.addChildAt(root_child1, 1);

final YogaNode root_child2 = new YogaNode(config);
root_child2.setPositionType(YogaPositionType.ABSOLUTE);
root_child2.setPosition(YogaEdge.LEFT, 0f);
root_child2.setPosition(YogaEdge.TOP, 0f);
root_child2.setMargin(YogaEdge.LEFT, 10f);
root_child2.setMargin(YogaEdge.TOP, 10f);
root_child2.setMargin(YogaEdge.RIGHT, 10f);
root_child2.setMargin(YogaEdge.BOTTOM, 10f);
root_child2.setWidth(50f);
root_child2.setHeight(50f);
root.addChildAt(root_child2, 2);

final YogaNode root_child3 = new YogaNode(config);
root_child3.setPositionType(YogaPositionType.ABSOLUTE);
root_child3.setPosition(YogaEdge.RIGHT, 0f);
root_child3.setPosition(YogaEdge.BOTTOM, 0f);
root_child3.setMargin(YogaEdge.LEFT, 10f);
root_child3.setMargin(YogaEdge.TOP, 10f);
root_child3.setMargin(YogaEdge.RIGHT, 10f);
root_child3.setMargin(YogaEdge.BOTTOM, 10f);
root_child3.setWidth(50f);
root_child3.setHeight(50f);
root.addChildAt(root_child3, 3);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

Expand All @@ -296,6 +320,16 @@ public void test_absolute_layout_within_border() {
assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);

assertEquals(20f, root_child2.getLayoutX(), 0.0f);
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);

assertEquals(30f, root_child3.getLayoutX(), 0.0f);
assertEquals(30f, 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(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

Expand All @@ -313,6 +347,16 @@ public void test_absolute_layout_within_border() {
assertEquals(40f, root_child1.getLayoutY(), 0.0f);
assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);

assertEquals(20f, root_child2.getLayoutX(), 0.0f);
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);

assertEquals(30f, root_child3.getLayoutX(), 0.0f);
assertEquals(30f, root_child3.getLayoutY(), 0.0f);
assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child3.getLayoutHeight(), 0.0f);
}

@Test
Expand Down Expand Up @@ -728,4 +772,79 @@ public void test_position_root_with_rtl_should_position_withoutdirection() {
assertEquals(52f, root.getLayoutHeight(), 0.0f);
}

@Test
public void test_absolute_layout_percentage_bottom_based_on_parent_height() {
YogaConfig config = new YogaConfig();

final YogaNode root = new YogaNode(config);
root.setWidth(100f);
root.setHeight(200f);

final YogaNode root_child0 = new YogaNode(config);
root_child0.setPositionType(YogaPositionType.ABSOLUTE);
root_child0.setPositionPercent(YogaEdge.TOP, 50f);
root_child0.setWidth(10f);
root_child0.setHeight(10f);
root.addChildAt(root_child0, 0);

final YogaNode root_child1 = new YogaNode(config);
root_child1.setPositionType(YogaPositionType.ABSOLUTE);
root_child1.setPositionPercent(YogaEdge.BOTTOM, 50f);
root_child1.setWidth(10f);
root_child1.setHeight(10f);
root.addChildAt(root_child1, 1);

final YogaNode root_child2 = new YogaNode(config);
root_child2.setPositionType(YogaPositionType.ABSOLUTE);
root_child2.setPositionPercent(YogaEdge.TOP, 10f);
root_child2.setPositionPercent(YogaEdge.BOTTOM, 10f);
root_child2.setWidth(10f);
root.addChildAt(root_child2, 2);
root.setDirection(YogaDirection.LTR);
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);

assertEquals(0f, root.getLayoutX(), 0.0f);
assertEquals(0f, root.getLayoutY(), 0.0f);
assertEquals(100f, root.getLayoutWidth(), 0.0f);
assertEquals(200f, root.getLayoutHeight(), 0.0f);

assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(100f, root_child0.getLayoutY(), 0.0f);
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);

assertEquals(0f, root_child1.getLayoutX(), 0.0f);
assertEquals(90f, root_child1.getLayoutY(), 0.0f);
assertEquals(10f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child1.getLayoutHeight(), 0.0f);

assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
assertEquals(10f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(160f, root_child2.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(100f, root.getLayoutWidth(), 0.0f);
assertEquals(200f, root.getLayoutHeight(), 0.0f);

assertEquals(90f, root_child0.getLayoutX(), 0.0f);
assertEquals(100f, root_child0.getLayoutY(), 0.0f);
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);

assertEquals(90f, root_child1.getLayoutX(), 0.0f);
assertEquals(90f, root_child1.getLayoutY(), 0.0f);
assertEquals(10f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(10f, root_child1.getLayoutHeight(), 0.0f);

assertEquals(90f, root_child2.getLayoutX(), 0.0f);
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
assertEquals(10f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(160f, root_child2.getLayoutHeight(), 0.0f);
}

}
Loading

0 comments on commit 629e401

Please sign in to comment.