Skip to content

Commit ec4dca4

Browse files
committed
[css-layout-api] Add more text about random things.
1 parent 5de135c commit ec4dca4

File tree

1 file changed

+112
-3
lines changed

1 file changed

+112
-3
lines changed

css-layout-api/README.md

+112-3
Original file line numberDiff line numberDiff line change
@@ -220,9 +220,117 @@ partial interface ConstraintSpace {
220220

221221
TODO write about how break tokens work.
222222

223-
#### Pseudo-classes and style overrides
223+
#### Pseudo-elements and style overrides
224224

225-
TODO write about options for `::first-letter`, `::first-line`, and `flex-grow`y things should work.
225+
`::first-letter` and `::first-line` are a little bit special in terms of CSS; they aren't really
226+
elements just a different style applied to a fragment(s).
227+
228+
In order to handle these do we allow override styles when performing layout on a child? For example:
229+
```webidl
230+
partial interface Box {
231+
FragmentRequest doLayout(ConstraintSpace space, OpaqueBreakToken breakToken, Object overrideStyles);
232+
}
233+
```
234+
235+
```js
236+
registerLayout('handle-first-line', class {
237+
*layout(constraintSpace, children, styleMap, opt_breakToken) {
238+
// ...
239+
240+
let child = children[i];
241+
let fragment = yield child.doLayout(childConstraintSpace, breakToken, {
242+
// This would be queried from styleMap?
243+
// This would only allow computed-style values?
244+
fontSize: new CSSLengthValue({px: 18}),
245+
});
246+
247+
// ...
248+
}
249+
});
250+
```
251+
252+
TODO: These is a problem with the above example?
253+
254+
Similarly we have a class of CSS layout algorithms which _force_ a particular style on their
255+
children, (flex & grid). Do we handle these in a similar way? For example:
256+
257+
```js
258+
registerLayout('kinda-like-flex', class {
259+
*layout(constraintSpace, children, styleMap, opt_breakToken) {
260+
// ...
261+
262+
let child = children[i];
263+
let fragment = yield child.doLayout(childConstraintSpace, breakToken, {
264+
inlineSize: 180, // Only accepts numbers in px.
265+
});
266+
267+
// ...
268+
269+
}
270+
});
271+
```
272+
273+
We need something like this, needs to be here, or on the constraintSpace somehow.
274+
275+
#### Utility functions
276+
277+
We need a set of utility function which do things like resolve a computed-inline-size against
278+
another length etc. These functions will probably become clear over-time from internal
279+
implementations and people writing algorithms against this API but for starters we'll probably need:
280+
281+
```webidl
282+
[NoInterfaceObject]
283+
interface LayoutUtilities {
284+
// Resolves the inline-size according to an algorithm to be defined in the spec. This doesn't
285+
// limit authors to having their own layout units and resolving the lengths differently. This is
286+
// just a helper.
287+
number resolveInlineSize(ConstraintSpace constraintSpace, StylePropertyMapReadonly styleMap);
288+
289+
// Resolves the size against a different length.
290+
number resolveSize(CSSValue property, number size);
291+
292+
// Resolves the size against a different length for the minimum amount.
293+
number resolveMinimumSize(CSSValue property, number size);
294+
}
295+
```
296+
297+
This is just some basic ones, we'll need more.
298+
299+
#### Flags!
300+
301+
We need to indicate to the engine when we want a particular layout behaviour placed on us. For
302+
example if we are a:
303+
- formatting context
304+
- should "blockify" children (like flex, grid)
305+
- magically handle abs-pos
306+
307+
TODO there are probably others here.
308+
309+
For example if we should establish a formatting context, implicitly this means that the
310+
constraintSpace we are given cannot have any pre-defined exclusions.
311+
312+
We need to decide on the defaults here, and if we allow changing the default.
313+
314+
A simple API proposal:
315+
```js
316+
registerLayout('weee!', class {
317+
static formattingContext = false; // default is true?
318+
static handleAbsPos = false; // default is true?
319+
static blockifyChildren = true; // default is false?
320+
321+
*layout() {
322+
// etc.
323+
}
324+
});
325+
```
326+
327+
#### Adding and removing children
328+
329+
We need a callback for when child boxes are added / removed. Rendering engines today have
330+
optimizations in place for when this occurs; for example in grid, the user agent will place its
331+
children into a "Tracks" data structure for layout.
332+
333+
TODO: add API proposal here.
226334

227335
### Performing Layout
228336

@@ -372,7 +480,8 @@ registerLayout('multicol', class {
372480
} while (breakToken);
373481
}
374482

375-
// FIXME: This might be wrong.
483+
// FIXME: This might be wrong, need a helper method on constraintSpace which returns the max
484+
// blockEnd of all the exclusions.
376485
const childBlockSize =
377486
colConstraintSpace.layoutOpportunities().next().value.blockStart;
378487

0 commit comments

Comments
 (0)