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:
committed by
Facebook GitHub Bot
parent
26b21ae23c
commit
77c9987012
@@ -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);
|
||||
}
|
||||
|
Reference in New Issue
Block a user