Fix bug where leaf nodes do not bound innerWidth/Height before measure

Differential Revision: D66983314
Use crossAxisOwnerSize instead of ownerHeight in cross axis bound call (#1763 )
2024-12-09 13:45:48 -08:00 · 2024-12-06 15:34:06 -08:00 · 2024-12-03 19:16:56 -08:00 · 2024-12-02 17:39:41 -08:00 · 2024-12-02 17:29:49 -08:00 · 2024-12-02 17:29:49 -08:00
18 changed files with 2294 additions and 398 deletions
--- a/gentest/fixtures/YGIntrinsicSizeTest.html
+++ b/gentest/fixtures/YGIntrinsicSizeTest.html
@@ -229,7 +229,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_width" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_width" style="width: 90px;">
    <div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -240,7 +240,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_width" style="width: 500px; position: relative;">
+<div id="stretch_width" style="width: 500px;">
    <div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -260,7 +260,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_height" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_height" style="height: 90px; ">
    <div style="height: fit-content; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -271,7 +271,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_height" style="height: 500px; position: relative;">
+<div data-disabled="true" id="stretch_height" style="height: 500px;">
    <div style="height: -webkit-fill-available; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -291,7 +291,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px;">
    <div style="flex-basis: fit-content; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -302,7 +302,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_flex_basis_column" style="height: 500px; position: relative;">
+<div id="stretch_flex_basis_column" style="height: 500px;">
    <div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -313,7 +313,7 @@
    </div>
 </div>

-<div id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
+<div data-disabled="true" id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
    <div style="width: 50px; height: 50px;">
    </div>
    <div style="width: 100px; height: 500px;">
@@ -322,7 +322,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px;">
    <div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -333,7 +333,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px; position: relative;">
+<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px;">
    <div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -344,7 +344,8 @@
    </div>
 </div>

-<div data-disabled="true" id="max_content_max_width" style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
+<div data-disabled="true" id="max_content_max_width"
+    style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
    <div style="width: 50px; height: 50px;">
    </div>
    <div style="width: 100px; height: 50px;">
@@ -353,7 +354,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_max_width" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_max_width" style="width: 90px;">
    <div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -364,7 +365,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_max_width" style="width: 500px; position: relative;">
+<div data-disabled="true" id="stretch_max_width" style="width: 500px;">
    <div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -375,7 +376,8 @@
    </div>
 </div>

-<div data-disabled="true" id="max_content_min_width" style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
+<div data-disabled="true" id="max_content_min_width"
+    style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
    <div style="width: 50px; height: 50px;">
    </div>
    <div style="width: 100px; height: 50px;">
@@ -384,7 +386,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_min_width" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_min_width" style="width: 90px;">
    <div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -395,7 +397,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_min_width" style="width: 500px; position: relative;">
+<div data-disabled="true" id="stretch_min_width" style="width: 500px;">
    <div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -415,7 +417,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_max_height" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_max_height" style="height: 90px;">
    <div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -426,7 +428,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_max_height" style="height: 500px; position: relative;">
+<div data-disabled="true" id="stretch_max_height" style="height: 500px;">
    <div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -446,7 +448,7 @@
    </div>
 </div>

-<div data-disabled="true" id="fit_content_min_height" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_min_height" style="height: 90px;">
    <div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -457,7 +459,7 @@
    </div>
 </div>

-<div data-disabled="true" id="stretch_min_height" style="height: 500px; position: relative;">
+<div data-disabled="true" id="stretch_min_height" style="height: 500px;">
    <div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
        <div style="width: 50px; height: 50px;">
        </div>
@@ -467,3 +469,75 @@
        </div>
    </div>
 </div>
+
+<div data-disabled="true" id="text_max_content_width" style="width: 200px">
+    <div style="width: max-content;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_stretch_width" style="width: 200px">
+    <div style="width: -webkit-fill-available;">
+        <div style="flex-direction:row;">
+            Lorem ipsum dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_fit_content_width" style="width: 200px">
+    <div style="width: fit-content;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_max_content_min_width" style="width: 200px">
+    <div style="min-width: max-content; width: 200px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_stretch_min_width" style="width: 200px">
+    <div style="min-width: -webkit-fill-available; width: 100px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" data-disabled="true" id="text_fit_content_min_width" style="width: 200px">
+    <div style="min-width: fit-content; width: 300px">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_max_content_max_width" style="width: 200px">
+    <div style="max-width: max-content; width: 2000px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_stretch_max_width" style="width: 200px">
+    <div style="max-width: -webkit-fill-available; width: 300px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_fit_content_max_width" style="width: 200px">
+    <div style="max-width: fit-content; width: 1000px">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
--- a/gentest/fixtures/YGMinMaxDimensionTest.html
+++ b/gentest/fixtures/YGMinMaxDimensionTest.html
@@ -37,7 +37,8 @@
  <div style="height: 50px;"></div>
 </div>

-<div id="flex_grow_in_at_most_container" style="width: 100px; height: 100px; background-color: white; flex-direction: row; align-items: flex-start;">
+<div id="flex_grow_in_at_most_container"
+  style="width: 100px; height: 100px; background-color: white; flex-direction: row; align-items: flex-start;">
  <div style="flex-direction: row;">
    <div style="flex-grow: 1; flex-basis: 0px;"></div>
  </div>
@@ -126,3 +127,9 @@
  <div style="min-width: 10%; max-width: 10%; min-height: 10%; max-height: 10%;">
  </div>
 </div>
+
+<div id="min_width_leaf_node_bigger_than_width" style="width: 200px;">
+  <div style="min-width: 10000px; width: 200px">
+    Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+  </div>
+</div>
--- a/java/tests/generated/com/facebook/yoga/YGIntrinsicSizeTest.java
+++ b/java/tests/generated/com/facebook/yoga/YGIntrinsicSizeTest.java
--- a/java/tests/generated/com/facebook/yoga/YGMinMaxDimensionTest.java
+++ b/java/tests/generated/com/facebook/yoga/YGMinMaxDimensionTest.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<<19cdc4fc9425af726b656ef628bab8af>>
+ * @generated SignedSource<<399bb599fce869e5c09ea1d193c1e486>>
 * generated by gentest/gentest-driver.ts from gentest/fixtures/YGMinMaxDimensionTest.html
 */

@@ -1315,6 +1315,47 @@ public class YGMinMaxDimensionTest {
    assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
  }

+  @Test
+  public void test_min_width_leaf_node_bigger_than_width() {
+    YogaConfig config = YogaConfigFactory.create();
+
+    final YogaNode root = createNode(config);
+    root.setPositionType(YogaPositionType.ABSOLUTE);
+    root.setWidth(200f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setWidth(200f);
+    root_child0.setMinWidth(10000f);
+    root.addChildAt(root_child0, 0);
+    root_child0.setData("Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet");
+    root_child0.setMeasureFunction(new TestUtils.intrinsicMeasureFunction());
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(200f, root.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(10000f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root_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(200f, root.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(-9800f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(10000f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
+  }
+
  private YogaNode createNode(YogaConfig config) {
    return mNodeFactory.create(config);
  }
--- a/javascript/tests/generated/YGIntrinsicSizeTest.test.ts
+++ b/javascript/tests/generated/YGIntrinsicSizeTest.test.ts
--- a/javascript/tests/generated/YGMinMaxDimensionTest.test.ts
+++ b/javascript/tests/generated/YGMinMaxDimensionTest.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<<1bd782301afbab34ed3c9a296c3ecaa6>>
+ * @generated SignedSource<<d9428d2e524c7d665f61ccdad7697504>>
 * generated by gentest/gentest-driver.ts from gentest/fixtures/YGMinMaxDimensionTest.html
 */

@@ -1444,3 +1444,48 @@ test('min_max_percent_no_width_height', () => {
    config.free();
  }
 });
+test('min_width_leaf_node_bigger_than_width', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(200);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(200);
+    root_child0.setMinWidth(10000);
+    root.insertChild(root_child0, 0);
+    root_child0.setMeasureFunc(instrinsicSizeMeasureFunc.bind("Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet"));
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(10);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10000);
+    expect(root_child0.getComputedHeight()).toBe(10);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(10);
+
+    expect(root_child0.getComputedLeft()).toBe(-9800);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10000);
+    expect(root_child0.getComputedHeight()).toBe(10);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
--- a/tests/generated/YGIntrinsicSizeTest.cpp
+++ b/tests/generated/YGIntrinsicSizeTest.cpp
--- a/tests/generated/YGMinMaxDimensionTest.cpp
+++ b/tests/generated/YGMinMaxDimensionTest.cpp
@@ -5,7 +5,7 @@
 * LICENSE file in the root directory of this source tree.
 *
 * clang-format off
- * @generated SignedSource<<0054f2d41727e7a0707701c6d7640cb6>>
+ * @generated SignedSource<<e8764dca183ff6afce78e27bb6ca1edf>>
 * generated by gentest/gentest-driver.ts from gentest/fixtures/YGMinMaxDimensionTest.html
 */

@@ -1328,3 +1328,45 @@ TEST(YogaTest, min_max_percent_no_width_height) {

  YGConfigFree(config);
 }
+
+TEST(YogaTest, min_width_leaf_node_bigger_than_width) {
+  YGConfigRef config = YGConfigNew();
+
+  YGNodeRef root = YGNodeNewWithConfig(config);
+  YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
+  YGNodeStyleSetWidth(root, 200);
+
+  YGNodeRef root_child0 = YGNodeNewWithConfig(config);
+  YGNodeStyleSetWidth(root_child0, 200);
+  YGNodeStyleSetMinWidth(root_child0, 10000);
+  YGNodeInsertChild(root, root_child0, 0);
+  YGNodeSetContext(root_child0, (void*)"Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet");
+  YGNodeSetMeasureFunc(root_child0, &facebook::yoga::test::IntrinsicSizeMeasure);
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
+  ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
+  ASSERT_FLOAT_EQ(10000, YGNodeLayoutGetWidth(root_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child0));
+
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
+  ASSERT_FLOAT_EQ(200, YGNodeLayoutGetWidth(root));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root));
+
+  ASSERT_FLOAT_EQ(-9800, YGNodeLayoutGetLeft(root_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
+  ASSERT_FLOAT_EQ(10000, YGNodeLayoutGetWidth(root_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetHeight(root_child0));
+
+  YGNodeFreeRecursive(root);
+
+  YGConfigFree(config);
+}
--- a/website/blog/2024-12-02-announcing-yoga-3.2.md
+++ b/website/blog/2024-12-02-announcing-yoga-3.2.md
@@ -0,0 +1,83 @@
+---
+slug: announcing-yoga-3.2
+title: Announcing Yoga 3.2
+authors:
+  - NickGerleman
+---
+
+import Playground from '@site/src/components/Playground';
+
+Yoga 3.2 is a new minor version of Yoga, used by React Native 0.77.
+
+## Highlights
+
+1. Support for `box-sizing`
+2. Support for `display: contents`
+3. Bug fixes and improvements
+
+## `box-sizing`
+
+Yoga [now supports](https://github.com/facebook/yoga/commit/671ae61a39d02091d1e73fe773d6a09f2f93cda4) [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) on styles, allowing sizing values to influence the content box instead of the border box.
+
+:::warning
+
+To preserve compatibility, Yoga nodes default to `box-sizing: border-box`, even if `UseWebDefaults` is set. We recommend manually setting node defaults instead of using the `UseWebDefaults` API.
+
+:::
+
+<Playground code={`<Layout config={{useWebDefaults: true}}>
+  <Node
+    style={{
+      width: 100,
+      height: 100,
+      padding: 50,
+      boxSizing: "border-box",
+    }}>
+  </Node>
+</Layout>`} />
+
+<Playground code={`<Layout config={{useWebDefaults: true}}>
+    <Node
+    style={{
+      width: 100,
+      height: 100,
+      padding: 50,
+      boxSizing: "content-box",
+    }}>
+  </Node>
+</Layout>`} />
+
+
+
+## `display: contents`
+
+Yoga nodes [may now be set to `display: contents`](https://github.com/facebook/yoga/commit/68bb2343d2b470962065789d09016bba8e785340) to remove them from the layout flow, while preserving and hoisting the node's children. This may be used by the higher level UI framework to allow more easily composing wrapper components (such as those which may need to handle events, without influencing child layout). Thanks [@j-piasecki](https://github.com/j-piasecki) for the contribution!
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 100,
+      height: 100,
+      gap: 10,
+    }}
+  >
+    <Node style={{display: "contents"}}>
+      <Node style={{flexGrow: 1}} />
+      <Node style={{flexGrow: 1}} />
+      <Node style={{flexGrow: 1}} />
+    </Node>
+  </Node>
+</Layout>`} />
+
+
+## Removal of legacy absolute positioning
+
+Yoga 3.0 introduced a new algorithm used for absolute positioning. This algorithm is more correct than the one previously used, but led to observed compatibility issues with existing code, so we left the option to disable it via the `AbsolutePositioningIncorrect` erratum (enabled by default in frameworks like React Native). Yoga 3.2 removes the legacy absolute positioning path, but ports over the main compatibility quirk under a new erratum `AbsolutePositionWithoutInsetsExcludesPadding` (where the previous incorrect behavior would omit padding when a position was not specified on the absolute node). Errata users should see more correct absolute positioning behavior, while preserving compatibility with existing code.
+
+## Fixed non-global YogaConfig in Java bindings
+
+Yoga would previously allow garbage collection of a `YogaConfig` if it was not retained outside of the Yoga tree. This could result in confusing errors caused by use-after free. Yoga nodes [now correctly retain the configs they are using](https://github.com/facebook/yoga/commit/22b018c957e930de950338ad87f4ef8d59e8a169). Thanks [@michaeltroger](https://github.com/michaeltroger) for this fix!
+
+## Fixed behavior when combining `align-items` with `align-content`
+
+A regression [was fixed](https://github.com/facebook/yoga/commit/77c99870127e9c2d46a07264fa372025334d8fd0) in how Yoga handles some combinations of `align-content` and `align-items`. Thanks [@phuccvx12](https://github.com/phuccvx12) for this fix!
--- a/website/src/components/FlexStyle.ts
+++ b/website/src/components/FlexStyle.ts
@@ -63,7 +63,7 @@ export type FlexStyle = {
  bottom?: number | `${number}%`;
  boxSizing?: 'border-box' | 'content-box';
  direction?: 'ltr' | 'rtl';
-  display?: 'none' | 'flex';
+  display?: 'none' | 'flex' | 'contents';
  end?: number | `${number}%`;
  flex?: number;
  flexBasis?: number | 'auto' | `${number}%`;
@@ -360,12 +360,14 @@ function direction(str?: 'ltr' | 'rtl'): Direction {
  throw new Error(`"${str}" is not a valid value for direction`);
 }

-function display(str?: 'none' | 'flex'): Display {
+function display(str?: 'none' | 'flex' | 'contents'): Display {
  switch (str) {
    case 'none':
      return Display.None;
    case 'flex':
      return Display.Flex;
+    case 'contents':
+      return Display.Contents;
  }
  throw new Error(`"${str}" is not a valid value for display`);
 }
--- a/website/src/components/LayoutBox.tsx
+++ b/website/src/components/LayoutBox.tsx
@@ -16,6 +16,7 @@ export type LayoutMetrics = {
  width: number;
  height: number;
  overflow?: 'visible' | 'hidden' | 'scroll';
+  display?: 'flex' | 'none' | 'contents';
  children?: LayoutMetrics[];
 };

@@ -49,7 +50,11 @@ export default function LayoutBox({metrics, depth, className}: Props) {
        position: depth === 0 ? 'relative' : 'absolute',
      }}>
      {children?.map((child, i) => (
-        <LayoutBox key={i} metrics={child} depth={depth + 1} />
+        <LayoutBox
+          key={i}
+          metrics={child}
+          depth={style.display === 'contents' ? depth : depth + 1}
+        />
      ))}
    </div>
  );
--- a/website/src/components/YogaViewer.tsx
+++ b/website/src/components/YogaViewer.tsx
@@ -8,7 +8,12 @@
 */

 import {useMemo} from 'react';
-import Yoga, {Direction, Overflow, Node as YogaNode} from 'yoga-layout';
+import Yoga, {
+  Direction,
+  Display,
+  Overflow,
+  Node as YogaNode,
+} from 'yoga-layout';
 import {FlexStyle, applyStyle} from './FlexStyle';
 import LayoutBox from './LayoutBox';

@@ -109,6 +114,16 @@ function metricsFromYogaNode(node: YogaNode): LayoutMetrics {
          return 'visible';
      }
    })(),
+    display: (() => {
+      switch (node.getDisplay()) {
+        case Display.Flex:
+          return 'flex';
+        case Display.None:
+          return 'none';
+        case Display.Contents:
+          return 'contents';
+      }
+    })(),
    children,
  };
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -5984,9 +5984,9 @@ http-parser-js@>=0.5.1:
  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==

 http-proxy-middleware@^2.0.3:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
-  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
+  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
  dependencies:
    "@types/http-proxy" "^1.17.8"
    http-proxy "^1.18.1"
@@ -10173,16 +10173,7 @@ string-length@^4.0.1:
    char-regex "^1.0.2"
    strip-ansi "^6.0.0"

-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10273,14 +10264,7 @@ stringify-object@^3.3.0:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11180,16 +11164,7 @@ word-wrap@^1.2.3:
  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@7.0.0, wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@7.0.0, wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
--- a/yoga/algorithm/CalculateLayout.cpp
+++ b/yoga/algorithm/CalculateLayout.cpp
@@ -325,9 +325,23 @@ static void measureNodeWithMeasureFunc(

    // Measure the text under the current constraints.
    const YGSize measuredSize = node->measure(
-        innerWidth,
+        isUndefined(innerWidth) ? innerWidth
+                                : boundAxis(
+                                      node,
+                                      FlexDirection::Row,
+                                      direction,
+                                      innerWidth,
+                                      ownerWidth,
+                                      ownerWidth),
        measureMode(widthSizingMode),
-        innerHeight,
+        isUndefined(innerHeight) ? innerHeight
+                                 : boundAxis(
+                                       node,
+                                       FlexDirection::Column,
+                                       direction,
+                                       innerHeight,
+                                       ownerHeight,
+                                       ownerWidth),
        measureMode(heightSizingMode));

    layoutMarkerData.measureCallbacks += 1;
@@ -1213,10 +1227,10 @@ static void calculateLayoutImpl(
    const float ownerWidth,
    const float ownerHeight,
    const bool performLayout,
+    const LayoutPassReason reason,
    LayoutData& layoutMarkerData,
    const uint32_t depth,
-    const uint32_t generationCount,
-    const LayoutPassReason reason) {
+    const uint32_t generationCount) {
  yoga::assertFatalWithNode(
      node,
      yoga::isUndefined(availableWidth)
@@ -1780,7 +1794,7 @@ static void calculateLayoutImpl(
                                    crossAxis,
                                    direction,
                                    unclampedCrossDim,
-                                    ownerHeight,
+                                    crossAxisOwnerSize,
                                    ownerWidth) -
        paddingAndBorderAxisCross;

@@ -2268,10 +2282,10 @@ bool calculateLayoutInternal(
        ownerWidth,
        ownerHeight,
        performLayout,
+        reason,
        layoutMarkerData,
        depth,
-        generationCount,
-        reason);
+        generationCount);

    layout->lastOwnerDirection = ownerDirection;
    layout->configVersion = node->getConfig()->getVersion();
--- a/yoga/algorithm/FlexLine.cpp
+++ b/yoga/algorithm/FlexLine.cpp
@@ -17,7 +17,7 @@ FlexLine calculateFlexLine(
    yoga::Node* const node,
    const Direction ownerDirection,
    const float ownerWidth,
-    const float mainAxisownerSize,
+    const float mainAxisOwnerSize,
    const float availableInnerWidth,
    const float availableInnerMainDim,
    Node::LayoutableChildren::Iterator& iterator,
@@ -70,7 +70,7 @@ FlexLine calculateFlexLine(
            direction,
            mainAxis,
            child->getLayout().computedFlexBasis,
-            mainAxisownerSize,
+            mainAxisOwnerSize,
            ownerWidth)
            .unwrap();

--- a/yoga/algorithm/FlexLine.h
+++ b/yoga/algorithm/FlexLine.h
@@ -66,7 +66,7 @@ FlexLine calculateFlexLine(
    yoga::Node* node,
    Direction ownerDirection,
    float ownerWidth,
-    float mainAxisownerSize,
+    float mainAxisOwnerSize,
    float availableInnerWidth,
    float availableInnerMainDim,
    Node::LayoutableChildren::Iterator& iterator,
--- a/yoga/node/Node.cpp
+++ b/yoga/node/Node.cpp
@@ -245,8 +245,8 @@ void Node::setLayoutHadOverflow(bool hadOverflow) {
  layout_.setHadOverflow(hadOverflow);
 }

-void Node::setLayoutDimension(float LengthValue, Dimension dimension) {
-  layout_.setDimension(dimension, LengthValue);
+void Node::setLayoutDimension(float lengthValue, Dimension dimension) {
+  layout_.setDimension(dimension, lengthValue);
 }

 // If both left and right are defined, then use left. Otherwise return +left or
--- a/yoga/node/Node.h
+++ b/yoga/node/Node.h
@@ -259,7 +259,7 @@ class YG_EXPORT Node : public ::YGNode {
      uint32_t computedFlexBasisGeneration);
  void setLayoutMeasuredDimension(float measuredDimension, Dimension dimension);
  void setLayoutHadOverflow(bool hadOverflow);
-  void setLayoutDimension(float LengthValue, Dimension dimension);
+  void setLayoutDimension(float lengthValue, Dimension dimension);
  void setLayoutDirection(Direction direction);
  void setLayoutMargin(float margin, PhysicalEdge edge);
  void setLayoutBorder(float border, PhysicalEdge edge);
Author	SHA1	Message	Date
Joe Vilches	7e65d7a3a1	Fix bug where leaf nodes do not bound innerWidth/Height before measure Differential Revision: D66983314	2024-12-09 13:45:48 -08:00
Joe Vilches	5478812db3	Use crossAxisOwnerSize instead of ownerHeight in cross axis bound call (#1763 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1763 X-link: https://github.com/facebook/react-native/pull/48080 Small bug that I noticed while doing intrinsic sizing. We have the ownerHeight as the axis size despite bounding the length of the cross axis. This should therefore be the crossAxisOwnerSize, which might be the width in some cases Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66736539 fbshipit-source-id: 528fc438b3327cd6f7890ea0ba408e4ce7b0f02c	2024-12-06 15:34:06 -08:00
Joe Vilches	050ac8a413	Properly camelcase mainAxisownerSize in FlexLine (#1762 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1762 X-link: https://github.com/facebook/react-native/pull/48077 OCD strikes again. Grepped this time to make sure we didn't miss any cases for this specific param name Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66715777 fbshipit-source-id: 3e881a15b3b2836a4a55b11d7ec621541b92a05d	2024-12-03 19:16:56 -08:00
Nick Gerleman	733ba24064	Add Yoga 3.2 Release notes (#1761 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1761 Whips up some release notes for what is new since Yoga 3.1. https://github.com/facebook/yoga/compare/v3.1.0...v3.2.0 The relevant packages have already been published. Reviewed By: joevilches Differential Revision: D66679637 fbshipit-source-id: dd94e2a52f2bdc80541c331d1fb39de82669cc7a	2024-12-02 17:39:41 -08:00
Joe Vilches	e177477144	Add text based intrinsic sizing tests (#1759 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1759 We just have block based tests right now. Intrinsic sizing is commonly used with text so lets add a few there. Reviewed By: NickGerleman Differential Revision: D66662940 fbshipit-source-id: f8b91419c89d22d79a91d3bd8c7da70429c827fb	2024-12-02 17:29:49 -08:00
Joe Vilches	76ffdbc25d	Back out "Back out "[yoga][gentest][intrinsic sizing] Gentest and initial tests for intrinsic sizing"" (#1758 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1758 Original commit changeset: 52d6cc754cb9 Original Phabricator Diff: D66332308 Reviewed By: NickGerleman Differential Revision: D66662663 fbshipit-source-id: fb3a0d10ec0f0149aeee510148f26ada8eff7e47	2024-12-02 17:29:49 -08:00
Joe Vilches	f99e657acd	Back out "Back out "[yoga][intrinsic sizing] Update public API for intrinsic sizing setters"" Summary: Original commit changeset: 793f77dad021 Original Phabricator Diff: D66332309 Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66662661 fbshipit-source-id: 22ed3ac9492f0a563c041ce4cb5fba4b65b53211	2024-12-02 17:29:49 -08:00
Joe Vilches	a9246bc7db	Back out "Back out "[yoga][intrinsic sizing] Modify private apis to set, store, and get intrinsic sizing keywords"" (#1756 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1756 X-link: https://github.com/facebook/react-native/pull/48049 Changelog: [Internal] Original commit changeset: 1d596964e0c8 Original Phabricator Diff: D66332307 Reviewed By: NickGerleman Differential Revision: D66662662 fbshipit-source-id: 4f9ac2b1557b848f519dcd728d7097b52f1190b3	2024-12-02 17:29:49 -08:00
Joe Vilches	be72b8e8aa	Align order of params between calculateLayoutInternal and calculateLayoutImpl (#1755 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1755 X-link: https://github.com/facebook/react-native/pull/47975 I've been working with callsites here and its annoying if you switch these that you need to move these params around too. Let's just make them the same order Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66519836 fbshipit-source-id: 2e98e671270a053c6e62372e2003f1ca67774ec9	2024-11-26 22:48:24 -08:00
Joe Vilches	b876f596d9	Camel case LengthValue in Node.cpp (#1754 ) Summary: X-link: https://github.com/facebook/react-native/pull/47971 Pull Request resolved: https://github.com/facebook/yoga/pull/1754 This was annoying me Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66510734 fbshipit-source-id: d1b952f2e82e7018b16dc0c572d9b98aec18c0e5	2024-11-26 15:23:08 -08:00
Joe Vilches	be00354b71	Back out "Modify private apis to set, store, and get intrinsic sizing keywords" (#1750 ) Summary: X-link: https://github.com/facebook/react-native/pull/47895 Pull Request resolved: https://github.com/facebook/yoga/pull/1750 These APIs were only added so that we could do TDD as we work on intrinsic sizing functionality. As of right now they do nothing. We are aiming on publishing a new version of Yoga soon so for the time being we are going to back these out so as not to confuse anyone with this new functionality. Ideally we get to a point where we have some temporary experimental header to stage these in but this is a bit time sensitive so just backing out for now Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66332307 fbshipit-source-id: 1d596964e0c893091c541988506e8b80fa6d1957	2024-11-25 00:40:03 -08:00
Joe Vilches	0c995496c8	Back out "Update public API for intrinsic sizing setters" (#1752 ) Summary: X-link: https://github.com/facebook/react-native/pull/47896 Pull Request resolved: https://github.com/facebook/yoga/pull/1752 These APIs were only added so that we could do TDD as we work on intrinsic sizing functionality. As of right now they do nothing. We are aiming on publishing a new version of Yoga soon so for the time being we are going to back these out so as not to confuse anyone with this new functionality. Ideally we get to a point where we have some temporary experimental header to stage these in but this is a bit time sensitive so just backing out for now Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D66332309 fbshipit-source-id: 793f77dad021fa5e57b52c36ae954307636bcbf0	2024-11-25 00:40:03 -08:00
Joe Vilches	c12e732fab	Back out "Gentest and initial tests for intrinsic sizing" (#1751 ) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1751 Original commit changeset: 1e3e7214fab0 Original Phabricator Diff: D64145117 Reviewed By: NickGerleman Differential Revision: D66332308 fbshipit-source-id: 52d6cc754cb931e851e444bac2c946907a098235	2024-11-25 00:40:03 -08:00