Skip to content

Commit 629e401

Browse files
yihuangfacebook-github-bot
yihuang
authored and
facebook-github-bot
committed
Fix right/bottom in absolute layout.
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
1 parent f4c2b6a commit 629e401

File tree

6 files changed

+494
-2
lines changed

6 files changed

+494
-2
lines changed

‎csharp/tests/Facebook.Yoga/YGAbsolutePositionTest.cs‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,30 @@ public void Test_absolute_layout_within_border()
285285
root_child1.Width = 50;
286286
root_child1.Height = 50;
287287
root.Insert(1, root_child1);
288+
289+
YogaNode root_child2 = new YogaNode(config);
290+
root_child2.PositionType = YogaPositionType.Absolute;
291+
root_child2.Left = 0;
292+
root_child2.Top = 0;
293+
root_child2.MarginLeft = 10;
294+
root_child2.MarginTop = 10;
295+
root_child2.MarginRight = 10;
296+
root_child2.MarginBottom = 10;
297+
root_child2.Width = 50;
298+
root_child2.Height = 50;
299+
root.Insert(2, root_child2);
300+
301+
YogaNode root_child3 = new YogaNode(config);
302+
root_child3.PositionType = YogaPositionType.Absolute;
303+
root_child3.Right = 0;
304+
root_child3.Bottom = 0;
305+
root_child3.MarginLeft = 10;
306+
root_child3.MarginTop = 10;
307+
root_child3.MarginRight = 10;
308+
root_child3.MarginBottom = 10;
309+
root_child3.Width = 50;
310+
root_child3.Height = 50;
311+
root.Insert(3, root_child3);
288312
root.StyleDirection = YogaDirection.LTR;
289313
root.CalculateLayout();
290314

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

330+
Assert.AreEqual(20f, root_child2.LayoutX);
331+
Assert.AreEqual(20f, root_child2.LayoutY);
332+
Assert.AreEqual(50f, root_child2.LayoutWidth);
333+
Assert.AreEqual(50f, root_child2.LayoutHeight);
334+
335+
Assert.AreEqual(30f, root_child3.LayoutX);
336+
Assert.AreEqual(30f, root_child3.LayoutY);
337+
Assert.AreEqual(50f, root_child3.LayoutWidth);
338+
Assert.AreEqual(50f, root_child3.LayoutHeight);
339+
306340
root.StyleDirection = YogaDirection.RTL;
307341
root.CalculateLayout();
308342

@@ -320,6 +354,16 @@ public void Test_absolute_layout_within_border()
320354
Assert.AreEqual(40f, root_child1.LayoutY);
321355
Assert.AreEqual(50f, root_child1.LayoutWidth);
322356
Assert.AreEqual(50f, root_child1.LayoutHeight);
357+
358+
Assert.AreEqual(20f, root_child2.LayoutX);
359+
Assert.AreEqual(20f, root_child2.LayoutY);
360+
Assert.AreEqual(50f, root_child2.LayoutWidth);
361+
Assert.AreEqual(50f, root_child2.LayoutHeight);
362+
363+
Assert.AreEqual(30f, root_child3.LayoutX);
364+
Assert.AreEqual(30f, root_child3.LayoutY);
365+
Assert.AreEqual(50f, root_child3.LayoutWidth);
366+
Assert.AreEqual(50f, root_child3.LayoutHeight);
323367
}
324368

325369
[Test]
@@ -745,5 +789,81 @@ public void Test_position_root_with_rtl_should_position_withoutdirection()
745789
Assert.AreEqual(52f, root.LayoutHeight);
746790
}
747791

