Skip to content

Commit a2dd8db

Browse files
authored
[css-layout-api][explainer] add mandatory intrinsicSizes function
Also, fix the code sample where the constraints variable where redefined.
1 parent a1cea5f commit a2dd8db

1 file changed

Lines changed: 8 additions & 3 deletions

File tree

css-layout-api/EXPLAINER.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ below. You should read the code below with its explanatory section.
6666

6767
```js
6868
registerLayout('centering', class {
69+
async intrinsicSizes() {}
6970
async layout(children, edges, constraints, styleMap) {
7071
// (1) Determine our (inner) available size.
7172
const availableInlineSize = constraints.fixedInlineSize - edges.inline;
@@ -229,6 +230,7 @@ registerLayout('style-read', class {
229230
static inputProperties = ['--a-number'];
230231
static childInputProperties = ['--a-string'];
231232

233+
async intrinsicSizes() {}
232234
async layout(children, edges, constraints, styleMap) {
233235
// We can read our own style:
234236
styleMap.get('--a-number').value === 42;
@@ -307,13 +309,14 @@ We pass the `BreakToken` to add back into the `layout()` call in order to produc
307309
registerLayout('basic-inline', class {
308310
static layoutOptions = {childDisplay: 'normal'};
309311

312+
async intrinsicSizes() {}
310313
async layout(children, edges, constraints, styleMap) {
311314
// Determine our (inner) available size.
312315
const availableInlineSize = constraints.fixedInlineSize - edges.inline;
313316
const availableBlockSize = constraints.fixedBlockSize !== null ?
314317
constraints.fixedBlockSize - edges.block : null;
315318

316-
const constraints = {
319+
const childConstraints = {
317320
availableInlineSize,
318321
availableBlockSize,
319322
};
@@ -327,10 +330,10 @@ registerLayout('basic-inline', class {
327330
// Layout the next line, the produced line will try and respect the
328331
// availableInlineSize given, you could use this to achieve a column
329332
// effect or similar.
330-
const fragment = await child.layoutNextFragment(constraints, childBreakToken);
333+
const fragment = await child.layoutNextFragment(childConstraints, childBreakToken);
331334
childFragments.push(fragment);
332335

333-
// Position the fragment, note we coulld do something special here, like
336+
// Position the fragment, note we could do something special here, like
334337
// placing all the lines on a "rythimic grid", or similar.
335338
fragment.inlineOffset = edges.inlineStart;
336339
fragment.blockOffset = blockOffset;
@@ -409,6 +412,7 @@ We can make our children fragment by passing them a constraint space with a frag
409412

410413
```js
411414
registerLayout('special-multi-col', class {
415+
async intrinsicSizes() {}
412416
async layout(children, edges, constraints, styleMap, breakToken) {
413417
for (let child of children) {
414418
// Create a constraint space with a fragmentation line.
@@ -435,6 +439,7 @@ We can also allow our own layout to be fragmented by respecting the fragmentatio
435439

436440
```js
437441
registerLayout('basic-inline', class {
442+
async intrinsicSizes() {}
438443
async layout(children, edges, constraints, styleMap, breakToken) {
439444

440445
// We can check if we need to fragment in the block direction.

0 commit comments

Comments
 (0)