Add test fixture to reproduce bug in aspect-ratio (#1421)

Summary:
Pull Request resolved: #1421

Adds repro of inconsistent implementation of aspect-ratio behavior across Web and React Native.

Reviewed By: NickGerleman

Differential Revision: D50225804

fbshipit-source-id: 0494e0373dcdebc789715b2ec19c002a47d69ce0

gentest/fixtures/YGAspectRatioTest.html

@@ -0,0 +1,15 @@
+<!-- TODO: aspect-ratio behavior is inconsistent with Web -->
+<div id="aspect_ratio_does_not_stretch_cross_axis_dim" data-disabled="true" style="width: 300px; height: 300px;">
+  <div style="flex: 1; overflow: scroll;">
+    <div style="flex-direction: row;">
+        <div style="flex: 2; aspect-ratio: 1;"></div>
+        <div style="width: 5px"></div>
+        <div style="flex: 1">
+          <div style="flex: 1; aspect-ratio: 1;">
+          <div style="width: 5px"></div>
+          <div style="flex: 1; aspect-ratio: 1;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

java/tests/com/facebook/yoga/YGAspectRatioTest.java

@@ -0,0 +1,183 @@
+/*
+ * 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/YGAspectRatioTest.html
+
+package com.facebook.yoga;
+
+import static org.junit.Assert.assertEquals;
+
+import org.junit.Ignore;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.junit.runners.Parameterized;
+
+@RunWith(Parameterized.class)
+public class YGAspectRatioTest {
+  @Parameterized.Parameters(name = "{0}")
+  public static Iterable<TestParametrization.NodeFactory> nodeFactories() {
+    return TestParametrization.nodeFactories();
+  }
+
+  @Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;
+
+  @Test
+  @Ignore
+  public void test_aspect_ratio_does_not_stretch_cross_axis_dim() {
+    YogaConfig config = YogaConfigFactory.create();
+    config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
+
+    final YogaNode root = createNode(config);
+    root.setWidth(300f);
+    root.setHeight(300f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setOverflow(YogaOverflow.SCROLL);
+    root_child0.setFlexGrow(1f);
+    root_child0.setFlexShrink(1f);
+    root_child0.setFlexBasisPercent(0f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child0_child0 = createNode(config);
+    root_child0_child0.setFlexDirection(YogaFlexDirection.ROW);
+    root_child0.addChildAt(root_child0_child0, 0);
+
+    final YogaNode root_child0_child0_child0 = createNode(config);
+    root_child0_child0_child0.setFlexGrow(2f);
+    root_child0_child0_child0.setFlexShrink(1f);
+    root_child0_child0_child0.setFlexBasisPercent(0f);
+    root_child0_child0_child0.setAspectRatio(1 / 1f);
+    root_child0_child0.addChildAt(root_child0_child0_child0, 0);
+
+    final YogaNode root_child0_child0_child1 = createNode(config);
+    root_child0_child0_child1.setWidth(5f);
+    root_child0_child0.addChildAt(root_child0_child0_child1, 1);
+
+    final YogaNode root_child0_child0_child2 = createNode(config);
+    root_child0_child0_child2.setFlexGrow(1f);
+    root_child0_child0_child2.setFlexShrink(1f);
+    root_child0_child0_child2.setFlexBasisPercent(0f);
+    root_child0_child0.addChildAt(root_child0_child0_child2, 2);
+
+    final YogaNode root_child0_child0_child2_child0 = createNode(config);
+    root_child0_child0_child2_child0.setFlexGrow(1f);
+    root_child0_child0_child2_child0.setFlexShrink(1f);
+    root_child0_child0_child2_child0.setFlexBasisPercent(0f);
+    root_child0_child0_child2_child0.setAspectRatio(1 / 1f);
+    root_child0_child0_child2.addChildAt(root_child0_child0_child2_child0, 0);
+
+    final YogaNode root_child0_child0_child2_child0_child0 = createNode(config);
+    root_child0_child0_child2_child0_child0.setWidth(5f);
+    root_child0_child0_child2_child0.addChildAt(root_child0_child0_child2_child0_child0, 0);
+
+    final YogaNode root_child0_child0_child2_child0_child1 = createNode(config);
+    root_child0_child0_child2_child0_child1.setFlexGrow(1f);
+    root_child0_child0_child2_child0_child1.setFlexShrink(1f);
+    root_child0_child0_child2_child0_child1.setFlexBasisPercent(0f);
+    root_child0_child0_child2_child0_child1.setAspectRatio(1 / 1f);
+    root_child0_child0_child2_child0.addChildAt(root_child0_child0_child2_child0_child1, 1);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(300f, root.getLayoutWidth(), 0.0f);
+    assertEquals(300f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(300f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(300f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(300f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(197f, root_child0_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(197f, root_child0_child0_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child1.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0_child1.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(202f, root_child0_child0_child2.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2.getLayoutY(), 0.0f);
+    assertEquals(98f, root_child0_child0_child2.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child2_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0.getLayoutY(), 0.0f);
+    assertEquals(98f, root_child0_child0_child2_child0.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child2_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child2_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0_child2_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child2_child0_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0_child1.getLayoutY(), 0.0f);
+    assertEquals(98f, root_child0_child0_child2_child0_child1.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child2_child0_child1.getLayoutHeight(), 0.0f);
+
+    root.setDirection(YogaDirection.RTL);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(300f, root.getLayoutWidth(), 0.0f);
+    assertEquals(300f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(300f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(300f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(300f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(103f, root_child0_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(197f, root_child0_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(98f, root_child0_child0_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child1.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0_child1.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child2.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2.getLayoutY(), 0.0f);
+    assertEquals(98f, root_child0_child0_child2.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child2.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child2_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0.getLayoutY(), 0.0f);
+    assertEquals(98f, root_child0_child0_child2_child0.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child2_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(93f, root_child0_child0_child2_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0_child2_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0_child2_child0_child1.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0_child2_child0_child1.getLayoutY(), 0.0f);
+    assertEquals(98f, root_child0_child0_child2_child0_child1.getLayoutWidth(), 0.0f);
+    assertEquals(197f, root_child0_child0_child2_child0_child1.getLayoutHeight(), 0.0f);
+  }
+
+  private YogaNode createNode(YogaConfig config) {
+    return mNodeFactory.create(config);
+  }
+}

javascript/tests/generated/YGAspectRatioTest.test.ts

@@ -0,0 +1,184 @@
+/**
+ * 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/YGAspectRatioTest.html
+
+import {Yoga} from "../tools/globals";
+import {
+  Align,
+  Direction,
+  Display,
+  Edge,
+  Errata,
+  ExperimentalFeature,
+  FlexDirection,
+  Gutter,
+  Justify,
+  MeasureMode,
+  Overflow,
+  PositionType,
+  Unit,
+  Wrap,
+} from 'yoga-layout';
+
+test.skip('aspect_ratio_does_not_stretch_cross_axis_dim', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setOverflow(Overflow.Scroll);
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexShrink(1);
+    root_child0.setFlexBasis("0%");
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setFlexDirection(FlexDirection.Row);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setFlexGrow(2);
+    root_child0_child0_child0.setFlexShrink(1);
+    root_child0_child0_child0.setFlexBasis("0%");
+    root_child0_child0_child0.setAspectRatio(1 / 1);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+
+    const root_child0_child0_child1 = Yoga.Node.create(config);
+    root_child0_child0_child1.setWidth(5);
+    root_child0_child0.insertChild(root_child0_child0_child1, 1);
+
+    const root_child0_child0_child2 = Yoga.Node.create(config);
+    root_child0_child0_child2.setFlexGrow(1);
+    root_child0_child0_child2.setFlexShrink(1);
+    root_child0_child0_child2.setFlexBasis("0%");
+    root_child0_child0.insertChild(root_child0_child0_child2, 2);
+
+    const root_child0_child0_child2_child0 = Yoga.Node.create(config);
+    root_child0_child0_child2_child0.setFlexGrow(1);
+    root_child0_child0_child2_child0.setFlexShrink(1);
+    root_child0_child0_child2_child0.setFlexBasis("0%");
+    root_child0_child0_child2_child0.setAspectRatio(1 / 1);
+    root_child0_child0_child2.insertChild(root_child0_child0_child2_child0, 0);
+
+    const root_child0_child0_child2_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child2_child0_child0.setWidth(5);
+    root_child0_child0_child2_child0.insertChild(root_child0_child0_child2_child0_child0, 0);
+
+    const root_child0_child0_child2_child0_child1 = Yoga.Node.create(config);
+    root_child0_child0_child2_child0_child1.setFlexGrow(1);
+    root_child0_child0_child2_child0_child1.setFlexShrink(1);
+    root_child0_child0_child2_child0_child1.setFlexBasis("0%");
+    root_child0_child0_child2_child0_child1.setAspectRatio(1 / 1);
+    root_child0_child0_child2_child0.insertChild(root_child0_child0_child2_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(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(300);
+    expect(root_child0.getComputedHeight()).toBe(300);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(300);
+    expect(root_child0_child0.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(197);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child1.getComputedLeft()).toBe(197);
+    expect(root_child0_child0_child1.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child1.getComputedWidth()).toBe(5);
+    expect(root_child0_child0_child1.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child2.getComputedLeft()).toBe(202);
+    expect(root_child0_child0_child2.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2.getComputedWidth()).toBe(98);
+    expect(root_child0_child0_child2.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child2_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child2_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2_child0.getComputedWidth()).toBe(98);
+    expect(root_child0_child0_child2_child0.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child2_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child2_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2_child0_child0.getComputedWidth()).toBe(5);
+    expect(root_child0_child0_child2_child0_child0.getComputedHeight()).toBe(0);
+
+    expect(root_child0_child0_child2_child0_child1.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child2_child0_child1.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2_child0_child1.getComputedWidth()).toBe(98);
+    expect(root_child0_child0_child2_child0_child1.getComputedHeight()).toBe(197);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(300);
+    expect(root_child0.getComputedHeight()).toBe(300);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(300);
+    expect(root_child0_child0.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(103);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(197);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child1.getComputedLeft()).toBe(98);
+    expect(root_child0_child0_child1.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child1.getComputedWidth()).toBe(5);
+    expect(root_child0_child0_child1.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child2.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child2.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2.getComputedWidth()).toBe(98);
+    expect(root_child0_child0_child2.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child2_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child2_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2_child0.getComputedWidth()).toBe(98);
+    expect(root_child0_child0_child2_child0.getComputedHeight()).toBe(197);
+
+    expect(root_child0_child0_child2_child0_child0.getComputedLeft()).toBe(93);
+    expect(root_child0_child0_child2_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2_child0_child0.getComputedWidth()).toBe(5);
+    expect(root_child0_child0_child2_child0_child0.getComputedHeight()).toBe(0);
+
+    expect(root_child0_child0_child2_child0_child1.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child2_child0_child1.getComputedTop()).toBe(0);
+    expect(root_child0_child0_child2_child0_child1.getComputedWidth()).toBe(98);
+    expect(root_child0_child0_child2_child0_child1.getComputedHeight()).toBe(197);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});