Commit Graph

121 Commits

Author SHA1 Message Date
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
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
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
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
a20559063e Regenerate YGStaticPositionTest.test.ts that was failing github CI checks (#1447)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1447

Just ran

```
ruby xplat/yoga/gentest/gentest.rb
```

It seems that D50453324 changed a bunch of the import directories in these test files but for some reason it did not get picked up for this test. As a result we are seeing failing github checks like https://github.com/facebook/yoga/actions/runs/6738747977/job/18318958442. Should be good now.

Reviewed By: yungsters

Differential Revision: D50951161

fbshipit-source-id: a2472022782f64f840a64ed991f5f35c3ef556dc
2023-11-02 16:52:18 -07:00
Nick Gerleman
ef1d772447 Consolidate JavaScript Flavors (#1433)
Summary:
Fixes https://github.com/facebook/yoga/issues/1417

This dramatically simplifies the matrix of Node vs web, ASM vs WASM, sync vs async compilation, or CommonJS vs ES Modules. We have one variant, using wasm, with ESModule top-level await to do async compilation. Web/node share the same binary, and we base64 encode the WASM into a wrapper JS file for compatibility with Node and bundlers.

This has some downsides, like requiring an environment with top level await, but also has upsides, like a consistent, sync looking API compatible with older Yoga, and mitigating TypeScript issues with package exports and typings resolution.

As part of this work I also removed `ts-node` from the toolchain (at the cost of a couple of config files needing to be vanilla JS).

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

Test Plan:
1. `yarn test`
2. `yarn lint`
3. `yarn tsc`
4. `yarn benchmark`
5. `yarn build` website-next
6. `yarn lint` website-next
7. Locally test website-next
8. Examine package artifact created by GitHub
9. All Automation passes

Reviewed By: yungsters

Differential Revision: D50453324

Pulled By: NickGerleman

fbshipit-source-id: fe1192acc69e57fa69a1ff056dd7b5844d2198d5
2023-10-31 20:41:38 -07: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
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
Joe Vilches
2ea4c043fd gentest support for position: static + initial test
Summary:
I am about to embark on supporting `position: static` in Yoga. The enum exists already (and is the default position type, lol) but does not actually do anything and just behaves like `position: relative`.

My approach here is to write a bunch of tests to test for the various behaviors of static positions and then develop on Yoga afterwards to get those tests passing. To do this, we need to make a few changes to the gentest files as there is not support for adding `position: static` at the moment:

* Make it so that the gentest code can physically write `YGPositionTypeStatic` if it encounters `position: static` in the style
* Make it so that gentest.js knows that Yoga's default is actually static. This way the code generated in the tests will actually label nodes for non default values
* Explicitly label the position type even when it is not declared in the style prop (with the exception of the default)
* Regenerate all the tests

Additionally I added the first, basic test: making sure insets do nothing on a statically positioned element.

Reviewed By: NickGerleman

Differential Revision: D50437855

fbshipit-source-id: 0e8bbf1c224d477ea4592b7563d0b70d2ffa79c8
2023-10-23 18:20:24 -07:00
Joe Vilches
7e91004b90 Remove skips on passing position tests and add errata tests
Summary: Now that the tests are passing let's not skip it anymore. Also adding errata tests to make sure most prod builds are still protected.

Reviewed By: NickGerleman

Differential Revision: D50390993

fbshipit-source-id: cb91a7a377e919eaca24fb25e3d73d3c92eb8931
2023-10-18 17:30:18 -07:00
Joe Vilches
2668e8e70c Fix row-reverse flex direction fixtures
Summary:
These tests were a bit weird for testing something with position. The gentest setup makes it so that the fixtures are wrapped in a absolutely positioned container with height and width bot 0. However, the generated yoga tests do NOT do this and instead have the root node as the fixture itself with no wrapping container.

This causes a problem when testing left/right/top/bottom position insets. Because left/right/top/bottom will position the element relative to its containing block when position is absolute, we will get different values on yoga and chrome even if the implementation is correct: https://developer.mozilla.org/en-US/docs/Web/CSS/right#description

To fix this, we just wrap the fixture in a set size div that is also absolutely positioned.

The file was also formatted.

Reviewed By: NickGerleman

Differential Revision: D50389229

fbshipit-source-id: ecd23939b973225cfb0611dc87f30c262952c5fc
2023-10-18 17:30:18 -07:00
Nico Burns
0d28b283e2 Support "align-content: space-evenly" (#1422)
Summary:
X-link: https://github.com/facebook/react-native/pull/41019

### Changes made
- Regenerated tests (as some aspect ratio tests seem to be out of date compared to the fixtures)
- Added SpaceEvenly variant to the "Align" enums (via enums.py)
- Implemented `align-content: space-evenly` alignment in CalculateLayout.cpp
- Added generated tests `align-content: space-evenly`
- Updated NumericBitfield test to account for the fact that the Align enum now requires more bits (this bit could do with being reviewed as I am not 100% certain that it's valid to just update the test like this).

### Changes not made
- Any attempt to improve the spec-compliance of content alignment in general (e.g. I think https://github.com/facebook/yoga/pull/1013 probably still needs to happen)

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

Reviewed By: yungsters

Differential Revision: D50305438

Pulled By: NickGerleman

fbshipit-source-id: ef9f6f14220a0db066bc30db8dd690a4a82a0b00
2023-10-17 20:59:51 -07:00
Joe Vilches
2e2c124c28 Revamp tests for row reverse + padding after fix
Summary: no longer skip passing tests + add errata tests

Reviewed By: NickGerleman

Differential Revision: D50282417

fbshipit-source-id: 515600111c1ad7b15e40cfe5a3894e40c241c559
2023-10-17 20:30:16 -07:00
Joe Vilches
b558059b74 Revamp tests for row reverse + border after fix
Summary: this is fixed now so we can turn it on

Reviewed By: NickGerleman

Differential Revision: D50348206

fbshipit-source-id: 61c2a72164c6f0ee91b1b5b576d3f129e8cfbe40
2023-10-17 20:30:16 -07:00
Joe Vilches
3fbd92bc3b No longer skip margin_start and margin_end row reverse tests
Summary: These are fixed now!

Reviewed By: NickGerleman

Differential Revision: D50200030

fbshipit-source-id: ac3e80e33d8c35440e342a10cfd3246161ee9018
2023-10-12 16:22:27 -07:00
Eric Rozell
50ecd98141 Add test fixture to reproduce bug in aspect-ratio (#1421)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1421

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

Reviewed By: NickGerleman

Differential Revision: D50225804

fbshipit-source-id: 0494e0373dcdebc789715b2ec19c002a47d69ce0
2023-10-12 15:02:00 -07:00
Joe Vilches
bac658b4f5 Add row reverse tests for position
Summary: after looking into the issue described in https://github.com/facebook/yoga/issues/1208 it seems to apply to position too, so adding tests to confirm

Reviewed By: NickGerleman

Differential Revision: D50154056

fbshipit-source-id: 64dd04ce3ad765526a547fe60b699b664f251c06
2023-10-11 14:02:39 -07:00
Joe Vilches
799624b9a5 Add row reverse tests for border
Summary: after looking into the issue described in https://github.com/facebook/yoga/issues/1208 it seems to apply to border too, so adding tests to confirm

Reviewed By: NickGerleman

Differential Revision: D50153472

fbshipit-source-id: a50f3e040153086b6a573924b513919dbb94f3c0
2023-10-11 14:02:39 -07:00
Joe Vilches
9d9b1f0874 Add row reverse tests for padding
Summary: after looking into the issue described in https://github.com/facebook/yoga/issues/1208 it seems to apply to padding too, so adding tests to confirm

Reviewed By: NickGerleman

Differential Revision: D50153085

fbshipit-source-id: bad0ef50389a71a45ec3a58d87c1dea0c2b26024
2023-10-11 14:02:39 -07:00
Joe Vilches
e60ae290ea Add fixtures to test proper margins with reverse flex directions
Summary:
Yoga has a known bug where marginStart and marginEnd will swap with row-reverse flex direction. This is not the intended behavior. On Paper this is also an issue with marginLeft and marginRight (at least we think Paper is the culprit, not exactly clear yet).

margin-start (and end) is not actually valid css. The gentest.rb script will just turn this into margin-left, but the cpp generated will properly test marginStart. This seems a bit weird to be since marginStart != marginLeft AFAIK. Things like RTL and LTR modes might make this test not exactly right. But given how many other tests depend on this quirk I think it is fine to add as is - the end result is the same after all. If not, a followup would be to add support for mapping margin-inline-start (valid css) to marginStart.

Anyway, this diff is to add test coverage for this scenario. Next stop is to actually try to fix this problem, which may be a bit harder :P

See https://github.com/facebook/yoga/issues/1208 for more info.

Reviewed By: NickGerleman

Differential Revision: D49744271

fbshipit-source-id: 75b8dd0cc5c53b2f338476fb70b60006aaa89054
2023-10-03 11:31:34 -07:00
jlmip
07cabca526 Fixed issue with first line element gap handling. (#1408)
Summary:
If the first element of a line is not contributing (e.g. position absolute), an additional gap will be added to the line, because the first gap element of the line is never identified (wrong start index).
Fix: raise the index of the first line element until we find an element that is contributing to the line.

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

Reviewed By: yungsters

Differential Revision: D49722065

Pulled By: NickGerleman

fbshipit-source-id: 1068cb0b11ae4b04ec8d063e70540cce06181d5a
2023-10-03 06:24:48 -07:00
Nick Gerleman
c60050d0cb Fixup hack for flex line size calculation (#1380)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1380

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

Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified.

During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element.

For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized.

There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching.

{F1091401183}

The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history.

`betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size.

Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_

See the original conversation on https://github.com/facebook/yoga/pull/1188

Reviewed By: javache

Differential Revision: D49260049

fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
2023-09-14 20:26:31 -07:00
Nick Gerleman
0aec0a1ac4 Remove YGExperimentalFeatureFixAbsoluteTrailingColumnMargin (#1317)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1317

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

This is edge-casey enough, and I actually broke this in D42282358 without us noticing (I changed height to width of the bottom usage, instead, copy/pasting the value of the top one).

Reviewed By: yungsters

Differential Revision: D45766764

fbshipit-source-id: b600b79b8436534fe48ef2acbfde8ba64068e593
2023-06-29 11:04:01 -07:00
Nick Gerleman
149849d22b Move generated Jest tests to TypeScript (#1287)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1287

Outputs tests as TypeScript, along with using/testing the new form of enums imported directly from the package.

We need to change how we are telling Jest which variant to run, so that tests can import enums from "yoga-layout" and have it resolve to the entrypoint which has a binary which has already been built.

Reviewed By: yungsters

Differential Revision: D45723545

fbshipit-source-id: 887d929344a78cadec159a07c643b74b76b87c6c
2023-05-10 22:46:39 -07:00
Nick Gerleman
e769dd97d8 Add data-disabled to test fixtures (#1286)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1286

This can be marked in fixtures to skip a test without commenting it out. We add one more usage of this.

The same functionality existed (unused) before for `experiments`, which I changed to `data-experiments`.

Formatting of JS tests changed to be closer to what Prettier would output, and to remove usage of `Yoga.UNDEFINED` which doesn't existi and just resolves to `undefined` (this is converted to NaN by the wrapper layer).

Reviewed By: yungsters

Differential Revision: D45723003

fbshipit-source-id: 337af319ab1c1c12047d6579da8c7e63b4f1537a
2023-05-10 22:46:39 -07:00
Nick Gerleman
af89315fd4 Fixup TypeScript with export maps (#1284)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1284

This makes TypeScript resolution play nicely with export maps, and converts the entrypoints to TypeScript.

We remove the non-export-map fallbacks as well, so the export maps are always followed.

Tests are moved to load yoga from its external export, testing the entrypoints.

This moves the only untyped bit to the binary wrapper, which another diff will move.

Reviewed By: yungsters

Differential Revision: D45713689

fbshipit-source-id: 228e6f2c9d53520230707a81e76c3c35fcd46de5
2023-05-09 22:21:01 -07:00
Nick Gerleman
0a6a581936 Match xplat/yoga/javascript prettier conventions
Summary:
Match Prettier config to match other Meta OSS projects

Didn't update the test generator to use this form yet.

Reviewed By: yungsters

Differential Revision: D45570415

fbshipit-source-id: d5fd791b047debf41c28aecac75fb8dde16da3e3
2023-05-09 15:35:42 -07:00
Nick Gerleman
0cb4a49d38 Convert manually authored tests to TypeScript
Summary: Converts the manually authored tests against the JavaScript bindings to TypeScript. This should make authoring UTs a bit more pleasent, but more importantly lets us run typechecking on sample usage of all of the various APIs.

Reviewed By: yungsters

Differential Revision: D45570416

fbshipit-source-id: 44586b4d31fbeae406b388ed336a8305c788b5dd
2023-05-09 15:35:42 -07:00
Nick Gerleman
44ea3c1555 Add types to scripts and config files (#1277)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1277

Now that we have some TypeScript infra set up, move scripts (mainly the benchmarking one) and config files to TypeScript.

Starts to move away a bit from the magic globals used in the JS environment.

Reviewed By: yungsters

Differential Revision: D45511176

fbshipit-source-id: 09bb1117a1b331758ed9d210e82d5b250577df81
2023-05-04 08:11:04 -07:00
Nick Gerleman
893b3e3957 Add JavaScript bindings for Errata API (#1260)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1260

Wire C ABI to embind to expose to JS

Reviewed By: yungsters

Differential Revision: D45297215

fbshipit-source-id: ef832ad423703496a550b864ebee70525a858b50
2023-04-27 13:53:45 -07:00
Dmitry Ivakhnenko
ba38a2c784 Flex basis auto is mysteriously missed again (#1225)
Summary:
- adds a test to check that `setFlexBasisAuto` is here

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

Reviewed By: javache

Differential Revision: D43150473

Pulled By: NickGerleman

fbshipit-source-id: b5b82fe4a5db069d3ed5672990c9b8ade9141296
2023-02-09 02:15:43 -08:00
Dmitry Ivakhnenko
5496554cbf fix breaking change in setMeasureFunc after emscripten migration (#1219)
Summary:
current `MeasureFunc` is stricter than the previous one and when it returns only one dimension object yoga throw `TypeError: Missing field:  "height"` or `TypeError: Missing field:  "width"`

this is a breaking change and `react-pdf` use this feature a lot, so i wanna return the previous behavior back

codesandbox with reproduction on `yoga-layout-prebuilt`: https://codesandbox.io/s/yoga-layout-measure-callback-wrong-data-1l9133

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

Reviewed By: NickGerleman

Differential Revision: D42778696

Pulled By: jacdebug

fbshipit-source-id: 2fb87be74f456ee34273655f2c47f62360001895
2023-01-26 16:09:23 -08:00
Nick Gerleman
7e96b65790 Import "Fix percent absolute position and size calcuate different with web" behind experimental feature (#1028) (#1201)
Summary:
Fixes https://github.com/facebook/yoga/issues/850

https://github.com/facebook/yoga/issues/850 describes a conformance issue where positioning of an absolute child using percentages is not calculated against the correct box size.

This takes the fix for that in https://github.com/facebook/yoga/pull/1028, regenerates tests, and fixes tests so that the experimental feature can be enabled. Goal is to run this as an experiment internally to see if we can enable by default.

Changelog:
[Internal]

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

Reviewed By: yungsters

Differential Revision: D42282358

Pulled By: NickGerleman

fbshipit-source-id: 57c0dd9b0f1c47cb9335ff6e13d44b4646e5fa58
2023-01-08 13:41:27 -08:00
Dmitry Ivakhnenko
1813748eaa Revive JavaScript Bindings (#1177)
Summary:
Yoga's JavaScript bindings do not work past Node 10, or on recent versions of Ubuntu even using it. This is due to a reliance on `nbind`, a library which is no longer maintained. `nbind` itself abstracts over `embind` running Emscripten to generate an asm.js build, along with building Node native modules. In the meantime, [yoga-layout-prebuilt](https://www.npmjs.com/package/yoga-layout-prebuilt) has been used by the community instead of the official package.

https://github.com/facebook/yoga/pull/1177 was contributed as a conversion of bindings created using `nbind` to instead use `embind` directly.

I continued building on this to add more:
1. WebAssembly support (required to be async in browsers)
2. CMake + Ninja Build for the 4 flavors
3. TypeScript typings (partially generated)
4. yarn scripts to build (working on macOS, Ubuntu, Windows)
5. A README with some usage and contribution instructions
6. Updated tests to work with Jest, and updated general infra
7. ESLint and clang-format scripts
8. More GitHub actions (and now testing Windows)
9. Probably more I kinda got carried away here lol

The plan is to eventually publish this to NPM, but there is a little bit of work after this before that happens.

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

Test Plan: The bindings pass Jest tests (both manual and generated). GitHub actions added for the different yarn scripts. Did some manual checks on using the library as TS.

Reviewed By: christophpurrer

Differential Revision: D42207782

Pulled By: NickGerleman

fbshipit-source-id: 1dc5ce440f1c2b9705a005bbdcc86f952785d94e
2022-12-28 01:27:12 -08:00
Nishan
ba27f9d1ec fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)
Summary:
Fixes - https://github.com/facebook/react-native/issues/35553

## Approach
We're using `betweenMainDim` to add [gap between](bbeede82d3/yoga/Yoga.cpp (L2495)) items in main axis. This is resulting in increased [main axis](bbeede82d3/yoga/Yoga.cpp (L2598)) dimension of the container as it gets added even for the last element. One solution is to keep using it and subtract the gap when last element is reached.

## Aside
Mutating this value feels weird, but I think `betweenMainDim` gets initialized for every line so should be fine? I did some manual tests to verify. I tried running tests but I'll have to downgrade the java version. Let me know if anything fails. Thanks! 🙏

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

Test Plan: Added fixtures which previously failed but now pass.

Reviewed By: necolas

Differential Revision: D42078162

Pulled By: NickGerleman

fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
2022-12-15 16:30:37 -08:00
Nick Gerleman
5a257aac85 Add tests for gap interaction with child margins
Summary:
Adds a couple test fixtures to validate the interaction of flex gap with children with margins. In both Yoga, and web browsers, these are additive vs collapsing.

Fixes a couple misspellings as well that weren't caught during review.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D41343407

fbshipit-source-id: 427f94faf248901517feff24d334f17ccb85266b
2022-11-16 14:02:31 -08:00
Nick Gerleman
efefc1eb7f Use lowercase @generated in tests
Summary:
The presence of lowercase "generated" anywhere in a file means Phabricator and Meta's fork of VSCode will treat the file as generated. Change generated tests to use the exact string.

Changelog:
[Internal]

Reviewed By: yungsters

Differential Revision: D41312171

fbshipit-source-id: 2bc8ef450d8377ffbacf443043d115a418db4a2e
2022-11-15 19:51:48 -08:00
Nick Gerleman
8166c81135 Incorporate gap space into main axis overflow flag (#1173)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1173

In https://github.com/facebook/react-native/issues/35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap.

In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization?

If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead.

`flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`.

We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap.

Changelog:
[General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched

Reviewed By: yungsters

Differential Revision: D41311424

fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
2022-11-15 19:51:48 -08:00
Nick Gerleman
c2a0ccf0d4 Add tests for row-gap and column-gap
Summary:
This adds the fixtures from https://github.com/facebook/yoga/pull/1116 and generates tests.

This adds a good amount of coverage, but I plan to follow up with a diff adding a bit more, e.g. for interactions with flex direction of column when we should no-op, etc. I also discovered the current fixtures do not allow testing shorthand props like "gap" without changes.

This also updates the `webdrivers` gem to respond to a break with chromedriver on m1 macs from 4 days ago https://github.com/titusfortner/webdrivers/pull/239.

Reviewed By: yungsters

Differential Revision: D39922413

fbshipit-source-id: dfc7bda894be8dfcb24e25c19a4df0b09a72ce7e
2022-10-13 08:18:49 -07:00
Nick Gerleman
c96564d23d Fix License Headers and Whitespace
Summary: This change applies all Arcanist recommended lint changes, which amounts to changing copyright headers and some cases of whitespace changes.

Reviewed By: yungsters

Differential Revision: D40060899

fbshipit-source-id: b62f9472e6ef58a3fc3d22eed661578a2635cb1f
2022-10-04 13:59:32 -07:00
Nick Gerleman
585df10ee8 strech -> stretch
Summary: This replicates https://github.com/facebook/yoga/pull/760, to fix a typo around align-items. It does not have an effect on the tests themselves, since align-items defaults to stretch, and the test generator omits CSS properties of a default value.

Reviewed By: yungsters

Differential Revision: D40060324

fbshipit-source-id: da0565f2ad17e3e4e0f541a1c7006cdeeb991ece
2022-10-04 08:51:51 -07:00
Nick Gerleman
fd180de774 Fix Generation of Tests from Fixtures
Summary:
https://github.com/facebook/yoga/pull/1116 added a change to the test generator "gentests.rb" to support a newer version of chromedriver, along with a change to the enum generator (not touched in this diff) to produce code consistent with the current tests, which seem to have been manually edited since last generation.

I had trouble running the test generator locally, because it relies on unversioned third-party dependencies, whose APIs change. Looking at source history, it seems like each time someone wants to run the script, they end up updating its syntax to match whatever versions they pull in.

This change adds a Gemfile and lock so that that the version of "watir" is locked, and so that we will also automatically pull in a consistent "chomedriver" version via the "webdrivers" gem. It includes the updates from the PR to be consistent with already output tests, and I have also updated the copyright header generation to no longer create lint warnings on newly generated tests (some of the previous ones were fixed manually it looks like).

The test generator would still produce bodies which would fail clang-format, and were manually edited (causing generation to emit new lint warnings), so I updated the generator to suppress clang-format in the body of the generated files.

Three tests, around the interaction of minimum dimensions and flexible children produce different results in Chrome now compared to when the tests were added, so running `gentests.rb` creates tests which break UTs. This doesn't seem like any sort of rounding, or device specific difference, so I have disabled these tests for now. While digging around, it does look like Chrome periodically will fix bugs in its own layout implementation which cause differences, like https://bugs.chromium.org/p/chromium/issues/detail?id=927066

Reviewed By: rozele, Andrey-Mishanin

Differential Revision: D39907416

fbshipit-source-id: f88714ff038b42f935901783452df25eabb6ebb1
2022-09-29 22:25:24 -07:00
Eric Rozell
342aebe1d7 Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute (#1068)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1068

There is an issue in react-native when the Yoga node position type is set to absolute and display: none is set where the node layout calculation gives the absolute dimensions, rather than the expected 0 x 0.

Here are some OSS issues tracking this:
https://github.com/facebook/react-native/issues/18415
https://github.com/microsoft/react-native-windows/issues/7289

## Changelog

[General] [Fix] - Fixes layout of nodes with YGDisplayNone and YGPositionTypeAbsolute

Reviewed By: Andrey-Mishanin

Differential Revision: D26849307

fbshipit-source-id: 197618aa3c4e1b3b7efeba7ea4efd30b2d1c982d
2021-03-10 13:10:32 -08:00
Sidharth Guglani
adff8d96dd remove getInstanceCount usages
Summary:
This diffs removes the usages of getInstanceCount as it has been removed from yoga.
We will add event support in js later to handle these test cases

Reviewed By: davidaurelio

Differential Revision: D16560269

fbshipit-source-id: 52590c426faf87209f8635602b401fd5760af8ab
2019-07-31 06:48:06 -07:00
David Aurelio
bc7e504b29 Fix bugs around align-content
Summary:
@public

Regenerating the “golden master” tests with chrome surfaced different bugs around `align-content`:

- a misunderstanding that values in `align-content` only applied *if there is only one line.* In fact, it applies *every time* a container is set to `flex-wrap: wrap`. Chrome had this wrong, and as such our tests were generated with incorrect parameters.
- empty children growing to the cross axis size of the container, even when `align-content` is different from `stretch`. This was implemented incorrectly in Chrome as well. Here, we fix it with an extra check.

Reviewed By: SidharthGuglani

Differential Revision: D14725402

fbshipit-source-id: a45bebdadb9c694dc0eb7e27cb52b3d247f81c50
2019-04-08 03:20:27 -07:00
David Aurelio
1fc8472d35 gentest: allow for different default values
Summary:
@public

We use Chrome for generating test cases, which since v67 (or so) for `min-width` and `min-height` has a default value of either `0px` (CSS 2) or `auto` (CSS 3), depending on style properties.

Our setup only allowed for a single default value, and our test cases produce *both.*
This changes the test gen logic to allow for more than one value.

Reviewed By: SidharthGuglani

Differential Revision: D14682387

fbshipit-source-id: e76361f5cc0b88f9c2d74a5f3248c66abd6907a7
2019-03-29 06:32:21 -07:00