Skip to content

Commit ba27f9d

Browse files
intergalacticspacehighwayfacebook-github-bot
intergalacticspacehighway
authored and
facebook-github-bot
committed
fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)
Summary: Fixes - facebook/react-native#35553 ## Approach We're using `betweenMainDim` to add [gap between](https://github.com/intergalacticspacehighway/yoga/blob/bbeede82d36cd89657faf385aaa704f45443c326/yoga/Yoga.cpp#L2495) items in main axis. This is resulting in increased [main axis](https://github.com/intergalacticspacehighway/yoga/blob/bbeede82d36cd89657faf385aaa704f45443c326/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: #1188 Test Plan: Added fixtures which previously failed but now pass. Reviewed By: necolas Differential Revision: D42078162 Pulled By: NickGerleman fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
1 parent 35f3335 commit ba27f9d

File tree

6 files changed

+561
-0
lines changed

6 files changed

+561
-0
lines changed

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1597,6 +1597,74 @@ public void Test_column_gap_wrap_align_stretch()
15971597
Assert.AreEqual(150f, root_child4.LayoutHeight);
15981598
}
15991599

1600+
[Test]
1601+
public void Test_column_gap_determines_parent_width()
1602+
{
1603+
YogaConfig config = new YogaConfig();
1604+
1605+
YogaNode root = new YogaNode(config);
1606+
root.FlexDirection = YogaFlexDirection.Row;
1607+
root.Height = 100;
1608+
root.ColumnGap = 10;
1609+
1610+
YogaNode root_child0 = new YogaNode(config);
1611+
root_child0.Width = 10;
1612+
root.Insert(0, root_child0);
1613+
1614+
YogaNode root_child1 = new YogaNode(config);
1615+
root_child1.Width = 20;
1616+
root.Insert(1, root_child1);
1617+
1618+
YogaNode root_child2 = new YogaNode(config);
1619+
root_child2.Width = 30;
1620+
root.Insert(2, root_child2);
1621+
root.StyleDirection = YogaDirection.LTR;
1622+
root.CalculateLayout();
1623+
1624+
Assert.AreEqual(0f, root.LayoutX);
1625+
Assert.AreEqual(0f, root.LayoutY);
1626+
Assert.AreEqual(80f, root.LayoutWidth);
1627+
Assert.AreEqual(100f, root.LayoutHeight);
1628+
1629+
Assert.AreEqual(0f, root_child0.LayoutX);
1630+
Assert.AreEqual(0f, root_child0.LayoutY);
1631+
Assert.AreEqual(10f, root_child0.LayoutWidth);
1632+
Assert.AreEqual(100f, root_child0.LayoutHeight);
1633+
1634+
Assert.AreEqual(20f, root_child1.LayoutX);
1635+
Assert.AreEqual(0f, root_child1.LayoutY);
1636+
Assert.AreEqual(20f, root_child1.LayoutWidth);
1637+
Assert.AreEqual(100f, root_child1.LayoutHeight);
1638+
1639+
Assert.AreEqual(50f, root_child2.LayoutX);
1640+
Assert.AreEqual(0f, root_child2.LayoutY);
1641+
Assert.AreEqual(30f, root_child2.LayoutWidth);
1642+
Assert.AreEqual(100f, root_child2.LayoutHeight);
1643+
1644+
root.StyleDirection = YogaDirection.RTL;
1645+
root.CalculateLayout();
1646+
1647+
Assert.AreEqual(0f, root.LayoutX);
1648+
Assert.AreEqual(0f, root.LayoutY);
1649+
Assert.AreEqual(80f, root.LayoutWidth);
1650+
Assert.AreEqual(100f, root.LayoutHeight);
1651+
1652+
Assert.AreEqual(70f, root_child0.LayoutX);
1653+
Assert.AreEqual(0f, root_child0.LayoutY);
1654+
Assert.AreEqual(10f, root_child0.LayoutWidth);
1655+
Assert.AreEqual(100f, root_child0.LayoutHeight);
1656+
1657+
Assert.AreEqual(40f, root_child1.LayoutX);
1658+
Assert.AreEqual(0f, root_child1.LayoutY);
1659+
Assert.AreEqual(20f, root_child1.LayoutWidth);
1660+
Assert.AreEqual(100f, root_child1.LayoutHeight);
1661+
1662+
Assert.AreEqual(0f, root_child2.LayoutX);
1663+
Assert.AreEqual(0f, root_child2.LayoutY);
1664+
Assert.AreEqual(30f, root_child2.LayoutWidth);
1665+
Assert.AreEqual(100f, root_child2.LayoutHeight);
1666+
}
1667+
16001668
[Test]
16011669
public void Test_row_gap_align_items_stretch()
16021670
{
@@ -1981,5 +2049,72 @@ public void Test_row_gap_row_wrap_child_margins()
19812049
Assert.AreEqual(0f, root_child2.LayoutHeight);
19822050
}
19832051

