Commit Graph

2611 Commits

Author SHA1 Message Date
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
Cheng Zhao
2a8c7a4223 std::terminate belongs to <exception> header (#1511)
Summary:
X-link: https://github.com/facebook/react-native/pull/41917

See also https://en.cppreference.com/w/cpp/error/terminate.

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

Reviewed By: christophpurrer

Differential Revision: D52072882

Pulled By: NickGerleman

fbshipit-source-id: 4d4d442b82d108d1d2ff5d241fbdc8df89045fed
2023-12-17 00:47:44 -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
Nick Gerleman
baf95897cb Enable lints for React Components (#1515)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1515

The out-of-the-box docusaurus template doesn't enable linting for React components. This enables those, fixes the errors, and does dome cleanup around the area (e.g. autofocus is a lot more sane).

Reviewed By: vincentriemer

Differential Revision: D52156109

fbshipit-source-id: f32fede3ec4f8a42ecb7f9d77caa2a30581f35ee
2023-12-15 22:46:58 -08:00
Joe Vilches
bac80cafba Add minimist dep to package.json (#1522)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1522

I have the types but not the core

Reviewed By: NickGerleman

Differential Revision: D52216588

fbshipit-source-id: ec348537655213f6d8a3b35402fec03998744c78
2023-12-15 16:26:31 -08:00
Joe Vilches
7aee99567a Change readme yarn link (#1521)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1521

I linked the forked version of yarn when in reality it should be yarn classic

Reviewed By: NickGerleman

Differential Revision: D52215925

fbshipit-source-id: 5d5800d162f2cc250fcf54151de0de87a427abc2
2023-12-15 16:26:31 -08:00
Joe Vilches
43d09a3a94 GitHub workflow to ensure tests are up to date (#1505)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1505

This will ensure that all tests are not modified by hand and that gentest was run if needed (i.e. someone edited those files and forgot to update the tests). Not sure if this works right now, need to export to github and see what happens :)

Reviewed By: NickGerleman

Differential Revision: D52002920

fbshipit-source-id: 1ee033eda04eeba5d01885488bfe8078e7b2f386
2023-12-14 11:48:22 -08:00
Joe Vilches
06c792a407 Create gentest-validate script to validate test signatures (#1504)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1504

I aim to consume this via a github action or workflow. Separating out the CI configuration from the actual script. We could and should maybe change this script to take in arguments for the test dirs so it is more configurable, but getting the barebones down right now.

Reviewed By: NickGerleman

Differential Revision: D51999865

fbshipit-source-id: 5792c6eec5692943518fecefc6226d784c6f0ad8
2023-12-14 11:48:22 -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
e1b59d63a7 Update README with new instructions on how to run the gentest script (#1502)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1502

We should change this if we are moving away from using Ruby

Reviewed By: yungsters, NickGerleman

Differential Revision: D51957351

fbshipit-source-id: fddb0b3348db2b93c661c919a61150c81906a61a
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
fba32ebf14 Add command line options to new node-based gentest (#1499)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1499

This uses the minimist library to parse the command line easily for flags and options. I added over the same ones in the ruby script (-f and -s).

Reviewed By: yungsters, NickGerleman

Differential Revision: D51877810

fbshipit-source-id: 643606cad25609ed2567bb63470818b81ebef531
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
Nick Gerleman
43cb24fdce Fix playground handling of visible scrollbars (#1514)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1514

On machines with scrollbars, we shouldn't show them unconditionally, and the toolbar should be in the area within them.

This also fixes a couple bugs:
1. Preview not rendering based on correct code when light/dark mode changes
2. Crash on start on mobile safari
3. Incorrect rendering of preview on mobile safari

This also fixes a bug where the playground re-rendering (e.g. on theme change) makes the preview snap back to the initial code passes.

https://yoga-website-next-git-fork-nickgerleman-exp-194d90-fbopensource.vercel.app/

Reviewed By: shwanton

Differential Revision: D52145666

fbshipit-source-id: 50184305987aab4cbcd066f37582997dfdc78c02
2023-12-13 20:05:29 -08:00
Nick Gerleman
738d04fcb0 Fix OSS JS Build (#1512)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1512

Latest revision either never got exported, or didn't block land? Fix the typo.

Reviewed By: joevilches

Differential Revision: D52087122

fbshipit-source-id: 2dfcff4925902bdd1dd210a219a78707186fd28e
2023-12-12 13:11:01 -08:00
Nick Gerleman
c01c4cbb82 Backfil Yoga 2.0 Release notes to blog (#1508)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1508

Backfilling the release notes already on GitHub before the next time we want to do a release, and use the Docusaurus blog.

Reviewed By: yungsters

Differential Revision: D52012362

fbshipit-source-id: 35de017017943ed21263a4a9aeaa0fd1418c2bc7
2023-12-12 09:06:58 -08:00
Nick Gerleman
77742af676 Replace Playground with JSX Editor (#1500)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1500

Inspired by the frequent usage of Expo snacks to run RN, to repro Yoga issues, this replaces the Playground port with a new ground up Playground UI. This UI right now is pretty simple, with a JSX editor which creates a Yoga tree, which is then rendered using the WebAssembly variant of Yoga.

There are a lot of ways we can continue to improve this, but this merges the foundation. Subjectively, I find this more useful as a tool to play with Yoga behavior than the GUI.

This also replaces some of the bits of the homepage, and adds a playground entrypoint (though it's pretty identical to the one I've been testing on the home page).

Reviewed By: yungsters

Differential Revision: D51963201

fbshipit-source-id: 1265cb1784151b685686e189d47ecd42cbacdf8f
2023-12-12 09:06:58 -08:00
Nick Gerleman
0d03d8a06d Manage native build toolchain (#1506)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1506

In order to build the website, you must build a Yoga binary. This usually requires installing native toolchains.

We have warning messages for these right now, but an even better solution is to just manage the dependencies ourselves. This does that, bringing in specific CMake and Ninja binaries from NPM, and caching a local copy of Emscripten during the build.

A downside is that the CMake packages are chunky, so we add 130MB to node_modules (for a repo total around 350MB). This also delays acquiring Emscripten (which is even chunkier) in CI builds until it is needed, and I added some caching for it as well.

The upside of JS users being able to run and test (inc the website) without installing and managing their own versions of toolchains is a real time-saver though, and is probably worth it.

allow-large-files

Reviewed By: yungsters

Differential Revision: D52013026

fbshipit-source-id: 3d307f751463a21c5e5d5b98b8e9e63db9d3d52e
2023-12-12 09:06:58 -08:00
Nick Gerleman
a43754266a <bit> and <concepts> (#1497)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1497

The lowest common denominator we have had for Yoga has been Clang 12 + MSVC 2017 stdlib. This has allowed Yoga to use C++ 20 language features, but not library features. React Native for mobile has not been bound to this restriction.

Builds using that toolchain are being updated to latest MSVC 2019 stdlib (which has good C++ 20 library support), along with Clang 17 (or maybe a stop at 15) pending projects using `-fcoroutines-ts` being migrated to C++ 20.

This tests out some C++ 20 standard library usages against the current Clang 12 + MSVC 2019 stdlib toolchain that didn't work before, and adds a couple concepts for better constraints/compiler error messages if misused.

This bumps min-tested XCode (and minimum required) version to 14.3, matching a similar change for React Native. This should probably be bumped to 15 sometime before Apple starts requiring 15+ to go out to the iOS app store.

We are approaching a practical support range of:
1. XCode >= 14.3
2. NDK >= 26
3. Clang/libc++ >= 14
4. GCC/libstdc++ >= 11
5. MSVC >= 16.11 (VS 2019)

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D51604487

fbshipit-source-id: d394d0d86672b69781b8ae071d87adcf944ddc72
2023-12-12 08:52:11 -08:00
Nick Gerleman
ab37ed70ae Add concurrency group for website publish (#1510)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1510

Make each workflow acquire a shared mutex so that if two commits happen close to each other, the publish order must correspond to commit order.

Reviewed By: cortinico

Differential Revision: D52031970

fbshipit-source-id: 960cd8e8f79b26ab3d9c131e0637b795618d898e
2023-12-12 07:07:56 -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
a5c955a579 Relayout test for containing block changing size (#1483)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1483

This test is for ensuring caching does not break layout when a CB changes. No changes were needed to get this passing it just works this way with the implementation we chose earlier.

Reviewed By: NickGerleman

Differential Revision: D51333812

fbshipit-source-id: b3b603fc641d470cb61e63c44c71f7544f3c7727
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
dde0fda9f5 New file for layout methods related to absolute children (#1495)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1495

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

This is a copy of D51369722 to make it so that it preserves the file history

CalculateLayout.cpp is massive and approaching 3k lines. I added a few large functions dealing with layout of absolute nodes and was thinking it would be nice if that logic was just in its own file so it was more isolated and easier to reason about. So I made AbsoluteLayout.cpp and AbsoluteLayout.h to house this logic. In order for this to work I had to expose calculateLayoutInternal in CalculateLayout.h as layoutAbsoluteChild calls it. This is unideal and I would like to find a better way...

I also make LayoutUtils.h to house misc small helper methods as they are called in AbsoluteLayout.cpp and CalculateLayout.cpp

Reviewed By: NickGerleman

Differential Revision: D51824115

fbshipit-source-id: 9b27449e3c1516492c01e6167a6b2c4568a33807
2023-12-04 19:35:30 -08:00
Joe Vilches
7893c4bd85 Fix issue where start/end would not be respected in flex edge getters (#1479)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1479

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

There are two ways to get the value of a style for a specific edge right now:

1) From the inline start/end edge which is determined via the writing direction (ltr or rtl), assuming you do not have errata on
2) From the flex start/end edge which is determined via the flex direction (row, row-reverse, column, column-reverse)

There is a weird curiosity in the second case: you can define a style to be on the "start" or "end" edge when writing the stylex/css. The physical edge that this refers to is dependent on the writing direction. So `start` would be `left` in `ltr` and `right` in `rtl`, with `end` the opposite. It is **never** determined via the flex direction. Additionally, `start`/`end` takes precedence over the physical edge it corresponds to in the case both are defined.

So, all of this means that to actually get the value of a style from the flex start/end edges, we need to account for the case that one of these relative edges was defined and would overwrite any physical edge. Since this mapping is solely determined by the writing direction, we need to pass that in to all the flex start/end getters and do that logic. This is done in  `flexStartRelativeEdge`/`flexEndRelativeEdge` which was added earlier but for some reason only being used on border.

Reviewed By: NickGerleman

Differential Revision: D51293315

fbshipit-source-id: 26fafff54827134e7c5b10354ff9bfdf67096f5b
2023-12-04 19:35:30 -08:00
Joe Vilches
4ad9330fb9 Introduce positionAbsoluteChild (#1473)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1473

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

To simplify the logic a bit I introduce a new function called `positionAbsoluteChild`. This function will, eventually, be the **sole function that matters** when determining the layout position of an absolute node. Because [absolute nodes do not participate in flex layout](https://drafts.csswg.org/css-flexbox/#abspos-items), we can determine the position of said node independently of its siblings. The only information we need are the node itself, its parent, and its containing block - which we have all of in `layoutAbsoluteChild`.

Right now, however, this is purely a BE change with no functionality different. There was a big set of if statements at the end of `layoutAbsoluteChild` that would position the node on the main and cross axis for certain cases. The old code had it so that the main and cross axis had basically the same logic but the code was repeated. This puts that logic, as is, in `positionAbsoluteChild` and calls that from `layoutAbsoluteChild`.

I will soon edit this function to actually do what it is envisioned to do (i.e. be the sole place that position is set for absolute nodes).

Reviewed By: NickGerleman

Differential Revision: D51272855

fbshipit-source-id: 68fa1f0e0f4d595faf2af1d9eaceb467382ca406
2023-12-04 19:35:30 -08:00
Joe Vilches
e042cb102c Use containing block to adjust absolute child position (#1472)
Summary:
X-link: https://github.com/facebook/react-native/pull/41490

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

This change has most of the logic needed for supporting `position: static`. We do two things here that fix a lot of the broken static test:

1) We pass in the containing node to `layoutAbsoluteChild` and use it to properly position the child in the case that insets are defined.
2) We rewrite the absolute child's position to be relative to it's parent in the event that insets are defined for that child (and thus it is positioned relative to its CB). Yoga's layout position has always be relative to parent, so I feel it is easier to just adjust the coordinates of a node to adhere to that design rather than change the consumers of yoga.

The "hard" part of this algorithm is determining how to iterate the offset from the containing block needed to do this translation described above. That is handled in `layoutAbsoluteDescendants`.

Reviewed By: NickGerleman

Differential Revision: D51224327

fbshipit-source-id: ae6dc54fe2a71bebb4090ba21a0afb0125264cbc
2023-12-04 19:35:30 -08:00
Joe Vilches
2222c2c475 Allow the containing block to set trailing position of absolute descendants (#1471)
Summary:
X-link: https://github.com/facebook/react-native/pull/41489

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

If we are going to allow the containing block to layout its absolute descendants and NOT the direct parent then we need to change step 11 which is concerned with setting the trailing position in the case we are row or column reverse. This is the very last step in the function and is positioned that way because it operates on the assumption that all children have their position set by this time. That is no longer a valid assumption if CBs layout their absolute children. In that case the CB also needs to take care of setting the position here.

Because of this problem I moved some things around. It now works like:

* If errata is set, the direct parent will set trailing position for all non absolute children in step 11
* If errata is set the CB will set trailing position of absolute descendants after they are laid out inside of layoutAbsoluteDescendants

Reviewed By: NickGerleman

Differential Revision: D51217291

fbshipit-source-id: a7eea0d3623f9041b73d609a1de2bfb0f0343a26
2023-12-04 19:35:30 -08:00
Joe Vilches
5a24c81672 Let containing blocks layout their absolute descendants, not parents (#1470)
Summary:
X-link: https://github.com/facebook/react-native/pull/41488

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

The way we plan on implementing `position: static` is by changing how we lay out absolutely positioned nodes. Instead of letting their direct parent lay them out we are going to let their containing block handle it. This is useful because by the time the containing block gets to this step it will already know its size, which is needed to ensure that absolute nodes can get the right value with percentage units. Additionally, it means that we can "translate" the position of the absolute nodes to be relative to their parent fairly easily, instead of some second pass that would not be possible with a different design.

This change just gets the core pieces of this process going. It makes it so that containing blocks will layout out absolute descendants that they contain. We also pass in the containing block size to the owner size args for `layoutAbsoluteChild`. This new path will only happen if we have the errata turned off. If there is no positioned ancestor for a given node we just assume the root is. This is not exactly how it works on the web - there is a notion of an initial containing block - but we are not implementing that as of right now.

Reviewed By: NickGerleman

Differential Revision: D51182593

fbshipit-source-id: 88b5730f7f4fec4f33ec64288618e23363091857
2023-12-04 19:35:30 -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
bb8fd593ff Remove NumericBitfield (#1463)
Summary:
X-link: https://github.com/facebook/react-native/pull/41394

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

Now that are enums are unsigned, and we don't have BitfieldRef, we can convert the last remaining user of NumericBitfield to a plain old bitfield,  for better readability (e.g. the default values), debugability, and less complexity. We also break a cycle which lets us properly group public vs private members.

Reviewed By: joevilches

Differential Revision: D51159415

fbshipit-source-id: 7842a8330eed6061b863de3f175c761dcf4aa2be
2023-11-27 21:20:20 -08:00
Nick Gerleman
9b0fd09ec6 Remove yoga::Style::BitfieldRef (#1459)
Summary:
X-link: https://github.com/facebook/react-native/pull/41393

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

Removes the last of the non setter-style style setters.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D51155925

fbshipit-source-id: 2921c87d95ad36495b7013e592d5169015321545
2023-11-27 21:20:20 -08:00
Nick Gerleman
ed6e91479c Remove yoga::Style::Ref (#1462)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1462

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

Moves the last usages of `yoga::Style::Ref` to setters.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D51154501

fbshipit-source-id: 52dbca7a76de500a8841387eb59fded463864de7
2023-11-27 21:20:20 -08:00
Nick Gerleman
325ccea068 YGEdge -> yoga::Edge (#1461)
Summary:
X-link: https://github.com/facebook/react-native/pull/41391

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

Converts usages of `YGEdge` within internal APIs to `yoga::Edge` scoped enum.

With the exception of YGUnit which is in its own state of transition, this is the last public yoga enum to need to be moved to scoped enum form for usages internal to the Yoga public API.

Changelog: [internal]

Reviewed By: rshest

Differential Revision: D51152779

fbshipit-source-id: 06554f67bfd7709cbc24fdd9a5474e897e9e95d8
2023-11-25 20:41:22 -08:00
Nick Gerleman
a121483e81 Use CSS terminology for sizing rules (#1460)
Summary:
X-link: https://github.com/facebook/react-native/pull/41390

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

Yoga passes `MeasureMode`/`YGMeasureMode` to express constraints in how a box should be measured, given definite or indefinite available space.

This is modeled after Android [MeasureSpec](https://developer.android.com/reference/android/view/View.MeasureSpec), with a table above `calculateLayoutImpl()` explaining the CSS terms they map to. This can be confusing when flipping between the spec, and code.

This switches internal usages to the CSS terms, but leaves around `YGMeasureMode` since it is the public API passed to measure functions.

Reviewed By: joevilches

Differential Revision: D51068417

fbshipit-source-id: 0a76266a4e7e0cc39996164607229c3c41de2818
2023-11-25 20:41:22 -08:00
Nick Gerleman
aca02406ef CompactValue -> Style::Length (#1458)
Summary:
X-link: https://github.com/facebook/react-native/pull/41392

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

We're moving `CompactValue` to be an internal detail of `yoga::Style`, where users outside of the style will be dealing with a resolved/non-compact representation.

This change renames usages of `CompactValue` to `Style::Length`, which will be Yoga's representation for CSS input lengths. Right now one is just a type alias of the other, but this will let us change the internals of CompactValue with the rest of the world looking the same.

A few factory functions are added to `yoga::value` for creating CSS values. There are some shenanigans around how we want to represent CSS pixels (one YGUnitPoint), when we also end up adding CSS points (slightly larger than one YGUnitPoint). For now, I reused `point` until making other changes.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D51000389

fbshipit-source-id: 00f55e72bfb8aa291b53308f8a62ac8797be490f
2023-11-25 20:41:22 -08:00
Nick Gerleman
a822f2635e Do not expose aggregate style edges (#1477)
Summary:
X-link: https://github.com/facebook/react-native/pull/41610

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

A reland of the main change in D50998164, moving away from exposing compound edge arrays directly.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D51512611

fbshipit-source-id: 2d4ceb89c9d76317feb9074aa271358a3abc0ee1
2023-11-22 22:43:41 -08:00
Nick Gerleman
0ebac779aa Remove YGStyleAccessorsTest (#1476)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1476

Up the stack, Style uses just plain getters and setters. These tests aren't particularly useful enough to update.

Previously landed as part of D50998164

Reviewed By: joevilches

Differential Revision: D51481328

fbshipit-source-id: b0413270fd5951c7c8d783269b08cca9f939ce25
2023-11-22 22:43:41 -08:00
Nick Gerleman
0eb861b459 Don't enable ordinalCount() or bitCount() for bitset enums
Summary:
Bitfield enums are not sequential, so use of these functions on these enums would be invalid.

I looked at whether we could trivially move `bitCount` to template based on `ordinalCount`. `bitCount` must be constexpr, since we use it directly as a bit-field size constant. `log2` and `ceil` to be constexpr, which isn't here until C++ 26.

Reviewed By: javache

Differential Revision: D51518899

fbshipit-source-id: 256f15bbed517be6f90bf43baa43ce96e9259a71
2023-11-22 11:06:31 -08:00
Nick Gerleman
c7c81e3c89 Remove composite border comparisons (#1475)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1475

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

Removes cases where we rely on comparing composite of Yoga edges, since we are removing that internal API (public API is already one at a time). Extracted from D50998164, with more sound facility for looping through edges.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D51478403

fbshipit-source-id: 162170b91345ff86db44a49a04a2345f0fbd0911
2023-11-21 23:17:32 -08:00