Skip to content

Commit 7e02d4b

Browse files
committed
[css-sizing-4] Replace the intrinsic-* properties with contain-intrinsic-size, per WG resolution. Closes w3c#4531.
1 parent 3358c4f commit 7e02d4b

File tree

1 file changed

+40
-52
lines changed

1 file changed

+40
-52
lines changed

css-sizing-4/Overview.bs

Lines changed: 40 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)