You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241
16
16
Abstract: This CSS module describes the 'contain' property, which indicates that the element's subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.
2. If at least one [=fragmentation container=] of a [=fragmentation context=] has [=layout containment=],
263
357
or if at least one [=fragmentation container=] of a [=fragmentation context=] is a descendant of an element with layout containment
264
358
<strong>and</strong> at least one subsequent [=fragmentation container=] of the same [=fragmentation context=]
@@ -325,13 +419,42 @@ Layout Containment</h3>
325
419
either ''overflow/visible'' or ''overflow/clip'' or a combination thereof,
326
420
any overflow must be treated as [=ink overflow=].
327
421
422
+
<wpt>
423
+
contain-layout-ink-overflow-013.html
424
+
contain-layout-ink-overflow-014.html
425
+
contain-layout-ink-overflow-015.html
426
+
contain-layout-ink-overflow-016.html
427
+
contain-layout-ink-overflow-017.html
428
+
contain-layout-ink-overflow-018.html
429
+
contain-layout-ink-overflow-019.html
430
+
contain-layout-ink-overflow-020.html
431
+
</wpt>
432
+
328
433
4. The element acts as a containing block for absolutely positioned and fixed positioned descendants.
329
434
435
+
<wpt>
436
+
contain-layout-006.html
437
+
contain-layout-007.html
438
+
contain-layout-cell-001.html
439
+
contain-layout-cell-002.html
440
+
</wpt>
441
+
330
442
5. The element creates a <a>stacking context</a>.
331
443
444
+
<wpt>
445
+
contain-layout-016.html
446
+
contain-layout-017.html
447
+
contain-layout-018.html
448
+
</wpt>
449
+
332
450
6. [=Forced breaks=] are allowed within elements with [=layout containment=],
333
451
but do not propagate to the parent as otherwise described in [[CSS-BREAK-3#break-between]].
334
452
453
+
<wpt>
454
+
contain-layout-breaks-001.html
455
+
contain-layout-breaks-002.html
456
+
</wpt>
457
+
335
458
Note: This introduces the previously non-existent possibility that [=forced breaks=]
336
459
may occur between a box and its container (See [[CSS-BREAK-3#possible-breaks]]).
337
460
@@ -341,6 +464,10 @@ Layout Containment</h3>
341
464
to something other than its descendants,
342
465
the containing element is treated as having no baseline.
343
466
467
+
<wpt>
468
+
contain-layout-baseline-001.html
469
+
</wpt>
470
+
344
471
Possible optimizations that can be enabled by <a>layout containment</a> include (but are not limited to):
345
472
346
473
1. When laying out the page,
@@ -367,6 +494,13 @@ Style Containment</h3>
367
494
must be <a for=property>scoped to the element's sub-tree</a>
368
495
and create a new counter.
369
496
497
+
<wpt>
498
+
contain-style-counters-001.html
499
+
contain-style-counters-002.html
500
+
contain-style-counters-003.html
501
+
contain-style-counters-004.html
502
+
</wpt>
503
+
370
504
2. The effects of the 'content' property's
371
505
''content/open-quote'', ''content/close-quote'', ''content/no-open-quote'' and ''content/no-close-quote''
372
506
must be <a for=property>scoped to the element's sub-tree</a>.
@@ -376,6 +510,22 @@ Style Containment</h3>
376
510
but that changes to the depth of quote nesting by these values inside the subtree
377
511
do not affect the depth of quote nesting outside the subtree.
378
512
513
+
<wpt>
514
+
quote-scoping-001.html
515
+
quote-scoping-002.html
516
+
quote-scoping-003.html
517
+
quote-scoping-004.html
518
+
</wpt>
519
+
520
+
<wpt>
521
+
contain-style-baseline-001.html
522
+
contain-style-breaks-001.html
523
+
contain-style-breaks-002.html
524
+
contain-style-breaks-003.html
525
+
contain-style-breaks-004.html
526
+
contain-style-breaks-005.html
527
+
</wpt>
528
+
379
529
Note: [[CSS-REGIONS-1]] has normative requirements on how <a>style containment</a> affects regions.
380
530
381
531
A <dfn export for=property lt="scoped | scoped property | scoped properties">scoped property</dfn> has its effects scoped to a particular element or subtree.
@@ -396,6 +546,12 @@ Style Containment</h3>
396
546
When considering the effects of the scoped property on elements <em>inside</em> the subtree,
397
547
the element at the base of the subtree is treated as if it was the root of the document.
398
548
549
+
<wpt>
550
+
counter-scoping-001.html
551
+
counter-scoping-002.html
552
+
counter-scoping-003.html
553
+
</wpt>
554
+
399
555
<div class=example>
400
556
As 'counter-increment' is scoped to an element's subtree,
401
557
the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element,
@@ -437,6 +593,23 @@ Paint Containment</h3>
437
593
paint containment has no effect.
438
594
Otherwise, giving an element <dfn export>paint containment</dfn> has the following effects:
0 commit comments