Skip to content

Commit e992737

Browse files
woehrl01facebook-github-bot
woehrl01
authored and
facebook-github-bot
committed
Fix position on root node with RTL direction
Summary: If the root node has a position and we have a RTL layout, that position must be like LTR direction. See #477. Closes #502 Differential Revision: D4867144 Pulled By: emilsjolander fbshipit-source-id: b5ad3d87e7054090da12d7665a3d1abe8496a548
1 parent 3ea76f8 commit e992737

File tree

6 files changed

+125
-12
lines changed

6 files changed

+125
-12
lines changed

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -719,5 +719,31 @@ public void Test_absolute_layout_align_items_and_justify_content_center_and_righ
719719
Assert.AreEqual(40f, root_child0.LayoutHeight);
720720
}
721721

722+
[Test]
723+
public void Test_position_root_with_rtl_should_position_withoutdirection()
724+
{
725+
YogaConfig config = new YogaConfig();
726+
727+
YogaNode root = new YogaNode(config);
728+
root.Left = 72;
729+
root.Width = 52;
730+
root.Height = 52;
731+
root.StyleDirection = YogaDirection.LTR;
732+
root.CalculateLayout();
733+
734+
Assert.AreEqual(72f, root.LayoutX);
735+
Assert.AreEqual(0f, root.LayoutY);
736+
Assert.AreEqual(52f, root.LayoutWidth);
737+
Assert.AreEqual(52f, root.LayoutHeight);
738+
739+
root.StyleDirection = YogaDirection.RTL;
740+
root.CalculateLayout();
741+
742+
Assert.AreEqual(72f, root.LayoutX);
743+
Assert.AreEqual(0f, root.LayoutY);
744+
Assert.AreEqual(52f, root.LayoutWidth);
745+
Assert.AreEqual(52f, root.LayoutHeight);
746+
}
747+
722748
}
723749
}

‎gentest/fixtures/YGAbsolutePositionTest.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,37 +26,40 @@
2626
</div>
2727

2828
<div id="absolute_layout_align_items_and_justify_content_center" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
29-
<div style="position: absolute; width: 60px; height: 40px;"></div>
29+
<div style="position: absolute; width: 60px; height: 40px;"></div>
3030
</div>
3131

3232
<div id="absolute_layout_align_items_and_justify_content_flex_end" style="height: 100px; width: 110px; flex-grow: 1; align-items: flex-end; justify-content: flex-end;">
33-
<div style="position: absolute; width: 60px; height: 40px;"></div>
33+
<div style="position: absolute; width: 60px; height: 40px;"></div>
3434
</div>
3535

3636
<div id="absolute_layout_justify_content_center" style="height: 100px; width: 110px; flex-grow: 1; justify-content: center;">
37-
<div style="position: absolute; width: 60px; height: 40px;"></div>
37+
<div style="position: absolute; width: 60px; height: 40px;"></div>
3838
</div>
3939

4040
<div id="absolute_layout_align_items_center" style="height: 100px; width: 110px; flex-grow: 1; align-items: center;">
41-
<div style="position: absolute; width: 60px; height: 40px;"></div>
41+
<div style="position: absolute; width: 60px; height: 40px;"></div>
4242
</div>
4343

4444
<div id="absolute_layout_align_items_center_on_child_only" style="height: 100px; width: 110px; flex-grow: 1;">
45-
<div style="position: absolute; width: 60px; height: 40px;align-self: center;"></div>
45+
<div style="position: absolute; width: 60px; height: 40px;align-self: center;"></div>
4646
</div>
4747

4848
<div id="absolute_layout_align_items_and_justify_content_center_and_top_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
49-
<div style="position: absolute; width: 60px; height: 40px;top:10px;"></div>
49+
<div style="position: absolute; width: 60px; height: 40px;top:10px;"></div>
5050
</div>
5151

5252
<div id="absolute_layout_align_items_and_justify_content_center_and_bottom_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
53-
<div style="position: absolute; width: 60px; height: 40px;bottom:10px;"></div>
53+
<div style="position: absolute; width: 60px; height: 40px;bottom:10px;"></div>
5454
</div>
5555

5656
<div id="absolute_layout_align_items_and_justify_content_center_and_left_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
57-
<div style="position: absolute; width: 60px; height: 40px;left:5px;"></div>
57+
<div style="position: absolute; width: 60px; height: 40px;left:5px;"></div>
5858
</div>
5959

6060
<div id="absolute_layout_align_items_and_justify_content_center_and_right_position" style="height: 100px; width: 110px; flex-grow: 1; align-items: center; justify-content: center;">
61-
<div style="position: absolute; width: 60px; height: 40px;right:5px;"></div>
62-
</div>
61+
<div style="position: absolute; width: 60px; height: 40px;right:5px;"></div>
62+
</div>
63+
64+
<div id="position_root_with_rtl_should_position_withoutdirection" style="height: 52px; width: 52px; left: 72px; ">
65+
</div>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,4 +703,29 @@ public void test_absolute_layout_align_items_and_justify_content_center_and_righ
703703
assertEquals(40f, root_child0.getLayoutHeight(), 0.0f);
704704
}
705705

