@@ -41,6 +41,8 @@ spec:css-break-3; type:dfn; text:fragmentation context
4141spec:css-break-3; type:dfn; text:fragmented flow
4242spec:css2; type:value; property: height; text:auto
4343spec: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
4446</pre>
4547
4648<h2 id='intro'>
@@ -435,60 +437,15 @@ Size Containment</h3>
435437 contain-size-056.html
436438 </wpt>
437439
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=] .
441444
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.
492449
493450 <wpt>
494451 contain-size-013.html
@@ -504,41 +461,98 @@ Size Containment</h3>
504461 contain-size-replaced-006.html
505462 </wpt>
506463
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'' .
509472
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
514490
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>
523496
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=] .
536499
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>
542556
543557 3. [=Size containment boxes=] are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]] ).
544558
@@ -547,6 +561,25 @@ Size Containment</h3>
547561 contain-size-monolithic-001.html
548562 </wpt>
549563
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+
550583 By itself, <a>size containment</a> does not offer much optimization opportunity.
551584 Its primary benefit on its own is that tools which want to lay out the [=size containment box|containment box=] 's contents
552585 based on the [=size containment box|containment box=] 's size
@@ -567,7 +600,7 @@ Size Containment</h3>
567600
568601 2. When laying out the page,
569602 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.
571604
572605<h3 id='containment-layout'>
573606Layout Containment</h3>
@@ -682,7 +715,7 @@ Layout Containment</h3>
682715 contain-layout-ink-overflow-020.html
683716 </wpt>
684717
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=] .
686719
687720 <wpt>
688721 contain-layout-006.html
@@ -814,7 +847,7 @@ Paint Containment</h3>
814847 contain-paint-table-001.html
815848 contain-paint-table-002.html
816849 </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=] .
818851
819852 <wpt>
820853 contain-paint-009.html
@@ -939,11 +972,14 @@ This appendix is <em>informative</em>.
939972
940973<ul>
941974 <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:
943982 <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.
947983
948984 <li>
949985 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>.
954990 <li>
955991 terminology change: replace "containing box" with "containment box"
956992 </ul>
957- <li>
958- Be explicit that size containment suppresses intrinsic aspect ratio
959993</ul>
960994
961995<h3 id="2019-04-30-changes">Changes from the
0 commit comments