@@ -612,69 +612,57 @@ Max-content Sizes in Constrained-height Multi-column Layout</h3>
612612
613613
614614<h3 id='intrinsic-size-override'>
615- Overriding Intrinsic Sizes: the 'intrinsic-*' properties </h3>
615+ Overriding Contained Intrinsic Sizes: the 'contain- intrinsic-size' property </h3>
616616
617617 <pre class="propdef">
618- Name : intrinsic-block-size, intrinsic-inline- size, intrinsic-height, intrinsic-width
619- Value : legacy | auto | <<length>>
620- Initial : legacy
618+ Name : contain- intrinsic-size
619+ Value : none | <<length>>{1,2}
620+ Initial : none
621621 Inherited : no
622- Applies to : all elements except [=non-replaced=] [=inlines =]
623- Computed value : as specified, with <<length-percentage >> values computed
622+ Applies to : elements with [=size containment =]
623+ Computed value : as specified, with <<length>> values computed
624624 Percentages : n/a
625625 Animation type : by computed value type
626626 </pre>
627-
628- The 'intrinsic-*' properties determine
629- whether the [=intrinsic sizes=] of a box
630- are calculated from sizes derived from its content
631- (as defined by the rest of this chapter),
632- or from a specified <dfn export>explicit intrinsic inner size</dfn> .
633- Values are defined as follows:
634-
635- <dl dfn-type=value dfn-for="intrinsic-block-size, intrinsic-inline-size, intrinsic-height, intrinsic-width, intrinsic-size">
636- : <dfn>legacy</dfn>
637- ::
638- Does not specify an [=explicit intrinsic inner size=] of the box
639- in the relevant axis.
640- (Intrinsic sizes are thus determined in various ways
641- based on examining the content of the box as usual.
642- See [[#intrinsic]] , for example.)
643-
644-
645- : <dfn>auto</dfn>
627+
628+ This property allows elements with [=size containment=] to specify
629+ an <dfn export>explicit intrinsic inner size</dfn> ,
630+ causing the box to size as if it had contents
631+ with a combined width and height
632+ matching the specified [=explicit intrinsic inner size=]
633+ (rather than sizing as if it were empty).
634+
635+ Note: An element with [=size containment=] is laid out as if it had no contents [[!CSS-CONTAIN-1]] ,
636+ which in many cases this will cause the element to collapse to zero inner height.
637+ This can be corrected with an explicit 'height' chosen to show the expected contents,
638+ but that can have unintended effects in some layout systems,
639+ such as Flex and Grid Layout,
640+ which treat an explicit 'height' as a stronger command
641+ than an implicit content-based height.
642+ The element thus might lay out substantially differently than it would have
643+ were it simply filled with content up to that height.
644+ Providing an [=explicit intrinsic inner size=] for the element
645+ preserves the performance benefits of ignoring its contents for layout
646+ while still allowing it to size as if it had content.
647+
648+ Values are defined as:
649+
650+ <dl dfn-type=value dfn-for="contain-intrinsic-size">
651+ : <dfn>none</dfn>
646652 ::
647- If 'overflow' is not ''visible'' in the relevant axis,
648- specifies a zero [=explicit intrinsic inner size=]
649- in that axis.
650- Otherwise same as ''legacy'' .
653+ Does not specify an [=explicit intrinsic inner size=]
654+ for elements with [=size containment=] .
651655
652- : <dfn><<length>></dfn>
656+ : <dfn><<length>>{2} </dfn>
653657 ::
654- Specifies an [=explicit intrinsic inner size=]
655- in the relevant axis.
658+ If the element has [=size containment=] ,
659+ specifies an [=explicit intrinsic inner size=] .
660+ The first <<length>> provides the inner width of the element,
661+ the second provides the inner height.
662+ If the second <<length>> is omitted,
663+ it defaults to the same value as the first.
656664 </dl>
657665
658- Note: The value of 'intrinsic-*' in one axis has no affect on the other axis.
659-
660- <pre class="propdef shorthand">
661- Name : intrinsic-size
662- Value : <<'intrinsic-width'>> <<'intrinsic-height'>>?
663- </pre>
664-
665- The 'intrinsic-size' property is a [=shorthand=]
666- for setting all the 'intrinsic-*' properties in one declaration.
667-
668- The first value sets 'intrinsic-width' ,
669- and the second value sets 'intrinsic-height' .
670- If the second value is omitted,
671- it defaults to the first.
672-
673- Issue: When we figure out how to make other physical x/y shorthands,
674- like 'background-size' ,
675- work with logical sizes,
676- we'll apply the same logic here.
677-
678666
679667<!--
680668 ██████ ███████ ██ ██ ████████ ████████ ████ ████████ ██████
0 commit comments