@@ -41,6 +41,8 @@ spec:css-break-3; type:dfn; text:fragmentation context
41
41
spec:css-break-3; type:dfn; text:fragmented flow
42
42
spec:css2; type:value; property: height; text:auto
43
43
spec:css-sizing-4; type:property; text:aspect-ratio
44
+ spec:css-sizing-3; type:value; for:width; text:min-content
45
+ spec:css-sizing-3; type:value; for:width; text:max-content
44
46
</pre>
45
47
46
48
<h2 id='intro'>
@@ -435,60 +437,15 @@ Size Containment</h3>
435
437
contain-size-056.html
436
438
</wpt>
437
439
438
- 1. When calculating the size of the [=size containment box=] ,
439
- including when computing its [=intrinsic size=] ,
440
- it must be treated as having no contents.
440
+ 1.
441
+ The [=intrinsic sizes=] of the [=size containment box=]
442
+ are determined as if the element had no content,
443
+ following the same logic as when [=sizing as if empty=] .
441
444
442
- <wpt>
443
- contain-size-021.html
444
- contain-size-023.html
445
- contain-size-025.html
446
- contain-size-027.html
447
- contain-size-061.html
448
- contain-size-062.html
449
- contain-size-063.html
450
- contain-size-borders.html
451
- contain-size-fieldset-001.html
452
- contain-size-fieldset-002.html
453
- contain-size-select-001.html
454
- contain-size-select-002.html
455
- contain-size-scrollbars-001.html
456
- contain-size-scrollbars-002.html
457
- contain-size-scrollbars-003.html
458
- contain-size-scrollbars-004.html
459
-
460
- contain-size-button-001.html
461
- contain-size-flexbox-001.html
462
- contain-size-flexbox-002.html
463
- contain-size-grid-001.html
464
- </wpt>
465
-
466
- Note: Even when the element's [=sizing properties=] are ''height/auto''
467
- this does not necessarily make the element zero-sized:
468
- properties set on the element itself,
469
- such as the 'columns' property or the 'grid' property,
470
- continue to be taken into account.
471
-
472
- <wpt>
473
- contain-size-grid-002.html
474
- contain-size-grid-003.html
475
- contain-size-grid-004.html
476
- contain-size-multicol-001.html
477
- contain-size-multicol-as-flex-item.html
478
- </wpt>
479
-
480
- Then,
481
- its contents must then be laid out into the [=size containment box=] 's resolved size normally (including any pseudo-elements),
482
- i.e. [=size containment=] has no effect in this phase.
483
-
484
- Note: [=size containment=] does not suppress baseline alignment.
485
- See [=layout containment=] for that.
486
-
487
- <wpt>
488
- contain-size-baseline-001.html
489
- </wpt>
490
-
491
- <a>Replaced elements</a> must be treated as having an intrinsic width and height of 0.
445
+ Note: This affects explicit invocations of the ''min-content'' or ''max-content'' keywords,
446
+ as well as any calculation that depends on these measurement,
447
+ such as sizing <span class=informative> [=grid tracks=] </span> into which a size contained item is placed,
448
+ or if [=fit-content sizing=] the containment box's parent.
492
449
493
450
<wpt>
494
451
contain-size-013.html
@@ -504,41 +461,98 @@ Size Containment</h3>
504
461
contain-size-replaced-006.html
505
462
</wpt>
506
463
507
- 2. [=Size containment boxes=] must be treated
508
- as if they had no [=intrinsic aspect ratio=] .
464
+ 2. Laying out a [=size containment box=] and its content is conceptually done in two phases:
465
+ <dl>
466
+ <dt> <dfn>Sizing as if empty</dfn>
467
+ <dd>
468
+ The [=used value|used=] 'width' and 'height' of the [=size containment box|containment box=]
469
+ are determined as if performing a normal layout of the box,
470
+ except that it is treated as having no content--
471
+ not even through pseudo elements such as ''::before'' , ''::after'' , or ''::marker'' .
509
472
510
- Note: Size containment only suppresses the [=intrinsic aspect ratio=] ,
511
- not [=preferred aspect ratio=] ,
512
- so properties like 'aspect-ratio' which affect that [=preferred aspect ratio=] directly
513
- are honored.
473
+ <wpt>
474
+ contain-size-021.html
475
+ contain-size-023.html
476
+ contain-size-025.html
477
+ contain-size-027.html
478
+ contain-size-061.html
479
+ contain-size-062.html
480
+ contain-size-063.html
481
+ contain-size-borders.html
482
+ contain-size-fieldset-001.html
483
+ contain-size-fieldset-002.html
484
+ contain-size-select-001.html
485
+ contain-size-select-002.html
486
+ contain-size-scrollbars-001.html
487
+ contain-size-scrollbars-002.html
488
+ contain-size-scrollbars-003.html
489
+ contain-size-scrollbars-004.html
514
490
515
- <wpt>
516
- contain-size-replaced-007.html
517
- </wpt>
518
- <wpt pathprefix=css/css-sizing/aspect-ratio/>
519
- replaced-element-023.html
520
- replaced-element-025.html
521
- replaced-element-027.html
522
- </wpt>
491
+ contain-size-button-001.html
492
+ contain-size-flexbox-001.html
493
+ contain-size-flexbox-002.html
494
+ contain-size-grid-001.html
495
+ </wpt>
523
496
524
- <div class=example>
525
- Given the following markup and style, the image would be sized to 100px by 100px,
526
- as the aspect ratio set by the 'aspect-ratio' property takes effect.
527
- <pre><code class=lang-css>
528
- img {
529
- width: 100px;
530
- aspect-ratio: 1/1;
531
- contain: size;
532
- }
533
- </code><code class=lang-html>
534
- <img src="https://www.example.com/300x100.jpg">
535
- </code></pre>
497
+ <a>Replaced elements</a> must be treated as having an intrinsic width and height of 0
498
+ and no [=intrinsic aspect ratio=] .
536
499
537
- If the 'aspect-ratio' property had not been declared,
538
- the image would have been 100px by 0px,
539
- as its intrinsic aspect ratio is suppressed,
540
- and its intrinsic height is treated as 0.
541
- </div>
500
+ Note: Size containment only suppresses the [=intrinsic aspect ratio=] ,
501
+ so properties like 'aspect-ratio' which affect that [=preferred aspect ratio=] directly
502
+ are honored.
503
+
504
+ <wpt>
505
+ contain-size-013.html
506
+ contain-size-041.html
507
+ contain-size-042.html
508
+ contain-size-replaced-001.html
509
+ contain-size-replaced-002.html
510
+ contain-size-replaced-003a.html
511
+ contain-size-replaced-003b.html
512
+ contain-size-replaced-003c.html
513
+ contain-size-replaced-004.html
514
+ contain-size-replaced-005.html
515
+ </wpt>
516
+ <wpt pathprefix=css/css-sizing/aspect-ratio/>
517
+ replaced-element-023.html
518
+ replaced-element-025.html
519
+ replaced-element-027.html
520
+ </wpt>
521
+
522
+ All CSS properties of the [=size containment box=] are taken into account
523
+ as they would be when performing layout normally.
524
+ Other specifications may make specific exemptions.
525
+
526
+ <wpt>
527
+ contain-size-replaced-006.html
528
+ </wpt>
529
+
530
+ Note: Even when the element's [=sizing properties=] specify an intrinsic size,
531
+ this does not necessarily make the element zero-sized:
532
+ properties set on the element itself
533
+ continue to be taken into account,
534
+ which can cause it to be larger.
535
+
536
+ <wpt>
537
+ contain-size-grid-002.html
538
+ contain-size-grid-003.html
539
+ contain-size-multicol-001.html
540
+ contain-size-multicol-as-flex-item.html
541
+ </wpt>
542
+
543
+ <dt> <dfn>Laying out in-place</dfn>
544
+ <dd>
545
+ The [=size containment box|containment box=] 's content
546
+ (including any pseudo-elements)
547
+ must then be laid out into the now fixed-size [=size containment box|containment box=] normally.
548
+ </dl>
549
+
550
+ Note: [=Size containment=] does not suppress baseline alignment.
551
+ See [=layout containment=] for that.
552
+
553
+ <wpt>
554
+ contain-size-baseline-001.html
555
+ </wpt>
542
556
543
557
3. [=Size containment boxes=] are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]] ).
544
558
@@ -547,6 +561,25 @@ Size Containment</h3>
547
561
contain-size-monolithic-001.html
548
562
</wpt>
549
563
564
+ <div class=example>
565
+ Given the following markup and style, the image would be sized to 100px by 100px,
566
+ as the aspect ratio set by the 'aspect-ratio' property takes effect.
567
+ <pre><code class=lang-css>
568
+ img {
569
+ width: 100px;
570
+ aspect-ratio: 1/1;
571
+ contain: size;
572
+ }
573
+ </code><code class=lang-html>
574
+ <img src="https://www.example.com/300x100.jpg">
575
+ </code></pre>
576
+
577
+ If the 'aspect-ratio' property had not been declared,
578
+ the image would have been 100px by 0px,
579
+ as its intrinsic aspect ratio is suppressed,
580
+ and its intrinsic height is treated as 0.
581
+ </div>
582
+
550
583
By itself, <a>size containment</a> does not offer much optimization opportunity.
551
584
Its primary benefit on its own is that tools which want to lay out the [=size containment box|containment box=] 's contents
552
585
based on the [=size containment box|containment box=] 's size
@@ -567,7 +600,7 @@ Size Containment</h3>
567
600
568
601
2. When laying out the page,
569
602
if the [=size containment box|containment box=] is off-screen or obscured,
570
- the layout of its contents can be delayed or done at a lower priority.
603
+ the layout of its contents (i.e. " [=laying out in-place=] ") can be delayed or done at a lower priority.
571
604
572
605
<h3 id='containment-layout'>
573
606
Layout Containment</h3>
@@ -682,7 +715,7 @@ Layout Containment</h3>
682
715
contain-layout-ink-overflow-020.html
683
716
</wpt>
684
717
685
- 4. The [=layout containment box=] acts as a containing block for absolutely positioned and fixed positioned descendants .
718
+ 4. The [=layout containment box=] establishes an [=absolute positioning containing block=] and a [= fixed positioning containing block=] .
686
719
687
720
<wpt>
688
721
contain-layout-006.html
@@ -814,7 +847,7 @@ Paint Containment</h3>
814
847
contain-paint-table-001.html
815
848
contain-paint-table-002.html
816
849
</wpt>
817
- 2. The [=paint containment box=] acts as a containing block for absolutely positioned and fixed positioned descendants .
850
+ 2. The [=paint containment box=] establishes an [=absolute positioning containing block=] and a [= fixed positioning containing block=] .
818
851
819
852
<wpt>
820
853
contain-paint-009.html
@@ -939,11 +972,14 @@ This appendix is <em>informative</em>.
939
972
940
973
<ul>
941
974
<li>
942
- Editorial tweaks:
975
+ Large rephrasing of the [[#containment-size]] section
976
+ to clarify ambiguities about how it is meant to work,
977
+ and improve the general legibility.
978
+ The intended behavior is unaltered.
979
+
980
+ <li>
981
+ Smaller Editorial tweaks:
943
982
<ul>
944
- <li>
945
- phrasing improvements in [[#containment-size]] to highlight that "sizing" includes "intrinsic sizing",
946
- and improve the general legibility of some sentence.
947
983
948
984
<li>
949
985
phrasing improvement in [[#containment-paint]] to use established terminology rather than ad-hoc wording with the same intended meaning
@@ -954,8 +990,6 @@ This appendix is <em>informative</em>.
954
990
<li>
955
991
terminology change: replace "containing box" with "containment box"
956
992
</ul>
957
- <li>
958
- Be explicit that size containment suppresses intrinsic aspect ratio
959
993
</ul>
960
994
961
995
<h3 id="2019-04-30-changes">Changes from the
0 commit comments