fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)
Summary: Fixes - https://github.com/facebook/react-native/issues/35553 ## Approach We're using `betweenMainDim` to add [gap between](bbeede82d3/yoga/Yoga.cpp (L2495)
) items in main axis. This is resulting in increased [main axis](bbeede82d3/yoga/Yoga.cpp (L2598)
) dimension of the container as it gets added even for the last element. One solution is to keep using it and subtract the gap when last element is reached. ## Aside Mutating this value feels weird, but I think `betweenMainDim` gets initialized for every line so should be fine? I did some manual tests to verify. I tried running tests but I'll have to downgrade the java version. Let me know if anything fails. Thanks! 🙏 Pull Request resolved: https://github.com/facebook/yoga/pull/1188 Test Plan: Added fixtures which previously failed but now pass. Reviewed By: necolas Differential Revision: D42078162 Pulled By: NickGerleman fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
This commit is contained in:
committed by
Facebook GitHub Bot
parent
35f3335efc
commit
ba27f9d1ec
@@ -1597,6 +1597,74 @@ namespace Facebook.Yoga
|
||||
Assert.AreEqual(150f, root_child4.LayoutHeight);
|
||||
}
|
||||
|
||||
[Test]
|
||||
public void Test_column_gap_determines_parent_width()
|
||||
{
|
||||
YogaConfig config = new YogaConfig();
|
||||
|
||||
YogaNode root = new YogaNode(config);
|
||||
root.FlexDirection = YogaFlexDirection.Row;
|
||||
root.Height = 100;
|
||||
root.ColumnGap = 10;
|
||||
|
||||
YogaNode root_child0 = new YogaNode(config);
|
||||
root_child0.Width = 10;
|
||||
root.Insert(0, root_child0);
|
||||
|
||||
YogaNode root_child1 = new YogaNode(config);
|
||||
root_child1.Width = 20;
|
||||
root.Insert(1, root_child1);
|
||||
|
||||
YogaNode root_child2 = new YogaNode(config);
|
||||
root_child2.Width = 30;
|
||||
root.Insert(2, root_child2);
|
||||
root.StyleDirection = YogaDirection.LTR;
|
||||
root.CalculateLayout();
|
||||
|
||||
Assert.AreEqual(0f, root.LayoutX);
|
||||
Assert.AreEqual(0f, root.LayoutY);
|
||||
Assert.AreEqual(80f, root.LayoutWidth);
|
||||
Assert.AreEqual(100f, root.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child0.LayoutX);
|
||||
Assert.AreEqual(0f, root_child0.LayoutY);
|
||||
Assert.AreEqual(10f, root_child0.LayoutWidth);
|
||||
Assert.AreEqual(100f, root_child0.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(20f, root_child1.LayoutX);
|
||||
Assert.AreEqual(0f, root_child1.LayoutY);
|
||||
Assert.AreEqual(20f, root_child1.LayoutWidth);
|
||||
Assert.AreEqual(100f, root_child1.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(50f, root_child2.LayoutX);
|
||||
Assert.AreEqual(0f, root_child2.LayoutY);
|
||||
Assert.AreEqual(30f, root_child2.LayoutWidth);
|
||||
Assert.AreEqual(100f, root_child2.LayoutHeight);
|
||||
|
||||
root.StyleDirection = YogaDirection.RTL;
|
||||
root.CalculateLayout();
|
||||
|
||||
Assert.AreEqual(0f, root.LayoutX);
|
||||
Assert.AreEqual(0f, root.LayoutY);
|
||||
Assert.AreEqual(80f, root.LayoutWidth);
|
||||
Assert.AreEqual(100f, root.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(70f, root_child0.LayoutX);
|
||||
Assert.AreEqual(0f, root_child0.LayoutY);
|
||||
Assert.AreEqual(10f, root_child0.LayoutWidth);
|
||||
Assert.AreEqual(100f, root_child0.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(40f, root_child1.LayoutX);
|
||||
Assert.AreEqual(0f, root_child1.LayoutY);
|
||||
Assert.AreEqual(20f, root_child1.LayoutWidth);
|
||||
Assert.AreEqual(100f, root_child1.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child2.LayoutX);
|
||||
Assert.AreEqual(0f, root_child2.LayoutY);
|
||||
Assert.AreEqual(30f, root_child2.LayoutWidth);
|
||||
Assert.AreEqual(100f, root_child2.LayoutHeight);
|
||||
}
|
||||
|
||||
[Test]
|
||||
public void Test_row_gap_align_items_stretch()
|
||||
{
|
||||
@@ -1981,5 +2049,72 @@ namespace Facebook.Yoga
|
||||
Assert.AreEqual(0f, root_child2.LayoutHeight);
|
||||
}
|
||||
|
||||
[Test]
|
||||
public void Test_row_gap_determines_parent_height()
|
||||
{
|
||||
YogaConfig config = new YogaConfig();
|
||||
|
||||
YogaNode root = new YogaNode(config);
|
||||
root.Width = 100;
|
||||
root.RowGap = 10;
|
||||
|
||||
YogaNode root_child0 = new YogaNode(config);
|
||||
root_child0.Height = 10;
|
||||
root.Insert(0, root_child0);
|
||||
|
||||
YogaNode root_child1 = new YogaNode(config);
|
||||
root_child1.Height = 20;
|
||||
root.Insert(1, root_child1);
|
||||
|
||||
YogaNode root_child2 = new YogaNode(config);
|
||||
root_child2.Height = 30;
|
||||
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(80f, root.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child0.LayoutX);
|
||||
Assert.AreEqual(0f, root_child0.LayoutY);
|
||||
Assert.AreEqual(100f, root_child0.LayoutWidth);
|
||||
Assert.AreEqual(10f, root_child0.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child1.LayoutX);
|
||||
Assert.AreEqual(20f, root_child1.LayoutY);
|
||||
Assert.AreEqual(100f, root_child1.LayoutWidth);
|
||||
Assert.AreEqual(20f, root_child1.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child2.LayoutX);
|
||||
Assert.AreEqual(50f, root_child2.LayoutY);
|
||||
Assert.AreEqual(100f, root_child2.LayoutWidth);
|
||||
Assert.AreEqual(30f, 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(80f, root.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child0.LayoutX);
|
||||
Assert.AreEqual(0f, root_child0.LayoutY);
|
||||
Assert.AreEqual(100f, root_child0.LayoutWidth);
|
||||
Assert.AreEqual(10f, root_child0.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child1.LayoutX);
|
||||
Assert.AreEqual(20f, root_child1.LayoutY);
|
||||
Assert.AreEqual(100f, root_child1.LayoutWidth);
|
||||
Assert.AreEqual(20f, root_child1.LayoutHeight);
|
||||
|
||||
Assert.AreEqual(0f, root_child2.LayoutX);
|
||||
Assert.AreEqual(50f, root_child2.LayoutY);
|
||||
Assert.AreEqual(100f, root_child2.LayoutWidth);
|
||||
Assert.AreEqual(30f, root_child2.LayoutHeight);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user