706+
@Test
707+
public void test_position_root_with_rtl_should_position_withoutdirection() {
708+
YogaConfig config = new YogaConfig();
709+
710+
final YogaNode root = new YogaNode(config);
711+
root.setPosition(YogaEdge.LEFT, 72f);
712+
root.setWidth(52f);
713+
root.setHeight(52f);
714+
root.setDirection(YogaDirection.LTR);
715+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
716+
717+
assertEquals(72f, root.getLayoutX(), 0.0f);
718+
assertEquals(0f, root.getLayoutY(), 0.0f);
719+
assertEquals(52f, root.getLayoutWidth(), 0.0f);
720+
assertEquals(52f, root.getLayoutHeight(), 0.0f);
721+
722+
root.setDirection(YogaDirection.RTL);
723+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
724+
725+
assertEquals(72f, root.getLayoutX(), 0.0f);
726+
assertEquals(0f, root.getLayoutY(), 0.0f);
727+
assertEquals(52f, root.getLayoutWidth(), 0.0f);
728+
assertEquals(52f, root.getLayoutHeight(), 0.0f);
729+
}
730+
706731
}

‎javascript/tests/Facebook.Yoga/YGAbsolutePositionTest.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -758,3 +758,32 @@ it("absolute_layout_align_items_and_justify_content_center_and_right_position",
758758
config.free();
759759
}
760760
});
761+
it("position_root_with_rtl_should_position_withoutdirection", function () {
762+
var config = Yoga.Config.create();
763+
764+
try {
765+
var root = Yoga.Node.create(config);
766+
root.setPosition(Yoga.EDGE_LEFT, 72);
767+
root.setWidth(52);
768+
root.setHeight(52);
769+
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_LTR);
770+
771+
console.assert(72 === root.getComputedLeft(), "72 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
772+
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
773+
console.assert(52 === root.getComputedWidth(), "52 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
774+
console.assert(52 === root.getComputedHeight(), "52 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
775+
776+
root.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, Yoga.DIRECTION_RTL);
777+
778+
console.assert(72 === root.getComputedLeft(), "72 === root.getComputedLeft() (" + root.getComputedLeft() + ")");
779+
console.assert(0 === root.getComputedTop(), "0 === root.getComputedTop() (" + root.getComputedTop() + ")");
780+
console.assert(52 === root.getComputedWidth(), "52 === root.getComputedWidth() (" + root.getComputedWidth() + ")");
781+
console.assert(52 === root.getComputedHeight(), "52 === root.getComputedHeight() (" + root.getComputedHeight() + ")");
782+
} finally {
783+
if (typeof root !== "undefined") {
784+
root.freeRecursive();
785+
}
786+
787+
config.free();
788+
}
789+
});

‎tests/YGAbsolutePositionTest.cpp‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,3 +713,29 @@ TEST(YogaTest, absolute_layout_align_items_and_justify_content_center_and_right_
713713

714714
YGConfigFree(config);
715715
}
716+
717+
TEST(YogaTest, position_root_with_rtl_should_position_withoutdirection) {
718+
const YGConfigRef config = YGConfigNew();
719+
720+
const YGNodeRef root = YGNodeNewWithConfig(config);
721+
YGNodeStyleSetPosition(root, YGEdgeLeft, 72);
722+
YGNodeStyleSetWidth(root, 52);
723+
YGNodeStyleSetHeight(root, 52);
724+
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
725+
726+
ASSERT_FLOAT_EQ(72, YGNodeLayoutGetLeft(root));
727+
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
728+
ASSERT_FLOAT_EQ(52, YGNodeLayoutGetWidth(root));
729+
ASSERT_FLOAT_EQ(52, YGNodeLayoutGetHeight(root));
730+
731+
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
732+
733+
ASSERT_FLOAT_EQ(72, YGNodeLayoutGetLeft(root));
734+
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
735+
ASSERT_FLOAT_EQ(52, YGNodeLayoutGetWidth(root));
736+
ASSERT_FLOAT_EQ(52, YGNodeLayoutGetHeight(root));
737+
738+
YGNodeFreeRecursive(root);
739+
740+
YGConfigFree(config);
741+
}

‎yoga/Yoga.c‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1324,8 +1324,12 @@ static void YGNodeSetPosition(const YGNodeRef node,
13241324
const float mainSize,
13251325
const float crossSize,
13261326
const float parentWidth) {
1327-
const YGFlexDirection mainAxis = YGResolveFlexDirection(node->style.flexDirection, direction);
1328-
const YGFlexDirection crossAxis = YGFlexDirectionCross(mainAxis, direction);
1327+
/* Root nodes should be always layouted as LTR, so we don't return negative values. */
1328+
const YGDirection directionRespectingRoot = node->parent != NULL ? direction : YGDirectionLTR;
1329+
const YGFlexDirection mainAxis =
1330+
YGResolveFlexDirection(node->style.flexDirection, directionRespectingRoot);
1331+
const YGFlexDirection crossAxis = YGFlexDirectionCross(mainAxis, directionRespectingRoot);
1332+
13291333
const float relativePositionMain = YGNodeRelativePosition(node, mainAxis, mainSize);
13301334
const float relativePositionCross = YGNodeRelativePosition(node, crossAxis, crossSize);
13311335

0 commit comments

Comments
 (0)