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

javascript/tests/generated/YGAlignContentTest.test.ts

@@ -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<<25f4cf395ff39619966d6f0ff993e99d>>
+ * @generated SignedSource<<ae2a56d91c60e30ea10b12d6d143ff73>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGAlignContentTest.html
  */
 
@@ -5508,3 +5508,322 @@ test('align_content_space_evenly_stretch_does_influence_line_box_dim', () => {
     config.free();
   }
 });
+test('align_content_stretch_and_align_items_flex_end_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setAlignItems(Align.FlexEnd);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setAlignSelf(Align.FlexStart);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(75);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(250);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(75);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(250);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_stretch_and_align_items_flex_start_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setAlignItems(Align.FlexStart);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setAlignSelf(Align.FlexEnd);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(125);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(175);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(125);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(175);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_stretch_and_align_items_center_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setAlignItems(Align.Center);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setAlignSelf(Align.FlexEnd);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(125);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(125);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_stretch_and_align_items_stretch_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setAlignSelf(Align.FlexEnd);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(125);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(175);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(125);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(175);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});