Fix: Correct Layout Behavior for Combined align-content and align-items (#1742)

Summary:
X-link: https://github.com/facebook/react-native/pull/47732

This pull request addresses the issue where combining align-content and align-items properties resulted in incorrect layout behavior in Yoga version 3.1.0, as reported in [Issue https://github.com/facebook/yoga/issues/1739](https://github.com/facebook/yoga/issues/1739).

# Changes Made:

Alignment Logic Update: Modified the alignment calculations to ensure that the combination of align-content and align-items properties produces the expected layout, consistent with CSS Flexbox standards and previous Yoga versions.

Test Cases Added: Introduced new test cases to cover scenarios involving various combinations of align-content and align-items properties to prevent future regressions.

# Testing:

All existing tests pass successfully.

New test cases confirm that the layout behaves as expected when align-content and align-items are used together.

# Impact:

This fix ensures that layouts using both align-content and align-items properties render correctly, aligning with the behavior observed in Yoga version 1.19.0 and standard web browsers.

Pull Request resolved: https://github.com/facebook/yoga/pull/1742

Reviewed By: joevilches

Differential Revision: D65953882

Pulled By: zeyap

fbshipit-source-id: 7e12a21b1d442b35c3f3536cad32dc4b82130d15
This commit is contained in:
phuccvx12
2024-11-20 19:59:42 -08:00
committed by Facebook GitHub Bot
parent 26b21ae23c
commit 77c9987012
5 changed files with 957 additions and 4 deletions

View File

@@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<c85d60ce23aa6d921d52316d3ff35f17>>
* @generated SignedSource<<cafd5a49032616243a68af66ae440904>>
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGAlignContentTest.html
*/
@@ -5207,6 +5207,305 @@ public class YGAlignContentTest {
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
}
@Test
public void test_align_content_stretch_and_align_items_flex_end_with_flex_wrap() {
YogaConfig config = YogaConfigFactory.create();
final YogaNode root = createNode(config);
root.setFlexDirection(YogaFlexDirection.ROW);
root.setAlignContent(YogaAlign.STRETCH);
root.setAlignItems(YogaAlign.FLEX_END);
root.setPositionType(YogaPositionType.ABSOLUTE);
root.setWrap(YogaWrap.WRAP);
root.setWidth(300f);
root.setHeight(300f);
final YogaNode root_child0 = createNode(config);
root_child0.setAlignSelf(YogaAlign.FLEX_START);
root_child0.setWidth(150f);
root_child0.setHeight(50f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = createNode(config);
root_child1.setWidth(120f);
root_child1.setHeight(100f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = createNode(config);
root_child2.setWidth(120f);
root_child2.setHeight(50f);
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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child1.getLayoutX(), 0.0f);
assertEquals(75f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(250f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, 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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child0.getLayoutX(), 0.0f);
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(30f, root_child1.getLayoutX(), 0.0f);
assertEquals(75f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(180f, root_child2.getLayoutX(), 0.0f);
assertEquals(250f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
}
@Test
public void test_align_content_stretch_and_align_items_flex_start_with_flex_wrap() {
YogaConfig config = YogaConfigFactory.create();
final YogaNode root = createNode(config);
root.setFlexDirection(YogaFlexDirection.ROW);
root.setAlignContent(YogaAlign.STRETCH);
root.setAlignItems(YogaAlign.FLEX_START);
root.setPositionType(YogaPositionType.ABSOLUTE);
root.setWrap(YogaWrap.WRAP);
root.setWidth(300f);
root.setHeight(300f);
final YogaNode root_child0 = createNode(config);
root_child0.setAlignSelf(YogaAlign.FLEX_END);
root_child0.setWidth(150f);
root_child0.setHeight(50f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = createNode(config);
root_child1.setWidth(120f);
root_child1.setHeight(100f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = createNode(config);
root_child2.setWidth(120f);
root_child2.setHeight(50f);
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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(125f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(175f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, 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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child0.getLayoutX(), 0.0f);
assertEquals(125f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(30f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(180f, root_child2.getLayoutX(), 0.0f);
assertEquals(175f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
}
@Test
public void test_align_content_stretch_and_align_items_center_with_flex_wrap() {
YogaConfig config = YogaConfigFactory.create();
final YogaNode root = createNode(config);
root.setFlexDirection(YogaFlexDirection.ROW);
root.setAlignContent(YogaAlign.STRETCH);
root.setAlignItems(YogaAlign.CENTER);
root.setPositionType(YogaPositionType.ABSOLUTE);
root.setWrap(YogaWrap.WRAP);
root.setWidth(300f);
root.setHeight(300f);
final YogaNode root_child0 = createNode(config);
root_child0.setAlignSelf(YogaAlign.FLEX_END);
root_child0.setWidth(150f);
root_child0.setHeight(50f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = createNode(config);
root_child1.setWidth(120f);
root_child1.setHeight(100f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = createNode(config);
root_child2.setWidth(120f);
root_child2.setHeight(50f);
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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(125f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child1.getLayoutX(), 0.0f);
assertEquals(38f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(213f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, 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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child0.getLayoutX(), 0.0f);
assertEquals(125f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(30f, root_child1.getLayoutX(), 0.0f);
assertEquals(38f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(180f, root_child2.getLayoutX(), 0.0f);
assertEquals(213f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
}
@Test
public void test_align_content_stretch_and_align_items_stretch_with_flex_wrap() {
YogaConfig config = YogaConfigFactory.create();
final YogaNode root = createNode(config);
root.setFlexDirection(YogaFlexDirection.ROW);
root.setAlignContent(YogaAlign.STRETCH);
root.setPositionType(YogaPositionType.ABSOLUTE);
root.setWrap(YogaWrap.WRAP);
root.setWidth(300f);
root.setHeight(300f);
final YogaNode root_child0 = createNode(config);
root_child0.setAlignSelf(YogaAlign.FLEX_END);
root_child0.setWidth(150f);
root_child0.setHeight(50f);
root.addChildAt(root_child0, 0);
final YogaNode root_child1 = createNode(config);
root_child1.setWidth(120f);
root_child1.setHeight(100f);
root.addChildAt(root_child1, 1);
final YogaNode root_child2 = createNode(config);
root_child2.setWidth(120f);
root_child2.setHeight(50f);
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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
assertEquals(125f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
assertEquals(175f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, 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(300f, root.getLayoutWidth(), 0.0f);
assertEquals(300f, root.getLayoutHeight(), 0.0f);
assertEquals(150f, root_child0.getLayoutX(), 0.0f);
assertEquals(125f, root_child0.getLayoutY(), 0.0f);
assertEquals(150f, root_child0.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child0.getLayoutHeight(), 0.0f);
assertEquals(30f, root_child1.getLayoutX(), 0.0f);
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
assertEquals(120f, root_child1.getLayoutWidth(), 0.0f);
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
assertEquals(180f, root_child2.getLayoutX(), 0.0f);
assertEquals(175f, root_child2.getLayoutY(), 0.0f);
assertEquals(120f, root_child2.getLayoutWidth(), 0.0f);
assertEquals(50f, root_child2.getLayoutHeight(), 0.0f);
}
private YogaNode createNode(YogaConfig config) {
return mNodeFactory.create(config);
}