Fix percentage min/max on flex items resolving against wrong ancestor

enums.py

@@ -86,6 +86,10 @@
         # Absolute nodes will resolve percentages against the inner size of
         # their containing node, not the padding box
         ("AbsolutePercentAgainstInnerSize", 1 << 2),
+        # Percentage min/max sizes on flex items will resolve against the
+        # owner size of the flex container instead of the flex container's
+        # own inner size
+        ("FlexItemPercentMinMaxAgainstOwner", 1 << 3),
         # Enable all incorrect behavior (preserve compatibility)
         ("All", 0x7FFFFFFF),
         # Enable all errata except for "StretchFlexBasis" (Defaults behavior

gentest/fixtures/YGPercentageTest.html

@@ -47,7 +47,7 @@
   <div style="flex-grow: 4; flex-basis: 15%; max-width: 20%;"></div>
 </div>
 
-<div id="percentage_flex_basis_main_min_width" style="width: 200px; height: 200px; flex-direction: row;">
+<div id="percentage_flex_basis_main_min_width" data-disabled="true" style="width: 200px; height: 200px; flex-direction: row;">
   <div style="flex-grow: 1; flex-basis: 15%; min-width: 60%;"></div>
   <div style="flex-grow: 4; flex-basis: 10%; min-width: 20%;"></div>
 </div>
@@ -147,3 +147,15 @@
 <div id="percent_of_max_cross_unstretched" style="flex-direction: column; max-width: 60px; height: 50px; align-items: flex-start;">
   <div style="width: 50%; height: 20px;"></div>
 </div>
+
+<div id="percentage_nested_min_width" style="flex-direction: row; width: 40px; height: 20px;">
+  <div style="flex-direction: row; width: 10px;">
+    <div style="flex-direction: row; min-width: 50%;"></div>
+  </div>
+</div>
+
+<div id="percentage_nested_max_width" style="flex-direction: row; width: 40px; height: 20px;">
+  <div style="flex-direction: row; width: 10px;">
+    <div style="flex-direction: row; width: 20px; max-width: 50%;"></div>
+  </div>
+</div>

java/com/facebook/yoga/YogaErrata.kt

