DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
68bb2343d2b470962065789d09016bba8e785340
yoga/javascript/tests/generated/YGDisplayTest.test.ts
Jakub Piasecki 68bb2343d2 Add support for display: contents style (#1726) 
Summary:
X-link: https://github.com/facebook/react-native/pull/47035

This PR adds support for `display: contents` style by effectively skipping nodes with `display: contents` set during layout.

This required changes in the logic related to children traversal - before this PR a node would be always laid out in the context of its direct parent. After this PR that assumption is no longer true - `display: contents` allows nodes to be skipped, i.e.:

```html
<div id="node1">
  <div id="node2" style="display: contents;">
    <div id="node3" />
  </div>
</div>
```

`node3` will be laid out as if it were a child of `node1`.

Because of this, iterating over direct children of a node is no longer correct to achieve the correct layout. This PR introduces `LayoutableChildren::Iterator` which can traverse the subtree of a given node in a way that nodes with `display: contents` are replaced with their concrete children.

A tree like this:
```mermaid
flowchart TD
    A((A))
    B((B))
    C((C))
    D((D))
    E((E))
    F((F))
    G((G))
    H((H))
    I((I))
    J((J))

    A --> B
    A --> C
    B --> D
    B --> E
    C --> F
    D --> G
    F --> H
    G --> I
    H --> J

    style B fill:https://github.com/facebook/yoga/issues/050
    style C fill:https://github.com/facebook/yoga/issues/050
    style D fill:https://github.com/facebook/yoga/issues/050
    style H fill:https://github.com/facebook/yoga/issues/050
    style I fill:https://github.com/facebook/yoga/issues/050
```

would be laid out as if the green nodes (ones with `display: contents`) did not exist. It also changes the logic where children were accessed by index to use the iterator instead as random access would be non-trivial to implement and it's not really necessary - the iteration was always sequential and indices were only used as boundaries.

There's one place where knowledge of layoutable children is required to calculate the gap. An optimization for this is for a node to keep a counter of how many `display: contents` nodes are its children. If there are none, a short path of just returning the size of the children vector can be taken, otherwise it needs to iterate over layoutable children and count them, since the structure may be complex.

One more major change this PR introduces is `cleanupContentsNodesRecursively`. Since nodes with `display: contents` would be entirely skipped during the layout pass, they would keep previous metrics, would be kept as dirty, and, in the case of nested `contents` nodes, would not be cloned, breaking `doesOwn` relation. All of this is handled in the new method which clones `contents` nodes recursively, sets empty layout, and marks them as clean and having a new layout so that it can be used on the React Native side.

Relies on https://github.com/facebook/yoga/pull/1725

Changelog: [Internal]

Pull Request resolved: https://github.com/facebook/yoga/pull/1726

Test Plan: Added tests for `display: contents` based on existing tests for `display: none` and ensured that all the tests were passing.

Reviewed By: joevilches

Differential Revision: D64404340

Pulled By: NickGerleman

fbshipit-source-id: f6f6e9a6fad82873f18c8a0ead58aad897df5d09
2024-10-18 22:05:41 -07:00

1098 lines
38 KiB
TypeScript
Raw Blame History

/**
* 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 SignedSource<<ef1ab99e8f13c0a59342ca17f63181ef>>
* generated by gentest/gentest-driver.ts from gentest/fixtures/YGDisplayTest.html
*/
import { instrinsicSizeMeasureFunc } from '../tools/utils.ts'
import Yoga from 'yoga-layout';
import {
Align,
BoxSizing,
Direction,
Display,
Edge,
Errata,
ExperimentalFeature,
FlexDirection,
Gutter,
Justify,
MeasureMode,
Overflow,
PositionType,
Unit,
Wrap,
} from 'yoga-layout';
test('display_none', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(1);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(1);
root_child1.setDisplay(Display.None);
root.insertChild(root_child1, 1);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_none_fixed_size', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(1);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setWidth(20);
root_child1.setHeight(20);
root_child1.setDisplay(Display.None);
root.insertChild(root_child1, 1);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_none_with_margin', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setMargin(Edge.Left, 10);
root_child0.setMargin(Edge.Top, 10);
root_child0.setMargin(Edge.Right, 10);
root_child0.setMargin(Edge.Bottom, 10);
root_child0.setWidth(20);
root_child0.setHeight(20);
root_child0.setDisplay(Display.None);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(1);
root.insertChild(root_child1, 1);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(100);
expect(root_child1.getComputedHeight()).toBe(100);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(100);
expect(root_child1.getComputedHeight()).toBe(100);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_none_with_child', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(1);
root_child0.setFlexShrink(1);
root_child0.setFlexBasis("0%");
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(1);
root_child1.setFlexShrink(1);
root_child1.setFlexBasis("0%");
root_child1.setDisplay(Display.None);
root.insertChild(root_child1, 1);
const root_child1_child0 = Yoga.Node.create(config);
root_child1_child0.setFlexGrow(1);
root_child1_child0.setFlexShrink(1);
root_child1_child0.setFlexBasis("0%");
root_child1_child0.setWidth(20);
root_child1.insertChild(root_child1_child0, 0);
const root_child2 = Yoga.Node.create(config);
root_child2.setFlexGrow(1);
root_child2.setFlexShrink(1);
root_child2.setFlexBasis("0%");
root.insertChild(root_child2, 2);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(50);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
expect(root_child1_child0.getComputedLeft()).toBe(0);
expect(root_child1_child0.getComputedTop()).toBe(0);
expect(root_child1_child0.getComputedWidth()).toBe(0);
expect(root_child1_child0.getComputedHeight()).toBe(0);
expect(root_child2.getComputedLeft()).toBe(50);
expect(root_child2.getComputedTop()).toBe(0);
expect(root_child2.getComputedWidth()).toBe(50);
expect(root_child2.getComputedHeight()).toBe(100);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(50);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(50);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
expect(root_child1_child0.getComputedLeft()).toBe(0);
expect(root_child1_child0.getComputedTop()).toBe(0);
expect(root_child1_child0.getComputedWidth()).toBe(0);
expect(root_child1_child0.getComputedHeight()).toBe(0);
expect(root_child2.getComputedLeft()).toBe(0);
expect(root_child2.getComputedTop()).toBe(0);
expect(root_child2.getComputedWidth()).toBe(50);
expect(root_child2.getComputedHeight()).toBe(100);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_none_with_position', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(1);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(1);
root_child1.setPosition(Edge.Top, 10);
root_child1.setDisplay(Display.None);
root.insertChild(root_child1, 1);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(100);
expect(root_child0.getComputedHeight()).toBe(100);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_none_with_position_absolute', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setPositionType(PositionType.Absolute);
root_child0.setWidth(100);
root_child0.setHeight(100);
root_child0.setDisplay(Display.None);
root.insertChild(root_child0, 0);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setFlexGrow(1);
root_child0_child0.setFlexShrink(1);
root_child0_child0.setFlexBasis("0%");
root_child0_child0.setHeight(10);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setFlexGrow(1);
root_child0_child1.setFlexShrink(1);
root_child0_child1.setFlexBasis("0%");
root_child0_child1.setHeight(20);
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(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
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(10);
expect(root_child0_child1.getComputedLeft()).toBe(50);
expect(root_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child1.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(50);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0.getComputedHeight()).toBe(10);
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(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_fixed_size', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setWidth(50);
root_child0.setHeight(50);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setFlexGrow(1);
root_child0_child0.setFlexShrink(1);
root_child0_child0.setFlexBasis("0%");
root_child0_child0.setHeight(10);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setFlexGrow(1);
root_child0_child1.setFlexShrink(1);
root_child0_child1.setFlexBasis("0%");
root_child0_child1.setHeight(20);
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(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
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(10);
expect(root_child0_child1.getComputedLeft()).toBe(50);
expect(root_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child1.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(50);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0.getComputedHeight()).toBe(10);
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(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_with_margin', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setMargin(Edge.Left, 10);
root_child0.setMargin(Edge.Top, 10);
root_child0.setMargin(Edge.Right, 10);
root_child0.setMargin(Edge.Bottom, 10);
root_child0.setWidth(20);
root_child0.setHeight(20);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setFlexGrow(1);
root.insertChild(root_child1, 1);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(100);
expect(root_child1.getComputedHeight()).toBe(100);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(100);
expect(root_child1.getComputedHeight()).toBe(100);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_with_padding', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setPadding(Edge.Left, 10);
root_child0.setPadding(Edge.Top, 10);
root_child0.setPadding(Edge.Right, 10);
root_child0.setPadding(Edge.Bottom, 10);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setFlexGrow(1);
root_child0_child0.setFlexShrink(1);
root_child0_child0.setFlexBasis("0%");
root_child0_child0.setHeight(10);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setFlexGrow(1);
root_child0_child1.setFlexShrink(1);
root_child0_child1.setFlexBasis("0%");
root_child0_child1.setHeight(20);
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(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
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(10);
expect(root_child0_child1.getComputedLeft()).toBe(50);
expect(root_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child1.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(50);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0.getComputedHeight()).toBe(10);
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(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_with_position', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setPosition(Edge.Top, 10);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setFlexGrow(1);
root_child0_child0.setFlexShrink(1);
root_child0_child0.setFlexBasis("0%");
root_child0_child0.setHeight(10);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setFlexGrow(1);
root_child0_child1.setFlexShrink(1);
root_child0_child1.setFlexBasis("0%");
root_child0_child1.setHeight(20);
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(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
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(10);
expect(root_child0_child1.getComputedLeft()).toBe(50);
expect(root_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child1.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(50);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0.getComputedHeight()).toBe(10);
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(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_with_position_absolute', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setPositionType(PositionType.Absolute);
root_child0.setWidth(50);
root_child0.setHeight(50);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setFlexGrow(1);
root_child0_child0.setFlexShrink(1);
root_child0_child0.setFlexBasis("0%");
root_child0_child0.setHeight(10);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child1 = Yoga.Node.create(config);
root_child0_child1.setFlexGrow(1);
root_child0_child1.setFlexShrink(1);
root_child0_child1.setFlexBasis("0%");
root_child0_child1.setHeight(20);
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(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
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(10);
expect(root_child0_child1.getComputedLeft()).toBe(50);
expect(root_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child1.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(50);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0.getComputedHeight()).toBe(10);
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(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_nested', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setDisplay(Display.Contents);
root.insertChild(root_child0, 0);
const root_child0_child0 = Yoga.Node.create(config);
root_child0_child0.setDisplay(Display.Contents);
root_child0.insertChild(root_child0_child0, 0);
const root_child0_child0_child0 = Yoga.Node.create(config);
root_child0_child0_child0.setFlexGrow(1);
root_child0_child0_child0.setFlexShrink(1);
root_child0_child0_child0.setFlexBasis("0%");
root_child0_child0_child0.setHeight(10);
root_child0_child0.insertChild(root_child0_child0_child0, 0);
const root_child0_child0_child1 = Yoga.Node.create(config);
root_child0_child0_child1.setFlexGrow(1);
root_child0_child0_child1.setFlexShrink(1);
root_child0_child0_child1.setFlexBasis("0%");
root_child0_child0_child1.setHeight(20);
root_child0_child0.insertChild(root_child0_child0_child1, 1);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(0);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(0);
expect(root_child0_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0_child0.getComputedLeft()).toBe(0);
expect(root_child0_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0_child1.getComputedLeft()).toBe(50);
expect(root_child0_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child0_child1.getComputedHeight()).toBe(20);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(0);
expect(root_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0.getComputedLeft()).toBe(0);
expect(root_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0.getComputedWidth()).toBe(0);
expect(root_child0_child0.getComputedHeight()).toBe(0);
expect(root_child0_child0_child0.getComputedLeft()).toBe(50);
expect(root_child0_child0_child0.getComputedTop()).toBe(0);
expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
expect(root_child0_child0_child0.getComputedHeight()).toBe(10);
expect(root_child0_child0_child1.getComputedLeft()).toBe(0);
expect(root_child0_child0_child1.getComputedTop()).toBe(0);
expect(root_child0_child0_child1.getComputedWidth()).toBe(50);
expect(root_child0_child0_child1.getComputedHeight()).toBe(20);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
test('display_contents_with_siblings', () => {
const config = Yoga.Config.create();
let root;
try {
root = Yoga.Node.create(config);
root.setFlexDirection(FlexDirection.Row);
root.setPositionType(PositionType.Absolute);
root.setWidth(100);
root.setHeight(100);
const root_child0 = Yoga.Node.create(config);
root_child0.setFlexGrow(1);
root_child0.setFlexShrink(1);
root_child0.setFlexBasis("0%");
root_child0.setHeight(30);
root.insertChild(root_child0, 0);
const root_child1 = Yoga.Node.create(config);
root_child1.setDisplay(Display.Contents);
root.insertChild(root_child1, 1);
const root_child1_child0 = Yoga.Node.create(config);
root_child1_child0.setFlexGrow(1);
root_child1_child0.setFlexShrink(1);
root_child1_child0.setFlexBasis("0%");
root_child1_child0.setHeight(10);
root_child1.insertChild(root_child1_child0, 0);
const root_child1_child1 = Yoga.Node.create(config);
root_child1_child1.setFlexGrow(1);
root_child1_child1.setFlexShrink(1);
root_child1_child1.setFlexBasis("0%");
root_child1_child1.setHeight(20);
root_child1.insertChild(root_child1_child1, 1);
const root_child2 = Yoga.Node.create(config);
root_child2.setFlexGrow(1);
root_child2.setFlexShrink(1);
root_child2.setFlexBasis("0%");
root_child2.setHeight(30);
root.insertChild(root_child2, 2);
root.calculateLayout(undefined, undefined, Direction.LTR);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(0);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(25);
expect(root_child0.getComputedHeight()).toBe(30);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
expect(root_child1_child0.getComputedLeft()).toBe(25);
expect(root_child1_child0.getComputedTop()).toBe(0);
expect(root_child1_child0.getComputedWidth()).toBe(25);
expect(root_child1_child0.getComputedHeight()).toBe(10);
expect(root_child1_child1.getComputedLeft()).toBe(50);
expect(root_child1_child1.getComputedTop()).toBe(0);
expect(root_child1_child1.getComputedWidth()).toBe(25);
expect(root_child1_child1.getComputedHeight()).toBe(20);
expect(root_child2.getComputedLeft()).toBe(75);
expect(root_child2.getComputedTop()).toBe(0);
expect(root_child2.getComputedWidth()).toBe(25);
expect(root_child2.getComputedHeight()).toBe(30);
root.calculateLayout(undefined, undefined, Direction.RTL);
expect(root.getComputedLeft()).toBe(0);
expect(root.getComputedTop()).toBe(0);
expect(root.getComputedWidth()).toBe(100);
expect(root.getComputedHeight()).toBe(100);
expect(root_child0.getComputedLeft()).toBe(75);
expect(root_child0.getComputedTop()).toBe(0);
expect(root_child0.getComputedWidth()).toBe(25);
expect(root_child0.getComputedHeight()).toBe(30);
expect(root_child1.getComputedLeft()).toBe(0);
expect(root_child1.getComputedTop()).toBe(0);
expect(root_child1.getComputedWidth()).toBe(0);
expect(root_child1.getComputedHeight()).toBe(0);
expect(root_child1_child0.getComputedLeft()).toBe(50);
expect(root_child1_child0.getComputedTop()).toBe(0);
expect(root_child1_child0.getComputedWidth()).toBe(25);
expect(root_child1_child0.getComputedHeight()).toBe(10);
expect(root_child1_child1.getComputedLeft()).toBe(25);
expect(root_child1_child1.getComputedTop()).toBe(0);
expect(root_child1_child1.getComputedWidth()).toBe(25);
expect(root_child1_child1.getComputedHeight()).toBe(20);
expect(root_child2.getComputedLeft()).toBe(0);
expect(root_child2.getComputedTop()).toBe(0);
expect(root_child2.getComputedWidth()).toBe(25);
expect(root_child2.getComputedHeight()).toBe(30);
} finally {
if (typeof root !== 'undefined') {
root.freeRecursive();
}
config.free();
}
});
Reference in New Issue View Git Blame Copy Permalink