2052+
[Test]
2053+
public void Test_row_gap_determines_parent_height()
2054+
{
2055+
YogaConfig config = new YogaConfig();
2056+
2057+
YogaNode root = new YogaNode(config);
2058+
root.Width = 100;
2059+
root.RowGap = 10;
2060+
2061+
YogaNode root_child0 = new YogaNode(config);
2062+
root_child0.Height = 10;
2063+
root.Insert(0, root_child0);
2064+
2065+
YogaNode root_child1 = new YogaNode(config);
2066+
root_child1.Height = 20;
2067+
root.Insert(1, root_child1);
2068+
2069+
YogaNode root_child2 = new YogaNode(config);
2070+
root_child2.Height = 30;
2071+
root.Insert(2, root_child2);
2072+
root.StyleDirection = YogaDirection.LTR;
2073+
root.CalculateLayout();
2074+
2075+
Assert.AreEqual(0f, root.LayoutX);
2076+
Assert.AreEqual(0f, root.LayoutY);
2077+
Assert.AreEqual(100f, root.LayoutWidth);
2078+
Assert.AreEqual(80f, root.LayoutHeight);
2079+
2080+
Assert.AreEqual(0f, root_child0.LayoutX);
2081+
Assert.AreEqual(0f, root_child0.LayoutY);
2082+
Assert.AreEqual(100f, root_child0.LayoutWidth);
2083+
Assert.AreEqual(10f, root_child0.LayoutHeight);
2084+
2085+
Assert.AreEqual(0f, root_child1.LayoutX);
2086+
Assert.AreEqual(20f, root_child1.LayoutY);
2087+
Assert.AreEqual(100f, root_child1.LayoutWidth);
2088+
Assert.AreEqual(20f, root_child1.LayoutHeight);
2089+
2090+
Assert.AreEqual(0f, root_child2.LayoutX);
2091+
Assert.AreEqual(50f, root_child2.LayoutY);
2092+
Assert.AreEqual(100f, root_child2.LayoutWidth);
2093+
Assert.AreEqual(30f, root_child2.LayoutHeight);
2094+
2095+
root.StyleDirection = YogaDirection.RTL;
2096+
root.CalculateLayout();
2097+
2098+
Assert.AreEqual(0f, root.LayoutX);
2099+
Assert.AreEqual(0f, root.LayoutY);
2100+
Assert.AreEqual(100f, root.LayoutWidth);
2101+
Assert.AreEqual(80f, root.LayoutHeight);
2102+
2103+
Assert.AreEqual(0f, root_child0.LayoutX);
2104+
Assert.AreEqual(0f, root_child0.LayoutY);
2105+
Assert.AreEqual(100f, root_child0.LayoutWidth);
2106+
Assert.AreEqual(10f, root_child0.LayoutHeight);
2107+
2108+
Assert.AreEqual(0f, root_child1.LayoutX);
2109+
Assert.AreEqual(20f, root_child1.LayoutY);
2110+
Assert.AreEqual(100f, root_child1.LayoutWidth);
2111+
Assert.AreEqual(20f, root_child1.LayoutHeight);
2112+
2113+
Assert.AreEqual(0f, root_child2.LayoutX);
2114+
Assert.AreEqual(50f, root_child2.LayoutY);
2115+
Assert.AreEqual(100f, root_child2.LayoutWidth);
2116+
Assert.AreEqual(30f, root_child2.LayoutHeight);
2117+
}
2118+
19842119
}
19852120
}

‎gentest/fixtures/YGGapTest.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,12 @@
123123
<div style="min-width: 60px; flex-grow: 1;"></div>
124124
</div>
125125

126+
<div id="column_gap_determines_parent_width" style="flex-direction: row; height: 100px; align-items: 'stretch'; column-gap: 10px;">
127+
<div style="width: 10px;"></div>
128+
<div style="width: 20px;"></div>
129+
<div style="width: 30px;"></div>
130+
</div>
131+
126132
<div id="row_gap_align_items_stretch" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:stretch; align-content: stretch">
127133
<div style="width: 20px; "></div>
128134
<div style="width: 20px;"></div>
@@ -152,3 +158,9 @@
152158
<div style="width: 60px; margin-block: 10px;"></div>
153159
<div style="width: 60px; margin-block: 15px;"></div>
154160
</div>
161+
162+
<div id="row_gap_determines_parent_height" style="flex-direction: column; width: 100px; align-items: 'stretch'; row-gap: 10px;">
163+
<div style="height: 10px;"></div>
164+
<div style="height: 20px"></div>
165+
<div style="height: 30px"></div>
166+
</div>

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1589,6 +1589,73 @@ public void test_column_gap_wrap_align_stretch() {
15891589
assertEquals(150f, root_child4.getLayoutHeight(), 0.0f);
15901590
}
15911591

