Fix align-content of cross-stretched container (#1524)

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

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

D52087013 (#1513) fixed some issues, including where measuring under max-content or fit-content, align-content stretch would consume the entire available cross-dimensions, instead of only sizing to definite dimension, like the spec dicates.

I missed a case, where flexbox considers a container as having a definite cross-size if it is being stretched, even if it doesn't have a definite length.

https://www.w3.org/TR/css-flexbox-1/#definite-sizes

> 3. Once the cross size of a flex line has been determined, items in auto-sized flex containers are also considered definite for the purpose of layout;

> 1. If a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite.

We handle `align-items: stretch` of a flex container after cross-size determination by laying out the child under stretch-fit (previously YGMeasureModeExactly) constraint. This checks that case, and sizing the line container to specified cross-dim if we are told to stretch to it.

We could probably afford to merge this a bit with later with what is currently step 9, where we end up redoing some of this same math.

Reviewed By: yungsters

Differential Revision: D52234980

fbshipit-source-id: 475773a352fd01f63a4b21e93a55519726dc0da7

javascript/tests/generated/YGAlignContentTest.test.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<90f151e3c55d956805a9f44153f87ad0>>
+ * @generated SignedSource<<eccd0d7943f0a1c5cc7ae1bee6dcb5d8>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGAlignContentTest.html
  */
 
@@ -4931,3 +4931,500 @@ test('align_content_space_around_and_align_items_flex_start_with_flex_wrap', ()
     config.free();
   }
 });
