Skip to content

Commit a8b415e

Browse files
authored
[css-layout-api][explainer] add mandatory intrinsicSizes function (#1136)
Also, fix the code sample where the constraints variable where redefined.
1 parent 21b9412 commit a8b415e

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

css-layout-api/EXPLAINER.md

Lines changed: 10 additions & 2 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,11 +330,14 @@ 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

333336
// Position the fragment, note we could do something special here, like
334337
// placing all the lines on a "rythmic grid", or similar.
338+
||||||| parent of a2dd8db ([css-layout-api][explainer] add mandatory intrinsicSizes function)
339+
// Position the fragment, note we coulld do something special here, like
340+
// placing all the lines on a "rythimic grid", or similar.
335341
fragment.inlineOffset = edges.inlineStart;
336342
fragment.blockOffset = blockOffset;
337343

@@ -409,6 +415,7 @@ We can make our children fragment by passing them a constraint space with a frag
409415
410416
```js
411417
registerLayout('special-multi-col', class {
418+
async intrinsicSizes() {}
412419
async layout(children, edges, constraints, styleMap, breakToken) {
413420
for (let child of children) {
414421
// Create a constraint space with a fragmentation line.
@@ -435,6 +442,7 @@ We can also allow our own layout to be fragmented by respecting the fragmentatio
435442
436443
```js
437444
registerLayout('basic-inline', class {
445+
async intrinsicSizes() {}
438446
async layout(children, edges, constraints, styleMap, breakToken) {
439447

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

0 commit comments

Comments
 (0)