Update align-content handling of overflow

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

Gentest tests started failing because Chrome changed behavior of overflowed align-content container. Spec says should fallback to "safe center", which is really just "start", instead of previous "center" behavior. This changes behavior accordingly.

There is one bit where I think we are doing the wrong thing wrt alignment of flex start vs start (which we don't support yet), but couldn't repro a failing chrome test.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D55617689

fbshipit-source-id: 08f23d198c75f2c2f51ccaa8795289e6e4a92cb8
This commit is contained in:
Nick Gerleman
2024-04-02 04:47:09 -07:00
committed by Facebook GitHub Bot
parent f12d436314
commit 6f10656868
5 changed files with 710 additions and 121 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<<c3d09a05acce5dcadfa7be4f1618ec5c>>
* @generated SignedSource<<a74026bab03aecc7776f5dbb34f233a1>>
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGAlignContentTest.html
*/
@@ -1850,6 +1850,103 @@ test('align_content_space_between_wrapped_negative_space', () => {
config.free();
}
});
test('align_content_space_between_wrapped_negative_space_row_reverse', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setPositionType(PositionType.Absolute);
root.setBorder(Edge.Left, 60);
root.setBorder(Edge.Top, 60);
root.setBorder(Edge.Right, 60);
root.setBorder(Edge.Bottom, 60);
root.setWidth(320);
root.setHeight(320);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexDirection(FlexDirection.RowReverse);
root_child0.setJustifyContent(Justify.Center);
root_child0.setAlignContent(Align.SpaceBetween);
root_child0.setFlexWrap(Wrap.Wrap);
root_child0.setHeight(10);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setWidth("80%");
root_child0_child0.setHeight(20);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setWidth("80%");
root_child0_child1.setHeight(20);
root_child0.insertChild(root_child0_child1, 1);
const root_child0_child2 = Yoga.Node.create(config);
root_child0_child2.setWidth("80%");
root_child0_child2.setHeight(20);
root_child0.insertChild(root_child0_child2, 2);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(320);
expect(root.getComputedHeight()).toBe(320);
expect(root_child0.getComputedLeft()).toBe(60);
expect(root_child0.getComputedTop()).toBe(60);
expect(root_child0.getComputedWidth()).toBe(200);
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(320);
expect(root.getComputedHeight()).toBe(320);
expect(root_child0.getComputedLeft()).toBe(60);
expect(root_child0.getComputedTop()).toBe(60);
expect(root_child0.getComputedWidth()).toBe(200);
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('align_content_space_between_wrapped_negative_space_gap', () => {
const config = Yoga.Config.create();
let root;
@@ -2231,17 +2328,17 @@ test('align_content_space_around_wrapped_negative_space', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-25);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(15);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
@@ -2258,17 +2355,114 @@ test('align_content_space_around_wrapped_negative_space', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-25);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(15);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('align_content_space_around_wrapped_negative_space_row_reverse', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setPositionType(PositionType.Absolute);
root.setBorder(Edge.Left, 60);
root.setBorder(Edge.Top, 60);
root.setBorder(Edge.Right, 60);
root.setBorder(Edge.Bottom, 60);
root.setWidth(320);
root.setHeight(320);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexDirection(FlexDirection.RowReverse);
root_child0.setJustifyContent(Justify.Center);
root_child0.setAlignContent(Align.SpaceAround);
root_child0.setFlexWrap(Wrap.Wrap);
root_child0.setHeight(10);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setWidth("80%");
root_child0_child0.setHeight(20);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setWidth("80%");
root_child0_child1.setHeight(20);
root_child0.insertChild(root_child0_child1, 1);
const root_child0_child2 = Yoga.Node.create(config);
root_child0_child2.setWidth("80%");
root_child0_child2.setHeight(20);
root_child0.insertChild(root_child0_child2, 2);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(320);
expect(root.getComputedHeight()).toBe(320);
expect(root_child0.getComputedLeft()).toBe(60);
expect(root_child0.getComputedTop()).toBe(60);
expect(root_child0.getComputedWidth()).toBe(200);
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(320);
expect(root.getComputedHeight()).toBe(320);
expect(root_child0.getComputedLeft()).toBe(60);
expect(root_child0.getComputedTop()).toBe(60);
expect(root_child0.getComputedWidth()).toBe(200);
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
} finally {
@@ -2330,17 +2524,17 @@ test('align_content_space_around_wrapped_negative_space_gap', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-35);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(30);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(25);
expect(root_child0_child2.getComputedTop()).toBe(60);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
@@ -2357,17 +2551,17 @@ test('align_content_space_around_wrapped_negative_space_gap', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-35);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(30);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(25);
expect(root_child0_child2.getComputedTop()).toBe(60);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
} finally {
@@ -2660,17 +2854,17 @@ test('align_content_space_evenly_wrapped_negative_space', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-25);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(15);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
@@ -2687,17 +2881,17 @@ test('align_content_space_evenly_wrapped_negative_space', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-25);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(20);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(15);
expect(root_child0_child2.getComputedTop()).toBe(40);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
} finally {
@@ -2759,17 +2953,17 @@ test('align_content_space_evenly_wrapped_negative_space_gap', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-35);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(30);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(25);
expect(root_child0_child2.getComputedTop()).toBe(60);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
@@ -2786,17 +2980,17 @@ test('align_content_space_evenly_wrapped_negative_space_gap', () => {
expect(root_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0.getComputedLeft()).toBe(20);
expect(root_child0_child0.getComputedTop()).toBe(-35);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(160);
expect(root_child0_child0.getComputedHeight()).toBe(20);
expect(root_child0_child1.getComputedLeft()).toBe(20);
expect(root_child0_child1.getComputedTop()).toBe(-5);
expect(root_child0_child1.getComputedTop()).toBe(30);
expect(root_child0_child1.getComputedWidth()).toBe(160);
expect(root_child0_child1.getComputedHeight()).toBe(20);
expect(root_child0_child2.getComputedLeft()).toBe(20);
expect(root_child0_child2.getComputedTop()).toBe(25);
expect(root_child0_child2.getComputedTop()).toBe(60);
expect(root_child0_child2.getComputedWidth()).toBe(160);
expect(root_child0_child2.getComputedHeight()).toBe(20);
} finally {
@@ -4480,12 +4674,12 @@ test('align_content_space_evenly_with_max_cross_axis_violated', () => {
expect(root.getComputedHeight()).toBe(300);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(-50);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(400);
expect(root_child0.getComputedHeight()).toBe(200);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(150);
expect(root_child1.getComputedTop()).toBe(200);
expect(root_child1.getComputedWidth()).toBe(400);
expect(root_child1.getComputedHeight()).toBe(200);
@@ -4497,12 +4691,12 @@ test('align_content_space_evenly_with_max_cross_axis_violated', () => {
expect(root.getComputedHeight()).toBe(300);
expect(root_child0.getComputedLeft()).toBe(100);
expect(root_child0.getComputedTop()).toBe(-50);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(400);
expect(root_child0.getComputedHeight()).toBe(200);
expect(root_child1.getComputedLeft()).toBe(100);
expect(root_child1.getComputedTop()).toBe(150);
expect(root_child1.getComputedTop()).toBe(200);
expect(root_child1.getComputedWidth()).toBe(400);
expect(root_child1.getComputedHeight()).toBe(200);
} finally {
@@ -4551,12 +4745,12 @@ test('align_content_space_evenly_with_max_cross_axis_violated_padding_and_border
expect(root.getComputedHeight()).toBe(300);
expect(root_child0.getComputedLeft()).toBe(7);
expect(root_child0.getComputedTop()).toBe(-50);
expect(root_child0.getComputedTop()).toBe(7);
expect(root_child0.getComputedWidth()).toBe(400);
expect(root_child0.getComputedHeight()).toBe(200);
expect(root_child1.getComputedLeft()).toBe(7);
expect(root_child1.getComputedTop()).toBe(150);
expect(root_child1.getComputedTop()).toBe(207);
expect(root_child1.getComputedWidth()).toBe(400);
expect(root_child1.getComputedHeight()).toBe(200);
@@ -4568,12 +4762,12 @@ test('align_content_space_evenly_with_max_cross_axis_violated_padding_and_border
expect(root.getComputedHeight()).toBe(300);
expect(root_child0.getComputedLeft()).toBe(93);
expect(root_child0.getComputedTop()).toBe(-50);
expect(root_child0.getComputedTop()).toBe(7);
expect(root_child0.getComputedWidth()).toBe(400);
expect(root_child0.getComputedHeight()).toBe(200);
expect(root_child1.getComputedLeft()).toBe(93);
expect(root_child1.getComputedTop()).toBe(150);
expect(root_child1.getComputedTop()).toBe(207);
expect(root_child1.getComputedWidth()).toBe(400);
expect(root_child1.getComputedHeight()).toBe(200);
} finally {