3b0545b15d
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1530 Yoga has a shortcut where if a min dimension and max dimension are the same, the value acts as a definite length. I was curious how browsers handled this. CSS 2.1 said: > If the containing block's width depends on this element's width, then the resulting layout is undefined This is superceded in the CSS box sizing spec. https://www.w3.org/TR/css-sizing-3/#sizing-values > If, in a particular axis, the containing block’s size depends on the box’s size, see the relevant layout module for special rules on how to resolve percentages. Negative values are invalid. And later: https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution > Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially: > If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto. (The percentage is honored as usual, however, during the actual sizing of the box itself; see below.) > Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block). So, for the purpose of sizing the parent, the child sized using a percentage does not contribute, but we should be sizing children based on that size. Yoga does not really work like this right now, but gets the answer right answer for half of these tests. Reviewed By: yungsters Differential Revision: D52251601 fbshipit-source-id: 4978b90723130283b00e87bbf49795a4d209174c
yoga-layout
This package provides prebuilt WebAssembly bindings for the Yoga layout engine.
Usage
import {Yoga, Align} from 'yoga-layout';
const node = Yoga.Node.create();
node.setAlignContent(Align.Center);
Objects created by Yoga.<>.create() are not automatically garbage collected and should be freed once they are no longer in use.
// Free a config
config.free();
// Free a tree of Nodes
node.freeRecursive();
// Free a single Node
node.free();
Using TypeScript
This package provides out-of-the-box TypeScript typings so long as tsc is configured to support ESM resolution. It is recommended to set moduleResolution: 'bundler' or moduleResolution: node16 in your tsconfig.json according to your environment.
ES Modules
yoga-layout is only provided as an ES Module, relying on top-level await. This allows providing a synchronous API, while still allowing async WebAssembly compilation in browsers, and will allow eventual usage of ESM/WASM interop.
Contributing
Requirements
- Emscripten SDK
- CMake >= 3.13
- (Optional) ninja, for faster builds
Building
git clone https://github.com/facebook/yoga.git
cd yoga/javascript
yarn install
yarn build
Testing
# Build and test all entrypoints
yarn test
# Build and test a specific entrypoint
yarn test:asmjs-sync