792+
[Test]
793+
public void Test_absolute_layout_percentage_bottom_based_on_parent_height()
794+
{
795+
YogaConfig config = new YogaConfig();
796+
797+
YogaNode root = new YogaNode(config);
798+
root.Width = 100;
799+
root.Height = 200;
800+
801+
YogaNode root_child0 = new YogaNode(config);
802+
root_child0.PositionType = YogaPositionType.Absolute;
803+
root_child0.Top = 50.Percent();
804+
root_child0.Width = 10;
805+
root_child0.Height = 10;
806+
root.Insert(0, root_child0);
807+
808+
YogaNode root_child1 = new YogaNode(config);
809+
root_child1.PositionType = YogaPositionType.Absolute;
810+
root_child1.Bottom = 50.Percent();
811+
root_child1.Width = 10;
812+
root_child1.Height = 10;
813+
root.Insert(1, root_child1);
814+
815+
YogaNode root_child2 = new YogaNode(config);
816+
root_child2.PositionType = YogaPositionType.Absolute;
817+
root_child2.Top = 10.Percent();
818+
root_child2.Bottom = 10.Percent();
819+
root_child2.Width = 10;
820+
root.Insert(2, root_child2);
821+
root.StyleDirection = YogaDirection.LTR;
822+
root.CalculateLayout();
823+
824+
Assert.AreEqual(0f, root.LayoutX);
825+
Assert.AreEqual(0f, root.LayoutY);
826+
Assert.AreEqual(100f, root.LayoutWidth);
827+
Assert.AreEqual(200f, root.LayoutHeight);
828+
829+
Assert.AreEqual(0f, root_child0.LayoutX);
830+
Assert.AreEqual(100f, root_child0.LayoutY);
831+
Assert.AreEqual(10f, root_child0.LayoutWidth);
832+
Assert.AreEqual(10f, root_child0.LayoutHeight);
833+
834+
Assert.AreEqual(0f, root_child1.LayoutX);
835+
Assert.AreEqual(90f, root_child1.LayoutY);
836+
Assert.AreEqual(10f, root_child1.LayoutWidth);
837+
Assert.AreEqual(10f, root_child1.LayoutHeight);
838+
839+
Assert.AreEqual(0f, root_child2.LayoutX);
840+
Assert.AreEqual(20f, root_child2.LayoutY);
841+
Assert.AreEqual(10f, root_child2.LayoutWidth);
842+
Assert.AreEqual(160f, root_child2.LayoutHeight);
843+
844+
root.StyleDirection = YogaDirection.RTL;
845+
root.CalculateLayout();
846+
847+
Assert.AreEqual(0f, root.LayoutX);
848+
Assert.AreEqual(0f, root.LayoutY);
849+
Assert.AreEqual(100f, root.LayoutWidth);
850+
Assert.AreEqual(200f, root.LayoutHeight);
851+
852+
Assert.AreEqual(90f, root_child0.LayoutX);
853+
Assert.AreEqual(100f, root_child0.LayoutY);
854+
Assert.AreEqual(10f, root_child0.LayoutWidth);
855+
Assert.AreEqual(10f, root_child0.LayoutHeight);
856+
857+
Assert.AreEqual(90f, root_child1.LayoutX);
858+
Assert.AreEqual(90f, root_child1.LayoutY);
859+
Assert.AreEqual(10f, root_child1.LayoutWidth);
860+
Assert.AreEqual(10f, root_child1.LayoutHeight);
861+
862+
Assert.AreEqual(90f, root_child2.LayoutX);
863+
Assert.AreEqual(20f, root_child2.LayoutY);
864+
Assert.AreEqual(10f, root_child2.LayoutWidth);
865+
Assert.AreEqual(160f, root_child2.LayoutHeight);
866+
}
867+
748868
}
749869
}

‎gentest/fixtures/YGAbsolutePositionTest.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
<div id="absolute_layout_within_border" style="height:100px; width:100px; border-width: 10px; margin: 10px; padding: 10px;">
2424
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
2525
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px;"></div>
26+
<div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px; margin: 10px;"></div>
27+
<div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px; margin: 10px;"></div>
2628
</div>
2729

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

