Commit Graph

603 Commits

Author SHA1 Message Date
Joe Vilches
a112a07e6a Make it so that aspect ratio behaves like auto if it is 0 or inf (#1696)
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
2024-09-12 14:28:33 -07:00
Alan Lee
dc4ab5ad57 update compileSdk to 35 (#1692)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1692

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

Update compileSdk to 35 before adding relating work for Android 15

Changelog:
[Android][Added] - Update compileSdk to 35

Reviewed By: cortinico

Differential Revision: D61874541

fbshipit-source-id: f7c92dc15aa68a53bcd626450c515d2f24e9e40f
2024-08-29 09:17:42 -07:00
Dawid
6d6f69bee7 Fix handling 'auto' checks in absolute layout (#1689)
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
2024-08-27 06:00:34 -07:00
Joe Vilches
ae8ede9b53 Fix crash when you layout multiple absolute nodes in the same static subtree (#1686)
Summary:
X-link: https://github.com/facebook/react-native/pull/45952

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

https://en.wikipedia.org/wiki/Short-circuit_evaluation 🫠

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D60997231

fbshipit-source-id: 11d70086eecfb5481c578477f288138370016a83
2024-08-08 22:41:29 -07:00
Nick Gerleman
b9e335ebfd Put generated Java tests in a "generated" folder (#1673)
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
2024-06-26 10:56:18 -07:00
Maddie Lord
1a3bc6bfbc Add test support for intrinsic sized nodes (#1671)
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
2024-06-26 10:00:17 -07:00
Joe Vilches
289b62732b Fix issue with alternating flex direction and percent postions (#1663)
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
2024-06-10 18:25:19 -07:00
Joe Vilches
72b7e5b5cf Fix issue where % width would be wrong if physical and relative padding defined on parent (#1662)
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
2024-06-10 18:25:19 -07:00
Joe Vilches
dc23284cf7 Add some tests for padding and border for absolute positioning (#1650)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1650

See https://github.com/facebook/yoga/issues/1436#issuecomment-2070877918

Reviewed By: NickGerleman

Differential Revision: D56478788

fbshipit-source-id: 94a552ed55eb4127eddc6c2018706661fff64093
2024-04-23 21:02:36 -07:00
Nick Gerleman
932361cdbf Fixup margin: auto and justification behavior for overflowed containers (#1646)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1646

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

Fixes https://github.com/facebook/yoga/issues/978

1. Don't allow auto margin spaces to become a negative length
2. Replicate fallback alignment behavior specified by box-alignment spec that we are using for align-content.

Reviewed By: joevilches

Differential Revision: D56091577

fbshipit-source-id: 3c02f81f969bb947cdc5c80b15faaa0b0d39c0c2
2024-04-17 21:50:55 -07:00
Soe Lynn
cd4a1b8cf6 Implement Percentage support for gap styles (#1643)
Summary:
X-link: https://github.com/facebook/react-native/pull/44067

X-link: https://github.com/facebook/litho/pull/980

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

Changelog [Internal]:
- Added percentage value for flex layout gap
- Wired up to pass proper available width and height to implement this feature

Reviewed By: NickGerleman

Differential Revision: D56002340

fbshipit-source-id: c0bc86ac70a1391f115c87da99c2ef411535f68b
2024-04-15 16:44:16 -07:00
Nick Gerleman
6f10656868 Update align-content handling of overflow
Summary:
X-link: https://github.com/facebook/react-native/pull/43752

Gentest tests started failing because Chrome changed behavior of overflowed align-content container. Spec says should fallback to "safe center", which is really just "start", instead of previous "center" behavior. This changes behavior accordingly.

There is one bit where I think we are doing the wrong thing wrt alignment of flex start vs start (which we don't support yet), but couldn't repro a failing chrome test.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D55617689

fbshipit-source-id: 08f23d198c75f2c2f51ccaa8795289e6e4a92cb8
2024-04-02 04:47:09 -07:00
Bruce Mitchener
9dcd8ba9dc Fix typos. (#1629)
Summary:
This fixes a variety of spelling mistakes in file names, identifiers, and comments.

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

Reviewed By: NickGerleman

Differential Revision: D54987359

Pulled By: yungsters

fbshipit-source-id: 6b7ca20f4855f5f654036672bc10f8b079288acd
2024-03-19 02:52:40 -07:00
Joe Vilches
543f36d5b4 Fix bug where absolute nodes were not insetted correctly in certain cases (#1593)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1593

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

There was a bug where we did not position absolute nodes correctly if the static node had a different main/cross axis from the containing node. This fixes that. The change is somewhat complicated unfortunately but I tried to add sufficient comments to explain what is happening

Reviewed By: NickGerleman

Differential Revision: D54703955

fbshipit-source-id: 096c643f61d4f9bb3ee6278d675ebd69b57350d7
2024-03-12 11:08:43 -07:00
Nick Gerleman
b959c79a2a Enable Clang Tidy (#1586)
Summary:
X-link: https://github.com/facebook/litho/pull/976

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

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

Add the React Clang Tidy config to Yoga, run the auto fixes, and make some manual mechanical tweaks.

Notably, the automatic changes to the infra for generating a Yoga tree from JSON capture make it 70% faster.

Before:
{F1463947076}

After:
{F1463946802}

This also cleans up all the no-op shallow const parameters in headers.

{F1463943386}

Not all checks are available in all environments, but that is okay, as Clang Tidy will gracefully skip them.

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D54461054

fbshipit-source-id: dbd2d9ce51afd3174d1f2c6d439fa7d08baff46f
2024-03-04 02:28:02 -08:00
Joe Vilches
f90ad378ff Support for (de)serializing config values (#1571)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1571

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

tsia. This is state we need to capture as it can drastically affect the benchmark times

Reviewed By: NickGerleman

Differential Revision: D53203385

fbshipit-source-id: 47178458d039df90fb15d8a420f9e0f17e4fe6ca
2024-02-09 16:44:32 -08:00
Joe Vilches
28975a6053 Remove public APIs for YGNodePrint and YGConfigSetPrintTreeFlag (#1567)
Summary:
X-link: https://github.com/facebook/react-native/pull/42688

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

We are planning on overhauling NodeToString to output JSON instead of HTML for the purposes of better benchmarking and capturing trees in JSON format to benchmark later. This gives us a bit of a headache as we have to revise several build files to ensure this new library works, ensure that it is only included in certain debug builds, and deal with the benchmark <-> internal cross boundary that arises as the benchmark code (which is a separate binary) tries to interact with it.

On top of it all this is really not used at all.

The plan is to rip out this functionality and just put it in a separate binary that one can include if they really want to debug. That means that it cannot exist in the public API, so I am removing it here.

Private internals come next

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D53137544

fbshipit-source-id: 7571d243b914cd9bf09ac2418d9a1b86d1bee64a
2024-02-02 15:44:23 -08:00
Joe Vilches
8fe38fc7a8 Fix mismatched cases of inlineStart/End and flexStart/End (#1561)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1561

Back when I introduced the inline functions that would get the edge according to the writing direction I swapped some instances of `setLayoutPosition` which wrote to the flexStart edge erroneously. We should basically never read from some inline style and write to the flex edge. This changes them all to use the flex values.

Reviewed By: NickGerleman

Differential Revision: D52921401

fbshipit-source-id: 92b74d652018596134c91827806272ed7418ef6c
2024-01-22 15:41:09 -08:00
Nick Gerleman
395c596695 Add some tests for justification under row-reverse (#1560)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1560

I added these when I was trying to debug the Facepile break removing the row-reverse errata caused. Yoga is doing the right thing, and the tests pass. We didn't have this specific coverage before, so add it.

Reviewed By: joevilches

Differential Revision: D52909633

fbshipit-source-id: d1e8f55bb534d76bd7dfdc46a1e1cc6f0a3ca211
2024-01-19 16:21:59 -08:00
Joe Vilches
1541f9d528 Rename AbsolutePositioning errata (#1558)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1558

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

AbsolutePositioning -> AbsolutePositioningCatchAll

A bit more clear. This errata is for various issues with positioning absolute nodes. There really isn't a clear description as to what specifically this enables/disables, so I just opted to say "catch all" to indicate that this controls various bugs

Reviewed By: NickGerleman

Differential Revision: D52820117

fbshipit-source-id: 80b77832baf65e68e57ca523c418422dd346ef0f
2024-01-18 21:22:05 -08:00
Joe Vilches
06c26d7d46 Remove static-behaves-like-relative errata (#1556)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1556

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

Since we aim to ship static to all users of yoga (not just XPR), we need to remove the errata that is gating most of the features. This should be a non breaking change. To ensure that, I added a new errata which, if on, will use the inner size of the containing node as the containing block. This is how it has been for a while and resolving this is risky and time consuming so for the time being we will stick with that.

Reviewed By: NickGerleman

Differential Revision: D52706161

fbshipit-source-id: 30a93f29cb0d97b20b2947eaa21f36cdc78c4961
2024-01-18 21:22:05 -08:00
Joe Vilches
f69a1a43e5 Hardcode AbsolutePercentageAgainstPaddingEdge experimental feature to false (#1549)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1549

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

This experimental feature is always false, and with the next diff I will be deleting the branch that actually calls into this. Separating this diff out to simplify the review process.

Reviewed By: NickGerleman

Differential Revision: D52705765

fbshipit-source-id: 705f4aa297eae730af9b44753eb01c9dec385dcf
2024-01-18 21:22:05 -08:00
Nick Gerleman
8c3e01166b Remove row-reverse errata (#1547)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1547

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

Yoga has an odd behavior, where `start`/`end` edges under row-reverse are relative to flex-direction, instead of writing direction.

While Yoga doesn't actually document what this behavior is supposed to be, it goes against CK documentation, historic RN documentation, and the behavior valid on the web. It is also applied inconsistently (e.g. sometimes only on container, sometimes on child). It really is a bug, instead of an intended behavior.

We changed the default behavior for Yoga, but left the existing one behind an errata (so existing fbsource users got old behavior). We have previously seen this behavior show up in product code, including CK when running on FlexLayout.

`row-reverse` is surprisingly uncommon though:
1. Litho has <40 usages
2. RN has ~40 usages in `RKJSModules`,~30 in `arvr/js`, ~6 in `xplat/archon`
3. CK has ~80 usages
4. NT has ~40 usages

There are few enough, mostly simple components, that we can inspect through each of them, looking for signs they will hit the issue (at the potential chance of missing some).

CK accounts for 10/14 usages that I could tell would trigger the issue, since it only exposes start/end edge, and not left/right. It might make sense to make it preserve behavior instead, to reduce risk a bit.

FlexLayout is now separately powering Bloks, which wasn't surveyed, so I didn't touch CK behavior under Bloks.

There could also be other usages in other frameworks/bespoke usages, and this has implications for OSS users. But based on our own usage, of many, many components, this seems rare.

Changelog:
[General][Breaking] - Make `start/end` in styles always refer to writing direction

Reviewed By: pentiumao, joevilches

Differential Revision: D52698130

fbshipit-source-id: 2a9ac47e177469f30dc988d916b6c0ad95d53461
2024-01-12 13:49:53 -08:00
Joe Vilches
47e9f33eb4 Java bindings for setAlwaysFormsContainingBlock (#1540)
Summary:
X-link: https://github.com/facebook/react-native/pull/42192

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

tsia

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D52608259

fbshipit-source-id: 647ec4e2fe180ace8d6b641e17cd610fa53fe845
2024-01-08 20:28:49 -08:00
Nick Gerleman
3b0545b15d Add tests for cycles with percentage dimensions (#1530)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1530

Yoga has a shortcut where if a min dimension and max dimension are the same, the value acts as a definite length.

I was curious how browsers handled this.

CSS 2.1 said:
> If the containing block's width depends on this element's width, then the resulting layout is undefined

This is superceded in the CSS box sizing spec. https://www.w3.org/TR/css-sizing-3/#sizing-values

> If, in a particular axis, the containing block’s size depends on the box’s size, see the relevant layout module for special rules on how to resolve percentages. Negative values are invalid.

And later:
https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution

> Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially:

> If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto. (The percentage is honored as usual, however, during the actual sizing of the box itself; see below.)

> Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block).

So, for the purpose of sizing the parent, the child sized using a percentage does not contribute, but we should be sizing children based on that size.

Yoga does not really work like this right now, but gets the answer right answer for half of these tests.

Reviewed By: yungsters

Differential Revision: D52251601

fbshipit-source-id: 4978b90723130283b00e87bbf49795a4d209174c
2023-12-19 13:38:40 -08:00
Nick Gerleman
a1751127ef Fix align-content of cross-stretched container (#1524)
Summary:
X-link: https://github.com/facebook/react-native/pull/41964

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

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

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

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

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

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

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

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

Reviewed By: yungsters

Differential Revision: D52234980

fbshipit-source-id: 475773a352fd01f63a4b21e93a55519726dc0da7
2023-12-17 01:13:36 -08:00
Nick Gerleman
464d1668ba Fix sizing and alignment issues with multi-line containers (#1513)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1513

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

Fixes https://github.com/facebook/yoga/issues/1300
Fixes https://github.com/facebook/yoga/issues/1008

This fixes a smattering of issues related to both sizing and aligment of multi-line-containers:

1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container.
2. Per-line leads were sometimes incorrectly contributing to alignment within the line
3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint.

Need to test how breaking this is, to see if it might need to go behind an errata.

See related PRs:
1. https://github.com/facebook/yoga/pull/1491
2. https://github.com/facebook/yoga/pull/1493
3. https://github.com/facebook/yoga/pull/1013

Changelog:
[General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers

Reviewed By: joevilches

Differential Revision: D52087013

fbshipit-source-id: 8d95ad17e58c1fec1cceab9756413d0b3bd4cd8f
2023-12-16 01:12:30 -08:00
Joe Vilches
4743040d62 Sign generated tests (#1503)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1503

This diff makes it so that our driver will sign all of the generated files to help ensure that they are not edited by hand. Next I will add CI to actually verify the signature

Reviewed By: NickGerleman

Differential Revision: D51966201

fbshipit-source-id: f7e3f4fde1c98832212a448b2dcc8e21be0560c4
2023-12-14 11:48:22 -08:00
Joe Vilches
e61eb0178c Remove ruby files and regen tests (#1501)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1501

Now that we have `gentest-driver.ts` we can delete the ruby gentest. I also regened all of the tests that have a comment with the wrong file name for where it was generated.

Reviewed By: yungsters, NickGerleman

Differential Revision: D51956567

fbshipit-source-id: d389492e54711cf161dff9e649396cc40f1e5073
2023-12-14 11:48:22 -08:00
Joe Vilches
98552078b1 Create node version of gentest script (#1498)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1498

The only instance of ruby in this repository is `gentest.rb` used to generate test cases from html fixtures. This is quite annoying as ruby is not the most popular compared to something like Node and it does not integrate into the rest of our stack. I changed this to use Node.js instead. Instead of `watir` we now use `selenium-webdriver`. `watir` is backed by Selenium so I do not expect anything to change.

Next commits will add command line options, clean up gentest.rb and its references, and change the README

allow-large-files

Reviewed By: yungsters, NickGerleman

Differential Revision: D51874433

fbshipit-source-id: ef8588d48aa7f8b720b57df08738bbd01e9e74a3
2023-12-14 11:48:22 -08:00
Joe Vilches
1ea575684d Enable previously broken absolute positioning tests (#1488)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1488

These were disabled when they were written because they were broken. The recent changes made them pass now so lets enable them. I also added another test that is already passing

Reviewed By: NickGerleman

Differential Revision: D51404875

fbshipit-source-id: ed10004968b871c1d033640d75138f00afc15968
2023-12-07 21:25:45 -08:00
Joe Vilches
bc5dc2d6bf Fix issues with aligning absolute nodes (#1490)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1490

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

In the previous diffs I fixed problems with justifying absolute nodes. The same issues plague aligning so I fixed them in the same way. Added tests that were failing before but now passing

Reviewed By: NickGerleman

Differential Revision: D51404489

fbshipit-source-id: 604495d651eb67cfdcca40df9d8d3a125c5741a8
2023-12-07 21:25:45 -08:00
Joe Vilches
b573f91a38 Fix issue where we were not applying flex end correctly when justifying (#1487)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1487

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

The code here was just wrong. I changed it to be the same logic as the Justify:FlexStart case, but with the flex end sides. Then I get the position for the opposite edge since we need to write to flex start side.

Reviewed By: NickGerleman

Differential Revision: D51383792

fbshipit-source-id: 372835a44edff361dbd84dd92ff9f2ec844b9f9c
2023-12-07 21:25:45 -08:00
Joe Vilches
897f9b7423 Fix issue where we were not centering absolute nodes correctly when justifying (#1489)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1489

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

Centering involves centering the margin box in the content box of the parent, and then getting the distance from the flex start edge of the parent to the child

Reviewed By: NickGerleman

Differential Revision: D51383625

fbshipit-source-id: 6bbbace95689ef39c35303bea4b99505952df457
2023-12-07 21:25:45 -08:00
Joe Vilches
f8d048bb1a Fix bug where we used border box for size of containing block in a certain case (#1486)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1486

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

Somehow missed this case. We never want to measure the CB as that gets border box but we want padding box

Reviewed By: NickGerleman

Differential Revision: D51376309

fbshipit-source-id: 2b5119c421ef92fadb28a70254cb7fe02aeb8c28
2023-12-07 21:25:45 -08:00
Joe Vilches
d1dda2185e Fix bug with align start not taking into account parent padding (#1484)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1484

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

Tsia. Added test and accounted for parent padding

Reviewed By: NickGerleman

Differential Revision: D51374086

fbshipit-source-id: ed9d79887aa1613ea93c10c639cd1465271d23d8
2023-12-07 21:25:45 -08:00
Joe Vilches
9b87d8b3f3 Fix issue where percentages were off of the border box, not padding box (#1485)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1485

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

The size of the containing block is the size of the padding box of the containing node for absolute nodes. We were looking at  `containingNode->getLayout().measuredDimension(Dimension::Width)` which is the border box. So we need to subtract the border from this.

Added a test that was failing before this change as well

Reviewed By: NickGerleman

Differential Revision: D51330526

fbshipit-source-id: adc448dfb71b54f1bbed0d9d61c5553bda4b106c
2023-12-07 21:25:45 -08:00
Joe Vilches
f6c4a8e8e4 Make position static behave like position static (#1482)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1482

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

This is the final step (that I know of) to get the core features of static working. Here we turn on all of the tests and pass down the correct owner size for the call to `calculateLayoutInternal` that is in `layoutAbsoluteChild`

Reviewed By: NickGerleman

Differential Revision: D51293606

fbshipit-source-id: 972259e7ebecb19b55aef2ef866bd7cb57aaf0ca
2023-12-07 21:25:45 -08:00
Joe Vilches
1b146cd8a8 Make positionAbsoluteChild the sole place that matters when determining absolute node's position (#1481)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1481

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

Absolute nodes can be laid out by themselves and do not have to care about what is happening to their siblings. Because of this we can make `positionAbsoluteChild` the sole place where we handle this logic. Right now that is scattered around algorithm with many `if (child is absolute)` cases everywhere. This makes implementing position static a lot harder since we are relying on the CB to do all this work, not the parent.

With this change the only time we set position for an absolute node and it matter (i.e. not overwritten) is in `positionAbsoluteChild`

Reviewed By: NickGerleman

Differential Revision: D51290723

fbshipit-source-id: 405d81b1d28826cbb0323dc117c406a44d381dff
2023-12-07 21:25:45 -08:00
Joe Vilches
c93734f579 Fix issue in gentest where border-<edge> would add a border to test (#1496)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1496

Gentest code has a problem where we try to apply a border in our test when the web browser is not actually adding one. This happens when we do something like `border-top: 10px`. This will actually set the style of the border to `initial` which is just `none`, so nothing renders. This is causing at least 1 test to pass when it actually fails.

I changed it so we ignore setting this value if the style is one of these values. I then re-ran the gentest code and excluded the now failing test (which gets fixed in my static stack).

Reviewed By: NickGerleman

Differential Revision: D51831754

fbshipit-source-id: a325e4a42b2d7cd6f19efc6cd5a2445574467fb7
2023-12-05 13:30:03 -08:00
Nicola Corti
7b3b66d288 Re-enabled disabled tests ReactPropForShadowNodeSpecTest and ReactPropForShadowNodeSetterTest (#1494)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1494

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

Those tests are currently disabled due to Yoga attempting to do JNI calls.
I've added infra to bypass .so loading during tests, and we should be good to re-enable those tests by now.

Changelog:
[Internal] [Changed] - Re-enabled disabled tests ReactPropForShadowNodeSpecTest and ReactPropForShadowNodeSetterTest

Reviewed By: NickGerleman

Differential Revision: D51814491

fbshipit-source-id: adbbace19c94a0c6d8947f61221fafafd7797ac8
2023-12-05 07:14:20 -08:00
Joe Vilches
59bf902a17 Insets no longer apply to statically positioned nodes (#1454)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1454

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

One of the most basic aspects of statically positioned nodes is that [insets do not apply to them](https://developer.mozilla.org/en-US/docs/Web/CSS/position#static). So I put a guard inside `Node::relativePosition` where we take that into account when setting the position.

Reviewed By: NickGerleman

Differential Revision: D50507808

fbshipit-source-id: 7aab4138b06e60936db0ddb6019a9a30f1ded2db
2023-12-04 19:35:30 -08:00
Nick Gerleman
382faa3f44 Change default back to position: "relative" (#1469)
Summary:
X-link: https://github.com/facebook/react-native/pull/41480

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

The previous version of static didn't do anything inside of Yoga. Now that we're making it do something, this changes the default back to relative so that users with no errata set don't see their deafult styles changing.

Reviewed By: joevilches

Differential Revision: D51182955

fbshipit-source-id: c0ea357694e1367fb6786f1907dfff784b19a4bc
2023-11-28 18:51:34 -08:00
Nick Gerleman
12a8d16b62 Remove Yoga-internal.h (#1452)
Summary:
X-link: https://github.com/facebook/react-native/pull/41346

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

This removes the last remnant from `Yoga-interna.h`, `YGNodeDellocate()`. The API is renamed to `YGNodeFinalize` to give it the explicit purpose of freeing the node from a garbage collector, and made public with that documented contract.

With that, every top-level header is now a public API, and Yoga's JNI bindings do not need to rely on private headers anymore.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D51014340

fbshipit-source-id: 553f04b62c78b76f9102cd6197146650955aeec5
2023-11-07 21:27:59 -08:00
Nick Gerleman
9eb8a62739 Remove YGNodeMarkDirtyAndPropagateToDescendants (#1448)
Summary:
X-link: https://github.com/facebook/react-native/pull/41305

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

This should not be part of Yoga's API. If benchmarks want to do this, they still can (though I don't know the ones we have for it are super valuable).

Reviewed By: javache

Differential Revision: D50963933

fbshipit-source-id: 6482bd269928188b6469a358ffde5c4f9f5f9527
2023-11-07 21:27:59 -08:00
Joe Vilches
283e3203f6 Fix issue where absolute children of row-reverse containers would inset on the wrong side (#1446)
Summary:
X-link: https://github.com/facebook/react-native/pull/41293

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

NickGerleman pointed out that my recent changes to fix the slew of row-reverse problems in Yoga actually ended up regressing some parts. Specifically, absolute children of row-reverse containers would have their insets set to the wrong side. So if you set left: 10 it would apply it to the right.

Turns out, in `layoutAbsoluteChild` there were cases where we were applying inlineStart/End values to the flexStart/End edge, which can never be right. So I changed the values to also be flexStart/End as the fix here.

Reviewed By: NickGerleman

Differential Revision: D50945475

fbshipit-source-id: 290de06dcc04e8e644a3a32c127af12fdabb2f75
2023-11-07 11:02:20 -08:00
Joe Vilches
484118c89b Change gentest to only write position relative to parent
Summary:
`child.offsetLeft/Top` calculates the offset from child to its nearest positioned ancestor, not its direct parent. These are often the same and have not mattered in the past since we have not supported position static. Since are are in the process of supporting that, we would like our tests to be usable so this adjusts the gentest methodology to only speak the same language as Yoga - that is left/top are always relative to direct parents.

It works by using `getBoundingClientRect().left/top` instead. Then we pass that down to children and subtract it from the childs `getBoundingClientRect()` to get the position relative to the parent. Note we have to round the final result as `child.offsetLeft/Top` is rounded.

Reviewed By: NickGerleman

Differential Revision: D51053629

fbshipit-source-id: 8809588d12953565228ae50fdf38197213c46182
2023-11-07 09:57:04 -08:00
Joe Vilches
4f98bfe40a Add tests for absolute positioning of children with padding in the parent
Summary:
I was playing around with absolute children and padding and noticed an issue so adding tests to track.

Made a github issue: https://github.com/facebook/yoga/issues/1436

Reviewed By: yungsters

Differential Revision: D50670457

fbshipit-source-id: 4672d1e8b831a0a42509d95e91178944fc0f5c06
2023-10-26 10:12:04 -07:00
Joe Vilches
52ae53a7c8 Add errata supporting changes to position: static (#1434)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1434

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

I will use this errata to gate my changes that actually make position: static behave like the web. We have future plans to make position: relative the default again but users could still have declared certain nodes as position: static, so I think this is needed regardless.

Reviewed By: NickGerleman

Differential Revision: D50506915

fbshipit-source-id: b0d9e6883167de6ff002352c9288053324464cb9
2023-10-23 18:20:24 -07:00
Joe Vilches
6cc9e58246 Add more tests to eventually test position: static
Summary:
Doing some test-driven-development to support this feature, so I will start by adding a ton of tests to ensure the nuance of position: static is captured in Yoga. Specifically I have a slew of tests to capture:

* Insets have no effect on static elements
* Insets are relative to the nearest non-static ancestor
* Percentage values for insets, padding, and margin of absolute children respect the correct dimension of the nearest non-static ancestor
  * Also added similar ones for static and relative children which should just respect their ancestor (static only because it is a flexbox by default)
  * This rule does NOT apply to border
* The containing block for absolute children is the padding box of their nearest non-static ancestor
* The containing block for static children is the content box of their parent (because all elements are flex containers in yoga, at least right now)

Reviewed By: NickGerleman

Differential Revision: D50475939

fbshipit-source-id: 7988ffc9bea3317875128dd1908d787b9b714a45
2023-10-23 18:20:24 -07:00