@@ -292,6 +292,7 @@ with its top left corner at the canvas origin.
292
292
given the child,
293
293
|line box|,
294
294
and |canvas|.
295
+ </dl>
295
296
296
297
: If |root| is an [=inline-level=] [=block box|block=] or [=table wrapper box=]
297
298
:: [=Paint a stacking container=]
@@ -336,51 +337,78 @@ as making outlines easily visible
336
337
is an important accessibility feature.
337
338
338
339
340
+ <!-- Big Text: scroll cb
341
+
342
+ ███▌ ███▌ ████▌ ███▌ █▌ █▌ ███▌ ████▌
343
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
344
+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
345
+ ███▌ █▌ ████▌ █▌ █▌ █▌ █▌ █▌ █████
346
+ █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌
347
+ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
348
+ ███▌ ███▌ █▌ █▌ ███▌ █████ █████ ███▌ ████▌
349
+ -->
350
+
339
351
Scrollable Containing Block {#scrollable-cb}
340
352
===========================
341
-
342
- When an element
343
- generates an [=absolute positioning containing block=]
344
- for its descendants,
345
- that [=containing block=] is generated from the element's [=padding box=] edges.
346
- If that element is a [=scroll container=] ,
347
- this corresponds to the dimensions of the [=scrollport=] ,
348
- and does not shift as the scroll container is scrolled.
349
- In other words,
350
- it's "outside of" the scrollable area.
351
-
352
- Sometimes, however, you instead want a [=containing block=]
353
- based on the "inside" of the scroll container,
354
- sized according to the scrollable contents
355
- and shifting as the container is scrolled.
356
-
357
- Whenever a [=scroll container=] generates an [=absolute positioning containing block=] ,
358
- it addition to the normal [=containing block=] it generates,
359
- it also generates a <dfn export>scrollable containing block</dfn> .
360
- This is sized to match the [=padding box=] edges
361
- of the scrollable area,
362
- and is treated as being "inside" the scrollable area,
363
- so it moves as the [=scroll container=] is scrolled.
364
-
365
- Note: This is not <em> quite</em> the [=scrollable overflow rectangle=] ;
366
- in particular, it doesn't include the effects of transformed elements
367
- or absolutely positioned elements.
368
-
369
- In [=containing block chains=] ,
370
- the [=scrollable containing block=] generated by an element
371
- is considered a child of the element's normal [=containing block=] ,
372
- and a parent of any containing blocks generated by its descendants.
373
-
374
- This also applies to the [=root scroller=] ;
375
- a [=scrollable containing block=] that corresponds
376
- to the padding edges of the entire document
377
- is generated,
378
- and is considered a child of the [=initial containing block=] .
379
-
380
- The [=scrollable containing block=] is not used by default,
381
- but certain CSS features
382
- (such as 'position-area' )
383
- can specify that they use it instead of an element's normal [=containing block=] .
353
+ When a [=scroll container=] establishes an [=absolute positioning containing block=]
354
+ for an [=absolutely positioned box=] ,
355
+ one of three possible [=containing blocks=] are used:
356
+
357
+ : <dfn export>fixed containing block</dfn>
358
+ :: The [=fixed containing block=] of a [=scroll container=]
359
+ corresponds to the [=scrollport=] ,
360
+ i.e. the inner [=padding box=] edges of the [=scroll container=] ,
361
+ but scrolling with the outer context, not the [=scroll container=] ’s contents.
362
+
363
+ The [=fixed containing block=] established by the document
364
+ is the [=fixed positioning containing block=] .
365
+
366
+ : <dfn export>local containing block</dfn>
367
+ :: The [=local containing block=] of a [=scroll container=]
368
+ corresponds to the [=padding box=] edges of the [=scroll container=] ,
369
+ but is affixed to the [=scrollable overflow area=] ,
370
+ and scrolls with the [=scroll container=] ’s contents.
371
+
372
+ The [=local containing block=] established by the document
373
+ is the [=initial containing block=] .
374
+
375
+ : <dfn export>scrollable containing block</dfn>
376
+ :: The [=scrollable containing block=] of a [=scroll container=]
377
+ corresponds to the [=padding edge=] of
378
+ the [=scroll container=] ’s [=scrollable overflow area=] ,
379
+ i.e. the outer edge of the [=padding=] surrounding its content
380
+ when determining the extent of its [=scrollable overflow area=] .
381
+ See [[css-overflow-3#scrollable]] .
382
+ In all cases the [=scrollable containing block=]
383
+ at least encompasses the [=local containing block=] .
384
+
385
+ Note: This includes floats,
386
+ but ignores absolutely positioned descendants,
387
+ content overflowing descendant boxes,
388
+ and the effects of relative positioning and transforms,
389
+ which do otherwise extend the scrollable area to display them.
390
+
391
+ The [=scrollable containing block=] established by the document
392
+ is the union of the [=initial containing block=] and
393
+ the [=margin box=] of the [=root box=] itself.
394
+
395
+ Note: While all of these are in some sense corresponding to the [=padding box=] ,
396
+ they do not coincide for boxes with [=scrollable overflow=] .
397
+
398
+ ISSUE: Figure out the exact concepts needed for top layer.
399
+ They probably want to do something a tiny bit different,
400
+ specific to their layer.
401
+
402
+ Unless otherwise specified,
403
+ absolutely positioned boxes use the [=local containing block=] .
404
+ Certain CSS features can specify a different [=containing block=] .
405
+ For example, [=fixed positioned boxes=] typically use the document’s [=fixed containing block=] ,
406
+ and 'position-area' values other than ''position-area/none''
407
+ can opt absolutely positioned boxes into the [=scrollable containing block=] .
408
+
409
+ Note: There is not currently any way to refer to a [=fixed containing block=]
410
+ other than the [=fixed positioning containing block=] ,
411
+ but one might be added in the future.
384
412
385
413
386
414
<!-- Big Text: top
0 commit comments