6466
<div id="position_root_with_rtl_should_position_withoutdirection" style="height: 52px; width: 52px; left: 72px; ">
6567
</div>
68+
69+
<div id="absolute_layout_percentage_bottom_based_on_parent_height" style="width: 100px; height: 200px;">
70+
<div style="position: absolute; top: 50%; width: 10px; height: 10px;"></div>
71+
<div style="position: absolute; bottom: 50%; width: 10px; height: 10px;"></div>
72+
<div style="position: absolute; top: 10%; width: 10px; bottom: 10%;"></div>
73+
</div>

‎java/tests/com/facebook/yoga/YGAbsolutePositionTest.java‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,30 @@ public void test_absolute_layout_within_border() {
278278
root_child1.setWidth(50f);
279279
root_child1.setHeight(50f);
280280
root.addChildAt(root_child1, 1);
281+
282+
final YogaNode root_child2 = new YogaNode(config);
283+
root_child2.setPositionType(YogaPositionType.ABSOLUTE);
284+
root_child2.setPosition(YogaEdge.LEFT, 0f);
285+
root_child2.setPosition(YogaEdge.TOP, 0f);
286+
root_child2.setMargin(YogaEdge.LEFT, 10f);
287+
root_child2.setMargin(YogaEdge.TOP, 10f);
288+
root_child2.setMargin(YogaEdge.RIGHT, 10f);
289+
root_child2.setMargin(YogaEdge.BOTTOM, 10f);
290+
root_child2.setWidth(50f);
291+
root_child2.setHeight(50f);
292+
root.addChildAt(root_child2, 2);
293+
294+
final YogaNode root_child3 = new YogaNode(config);
295+
root_child3.setPositionType(YogaPositionType.ABSOLUTE);
296+
root_child3.setPosition(YogaEdge.RIGHT, 0f);
297+
root_child3.setPosition(YogaEdge.BOTTOM, 0f);
298+
root_child3.setMargin(YogaEdge.LEFT, 10f);
299+
root_child3.setMargin(YogaEdge.TOP, 10f);
300+
root_child3.setMargin(YogaEdge.RIGHT, 10f);
301+
root_child3.setMargin(YogaEdge.BOTTOM, 10f);
302+
root_child3.setWidth(50f);
303+
root_child3.setHeight(50f);
304+
root.addChildAt(root_child3, 3);
281305
root.setDirection(YogaDirection.LTR);
282306
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
283307

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

323+
assertEquals(20f, root_child2.getLayoutX(), 0.0f);
324+
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
325+
assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
326+
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
327+
328+
assertEquals(30f, root_child3.getLayoutX(), 0.0f);
329+
assertEquals(30f, root_child3.getLayoutY(), 0.0f);
330+
assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
331+
assertEquals(50f, root_child3.getLayoutHeight(), 0.0f);
332+
299333
root.setDirection(YogaDirection.RTL);
300334
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
301335

@@ -313,6 +347,16 @@ public void test_absolute_layout_within_border() {
313347
assertEquals(40f, root_child1.getLayoutY(), 0.0f);
314348
assertEquals(50f, root_child1.getLayoutWidth(), 0.0f);
315349
assertEquals(50f, root_child1.getLayoutHeight(), 0.0f);
350+
351+
assertEquals(20f, root_child2.getLayoutX(), 0.0f);
352+
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
353+
assertEquals(50f, root_child2.getLayoutWidth(), 0.0f);
354+
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
355+
356+
assertEquals(30f, root_child3.getLayoutX(), 0.0f);
357+
assertEquals(30f, root_child3.getLayoutY(), 0.0f);
358+
assertEquals(50f, root_child3.getLayoutWidth(), 0.0f);
359+
assertEquals(50f, root_child3.getLayoutHeight(), 0.0f);
316360
}
317361

318362
@Test
@@ -728,4 +772,79 @@ public void test_position_root_with_rtl_should_position_withoutdirection() {
728772
assertEquals(52f, root.getLayoutHeight(), 0.0f);
729773
}
730774

775+
@Test
776+
public void test_absolute_layout_percentage_bottom_based_on_parent_height() {
777+
YogaConfig config = new YogaConfig();
778+
779+
final YogaNode root = new YogaNode(config);
780+
root.setWidth(100f);
781+
root.setHeight(200f);
782+
783+
final YogaNode root_child0 = new YogaNode(config);
784+
root_child0.setPositionType(YogaPositionType.ABSOLUTE);
785+
root_child0.setPositionPercent(YogaEdge.TOP, 50f);
786+
root_child0.setWidth(10f);
787+
root_child0.setHeight(10f);
788+
root.addChildAt(root_child0, 0);
789+
790+
final YogaNode root_child1 = new YogaNode(config);
791+
root_child1.setPositionType(YogaPositionType.ABSOLUTE);
792+
root_child1.setPositionPercent(YogaEdge.BOTTOM, 50f);
793+
root_child1.setWidth(10f);
794+
root_child1.setHeight(10f);
795+
root.addChildAt(root_child1, 1);
796+
797+
final YogaNode root_child2 = new YogaNode(config);
798+
root_child2.setPositionType(YogaPositionType.ABSOLUTE);
799+
root_child2.setPositionPercent(YogaEdge.TOP, 10f);
800+
root_child2.setPositionPercent(YogaEdge.BOTTOM, 10f);
801+
root_child2.setWidth(10f);
802+
root.addChildAt(root_child2, 2);
803+
root.setDirection(YogaDirection.LTR);
804+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
805+
806+
assertEquals(0f, root.getLayoutX(), 0.0f);
807+
assertEquals(0f, root.getLayoutY(), 0.0f);
808+
assertEquals(100f, root.getLayoutWidth(), 0.0f);
809+
assertEquals(200f, root.getLayoutHeight(), 0.0f);
810+
811+
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
812+
assertEquals(100f, root_child0.getLayoutY(), 0.0f);
813+
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
814+
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
815+
816+
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
817+
assertEquals(90f, root_child1.getLayoutY(), 0.0f);
818+
assertEquals(10f, root_child1.getLayoutWidth(), 0.0f);
819+
assertEquals(10f, root_child1.getLayoutHeight(), 0.0f);
820+
821+
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
822+
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
823+
assertEquals(10f, root_child2.getLayoutWidth(), 0.0f);
824+
assertEquals(160f, root_child2.getLayoutHeight(), 0.0f);
825+
826+
root.setDirection(YogaDirection.RTL);
827+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
828+
829+
assertEquals(0f, root.getLayoutX(), 0.0f);
830+
assertEquals(0f, root.getLayoutY(), 0.0f);
831+
assertEquals(100f, root.getLayoutWidth(), 0.0f);
832+
assertEquals(200f, root.getLayoutHeight(), 0.0f);
833+
834+
assertEquals(90f, root_child0.getLayoutX(), 0.0f);
835+
assertEquals(100f, root_child0.getLayoutY(), 0.0f);
836+
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
837+
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
838+
839+
assertEquals(90f, root_child1.getLayoutX(), 0.0f);
840+
assertEquals(90f, root_child1.getLayoutY(), 0.0f);
841+
assertEquals(10f, root_child1.getLayoutWidth(), 0.0f);
842+
assertEquals(10f, root_child1.getLayoutHeight(), 0.0f);
843+
844+
assertEquals(90f, root_child2.getLayoutX(), 0.0f);
845+
assertEquals(20f, root_child2.getLayoutY(), 0.0f);
846+
assertEquals(10f, root_child2.getLayoutWidth(), 0.0f);
847+
assertEquals(160f, root_child2.getLayoutHeight(), 0.0f);
848+
}
849+
731850
}

0 commit comments

Comments
 (0)