Summary:
X-link: https://github.com/facebook/react-native/pull/47194
Fixes a case where a node with `display: contents` would not be cleaned up in some cases. This was caused by it being called after some early returns handling different quick paths. This PR moves the call to `cleanupContentsNodesRecursively` earlier so that it's always called.
The problem here wasn't mutating before cloning, but leaving a node marked as dirty after the layout has finished.
The exact case in which I found this was a node with a single `display: contents` child which needs to be a leaf. Then in the parent node [this](b0b842d5e7/yoga/algorithm/CalculateLayout.cpp (L1339)) condition is true, so `cleanupContentsNodesRecursively` doesn't get called and the child node is never visited and cleaned. I assume the same will happen in the other paths with an early return here.
Changelog:
[General][Fixed] - Fix for nodes with `display: contents` not being cleaned in some cases
Pull Request resolved: https://github.com/facebook/yoga/pull/1729
Reviewed By: rozele
Differential Revision: D64910099
Pulled By: NickGerleman
fbshipit-source-id: 6d56f8fbf687b7ee5af889c0b868406213c9cee8
Summary:
Bumping Gradle to 8.9 and NDK to 27.1.12297006 in prep to build native libraries with 16KB page size support
See:
- Changelog r27: https://github.com/android/ndk/wiki/Changelog-r27
- 16KB page sizes: https://developer.android.com/guide/practices/page-sizes
Changelog:
[Android][Updated] - Bump Gradle to 8.9, AGP to 8.7.1 and NDK to 27
Reviewed By: cortinico
Differential Revision: D64381441
fbshipit-source-id: 5e4236c166568a3990deabfd628f0f34e52ea855
Summary:
X-link: https://github.com/facebook/react-native/pull/47035
This PR adds support for `display: contents` style by effectively skipping nodes with `display: contents` set during layout.
This required changes in the logic related to children traversal - before this PR a node would be always laid out in the context of its direct parent. After this PR that assumption is no longer true - `display: contents` allows nodes to be skipped, i.e.:
```html
<div id="node1">
<div id="node2" style="display: contents;">
<div id="node3" />
</div>
</div>
```
`node3` will be laid out as if it were a child of `node1`.
Because of this, iterating over direct children of a node is no longer correct to achieve the correct layout. This PR introduces `LayoutableChildren::Iterator` which can traverse the subtree of a given node in a way that nodes with `display: contents` are replaced with their concrete children.
A tree like this:
```mermaid
flowchart TD
A((A))
B((B))
C((C))
D((D))
E((E))
F((F))
G((G))
H((H))
I((I))
J((J))
A --> B
A --> C
B --> D
B --> E
C --> F
D --> G
F --> H
G --> I
H --> J
style B fill:https://github.com/facebook/yoga/issues/050
style C fill:https://github.com/facebook/yoga/issues/050
style D fill:https://github.com/facebook/yoga/issues/050
style H fill:https://github.com/facebook/yoga/issues/050
style I fill:https://github.com/facebook/yoga/issues/050
```
would be laid out as if the green nodes (ones with `display: contents`) did not exist. It also changes the logic where children were accessed by index to use the iterator instead as random access would be non-trivial to implement and it's not really necessary - the iteration was always sequential and indices were only used as boundaries.
There's one place where knowledge of layoutable children is required to calculate the gap. An optimization for this is for a node to keep a counter of how many `display: contents` nodes are its children. If there are none, a short path of just returning the size of the children vector can be taken, otherwise it needs to iterate over layoutable children and count them, since the structure may be complex.
One more major change this PR introduces is `cleanupContentsNodesRecursively`. Since nodes with `display: contents` would be entirely skipped during the layout pass, they would keep previous metrics, would be kept as dirty, and, in the case of nested `contents` nodes, would not be cloned, breaking `doesOwn` relation. All of this is handled in the new method which clones `contents` nodes recursively, sets empty layout, and marks them as clean and having a new layout so that it can be used on the React Native side.
Relies on https://github.com/facebook/yoga/pull/1725
Changelog: [Internal]
Pull Request resolved: https://github.com/facebook/yoga/pull/1726
Test Plan: Added tests for `display: contents` based on existing tests for `display: none` and ensured that all the tests were passing.
Reviewed By: joevilches
Differential Revision: D64404340
Pulled By: NickGerleman
fbshipit-source-id: f6f6e9a6fad82873f18c8a0ead58aad897df5d09
Summary:
X-link: https://github.com/facebook/react-native/pull/46984
Pull Request resolved: https://github.com/facebook/yoga/pull/1725
The legacy (wrong) absolute positioning path positions in two places, including work that is definitely always overwritten in the new absolute layout path.
This came up before for position: static, but we didn't clean this up at the time. This code is also now leading display: contents impl being more annoying.
This diff tries to converge to the more spec correct implementation of positioning here, that also only happens in one place.
Previous path would potentially also incorrectly justify when `justify-content` was non-default, but not handled in the previous few cases? We don't have access to the flexLine at this point later, and apart from the existing tests now passing I reused the new correct logic for justification (spec says we should position child as if its the only child in the container https://www.w3.org/TR/css-flexbox-1/#abspos-items).
I added a new, more scoped errata `AbsolutePositionWithoutInsetsExcludesPadding` to preserve some of the legacy behavior that showed as very breaking.
I also did not try removing `AbsolutePercentAgainstInnerSize` which I suspect would be more breaking than this change.
Changelog:
[General][Breaking] - More spec compliant absolute positioning
Reviewed By: joevilches
Differential Revision: D64244949
fbshipit-source-id: ca97570e0de82e8f0424a0912adfd0b05254559e
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1719
Right now there is no way to test fixtures with `auto` widths, heights, or flex basis - even though we expose those functions. I updated gentest to generate those functions. Notably, position and margin (the other auto-able props) already account for this.
I also created `YGAutoTest.html` to test this. Not really testing the capabilities of `auto` here, just if we can create a test about it.
Reviewed By: NickGerleman
Differential Revision: D64125522
fbshipit-source-id: 291ec82003cf53f99c21943142a63e2ef30402a5
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1718
Our gentest works by console.logging the contents of the test it is generating to the browser powered by the driver. The driver then reads the logs and writes it to a file. An unfortunate side effect here is that we cannot console.log to debug how the gentest logic actually works since the driver is expecting formatted code. To get around this I had the driver filter out logs with a certain prefix and add that a helper that logs a message with this prefix to the scripts.
Reviewed By: NickGerleman
Differential Revision: D64011035
fbshipit-source-id: 1f113fde425d1d7db1c16ab85f4bb16b0e18f41d
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1715
X-link: https://github.com/facebook/react-native/pull/46799
Content box impl had a bug where we resolved padding % against the same reference length as the dimensions. Padding should always be against containing block's width. This is also true for width, but not for height, which should be against containing block's height.
This just pipes the width into our box sizing functions.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63787577
fbshipit-source-id: e512338770f25b66506cabab5a7cde8f04397ea0
Summary:
X-link: https://github.com/facebook/react-native/pull/46800
Pull Request resolved: https://github.com/facebook/yoga/pull/1716
Had a mini heart attack thinking I set the default to content box. Wrote this to double check and it passed. Might as well check it in
Technically the default to BoxSizing.h is ContentBox, but in the style we override that. Regardless I switched that around so border box was the default.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63802722
fbshipit-source-id: 49ed29657c964bc12a2bf70988061ab4599267ec
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1717
CocoaPods is EOL (though we will still support it for a while), and Yoga has SPM support, so let's add a badge!
SPM does not have a central registry (it instead uses our Git branch), so there isn't a badge to show the current vesion, we instead just mention that we support it, which is what I found other projects do.
Reviewed By: nmn
Differential Revision: D63845470
fbshipit-source-id: d033700fa04b8d708890b1c51d0a37fab8251a43
Summary:
X-link: https://github.com/facebook/react-native/pull/46741
Pull Request resolved: https://github.com/facebook/yoga/pull/1711
box sizing is really just a reinterpretation of what length properties (like `width`, `height`, `max-width`, etc) mean. So to implement this I just add the border and padding if we are in content box when we ask for any of these properties. All the math that gets done by the algorithm is still in border box land, and the layout we return is to be interpreted as the border box (this is actually the expected behavior per https://drafts.csswg.org/css-sizing/#box-sizing). This makes this implementation pretty simple actually.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63416833
fbshipit-source-id: fd76132cf51e8a5092129802c3a12ab24023018b
Summary:
X-link: https://github.com/facebook/react-native/pull/46649
Pull Request resolved: https://github.com/facebook/yoga/pull/1705
To get the height and width we call a function currently named `getResolvedDimension`. This returns a `Style::Length`, which in most cases we "resolve" immediately by calling `resolve`. This is a bit confusing that you need to `resolve` something that is already `resolved`.
I plan on adding a new function soon for `contentBox` which would resolve the length for you, so I think this should be renamed.
Also deleted unused `getResolvedDimensions`
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63407730
fbshipit-source-id: e855c17d9c99817be308b7263fcb5d43559ede14
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1701
X-link: https://github.com/facebook/react-native/pull/46630
I would like to write some tests for box sizing that will drive a lot of my development as I implement content box. To do that, I need this publicly exposed. Obviously not that ideal since this currently does not do anything. Maybe we can name the value in such a way that its clear it is in development?
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D63135970
fbshipit-source-id: 7520823bf925364eae45341531e012e80ec92284
Summary:
X-link: https://github.com/facebook/react-native/pull/46428
Pull Request resolved: https://github.com/facebook/yoga/pull/1696
We do not validate the aspect ratio to ensure it is non zero and non inf in a lot of places. Per the spec, these values should act like auto. There is no auto keyword, but it is the default so I just set the style to a default FloatOptional in this case
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D62473161
fbshipit-source-id: 6857de819538a7a87ce0a652e99f5a49992921ae
Summary:
X-link: https://github.com/facebook/react-native/pull/46216
Regarding [issue](https://github.com/facebook/react-native/issues/45817) with incorrect layout when `left` is set to `auto`. This PR introduces handling `auto` whenever inline or flex position is checked to be defined and it fixes above issue.
Changelog:
[General][Fixed] - Fix handling 'auto' checks in absolute layout
## Tests:
I have run the provided unit tests and everything passes.
Pull Request resolved: https://github.com/facebook/yoga/pull/1689
Reviewed By: cipolleschi
Differential Revision: D61737876
Pulled By: NickGerleman
fbshipit-source-id: 531199a91c5e122b930b49725ea567cbb1d592ce
Summary:
X-link: https://github.com/facebook/react-native/pull/45965
Pull Request resolved: https://github.com/facebook/yoga/pull/1687
We are seeing some crashes that are hard to wrap our head around. Lets add more logs. I chose these values based on what could make the height/width undefined from looking at the code. We might need more but this should give us some more direction.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D61054392
fbshipit-source-id: 654ff96f94aa89605a603e2e36335bb48b61f4a2
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1677
We have Clang Tidy warnings enabled internally, that will flag `const YG*Ref` as misleading, as a const pointer to non-const, instead of non-const pointer to const.
Let's remove all the misleading const in existing tests, and generated tests.
Reviewed By: joevilches
Differential Revision: D59335968
fbshipit-source-id: c66af878904ba7900f8ffcd99162968d90f8e5c7
Summary:
X-link: https://github.com/facebook/react-native/pull/45240
Pull Request resolved: https://github.com/facebook/yoga/pull/1675
There was a bug where some crash would happen if a tree was cloned that had static/absolute parent/child pair inside it. This was because we were no longer calling `cloneChildrenIfNeeded` on the static parent, but would still layout the absolute child. So that child's owner would be stale and have new layout. In React Native this would lead to a failed assert which causes the crash.
The fix here is to clone the children of static nodes during `layoutAbsoluteDescendants` so that we guarantee the node is either cloned if it is going to have new layout.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D59175629
fbshipit-source-id: 4d110a08ba5368704327d5ab69a8695b28e746f4
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1673
Separate the generated Java tests from the non-generated ones, like all the other tests.
Reviewed By: javache
Differential Revision: D58989535
fbshipit-source-id: 4ffe92d079acdf3ba24731f7f1ef1ae6eba97da5
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1671
This diff adds support for intrinsic sizing in generated tests. This is done by importing a testing font called "Ahem" which, as used, has an exact width and height of 10px for each character. Support has been added for C++, Java, and Javascript generated tests.
Reviewed By: NickGerleman
Differential Revision: D58307002
fbshipit-source-id: e1dcc1e03310d35a32e0c70f71994880d8f7de55
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1672
`gentest-validate` checks signedsource for generated tests. D58307002 adds a new directory under `java/tests/com/facebook/yoga/`, which [confuses](https://github.com/facebook/yoga/actions/runs/9653979292/job/26627690870) the current directory traversal logic.
This replaces the traversal with `glob`, and makes us skip files without a signature, instead of special-casing the Java directory.
Reviewed By: yungsters
Differential Revision: D58987293
fbshipit-source-id: a5640f5faee4aa40879c266211c5e736a0b077be
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1669
I made a new branch and release of Yoga corresponding to the version used by RN 0.75. This documents the changes.
Reviewed By: christophpurrer, joevilches
Differential Revision: D58922338
fbshipit-source-id: 9c29f5c30cf1fb2d0bac6d5ba33cba4945d4e4f2
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1670
Embeds to Yoga's documentation reuse a tiny rasterized favicon, blown up, and full of jpeg artifacts.
{F1714492025}
This bothered me enough to make the previews look better.
This change adds a quickly whipped up opengraph sized image, replaces the favicon with one derived from logo SVG, and fixes a missing description on the homepage.
{F1714566402}
Reviewed By: yungsters
Differential Revision: D58923501
fbshipit-source-id: 249a23034f50667e32970121a90eccc380e566a3
Summary:
X-link: https://github.com/facebook/react-native/pull/44938
Yoga is transitively included in Swift targets and needs to be modular.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D58469454
fbshipit-source-id: 72bc6b5d3e5ee0710d9334a626e4e7297ce26b09
Summary:
X-link: https://github.com/facebook/react-native/pull/44792
Pull Request resolved: https://github.com/facebook/yoga/pull/1663
Fixing https://github.com/facebook/yoga/issues/1658. We had a problem where if a child had a different flex direction than its parent, and it also set a position as a percent, it would look at the wrong axis to evaluate the percent. What was happening was we were passing in the container's mainAxis size and crossAxis size to use to evaluate the position size if it was a percent. However, we matched these sizes with the main/cross axis of the child - which is wrong if the flex direction is different.
I changed it so that the function just takes in ownerWidth and ownerHeight then calls isRow to determine which one to use for the main/cross axis position. This reduces the ambiguity quite a bit imo.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D58172416
fbshipit-source-id: eafd8069e03493fc56c41a76879d1ad9b7e9236d
Summary:
X-link: https://github.com/facebook/react-native/pull/44791
Pull Request resolved: https://github.com/facebook/yoga/pull/1662
This should fix https://github.com/facebook/yoga/issues/1657. Rather insidious bug but we had code like
```
// The total padding/border for a given axis does not depend on the direction
// so hardcoding LTR here to avoid piping direction to this function
return node->style().computeInlineStartPaddingAndBorder(
axis, Direction::LTR, widthSize) +
node->style().computeInlineEndPaddingAndBorder(
axis, Direction::LTR, widthSize);
```
That comment is NOT true if someone sets both the physical edge and relative edge. So like paddingLeft and paddingEnd for RTL. This diff simply pipes the direction to that spot to use instead of hardcoding LTR. Every file changed is just to pipe `direction`.
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D58169843
fbshipit-source-id: 5b4854dddc019285076bd06955557edf73ef7ec5
Summary:
D57285584 was reverted because we have service code with a faulty measure function, and adding logging to Yoga when invalid measurements were received was enough to spike error rate to elevated levels and block release.
This is a reland of the below change, with a couple modifications:
1. We log warnings instead of errors, which from what I heard, shouldn't block release, but should still make signal
2. We only zero the dimension which was NaN, to preserve exact behavior
## Original
We've started seeing assertion failures in Yoga where a `NaN` value makes its way to an `availableHeight` constraint when measuring Litho tree.
Because it's only happening on Litho, I have some suspicion this might be originating from a Litho-specific measure function. This adds sanitization in Yoga to measure function results, where we will log an error, and set size to zero, if either dimension ends up being negative of `NaN`.
This doesn't really help track down where the error was happening, but Yoga doesn't have great context to show this to begin with. If we see this is issue, next steps would be Litho internal intrumentation to find culprit.
Changelog: [Internal]
Reviewed By: sbuggay
Differential Revision: D57473295
fbshipit-source-id: 979f1b9a51f5550a8d3ca534276ec191a3cb7b9e
Summary:
X-link: https://github.com/facebook/react-native/pull/44557
We've started seeing assertion failures in Yoga where a `NaN` value makes its way to an `availableHeight` constraint when measuring Litho tree.
Because it's only happening on Litho, I have some suspicion this might be originating from a Litho-specific measure function. This adds sanitization in Yoga to measure function results, where we will log an error, and set size to zero, if either dimension ends up being negative of `NaN`.
This doesn't really help track down where the error was happening, but Yoga doesn't have great context to show this to begin with. If we see this is issue, next steps would be Litho internal intrumentation to find culprit.
Changelog: [Internal]
Reviewed By: joevilches
Differential Revision: D57285584
fbshipit-source-id: 935fcdd28c05bbac0d73e1c7654ae11a74898537
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1648
Node made a breaking change in a security release for 18/20 where `spawn()` no longer loads `.bat` files by default. 69ffc6d50d. Execute command in shell.
Reviewed By: javache
Differential Revision: D56230965
fbshipit-source-id: 52e9bd8a76664bd07ea25b6355ac54fcb24cbb9a
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1645
Right now we publish Yoga by transforming in-place, and rewriting the entrypoint to point to the generated vanilla JavaScript.
It is nice to include the original source, e.g. so that users can use sourcemaps when debugging, but putting these files on top of each other has been causing problems, like https://github.com/facebook/yoga/issues/1637#issuecomment-2049099690
This changes the packaging step to instead put all the outputs into a "dist" folder, and point the package entrypoints there. We still include original source for sourcemap usage.
Reviewed By: yungsters
Differential Revision: D56093470
fbshipit-source-id: ecd52dddd9040294aae66747cf1fdf48c7f602e7
Summary:
X-link: https://github.com/facebook/react-native/pull/44010
Pull Request resolved: https://github.com/facebook/yoga/pull/1641
Yoga has quirk where newly constructed nodes are clean, which isn't really correct. Normally never shows in in real code because setting a style or children will dirty. Fabric doesn't use the public APIs that do this dirtying, so it ends up getting creative instead.
We should fix so that newly constructed nodes are dirty. Copy-constructed Nodes (also only a Fabric thing, will retain original dirty flag.
Changelog: [Internal]
Reviewed By: sammy-SC
Differential Revision: D55855328
fbshipit-source-id: be49efaf8ac29351f8e5ec509bd9912546944332
