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
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
26b21ae23c
commit
77c9987012
@@ -5,7 +5,7 @@
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* clang-format off
|
||||
* @generated SignedSource<<37e5721da82615c5e6543420f2bfc792>>
|
||||
* @generated SignedSource<<a0af76959fbfcb6b0a0f5ac394ceafe9>>
|
||||
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGAlignContentTest.html
|
||||
*/
|
||||
|
||||
@@ -5252,3 +5252,306 @@ TEST(YogaTest, align_content_space_evenly_stretch_does_influence_line_box_dim) {
|
||||
|
||||
YGConfigFree(config);
|
||||
}
|
||||
|
||||
TEST(YogaTest, align_content_stretch_and_align_items_flex_end_with_flex_wrap) {
|
||||
YGConfigRef config = YGConfigNew();
|
||||
|
||||
YGNodeRef root = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
|
||||
YGNodeStyleSetAlignContent(root, YGAlignStretch);
|
||||
YGNodeStyleSetAlignItems(root, YGAlignFlexEnd);
|
||||
YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
|
||||
YGNodeStyleSetFlexWrap(root, YGWrapWrap);
|
||||
YGNodeStyleSetWidth(root, 300);
|
||||
YGNodeStyleSetHeight(root, 300);
|
||||
|
||||
YGNodeRef root_child0 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetAlignSelf(root_child0, YGAlignFlexStart);
|
||||
YGNodeStyleSetWidth(root_child0, 150);
|
||||
YGNodeStyleSetHeight(root_child0, 50);
|
||||
YGNodeInsertChild(root, root_child0, 0);
|
||||
|
||||
YGNodeRef root_child1 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child1, 120);
|
||||
YGNodeStyleSetHeight(root_child1, 100);
|
||||
YGNodeInsertChild(root, root_child1, 1);
|
||||
|
||||
YGNodeRef root_child2 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child2, 120);
|
||||
YGNodeStyleSetHeight(root_child2, 50);
|
||||
YGNodeInsertChild(root, root_child2, 2);
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(75, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(75, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(180, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(250, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeFreeRecursive(root);
|
||||
|
||||
YGConfigFree(config);
|
||||
}
|
||||
|
||||
TEST(YogaTest, align_content_stretch_and_align_items_flex_start_with_flex_wrap) {
|
||||
YGConfigRef config = YGConfigNew();
|
||||
|
||||
YGNodeRef root = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
|
||||
YGNodeStyleSetAlignContent(root, YGAlignStretch);
|
||||
YGNodeStyleSetAlignItems(root, YGAlignFlexStart);
|
||||
YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
|
||||
YGNodeStyleSetFlexWrap(root, YGWrapWrap);
|
||||
YGNodeStyleSetWidth(root, 300);
|
||||
YGNodeStyleSetHeight(root, 300);
|
||||
|
||||
YGNodeRef root_child0 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetAlignSelf(root_child0, YGAlignFlexEnd);
|
||||
YGNodeStyleSetWidth(root_child0, 150);
|
||||
YGNodeStyleSetHeight(root_child0, 50);
|
||||
YGNodeInsertChild(root, root_child0, 0);
|
||||
|
||||
YGNodeRef root_child1 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child1, 120);
|
||||
YGNodeStyleSetHeight(root_child1, 100);
|
||||
YGNodeInsertChild(root, root_child1, 1);
|
||||
|
||||
YGNodeRef root_child2 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child2, 120);
|
||||
YGNodeStyleSetHeight(root_child2, 50);
|
||||
YGNodeInsertChild(root, root_child2, 2);
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(125, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(175, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(125, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(180, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(175, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeFreeRecursive(root);
|
||||
|
||||
YGConfigFree(config);
|
||||
}
|
||||
|
||||
TEST(YogaTest, align_content_stretch_and_align_items_center_with_flex_wrap) {
|
||||
YGConfigRef config = YGConfigNew();
|
||||
|
||||
YGNodeRef root = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
|
||||
YGNodeStyleSetAlignContent(root, YGAlignStretch);
|
||||
YGNodeStyleSetAlignItems(root, YGAlignCenter);
|
||||
YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
|
||||
YGNodeStyleSetFlexWrap(root, YGWrapWrap);
|
||||
YGNodeStyleSetWidth(root, 300);
|
||||
YGNodeStyleSetHeight(root, 300);
|
||||
|
||||
YGNodeRef root_child0 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetAlignSelf(root_child0, YGAlignFlexEnd);
|
||||
YGNodeStyleSetWidth(root_child0, 150);
|
||||
YGNodeStyleSetHeight(root_child0, 50);
|
||||
YGNodeInsertChild(root, root_child0, 0);
|
||||
|
||||
YGNodeRef root_child1 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child1, 120);
|
||||
YGNodeStyleSetHeight(root_child1, 100);
|
||||
YGNodeInsertChild(root, root_child1, 1);
|
||||
|
||||
YGNodeRef root_child2 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child2, 120);
|
||||
YGNodeStyleSetHeight(root_child2, 50);
|
||||
YGNodeInsertChild(root, root_child2, 2);
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(125, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(38, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(213, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(125, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(38, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(180, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(213, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeFreeRecursive(root);
|
||||
|
||||
YGConfigFree(config);
|
||||
}
|
||||
|
||||
TEST(YogaTest, align_content_stretch_and_align_items_stretch_with_flex_wrap) {
|
||||
YGConfigRef config = YGConfigNew();
|
||||
|
||||
YGNodeRef root = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
|
||||
YGNodeStyleSetAlignContent(root, YGAlignStretch);
|
||||
YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
|
||||
YGNodeStyleSetFlexWrap(root, YGWrapWrap);
|
||||
YGNodeStyleSetWidth(root, 300);
|
||||
YGNodeStyleSetHeight(root, 300);
|
||||
|
||||
YGNodeRef root_child0 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetAlignSelf(root_child0, YGAlignFlexEnd);
|
||||
YGNodeStyleSetWidth(root_child0, 150);
|
||||
YGNodeStyleSetHeight(root_child0, 50);
|
||||
YGNodeInsertChild(root, root_child0, 0);
|
||||
|
||||
YGNodeRef root_child1 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child1, 120);
|
||||
YGNodeStyleSetHeight(root_child1, 100);
|
||||
YGNodeInsertChild(root, root_child1, 1);
|
||||
|
||||
YGNodeRef root_child2 = YGNodeNewWithConfig(config);
|
||||
YGNodeStyleSetWidth(root_child2, 120);
|
||||
YGNodeStyleSetHeight(root_child2, 50);
|
||||
YGNodeInsertChild(root, root_child2, 2);
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(125, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(175, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
|
||||
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetWidth(root));
|
||||
ASSERT_FLOAT_EQ(300, YGNodeLayoutGetHeight(root));
|
||||
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetLeft(root_child0));
|
||||
ASSERT_FLOAT_EQ(125, YGNodeLayoutGetTop(root_child0));
|
||||
ASSERT_FLOAT_EQ(150, YGNodeLayoutGetWidth(root_child0));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child0));
|
||||
|
||||
ASSERT_FLOAT_EQ(30, YGNodeLayoutGetLeft(root_child1));
|
||||
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child1));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child1));
|
||||
ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child1));
|
||||
|
||||
ASSERT_FLOAT_EQ(180, YGNodeLayoutGetLeft(root_child2));
|
||||
ASSERT_FLOAT_EQ(175, YGNodeLayoutGetTop(root_child2));
|
||||
ASSERT_FLOAT_EQ(120, YGNodeLayoutGetWidth(root_child2));
|
||||
ASSERT_FLOAT_EQ(50, YGNodeLayoutGetHeight(root_child2));
|
||||
|
||||
YGNodeFreeRecursive(root);
|
||||
|
||||
YGConfigFree(config);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user