@@ -14,6 +14,7 @@ public enum class YogaErrata(public val intValue: Int) {
   STRETCH_FLEX_BASIS(1),
   ABSOLUTE_POSITION_WITHOUT_INSETS_EXCLUDES_PADDING(2),
   ABSOLUTE_PERCENT_AGAINST_INNER_SIZE(4),
+  FLEX_ITEM_PERCENT_MIN_MAX_AGAINST_OWNER(8),
   ALL(2147483647),
   CLASSIC(2147483646);
 
@@ -27,6 +28,7 @@ public enum class YogaErrata(public val intValue: Int) {
           1 -> STRETCH_FLEX_BASIS
           2 -> ABSOLUTE_POSITION_WITHOUT_INSETS_EXCLUDES_PADDING
           4 -> ABSOLUTE_PERCENT_AGAINST_INNER_SIZE
+          8 -> FLEX_ITEM_PERCENT_MIN_MAX_AGAINST_OWNER
           2147483647 -> ALL
           2147483646 -> CLASSIC
           else -> throw IllegalArgumentException("Unknown enum value: $value")

java/tests/generated/com/facebook/yoga/YGPercentageTest.java

@@ -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<<f151ab848e30844e320abe18ac4060cd>>
+ * @generated SignedSource<<fe83d0aace9c561f0b18e607d36ed19b>>
  * generated by gentest/src/GentestDriver.ts from gentest/fixtures/YGPercentageTest.html
  */
 
@@ -552,6 +552,7 @@ public void test_percentage_flex_basis_cross_max_width() {
   }
 
   @Test
+  @Ignore
   public void test_percentage_flex_basis_main_min_width() {
     YogaConfig config = YogaConfigFactory.create();
 
@@ -1593,6 +1594,119 @@ public void test_percent_of_max_cross_unstretched() {
     assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
   }
 
+  @Test
+  public void test_percentage_nested_min_width() {
+    YogaConfig config = YogaConfigFactory.create();
+
+    final YogaNode root = createNode(config);
+    root.setPositionType(YogaPositionType.ABSOLUTE);
+    root.setFlexDirection(YogaFlexDirection.ROW);
+    root.setWidth(40f);
+    root.setHeight(20f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setFlexDirection(YogaFlexDirection.ROW);
+    root_child0.setWidth(10f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child0_child0 = createNode(config);
+    root_child0_child0.setFlexDirection(YogaFlexDirection.ROW);
+    root_child0_child0.setMinWidthPercent(50f);
+    root_child0.addChildAt(root_child0_child0, 0);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(40f, root.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0_child0.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(40f, root.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(30f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(5f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0_child0.getLayoutHeight(), 0.0f);
+  }
+
+  @Test
+  public void test_percentage_nested_max_width() {
+    YogaConfig config = YogaConfigFactory.create();
+
+    final YogaNode root = createNode(config);
+    root.setPositionType(YogaPositionType.ABSOLUTE);
+    root.setFlexDirection(YogaFlexDirection.ROW);
+    root.setWidth(40f);
+    root.setHeight(20f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setFlexDirection(YogaFlexDirection.ROW);
+    root_child0.setWidth(10f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child0_child0 = createNode(config);
+    root_child0_child0.setFlexDirection(YogaFlexDirection.ROW);
+    root_child0_child0.setWidth(20f);
+    root_child0_child0.setMaxWidthPercent(50f);
+    root_child0.addChildAt(root_child0_child0, 0);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(40f, root.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0_child0.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(40f, root.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(30f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(5f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(5f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(20f, root_child0_child0.getLayoutHeight(), 0.0f);
+  }
+
   private YogaNode createNode(YogaConfig config) {
     return mNodeFactory.create(config);
   }

javascript/src/generated/YGEnums.ts

@@ -61,6 +61,7 @@ export enum Errata {
   StretchFlexBasis = 1,
   AbsolutePositionWithoutInsetsExcludesPadding = 2,
   AbsolutePercentAgainstInnerSize = 4,
+  FlexItemPercentMinMaxAgainstOwner = 8,
   All = 2147483647,
   Classic = 2147483646,
 }
@@ -188,6 +189,7 @@ const constants = {
   ERRATA_STRETCH_FLEX_BASIS: Errata.StretchFlexBasis,
   ERRATA_ABSOLUTE_POSITION_WITHOUT_INSETS_EXCLUDES_PADDING: Errata.AbsolutePositionWithoutInsetsExcludesPadding,
   ERRATA_ABSOLUTE_PERCENT_AGAINST_INNER_SIZE: Errata.AbsolutePercentAgainstInnerSize,
+  ERRATA_FLEX_ITEM_PERCENT_MIN_MAX_AGAINST_OWNER: Errata.FlexItemPercentMinMaxAgainstOwner,
   ERRATA_ALL: Errata.All,
   ERRATA_CLASSIC: Errata.Classic,
   EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS: ExperimentalFeature.WebFlexBasis,

javascript/tests/generated/YGPercentageTest.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<<a69c865ef770fae7835d8fe72ca01236>>
+ * @generated SignedSource<<d691193bc4f1b7272d208990aad3fb07>>
  * generated by gentest/src/GentestDriver.ts from gentest/fixtures/YGPercentageTest.html
  */
 
@@ -511,7 +511,7 @@ test('percentage_flex_basis_cross_max_width', () => {
   expect(root_child1.getComputedWidth()).toBe(40);
   expect(root_child1.getComputedHeight()).toBe(150);
 });
-test('percentage_flex_basis_main_min_width', () => {
+test.skip('percentage_flex_basis_main_min_width', () => {
   const config = Yoga.Config.create();
 
   const root = Yoga.Node.create(config);
@@ -1473,3 +1473,108 @@ test('percent_of_max_cross_unstretched', () => {
   expect(root_child0.getComputedWidth()).toBe(0);
   expect(root_child0.getComputedHeight()).toBe(20);
 });
+test('percentage_nested_min_width', () => {
+  const config = Yoga.Config.create();
+
+  const root = Yoga.Node.create(config);
+  root.setPositionType(PositionType.Absolute);
+  root.setFlexDirection(FlexDirection.Row);
+  root.setWidth(40);
+  root.setHeight(20);
+
+  const root_child0 = Yoga.Node.create(config);
+  root_child0.setFlexDirection(FlexDirection.Row);
+  root_child0.setWidth(10);
+  root.insertChild(root_child0, 0);
+
+  const root_child0_child0 = Yoga.Node.create(config);
+  root_child0_child0.setFlexDirection(FlexDirection.Row);
+  root_child0_child0.setMinWidth("50%");
+  root_child0.insertChild(root_child0_child0, 0);
+  root.calculateLayout(undefined, undefined, Direction.LTR);
+
+  expect(root.getComputedLeft()).toBe(0);
+  expect(root.getComputedTop()).toBe(0);
+  expect(root.getComputedWidth()).toBe(40);
+  expect(root.getComputedHeight()).toBe(20);
+
+  expect(root_child0.getComputedLeft()).toBe(0);
+  expect(root_child0.getComputedTop()).toBe(0);
+  expect(root_child0.getComputedWidth()).toBe(10);
+  expect(root_child0.getComputedHeight()).toBe(20);
+
+  expect(root_child0_child0.getComputedLeft()).toBe(0);
+  expect(root_child0_child0.getComputedTop()).toBe(0);
+  expect(root_child0_child0.getComputedWidth()).toBe(5);
+  expect(root_child0_child0.getComputedHeight()).toBe(20);
+
+  root.calculateLayout(undefined, undefined, Direction.RTL);
+
+  expect(root.getComputedLeft()).toBe(0);
+  expect(root.getComputedTop()).toBe(0);
+  expect(root.getComputedWidth()).toBe(40);
+  expect(root.getComputedHeight()).toBe(20);
+
+  expect(root_child0.getComputedLeft()).toBe(30);
+  expect(root_child0.getComputedTop()).toBe(0);
+  expect(root_child0.getComputedWidth()).toBe(10);
+  expect(root_child0.getComputedHeight()).toBe(20);
+
+  expect(root_child0_child0.getComputedLeft()).toBe(5);
+  expect(root_child0_child0.getComputedTop()).toBe(0);
+  expect(root_child0_child0.getComputedWidth()).toBe(5);
+  expect(root_child0_child0.getComputedHeight()).toBe(20);
+});
+test('percentage_nested_max_width', () => {
+  const config = Yoga.Config.create();
+
+  const root = Yoga.Node.create(config);
+  root.setPositionType(PositionType.Absolute);
+  root.setFlexDirection(FlexDirection.Row);
+  root.setWidth(40);
+  root.setHeight(20);
+
+  const root_child0 = Yoga.Node.create(config);
+  root_child0.setFlexDirection(FlexDirection.Row);
+  root_child0.setWidth(10);
+  root.insertChild(root_child0, 0);
+
+  const root_child0_child0 = Yoga.Node.create(config);
+  root_child0_child0.setFlexDirection(FlexDirection.Row);
+  root_child0_child0.setWidth(20);
+  root_child0_child0.setMaxWidth("50%");
+  root_child0.insertChild(root_child0_child0, 0);
+  root.calculateLayout(undefined, undefined, Direction.LTR);
+
+  expect(root.getComputedLeft()).toBe(0);
+  expect(root.getComputedTop()).toBe(0);
+  expect(root.getComputedWidth()).toBe(40);
+  expect(root.getComputedHeight()).toBe(20);
+
+  expect(root_child0.getComputedLeft()).toBe(0);
+  expect(root_child0.getComputedTop()).toBe(0);
+  expect(root_child0.getComputedWidth()).toBe(10);
+  expect(root_child0.getComputedHeight()).toBe(20);
+
+  expect(root_child0_child0.getComputedLeft()).toBe(0);
+  expect(root_child0_child0.getComputedTop()).toBe(0);
+  expect(root_child0_child0.getComputedWidth()).toBe(5);
+  expect(root_child0_child0.getComputedHeight()).toBe(20);
+
+  root.calculateLayout(undefined, undefined, Direction.RTL);
+
+  expect(root.getComputedLeft()).toBe(0);
+  expect(root.getComputedTop()).toBe(0);
+  expect(root.getComputedWidth()).toBe(40);
+  expect(root.getComputedHeight()).toBe(20);
+
+  expect(root_child0.getComputedLeft()).toBe(30);
+  expect(root_child0.getComputedTop()).toBe(0);
+  expect(root_child0.getComputedWidth()).toBe(10);
+  expect(root_child0.getComputedHeight()).toBe(20);
+
+  expect(root_child0_child0.getComputedLeft()).toBe(5);
+  expect(root_child0_child0.getComputedTop()).toBe(0);
+  expect(root_child0_child0.getComputedWidth()).toBe(5);
+  expect(root_child0_child0.getComputedHeight()).toBe(20);
+});