+test('align_content_flex_start_stretch_doesnt_influence_line_box_dim', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setPadding(Edge.Left, 20);
+    root.setPadding(Edge.Top, 20);
+    root.setPadding(Edge.Right, 20);
+    root.setPadding(Edge.Bottom, 20);
+    root.setWidth(400);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setMargin(Edge.Right, 20);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setFlexDirection(FlexDirection.Row);
+    root_child1.setFlexWrap(Wrap.Wrap);
+    root_child1.setFlexGrow(1);
+    root_child1.setFlexShrink(1);
+    root.insertChild(root_child1, 1);
+
+    const root_child1_child0 = Yoga.Node.create(config);
+    root_child1_child0.setMargin(Edge.Right, 20);
+    root_child1_child0.setWidth(30);
+    root_child1_child0.setHeight(30);
+    root_child1.insertChild(root_child1_child0, 0);
+
+    const root_child1_child1 = Yoga.Node.create(config);
+    root_child1_child1.setMargin(Edge.Right, 20);
+    root_child1_child1.setWidth(30);
+    root_child1_child1.setHeight(30);
+    root_child1.insertChild(root_child1_child1, 1);
+
+    const root_child1_child2 = Yoga.Node.create(config);
+    root_child1_child2.setMargin(Edge.Right, 20);
+    root_child1_child2.setWidth(30);
+    root_child1_child2.setHeight(30);
+    root_child1.insertChild(root_child1_child2, 2);
+
+    const root_child1_child3 = Yoga.Node.create(config);
+    root_child1_child3.setMargin(Edge.Right, 20);
+    root_child1_child3.setWidth(30);
+    root_child1_child3.setHeight(30);
+    root_child1.insertChild(root_child1_child3, 3);
+
+    const root_child1_child4 = Yoga.Node.create(config);
+    root_child1_child4.setMargin(Edge.Right, 20);
+    root_child1_child4.setWidth(30);
+    root_child1_child4.setHeight(30);
+    root_child1.insertChild(root_child1_child4, 4);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setMargin(Edge.Left, 20);
+    root_child2.setWidth(50);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(400);
+    expect(root.getComputedHeight()).toBe(140);
+
+    expect(root_child0.getComputedLeft()).toBe(20);
+    expect(root_child0.getComputedTop()).toBe(20);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(140);
+    expect(root_child1.getComputedTop()).toBe(20);
+    expect(root_child1.getComputedWidth()).toBe(170);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child1_child0.getComputedLeft()).toBe(0);
+    expect(root_child1_child0.getComputedTop()).toBe(0);
+    expect(root_child1_child0.getComputedWidth()).toBe(30);
+    expect(root_child1_child0.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child1.getComputedLeft()).toBe(50);
+    expect(root_child1_child1.getComputedTop()).toBe(0);
+    expect(root_child1_child1.getComputedWidth()).toBe(30);
+    expect(root_child1_child1.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child2.getComputedLeft()).toBe(100);
+    expect(root_child1_child2.getComputedTop()).toBe(0);
+    expect(root_child1_child2.getComputedWidth()).toBe(30);
+    expect(root_child1_child2.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child3.getComputedLeft()).toBe(0);
+    expect(root_child1_child3.getComputedTop()).toBe(30);
+    expect(root_child1_child3.getComputedWidth()).toBe(30);
+    expect(root_child1_child3.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child4.getComputedLeft()).toBe(50);
+    expect(root_child1_child4.getComputedTop()).toBe(30);
+    expect(root_child1_child4.getComputedWidth()).toBe(30);
+    expect(root_child1_child4.getComputedHeight()).toBe(30);
+
+    expect(root_child2.getComputedLeft()).toBe(330);
+    expect(root_child2.getComputedTop()).toBe(20);
+    expect(root_child2.getComputedWidth()).toBe(50);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(400);
+    expect(root.getComputedHeight()).toBe(140);
+
+    expect(root_child0.getComputedLeft()).toBe(260);
+    expect(root_child0.getComputedTop()).toBe(20);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(90);
+    expect(root_child1.getComputedTop()).toBe(20);
+    expect(root_child1.getComputedWidth()).toBe(170);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child1_child0.getComputedLeft()).toBe(120);
+    expect(root_child1_child0.getComputedTop()).toBe(0);
+    expect(root_child1_child0.getComputedWidth()).toBe(30);
+    expect(root_child1_child0.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child1.getComputedLeft()).toBe(70);
+    expect(root_child1_child1.getComputedTop()).toBe(0);
+    expect(root_child1_child1.getComputedWidth()).toBe(30);
+    expect(root_child1_child1.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child2.getComputedLeft()).toBe(20);
+    expect(root_child1_child2.getComputedTop()).toBe(0);
+    expect(root_child1_child2.getComputedWidth()).toBe(30);
+    expect(root_child1_child2.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child3.getComputedLeft()).toBe(120);
+    expect(root_child1_child3.getComputedTop()).toBe(30);
+    expect(root_child1_child3.getComputedWidth()).toBe(30);
+    expect(root_child1_child3.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child4.getComputedLeft()).toBe(70);
+    expect(root_child1_child4.getComputedTop()).toBe(30);
+    expect(root_child1_child4.getComputedWidth()).toBe(30);
+    expect(root_child1_child4.getComputedHeight()).toBe(30);
+
+    expect(root_child2.getComputedLeft()).toBe(40);
+    expect(root_child2.getComputedTop()).toBe(20);
+    expect(root_child2.getComputedWidth()).toBe(50);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_stretch_stretch_does_influence_line_box_dim', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setPadding(Edge.Left, 20);
+    root.setPadding(Edge.Top, 20);
+    root.setPadding(Edge.Right, 20);
+    root.setPadding(Edge.Bottom, 20);
+    root.setWidth(400);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setMargin(Edge.Right, 20);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setFlexDirection(FlexDirection.Row);
+    root_child1.setAlignContent(Align.Stretch);
+    root_child1.setFlexWrap(Wrap.Wrap);
+    root_child1.setFlexGrow(1);
+    root_child1.setFlexShrink(1);
+    root.insertChild(root_child1, 1);
+
+    const root_child1_child0 = Yoga.Node.create(config);
+    root_child1_child0.setMargin(Edge.Right, 20);
+    root_child1_child0.setWidth(30);
+    root_child1_child0.setHeight(30);
+    root_child1.insertChild(root_child1_child0, 0);
+
+    const root_child1_child1 = Yoga.Node.create(config);
+    root_child1_child1.setMargin(Edge.Right, 20);
+    root_child1_child1.setWidth(30);
+    root_child1_child1.setHeight(30);
+    root_child1.insertChild(root_child1_child1, 1);
+
+    const root_child1_child2 = Yoga.Node.create(config);
+    root_child1_child2.setMargin(Edge.Right, 20);
+    root_child1_child2.setWidth(30);
+    root_child1_child2.setHeight(30);
+    root_child1.insertChild(root_child1_child2, 2);
+
+    const root_child1_child3 = Yoga.Node.create(config);
+    root_child1_child3.setMargin(Edge.Right, 20);
+    root_child1_child3.setWidth(30);
+    root_child1_child3.setHeight(30);
+    root_child1.insertChild(root_child1_child3, 3);
+
+    const root_child1_child4 = Yoga.Node.create(config);
+    root_child1_child4.setMargin(Edge.Right, 20);
+    root_child1_child4.setWidth(30);
+    root_child1_child4.setHeight(30);
+    root_child1.insertChild(root_child1_child4, 4);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setMargin(Edge.Left, 20);
+    root_child2.setWidth(50);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(400);
+    expect(root.getComputedHeight()).toBe(140);
+
+    expect(root_child0.getComputedLeft()).toBe(20);
+    expect(root_child0.getComputedTop()).toBe(20);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(140);
+    expect(root_child1.getComputedTop()).toBe(20);
+    expect(root_child1.getComputedWidth()).toBe(170);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child1_child0.getComputedLeft()).toBe(0);
+    expect(root_child1_child0.getComputedTop()).toBe(0);
+    expect(root_child1_child0.getComputedWidth()).toBe(30);
+    expect(root_child1_child0.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child1.getComputedLeft()).toBe(50);
+    expect(root_child1_child1.getComputedTop()).toBe(0);
+    expect(root_child1_child1.getComputedWidth()).toBe(30);
+    expect(root_child1_child1.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child2.getComputedLeft()).toBe(100);
+    expect(root_child1_child2.getComputedTop()).toBe(0);
+    expect(root_child1_child2.getComputedWidth()).toBe(30);
+    expect(root_child1_child2.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child3.getComputedLeft()).toBe(0);
+    expect(root_child1_child3.getComputedTop()).toBe(50);
+    expect(root_child1_child3.getComputedWidth()).toBe(30);
+    expect(root_child1_child3.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child4.getComputedLeft()).toBe(50);
+    expect(root_child1_child4.getComputedTop()).toBe(50);
+    expect(root_child1_child4.getComputedWidth()).toBe(30);
+    expect(root_child1_child4.getComputedHeight()).toBe(30);
+
+    expect(root_child2.getComputedLeft()).toBe(330);
+    expect(root_child2.getComputedTop()).toBe(20);
+    expect(root_child2.getComputedWidth()).toBe(50);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(400);
+    expect(root.getComputedHeight()).toBe(140);
+
+    expect(root_child0.getComputedLeft()).toBe(260);
+    expect(root_child0.getComputedTop()).toBe(20);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(90);
+    expect(root_child1.getComputedTop()).toBe(20);
+    expect(root_child1.getComputedWidth()).toBe(170);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child1_child0.getComputedLeft()).toBe(120);
+    expect(root_child1_child0.getComputedTop()).toBe(0);
+    expect(root_child1_child0.getComputedWidth()).toBe(30);
+    expect(root_child1_child0.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child1.getComputedLeft()).toBe(70);
+    expect(root_child1_child1.getComputedTop()).toBe(0);
+    expect(root_child1_child1.getComputedWidth()).toBe(30);
+    expect(root_child1_child1.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child2.getComputedLeft()).toBe(20);
+    expect(root_child1_child2.getComputedTop()).toBe(0);
+    expect(root_child1_child2.getComputedWidth()).toBe(30);
+    expect(root_child1_child2.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child3.getComputedLeft()).toBe(120);
+    expect(root_child1_child3.getComputedTop()).toBe(50);
+    expect(root_child1_child3.getComputedWidth()).toBe(30);
+    expect(root_child1_child3.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child4.getComputedLeft()).toBe(70);
+    expect(root_child1_child4.getComputedTop()).toBe(50);
+    expect(root_child1_child4.getComputedWidth()).toBe(30);
+    expect(root_child1_child4.getComputedHeight()).toBe(30);
+
+    expect(root_child2.getComputedLeft()).toBe(40);
+    expect(root_child2.getComputedTop()).toBe(20);
+    expect(root_child2.getComputedWidth()).toBe(50);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_evenly_stretch_does_influence_line_box_dim', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setPadding(Edge.Left, 20);
+    root.setPadding(Edge.Top, 20);
+    root.setPadding(Edge.Right, 20);
+    root.setPadding(Edge.Bottom, 20);
+    root.setWidth(400);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setMargin(Edge.Right, 20);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setFlexDirection(FlexDirection.Row);
+    root_child1.setAlignContent(Align.Stretch);
+    root_child1.setFlexWrap(Wrap.Wrap);
+    root_child1.setFlexGrow(1);
+    root_child1.setFlexShrink(1);
+    root.insertChild(root_child1, 1);
+
+    const root_child1_child0 = Yoga.Node.create(config);
+    root_child1_child0.setMargin(Edge.Right, 20);
+    root_child1_child0.setWidth(30);
+    root_child1_child0.setHeight(30);
+    root_child1.insertChild(root_child1_child0, 0);
+
+    const root_child1_child1 = Yoga.Node.create(config);
+    root_child1_child1.setMargin(Edge.Right, 20);
+    root_child1_child1.setWidth(30);
+    root_child1_child1.setHeight(30);
+    root_child1.insertChild(root_child1_child1, 1);
+
+    const root_child1_child2 = Yoga.Node.create(config);
+    root_child1_child2.setMargin(Edge.Right, 20);
+    root_child1_child2.setWidth(30);
+    root_child1_child2.setHeight(30);
+    root_child1.insertChild(root_child1_child2, 2);
+
+    const root_child1_child3 = Yoga.Node.create(config);
+    root_child1_child3.setMargin(Edge.Right, 20);
+    root_child1_child3.setWidth(30);
+    root_child1_child3.setHeight(30);
+    root_child1.insertChild(root_child1_child3, 3);
+
+    const root_child1_child4 = Yoga.Node.create(config);
+    root_child1_child4.setMargin(Edge.Right, 20);
+    root_child1_child4.setWidth(30);
+    root_child1_child4.setHeight(30);
+    root_child1.insertChild(root_child1_child4, 4);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setMargin(Edge.Left, 20);
+    root_child2.setWidth(50);
+    root_child2.setHeight(50);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(400);
+    expect(root.getComputedHeight()).toBe(140);
+
+    expect(root_child0.getComputedLeft()).toBe(20);
+    expect(root_child0.getComputedTop()).toBe(20);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(140);
+    expect(root_child1.getComputedTop()).toBe(20);
+    expect(root_child1.getComputedWidth()).toBe(170);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child1_child0.getComputedLeft()).toBe(0);
+    expect(root_child1_child0.getComputedTop()).toBe(0);
+    expect(root_child1_child0.getComputedWidth()).toBe(30);
+    expect(root_child1_child0.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child1.getComputedLeft()).toBe(50);
+    expect(root_child1_child1.getComputedTop()).toBe(0);
+    expect(root_child1_child1.getComputedWidth()).toBe(30);
+    expect(root_child1_child1.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child2.getComputedLeft()).toBe(100);
+    expect(root_child1_child2.getComputedTop()).toBe(0);
+    expect(root_child1_child2.getComputedWidth()).toBe(30);
+    expect(root_child1_child2.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child3.getComputedLeft()).toBe(0);
+    expect(root_child1_child3.getComputedTop()).toBe(50);
+    expect(root_child1_child3.getComputedWidth()).toBe(30);
+    expect(root_child1_child3.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child4.getComputedLeft()).toBe(50);
+    expect(root_child1_child4.getComputedTop()).toBe(50);
+    expect(root_child1_child4.getComputedWidth()).toBe(30);
+    expect(root_child1_child4.getComputedHeight()).toBe(30);
+
+    expect(root_child2.getComputedLeft()).toBe(330);
+    expect(root_child2.getComputedTop()).toBe(20);
+    expect(root_child2.getComputedWidth()).toBe(50);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(400);
+    expect(root.getComputedHeight()).toBe(140);
+
+    expect(root_child0.getComputedLeft()).toBe(260);
+    expect(root_child0.getComputedTop()).toBe(20);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(90);
+    expect(root_child1.getComputedTop()).toBe(20);
+    expect(root_child1.getComputedWidth()).toBe(170);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child1_child0.getComputedLeft()).toBe(120);
+    expect(root_child1_child0.getComputedTop()).toBe(0);
+    expect(root_child1_child0.getComputedWidth()).toBe(30);
+    expect(root_child1_child0.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child1.getComputedLeft()).toBe(70);
+    expect(root_child1_child1.getComputedTop()).toBe(0);
+    expect(root_child1_child1.getComputedWidth()).toBe(30);
+    expect(root_child1_child1.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child2.getComputedLeft()).toBe(20);
+    expect(root_child1_child2.getComputedTop()).toBe(0);
+    expect(root_child1_child2.getComputedWidth()).toBe(30);
+    expect(root_child1_child2.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child3.getComputedLeft()).toBe(120);
+    expect(root_child1_child3.getComputedTop()).toBe(50);
+    expect(root_child1_child3.getComputedWidth()).toBe(30);
+    expect(root_child1_child3.getComputedHeight()).toBe(30);
+
+    expect(root_child1_child4.getComputedLeft()).toBe(70);
+    expect(root_child1_child4.getComputedTop()).toBe(50);
+    expect(root_child1_child4.getComputedWidth()).toBe(30);
+    expect(root_child1_child4.getComputedHeight()).toBe(30);
+
+    expect(root_child2.getComputedLeft()).toBe(40);
+    expect(root_child2.getComputedTop()).toBe(20);
+    expect(root_child2.getComputedWidth()).toBe(50);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});