1592+
@Test
1593+
public void test_column_gap_determines_parent_width() {
1594+
YogaConfig config = YogaConfigFactory.create();
1595+
1596+
final YogaNode root = createNode(config);
1597+
root.setFlexDirection(YogaFlexDirection.ROW);
1598+
root.setHeight(100f);
1599+
root.setGap(YogaGutter.COLUMN, 10f);
1600+
1601+
final YogaNode root_child0 = createNode(config);
1602+
root_child0.setWidth(10f);
1603+
root.addChildAt(root_child0, 0);
1604+
1605+
final YogaNode root_child1 = createNode(config);
1606+
root_child1.setWidth(20f);
1607+
root.addChildAt(root_child1, 1);
1608+
1609+
final YogaNode root_child2 = createNode(config);
1610+
root_child2.setWidth(30f);
1611+
root.addChildAt(root_child2, 2);
1612+
root.setDirection(YogaDirection.LTR);
1613+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
1614+
1615+
assertEquals(0f, root.getLayoutX(), 0.0f);
1616+
assertEquals(0f, root.getLayoutY(), 0.0f);
1617+
assertEquals(80f, root.getLayoutWidth(), 0.0f);
1618+
assertEquals(100f, root.getLayoutHeight(), 0.0f);
1619+
1620+
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
1621+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
1622+
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
1623+
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
1624+
1625+
assertEquals(20f, root_child1.getLayoutX(), 0.0f);
1626+
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
1627+
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
1628+
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
1629+
1630+
assertEquals(50f, root_child2.getLayoutX(), 0.0f);
1631+
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
1632+
assertEquals(30f, root_child2.getLayoutWidth(), 0.0f);
1633+
assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
1634+
1635+
root.setDirection(YogaDirection.RTL);
1636+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
1637+
1638+
assertEquals(0f, root.getLayoutX(), 0.0f);
1639+
assertEquals(0f, root.getLayoutY(), 0.0f);
1640+
assertEquals(80f, root.getLayoutWidth(), 0.0f);
1641+
assertEquals(100f, root.getLayoutHeight(), 0.0f);
1642+
1643+
assertEquals(70f, root_child0.getLayoutX(), 0.0f);
1644+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
1645+
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
1646+
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
1647+
1648+
assertEquals(40f, root_child1.getLayoutX(), 0.0f);
1649+
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
1650+
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
1651+
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
1652+
1653+
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
1654+
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
1655+
assertEquals(30f, root_child2.getLayoutWidth(), 0.0f);
1656+
assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
1657+
}
1658+
15921659
@Test
15931660
public void test_row_gap_align_items_stretch() {
15941661
YogaConfig config = YogaConfigFactory.create();
@@ -1969,6 +2036,72 @@ public void test_row_gap_row_wrap_child_margins() {
19692036
assertEquals(0f, root_child2.getLayoutHeight(), 0.0f);
19702037
}
19712038

2039+
@Test
2040+
public void test_row_gap_determines_parent_height() {
2041+
YogaConfig config = YogaConfigFactory.create();
2042+
2043+
final YogaNode root = createNode(config);
2044+
root.setWidth(100f);
2045+
root.setGap(YogaGutter.ROW, 10f);
2046+
2047+
final YogaNode root_child0 = createNode(config);
2048+
root_child0.setHeight(10f);
2049+
root.addChildAt(root_child0, 0);
2050+
2051+
final YogaNode root_child1 = createNode(config);
2052+
root_child1.setHeight(20f);
2053+
root.addChildAt(root_child1, 1);
2054+
2055+
final YogaNode root_child2 = createNode(config);
2056+
root_child2.setHeight(30f);
2057+
root.addChildAt(root_child2, 2);
2058+
root.setDirection(YogaDirection.LTR);
2059+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
2060+
2061+
assertEquals(0f, root.getLayoutX(), 0.0f);
2062+
assertEquals(0f, root.getLayoutY(), 0.0f);
2063+
assertEquals(100f, root.getLayoutWidth(), 0.0f);
2064+
assertEquals(80f, root.getLayoutHeight(), 0.0f);
2065+
2066+
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
2067+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
2068+
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
2069+
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
2070+
2071+
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
2072+
assertEquals(20f, root_child1.getLayoutY(), 0.0f);
2073+
assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
2074+
assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
2075+
2076+
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
2077+
assertEquals(50f, root_child2.getLayoutY(), 0.0f);
2078+
assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
2079+
assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
2080+
2081+
root.setDirection(YogaDirection.RTL);
2082+
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
2083+
2084+
assertEquals(0f, root.getLayoutX(), 0.0f);
2085+
assertEquals(0f, root.getLayoutY(), 0.0f);
2086+
assertEquals(100f, root.getLayoutWidth(), 0.0f);
2087+
assertEquals(80f, root.getLayoutHeight(), 0.0f);
2088+
2089+
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
2090+
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
2091+
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
2092+
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
2093+
2094+
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
2095+
assertEquals(20f, root_child1.getLayoutY(), 0.0f);
2096+
assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
2097+
assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
2098+
2099+
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
2100+
assertEquals(50f, root_child2.getLayoutY(), 0.0f);
2101+
assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
2102+
assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
2103+
}
2104+
19722105
private YogaNode createNode(YogaConfig config) {
19732106
return mNodeFactory.create(config);
19742107
}

0 commit comments

Comments
 (0)