@@ -220,9 +220,117 @@ partial interface ConstraintSpace {
220
220
221
221
TODO write about how break tokens work.
222
222
223
- #### Pseudo-classes and style overrides
223
+ #### Pseudo-elements and style overrides
224
224
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.
226
334
227
335
### Performing Layout
228
336
@@ -372,7 +480,8 @@ registerLayout('multicol', class {
372
480
} while (breakToken);
373
481
}
374
482
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.
376
485
const childBlockSize =
377
486
colConstraintSpace .layoutOpportunities ().next ().value .blockStart ;
378
487
0 commit comments