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/18415https://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
Summary:
@public
Messed this one up when fixing the test generation script.
Reviewed By: SidharthGuglani
Differential Revision: D14684224
fbshipit-source-id: 2696ce9ff7d825d00c7ad1ab1627a5ffe56d123f
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
Summary:
@public
This gets flagged by the linter. Remove it.
Reviewed By: SidharthGuglani
Differential Revision: D14682386
fbshipit-source-id: 612508b0906285e6420a553ac7a96d1024f1eac6
Summary:
@public
Adapts the license header text to the format we currently use.
Reviewed By: SidharthGuglani
Differential Revision: D14653591
fbshipit-source-id: f79446e4f85623326f770fe73482eab00edd9234
Summary:
@public
We have changed Yoga’s license to a yearless format, but this was not reflected in the test generation script.
This commit changes the corresponding template/.
Reviewed By: davidaurelio
Differential Revision: D10852787
fbshipit-source-id: 0b79e253be6174a218f9dc8de942fc2496a425c8
Summary: This change drops the year from the copyright headers and the LICENSE file.
Reviewed By: yungsters
Differential Revision: D9727774
fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.
find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.
Reviewed By: TheSavior, yungsters
Differential Revision: D7007050
fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
Summary:
Adds new ```space-evenly``` for ```justify-content```.
Also adds a typofix in one of the other justify-content tests.
Fixes#657
Closes https://github.com/facebook/yoga/pull/658
Differential Revision: D6407996
Pulled By: emilsjolander
fbshipit-source-id: cc837409e1345624b4bd72c31e25fe68dcb0f6a3
Summary: Rounding has been successfully adopted by multiple products and frameworks. Time to move it out of experimental mode. Rounding can still be turned of by setting the point scale factor to 0 on the config.
Reviewed By: gkassabli
Differential Revision: D4953838
fbshipit-source-id: 3ee5f27d92f95b3ed4a01c98bc35e9157f2e91c5
Summary:
This diff introduces new, little bit sophisticated round-to-pixel-grid algorithm.
**Motivation:**
Previous simple and straightforward solution works in most cases but sometimes produce the not-so-great result. A while ago Nick Lockwood described this problem and proposed the solution in RN's RCTShadowView class:
For example, say you have the following structure:
// +--------+---------+--------+
// | |+-------+| |
// | || || |
// | |+-------+| |
// +--------+---------+--------+
Say the screen width is 320 pts so the three big views will get the following x bounds from our layout system:
{0, 106.667}, {106.667, 213.333}, {213.333, 320}
Assuming screen scale is 2, these numbers must be rounded to the nearest 0.5 to fit the pixel grid:
{0, 106.5}, {106.5, 213.5}, {213.5, 320}
You'll notice that the three widths are 106.5, 107, 106.5.
This is great for the parent views but it gets trickier when we consider rounding for the subview. When we go to round the bounds for the subview in the middle, it's relative bounds are {0, 106.667} which gets rounded to {0, 106.5}. This will cause the subview to be one pixel smaller than it should be. This is why we need to pass in the absolute position in order to do the rounding relative to the screen's grid rather than the view's grid. After passing in the absolutePosition of {106.667, y}, we do the following calculations:
absoluteLeft = round(absolutePosition.x + viewPosition.left) = round(106.667 + 0) = 106.5
absoluteRight = round(absolutePosition.x + viewPosition.left + viewSize.width) + round(106.667 + 0 + 106.667) = 213.5
width = 213.5 - 106.5 = 107
You'll notice that this is the same width we calculated for the parent view because we've taken its position into account.
I believe this is awesome. I also believe that we have to decouple this logic from RN and put it into awesome Yoga. So I did it in this diff.
**Fun fact:**
The original implementation of this algorithm in RN had (and still have) a bug, which was found by Dustin dshahidehpour and fixed in D4133643. Therefore that diff was unlanded because it broke something unrelated inside RN text engine. I will fix that problem in RN later.
**Why do we need to change test methodology?**
Because the way we receive layout metrics from Chrome browser actually directly related to rounding problem. Previously we used `offsetHeight` and `offsetWidth` properties of the DOM node, which contain naively rounded values from `computedStyle` or `getBoundingClientRect`. (Which is we are trying to fix!) So, I added the new function that computes node size using two-step-rounding approach, conceptually similar to one that implemented in Yoga. Note: Chrome browser performs rounding layout as part of rendering process and actual values that can ve computed by counting actual pixel are different from these natively rounded ones.
**Why do some tests now have different desired values?**
These changes actually prove that my approach is correct and more useful for actual view rendering goals. So, let's take a look at test with changed values `rounding_fractial_input_3`:
Previously: 64+25+24=114 (Incorrect!)
Now: 65+24+25=114 (Correct!)
Previously: 64+25+24=114 (Incorrect!)
Now: 65+24+25=114 (Correct!)
Reviewed By: emilsjolander
Differential Revision: D4941266
fbshipit-source-id: 07500f5cc93c628219500e9e07291438e9d5d36c
Summary:
Move configuration to new ```YGConfig``` and pass them down to CalculateLayout. See #418 .
Adds ```YGConfigNew()``` + ```YGConfigFree```, and changed ```YGSetExperimentalFeatureEnabled``` to use the config.
New function for calculation is ```YGNodeCalculateLayoutWithConfig```.
Closes https://github.com/facebook/yoga/pull/432
Reviewed By: astreet
Differential Revision: D4611359
Pulled By: emilsjolander
fbshipit-source-id: a1332f0e1b21cec02129dd021ee57408449e10b0
Summary:
I couldn't resist to do this 😄#394
This adds ```flex-wrap: wrap-reverse```
I think we hit a edge case here:
https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width
as is differs here from chrome, but I think that yoga is here more correct.
So I haven't added this test yet as this would fail against chrome, as chrome outputs a width of 30 for root, whereas yoga gets a width of 60 here, which I think is correct. Strangely the output of ```flex-wrap:wrap``` is in jsfiddle also only with a (visual) width of 30 on chrome, while the tests gets generated with 60.
```html
<div id="wrap_reverse_column" style="height: 100px; flex-wrap: wrap-reverse">
<div style="height: 30px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
</div>
```
Looking forward what you think here emilsjolander
Closes https://github.com/facebook/yoga/pull/398
Reviewed By: astreet
Differential Revision: D4564711
Pulled By: emilsjolander
fbshipit-source-id: 33dc055abd8444b2aa7796ef90bd7ec99e961bb8
Summary:
...to reflect the modern world we live in with dynamic DPI platforms :)
Closes https://github.com/facebook/yoga/pull/375
Reviewed By: dshahidehpour
Differential Revision: D4528518
Pulled By: emilsjolander
fbshipit-source-id: e422bd4ae148e02c598a7b484a6adfa8c0e1e0c9
Summary:
Even so I know there are some opinions against ```margin: 0 auto``` it's still part of the spec: https://www.w3.org/TR/css-flexbox-1/#auto-margins and pretty usefull if you have to position via ```justify-content```.
This PR adds an implementation for that.
It adds an additonal ```YGUnitAuto``` and margins got ```YGNodeStyleSetMarginAuto``` functions as well.
Closes https://github.com/facebook/yoga/pull/357
Reviewed By: astreet
Differential Revision: D4501142
Pulled By: emilsjolander
fbshipit-source-id: 86519f8632496f46e78a7c9dbc5b21e212e3e0c7
Summary:
Adds the two missing alignments ```space-between``` and ```space-around``` for ```align-content``` . Those values are a noop on ```align-items``` in order to prevent a breaking changes for an additional enum.
Fix#229
Closes https://github.com/facebook/yoga/pull/364
Reviewed By: gkassabli
Differential Revision: D4528561
Pulled By: emilsjolander
fbshipit-source-id: ea6291b6dd22cef05d9eec03893250d50371236e
Summary:
Fix#241 and successor for #302
Added new property ```display``` with ```YGDisplayFlex``` and ```YGDisplayNone```. Allows to hide nodes from the layout without the need to remove it from the DOM.
Closes https://github.com/facebook/yoga/pull/369
Reviewed By: astreet
Differential Revision: D4501141
Pulled By: emilsjolander
fbshipit-source-id: 0dfeee381f6d1e4bbba81926126b83dd7abab9d6
Summary:
Added baseline support (see #132)
You have the ability for a custom baseline function (```float(*YGBaselineFunc)(YGNodeRef node);```) to return whatever baseline you want.
Closes https://github.com/facebook/yoga/pull/317
Reviewed By: splhack
Differential Revision: D4385061
Pulled By: emilsjolander
fbshipit-source-id: cb8a59a09237c840fa3e21753ab68239997dab0c
Summary:
Adds the feature to use percentage as a value unit.
You can use the function ```YGPx(float)``` and ```YGPercent(float)``` for convenience.
I did some benchmarks:
```
Without Percentage Feature - Release x86:
Stack with flex: median: 0.000000 ms, stddev: 0.146683 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.490101 ms
Huge nested layout: median: 23.000000 ms, stddev: 0.928291 ms
Stack with flex: median: 0.000000 ms, stddev: 0.170587 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.143384 ms
Nested flex: median: 0.000000 ms, stddev: 0.477791 ms
Huge nested layout: median: 22.000000 ms, stddev: 2.129779 ms
With Percentage Feature - Release x86:
Stack with flex: median: 0.000000 ms, stddev: 0.132951 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.489570 ms
Huge nested layout: median: 21.000000 ms, stddev: 1.390476 ms
Closes https://github.com/facebook/yoga/pull/258
Reviewed By: dshahidehpour
Differential Revision: D4361945
Pulled By: emilsjolander
fbshipit-source-id: a8f5bc63ad352eb9410d792729e56664468cd76a
Summary:
- As mentioned in the title, this PR adds Javascript support to Yoga. Two different builds are included in this PR thanks to [nbind](https://github.com/charto/nbind), which conveniently allow to target both Node.js' native addons and browser environments via asmjs with approximately the same codebase. That should solve #215.
- All tests successfully pass on both codepaths. You can run `yarn test:all` inside the `javascript` directory to test it.
- Because of a bug in nbind, the [following PR](https://github.com/charto/nbind/pull/57) needs to be merged and a new version released before this one can be safely merged as well.
- I had to use `double` types instead of `float` in the C++ bindings because of an Emscripten [bug](https://github.com/kripken/emscripten/issues/3592) where symbols aren't correctly exported when using floats.
- There's some tweaks to do before this PR is 100% ready to merge, but I wanted to have your opinion first. What do you think of this?
---
To do:
- [x] Ensure th
Closes https://github.com/facebook/yoga/pull/304
Reviewed By: mikearmstrong001
Differential Revision: D4375187
Pulled By: emilsjolander
fbshipit-source-id: 47248558a9506b7c512b5ef281cd12fe1a60cab7
Summary: Rename test files to use new name
Reviewed By: gkassabli
Differential Revision: D4265235
fbshipit-source-id: 0090d3949828058baf7435f33d4068de92756bad
Summary:
This diff does two things
- Clean up some of the generated code making the files smaller.
- Add experiment support to generated tests allowing us to use gentest for things still being experimented with such as more compliant flex-basis behavior.
Reviewed By: gkassabli
Differential Revision: D4226734
fbshipit-source-id: 2cc1471c21883e8e326f16e7a8bb1a3657acd84b
Summary: Java and csharp already use CSSWrap and not CSSWrapType. Let's consolidate and stick with the shorter of the two.
Reviewed By: gkassabli
Differential Revision: D4174257
fbshipit-source-id: ba0bfab996ba158b07863d8c72cf2a41262c9592
Summary: Default value for positions should be undefined not 0px. Fixing this leads to more correct tests.
Reviewed By: gkassabli
Differential Revision: D4153329
fbshipit-source-id: d0f194f9c47eac93d3815ec7e55568a1016bc7fe
Summary:
- Revise scripts to generate Java and C# unittests using the same HTML fixtures as well as C for code coverage.
- Add wrap_column test workaround in gentest.js.
- Add checkDefaultValues for sanity check of the CSSLayout default values by test-template.html
- Add `align-content: flex-start;` in default div to align with CSSLayout default
$ cd csharp/gentest
$ ruby gentest.rb
- macOS example for C#
$ cd csharp/tests/Facebook.CSSLayout
$ clang -DCSS_ASSERT_FAIL_ENABLED -Wall -Wextra -dynamiclib -o libCSSLayout.dylib -g -I../../.. ../../../CSSLayout/*.c ../../CSSLayout/CSSInterop.cpp
$ mcs -debug -t:library -r:nunit.framework.dll -out:CSSLayoutTest.dll *.cs ../../../csharp/Facebook.CSSLayout/*cs
$ mono64 --debug nunit-console.exe CSSLayoutTest.dll
Reviewed By: emilsjolander
Differential Revision: D4053777
fbshipit-source-id: 84450208015e65baf604987bd56c6a268598b545
Summary: Prefer inline style to computed style as inline style should be the source of truth and computed style may differ
Reviewed By: gkassabli
Differential Revision: D4029373
fbshipit-source-id: 39ce9d577f295c2361dc384212d7467418c63c33
Summary: Its very usefull to be able to run valgrind on the tests and benchmarks. We were previously not freeing test memory so valgrind output was very messy.
Reviewed By: javache
Differential Revision: D3937493
fbshipit-source-id: 23c6970d7769b081575d39de583ba954fc65a397
Summary: Oops, when regexing start->left/right end->left/right I did not take into account flex-start and flex-end. Easiest solution is to regex back flex-left and flex-right into their correct values.
Reviewed By: lucasr
Differential Revision: D3930244
fbshipit-source-id: 20742cbc8e5f23af694e14584c7c3df89526876e
Summary: previously when copying in a test inout into an editor the user of gentest needed to remove the ` * ` prefix. This was annoying so this diff fixes that by removing that from gentest.
Reviewed By: lucasr
Differential Revision: D3862943
fbshipit-source-id: 06bd3ee3fa3f85cc44b6ea1d67cf3e91ed368791
Summary: Make input html easier to read by indenting it and adding a space between children. The code to do this could very well be improved but it works for the current set of inputs.
Reviewed By: lucasr
Differential Revision: D3798087
fbshipit-source-id: 0d50ff276000f14ed078cf5ce2e7560ace285a6a
Summary: Generate tests for border. This required modifying gentest to add the parent clientLeft and clientTop so that border width are accounted for in output.
Reviewed By: lucasr
Differential Revision: D3791286
fbshipit-source-id: 698cc2332a3f4118e1afdfbfd745ba824e8ec3f4
Summary: Allow adding test name within html through the id of the root element. This makes it much easier to re-generate test files.
Differential Revision: D3771966
fbshipit-source-id: 313e1648dcf4521e7c649f54c4ced2aa3297bf06
Summary: These props were never tested so I didn't notice the typo until now.
Differential Revision: D3771132
fbshipit-source-id: 9d7c2037195f29b3cac5d21599035edf3b7830ff
Summary: generate absolute layout tests. Also make sure default value for position is relative (#default div is absolutely positioned)
Reviewed By: IanChilds
Differential Revision: D3770947
fbshipit-source-id: 0327b071c0dc1aa4574ded759dcc667768b28f55
Summary: Remove output properties from computed styles as they will be computed to their output values before we can read them. Only include them if they are explicitly set by the user.
Reviewed By: IanChilds
Differential Revision: D3770917
fbshipit-source-id: e55996cf8744073496debea19c36a188d2e5086c
Summary: Use const where possible. This does not use const for all variables as that would require too much refactoring for one diff. It does however use const where currently possible as well as does some small refactoring to enable const usage in more locations. Striving for 100% const usage leads to code with is easier to reason about as a reference will always reference the same value. The compiler will also assist if you accidentally override a reference.
Reviewed By: IanChilds
Differential Revision: D3741999
fbshipit-source-id: 1ba7da5784c3047f2d4c03746890192f724aa65e
Summary: Add header to generated code so that code can easily be re-generated in case test generation is improved in the future.
Reviewed By: lucasr
Differential Revision: D3715181
fbshipit-source-id: 593baa691c2d7c7f171c6673898fb8a2ecf0e008
Summary: Modify test generation script to be able to generate multiple test cases
Reviewed By: lucasr
Differential Revision: D3714577
fbshipit-source-id: d2bc2155712f946c5a24231a9532d2acc097524c
Summary: Add support for flex-grow, flex-shrink, and flex-basis properties. The flex property behavior is preserved for backwards compatibility.
Reviewed By: lucasr
Differential Revision: D3714520
fbshipit-source-id: 80d3a9a1e2b6f74b863bbe22357f2c9865fa290e
Summary:
Add first version of test generation script. Currently works for most layouts and styles. Probably has a bunch of broken edge-case.
Usage:
$ gentest/gentest.sh
<Enter HTML with inline styles> e.g. <div style="width: 100px; height: 100px;"></div>
Open chrome dev tools console tab.
Copy code from console into file and save.
Run buck test //:CSSLayout
Differential Revision: D3697812
fbshipit-source-id: e6809f95bf6782e7e2cc47b9cdd3a25a13163c5c
