Skip to content

Commit

Permalink
Fix: Correct Layout Behavior for Combined align-content and align-ite…
Browse files Browse the repository at this point in the history 
…ms (facebook#1742)

Summary:
X-link: facebook/react-native#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: facebook#1742

Reviewed By: joevilches

Differential Revision: D65953882

Pulled By: zeyap

fbshipit-source-id: 7e12a21b1d442b35c3f3536cad32dc4b82130d15
  • Loading branch information
@phuccvx12 @facebook-github-bot
phuccvx12 authored and facebook-github-bot committed Nov 21, 2024
1 parent 26b21ae commit 77c9987
Show file tree
Hide file tree
Showing 5 changed files with 957 additions and 4 deletions.
29 changes: 29 additions & 0 deletions gentest/fixtures/YGAlignContentTest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,3 +448,32 @@
</div>
<div style="height: 50px; width: 50px; margin-left: 20px;"></div>
</div>

<div id="align_content_stretch_and_align_items_flex_end_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: flex-end;">
<div style="height: 50px; width: 150px; align-self: flex-start;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>


<div id="align_content_stretch_and_align_items_flex_start_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: flex-start;">
<div style="height: 50px; width: 150px; align-self: flex-end;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>

<div id="align_content_stretch_and_align_items_center_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: center;">
<div style="height: 50px; width: 150px; align-self: flex-end;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>

<div id="align_content_stretch_and_align_items_stretch_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: stretch;">
<div style="height: 50px; width: 150px; align-self: flex-end;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
301 changes: 300 additions & 1 deletion java/tests/generated/com/facebook/yoga/YGAlignContentTest.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down Expand Up @@ -5207,6 +5207,305 @@ public void test_align_content_space_evenly_stretch_does_influence_line_box_dim(
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);
}
Expand Down
Loading

0 comments on commit 77c9987

Please sign in to comment.