2022-12-28 01:27:12 -08:00
|
|
|
/**
|
|
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
|
|
|
*/
|
|
|
|
|
|
|
|
// @generated by gentest/gentest.rb from gentest/fixtures/YGJustifyContentTest.html
|
|
|
|
|
Consolidate JavaScript Flavors (#1433)
Summary:
Fixes https://github.com/facebook/yoga/issues/1417
This dramatically simplifies the matrix of Node vs web, ASM vs WASM, sync vs async compilation, or CommonJS vs ES Modules. We have one variant, using wasm, with ESModule top-level await to do async compilation. Web/node share the same binary, and we base64 encode the WASM into a wrapper JS file for compatibility with Node and bundlers.
This has some downsides, like requiring an environment with top level await, but also has upsides, like a consistent, sync looking API compatible with older Yoga, and mitigating TypeScript issues with package exports and typings resolution.
As part of this work I also removed `ts-node` from the toolchain (at the cost of a couple of config files needing to be vanilla JS).
Pull Request resolved: https://github.com/facebook/yoga/pull/1433
Test Plan:
1. `yarn test`
2. `yarn lint`
3. `yarn tsc`
4. `yarn benchmark`
5. `yarn build` website-next
6. `yarn lint` website-next
7. Locally test website-next
8. Examine package artifact created by GitHub
9. All Automation passes
Reviewed By: yungsters
Differential Revision: D50453324
Pulled By: NickGerleman
fbshipit-source-id: fe1192acc69e57fa69a1ff056dd7b5844d2198d5
2023-10-31 20:41:38 -07:00
|
|
|
import Yoga from 'yoga-layout';
|
2023-05-10 22:46:39 -07:00
|
|
|
import {
|
|
|
|
Align,
|
|
|
|
Direction,
|
|
|
|
Display,
|
|
|
|
Edge,
|
|
|
|
Errata,
|
|
|
|
ExperimentalFeature,
|
|
|
|
FlexDirection,
|
|
|
|
Gutter,
|
|
|
|
Justify,
|
|
|
|
MeasureMode,
|
|
|
|
Overflow,
|
|
|
|
PositionType,
|
|
|
|
Unit,
|
|
|
|
Wrap,
|
|
|
|
} from 'yoga-layout';
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_flex_start', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setWidth(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setWidth(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(10);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(20);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(92);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(82);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(72);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_flex_end', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.FlexEnd);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setWidth(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setWidth(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(72);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(82);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(92);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(20);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(10);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_center', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setWidth(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setWidth(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(36);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(46);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(56);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(56);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(46);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(36);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_space_between', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.SpaceBetween);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setWidth(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setWidth(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(46);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(92);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(92);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(46);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_space_around', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.SpaceAround);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setWidth(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setWidth(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(12);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(46);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(80);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(80);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(46);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(12);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(10);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(102);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_flex_start', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(10);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(20);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(10);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(20);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_flex_end', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.FlexEnd);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(72);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(82);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(92);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(72);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(82);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(92);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_center', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(36);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(56);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(36);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(56);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_space_between', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.SpaceBetween);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(92);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(92);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_space_around', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.SpaceAround);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(12);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(80);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(12);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(80);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_min_width_and_margin', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setMargin(Edge.Left, 100);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setMinWidth(50);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(20);
|
|
|
|
root_child0.setHeight(20);
|
|
|
|
root.insertChild(root_child0, 0);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(100);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(50);
|
|
|
|
expect(root.getComputedHeight()).toBe(20);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(15);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(100);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(50);
|
|
|
|
expect(root.getComputedHeight()).toBe(20);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(15);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_max_width_and_margin', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setMargin(Edge.Left, 100);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(100);
|
|
|
|
root.setMaxWidth(80);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(20);
|
|
|
|
root_child0.setHeight(20);
|
|
|
|
root.insertChild(root_child0, 0);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(100);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(80);
|
|
|
|
expect(root.getComputedHeight()).toBe(20);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(30);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(100);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(80);
|
|
|
|
expect(root.getComputedHeight()).toBe(20);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(30);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_min_height_and_margin', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setMargin(Edge.Top, 100);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setMinHeight(50);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(20);
|
|
|
|
root_child0.setHeight(20);
|
|
|
|
root.insertChild(root_child0, 0);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(100);
|
|
|
|
expect(root.getComputedWidth()).toBe(20);
|
|
|
|
expect(root.getComputedHeight()).toBe(50);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(15);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(100);
|
|
|
|
expect(root.getComputedWidth()).toBe(20);
|
|
|
|
expect(root.getComputedHeight()).toBe(50);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(15);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_colunn_max_height_and_margin', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setMargin(Edge.Top, 100);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setHeight(100);
|
|
|
|
root.setMaxHeight(80);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setWidth(20);
|
|
|
|
root_child0.setHeight(20);
|
|
|
|
root.insertChild(root_child0, 0);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(100);
|
|
|
|
expect(root.getComputedWidth()).toBe(20);
|
|
|
|
expect(root.getComputedHeight()).toBe(80);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(30);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(100);
|
|
|
|
expect(root.getComputedWidth()).toBe(20);
|
|
|
|
expect(root.getComputedHeight()).toBe(80);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(30);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(20);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(20);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_column_space_evenly', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setJustifyContent(Justify.SpaceEvenly);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(18);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(74);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(18);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(46);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(74);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(102);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_row_space_evenly', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setFlexDirection(FlexDirection.Row);
|
|
|
|
root.setJustifyContent(Justify.SpaceEvenly);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(102);
|
|
|
|
root.setHeight(102);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0.setHeight(10);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child1.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child1.setHeight(10);
|
|
|
|
root.insertChild(root_child1, 1);
|
|
|
|
|
|
|
|
const root_child2 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child2.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child2.setHeight(10);
|
|
|
|
root.insertChild(root_child2, 2);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(26);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(0);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(51);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(0);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(77);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(0);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(102);
|
|
|
|
expect(root.getComputedHeight()).toBe(102);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(77);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(0);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child1.getComputedLeft()).toBe(51);
|
|
|
|
expect(root_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child1.getComputedWidth()).toBe(0);
|
|
|
|
expect(root_child1.getComputedHeight()).toBe(10);
|
|
|
|
|
|
|
|
expect(root_child2.getComputedLeft()).toBe(26);
|
|
|
|
expect(root_child2.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child2.getComputedWidth()).toBe(0);
|
|
|
|
expect(root_child2.getComputedHeight()).toBe(10);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_min_width_with_padding_child_width_greater_than_parent', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(1000);
|
|
|
|
root.setHeight(1584);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child0_child0 = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0_child0.setJustifyContent(Justify.Center);
|
|
|
|
root_child0_child0.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0_child0.setPositionType(PositionType.Relative);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0_child0.setPadding(Edge.Left, 100);
|
|
|
|
root_child0_child0.setPadding(Edge.Right, 100);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0_child0.setMinWidth(400);
|
|
|
|
root_child0.insertChild(root_child0_child0, 0);
|
|
|
|
|
|
|
|
const root_child0_child0_child0 = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0_child0_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0_child0_child0.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0_child0_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0_child0_child0.setWidth(300);
|
|
|
|
root_child0_child0_child0.setHeight(100);
|
|
|
|
root_child0_child0.insertChild(root_child0_child0_child0, 0);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(1000);
|
|
|
|
expect(root.getComputedHeight()).toBe(1584);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(1000);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedWidth()).toBe(500);
|
|
|
|
expect(root_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0_child0.getComputedLeft()).toBe(100);
|
|
|
|
expect(root_child0_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0_child0.getComputedWidth()).toBe(300);
|
|
|
|
expect(root_child0_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(1000);
|
|
|
|
expect(root.getComputedHeight()).toBe(1584);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(1000);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0.getComputedLeft()).toBe(500);
|
|
|
|
expect(root_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedWidth()).toBe(500);
|
|
|
|
expect(root_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0_child0.getComputedLeft()).toBe(100);
|
|
|
|
expect(root_child0_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0_child0.getComputedWidth()).toBe(300);
|
|
|
|
expect(root_child0_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
2023-05-10 22:46:39 -07:00
|
|
|
test('justify_content_min_width_with_padding_child_width_lower_than_parent', () => {
|
2022-12-28 01:27:12 -08:00
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
2023-01-08 13:41:27 -08:00
|
|
|
|
2022-12-28 01:27:12 -08:00
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.setWidth(1080);
|
|
|
|
root.setHeight(1584);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child0_child0 = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0_child0.setJustifyContent(Justify.Center);
|
|
|
|
root_child0_child0.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0_child0.setPositionType(PositionType.Relative);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0_child0.setPadding(Edge.Left, 100);
|
|
|
|
root_child0_child0.setPadding(Edge.Right, 100);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0_child0.setMinWidth(400);
|
|
|
|
root_child0.insertChild(root_child0_child0, 0);
|
|
|
|
|
|
|
|
const root_child0_child0_child0 = Yoga.Node.create(config);
|
2023-05-10 22:46:39 -07:00
|
|
|
root_child0_child0_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0_child0_child0.setAlignContent(Align.Stretch);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0_child0_child0.setPositionType(PositionType.Relative);
|
2022-12-28 01:27:12 -08:00
|
|
|
root_child0_child0_child0.setWidth(199);
|
|
|
|
root_child0_child0_child0.setHeight(100);
|
|
|
|
root_child0_child0.insertChild(root_child0_child0_child0, 0);
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.LTR);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(1080);
|
|
|
|
expect(root.getComputedHeight()).toBe(1584);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(1080);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedWidth()).toBe(400);
|
|
|
|
expect(root_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0_child0.getComputedLeft()).toBe(101);
|
|
|
|
expect(root_child0_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0_child0.getComputedWidth()).toBe(199);
|
|
|
|
expect(root_child0_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
2023-05-10 22:46:39 -07:00
|
|
|
root.calculateLayout(undefined, undefined, Direction.RTL);
|
2022-12-28 01:27:12 -08:00
|
|
|
|
|
|
|
expect(root.getComputedLeft()).toBe(0);
|
|
|
|
expect(root.getComputedTop()).toBe(0);
|
|
|
|
expect(root.getComputedWidth()).toBe(1080);
|
|
|
|
expect(root.getComputedHeight()).toBe(1584);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(1080);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0.getComputedLeft()).toBe(680);
|
|
|
|
expect(root_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedWidth()).toBe(400);
|
|
|
|
expect(root_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
|
|
|
|
expect(root_child0_child0_child0.getComputedLeft()).toBe(101);
|
|
|
|
expect(root_child0_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0_child0.getComputedWidth()).toBe(199);
|
|
|
|
expect(root_child0_child0_child0.getComputedHeight()).toBe(100);
|
|
|
|
} finally {
|
2023-05-10 22:46:39 -07:00
|
|
|
if (typeof root !== 'undefined') {
|
2022-12-28 01:27:12 -08:00
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|
Fixup hack for flex line size calculation (#1380)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1380
X-link: https://github.com/facebook/react-native/pull/39433
Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified.
During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element.
For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized.
There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching.
{F1091401183}
The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history.
`betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size.
Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_
See the original conversation on https://github.com/facebook/yoga/pull/1188
Reviewed By: javache
Differential Revision: D49260049
fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
2023-09-14 20:26:31 -07:00
|
|
|
test('justify_content_space_between_indefinite_container_dim_with_free_space', () => {
|
|
|
|
const config = Yoga.Config.create();
|
|
|
|
let root;
|
|
|
|
|
|
|
|
config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
|
|
|
|
|
|
|
|
try {
|
|
|
|
root = Yoga.Node.create(config);
|
|
|
|
root.setAlignItems(Align.Center);
|
2023-10-23 18:20:24 -07:00
|
|
|
root.setPositionType(PositionType.Absolute);
|
Fixup hack for flex line size calculation (#1380)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1380
X-link: https://github.com/facebook/react-native/pull/39433
Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified.
During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element.
For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized.
There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching.
{F1091401183}
The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history.
`betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size.
Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_
See the original conversation on https://github.com/facebook/yoga/pull/1188
Reviewed By: javache
Differential Revision: D49260049
fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
2023-09-14 20:26:31 -07:00
|
|
|
root.setWidth(300);
|
|
|
|
|
|
|
|
const root_child0 = Yoga.Node.create(config);
|
|
|
|
root_child0.setFlexDirection(FlexDirection.Row);
|
|
|
|
root_child0.setJustifyContent(Justify.SpaceBetween);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0.setPositionType(PositionType.Relative);
|
Fixup hack for flex line size calculation (#1380)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1380
X-link: https://github.com/facebook/react-native/pull/39433
Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified.
During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element.
For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized.
There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching.
{F1091401183}
The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history.
`betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size.
Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_
See the original conversation on https://github.com/facebook/yoga/pull/1188
Reviewed By: javache
Differential Revision: D49260049
fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
2023-09-14 20:26:31 -07:00
|
|
|
root_child0.setMinWidth(200);
|
|
|
|
root.insertChild(root_child0, 0);
|
|
|
|
|
|
|
|
const root_child0_child0 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0_child0.setPositionType(PositionType.Relative);
|
Fixup hack for flex line size calculation (#1380)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1380
X-link: https://github.com/facebook/react-native/pull/39433
Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified.
During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element.
For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized.
There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching.
{F1091401183}
The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history.
`betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size.
Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_
See the original conversation on https://github.com/facebook/yoga/pull/1188
Reviewed By: javache
Differential Revision: D49260049
fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
2023-09-14 20:26:31 -07:00
|
|
|
root_child0_child0.setWidth(50);
|
|
|
|
root_child0_child0.setHeight(50);
|
|
|
|
root_child0.insertChild(root_child0_child0, 0);
|
|
|
|
|
|
|
|
const root_child0_child1 = Yoga.Node.create(config);
|
2023-10-23 18:20:24 -07:00
|
|
|
root_child0_child1.setPositionType(PositionType.Relative);
|
Fixup hack for flex line size calculation (#1380)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1380
X-link: https://github.com/facebook/react-native/pull/39433
Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified.
During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element.
For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized.
There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching.
{F1091401183}
The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history.
`betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size.
Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_
See the original conversation on https://github.com/facebook/yoga/pull/1188
Reviewed By: javache
Differential Revision: D49260049
fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
2023-09-14 20:26:31 -07:00
|
|
|
root_child0_child1.setWidth(50);
|
|
|
|
root_child0_child1.setHeight(50);
|
|
|
|
root_child0.insertChild(root_child0_child1, 1);
|
|
|
|
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(50);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(50);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(200);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(50);
|
|
|
|
|
|
|
|
expect(root_child0_child0.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedWidth()).toBe(50);
|
|
|
|
expect(root_child0_child0.getComputedHeight()).toBe(50);
|
|
|
|
|
|
|
|
expect(root_child0_child1.getComputedLeft()).toBe(150);
|
|
|
|
expect(root_child0_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child1.getComputedWidth()).toBe(50);
|
|
|
|
expect(root_child0_child1.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(50);
|
|
|
|
|
|
|
|
expect(root_child0.getComputedLeft()).toBe(50);
|
|
|
|
expect(root_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0.getComputedWidth()).toBe(200);
|
|
|
|
expect(root_child0.getComputedHeight()).toBe(50);
|
|
|
|
|
|
|
|
expect(root_child0_child0.getComputedLeft()).toBe(150);
|
|
|
|
expect(root_child0_child0.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child0.getComputedWidth()).toBe(50);
|
|
|
|
expect(root_child0_child0.getComputedHeight()).toBe(50);
|
|
|
|
|
|
|
|
expect(root_child0_child1.getComputedLeft()).toBe(0);
|
|
|
|
expect(root_child0_child1.getComputedTop()).toBe(0);
|
|
|
|
expect(root_child0_child1.getComputedWidth()).toBe(50);
|
|
|
|
expect(root_child0_child1.getComputedHeight()).toBe(50);
|
|
|
|
} finally {
|
|
|
|
if (typeof root !== 'undefined') {
|
|
|
|
root.freeRecursive();
|
|
|
|
}
|
|
|
|
|
|
|
|
config.free();
|
|
|
|
}
|
|
|
|
});
|