Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-contain-2] Clarify how sizing containment works #5596

Closed
wants to merge 1 commit into from
Closed

[css-contain-2] Clarify how sizing containment works #5596

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 114 additions & 69 deletions css-contain-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ spec:css-sizing-4; type:property; text:contain-intrinsic-size
spec:css-sizing-4; type:property; text:aspect-ratio
spec:intersection-observer; type:dfn; text:intersection root
spec:css-sizing-3; type:value; for:height; text:auto
spec:css-sizing-3; type:property; text:width
spec:css-sizing-3; type:property; text:height
spec:css-sizing-3; type:value; for:width; text:min-content
spec:css-sizing-3; type:value; for:width; text:max-content
</pre>

<h2 id='intro'>
Expand Down Expand Up @@ -476,50 +480,91 @@ Size Containment</h3>
contain-size-056.html
</wpt>

1. When calculating the size of the [=size containment box=],
including when computing its [=intrinsic size=],
it must be treated as having no contents.
1. Laying out a [=size containment box=] and its content is conceptually done in two phases:
<dl>
<dt><dfn>Sizing as if empty</dfn>
<dd>
The [=used value|used=] 'width' and 'height' of the [=size containment box|containment box=]
are determined as if performing a normal layout of the box,
except that it is treated as having no content--
not even through pseudo elements such as ''::before'', ''::after'', or ''::marker''.

<wpt>
contain-size-021.html
contain-size-023.html
contain-size-025.html
contain-size-027.html
contain-size-061.html
contain-size-062.html
contain-size-063.html
contain-size-borders.html
contain-size-fieldset-001.html
contain-size-fieldset-002.html
contain-size-select-001.html
contain-size-select-002.html
contain-size-scrollbars-001.html
contain-size-scrollbars-002.html
contain-size-scrollbars-003.html
contain-size-scrollbars-004.html

contain-size-button-001.html
contain-size-flexbox-001.html
contain-size-flexbox-002.html
contain-size-grid-001.html
</wpt>
<wpt>
contain-size-021.html
contain-size-023.html
contain-size-025.html
contain-size-027.html
contain-size-061.html
contain-size-062.html
contain-size-063.html
contain-size-borders.html
contain-size-fieldset-001.html
contain-size-fieldset-002.html
contain-size-select-001.html
contain-size-select-002.html
contain-size-scrollbars-001.html
contain-size-scrollbars-002.html
contain-size-scrollbars-003.html
contain-size-scrollbars-004.html

Note: Even when the element's [=sizing properties=] are ''height/auto''
this does not necessarily make the element zero-sized:
properties set on the element itself,
such as the 'columns' property or the 'grid' property,
continue to be taken into account.
contain-size-button-001.html
contain-size-flexbox-001.html
contain-size-flexbox-002.html
contain-size-grid-001.html
</wpt>

<wpt>
contain-size-grid-002.html
contain-size-grid-003.html
contain-size-multicol-001.html
contain-size-multicol-as-flex-item.html
</wpt>
<a>Replaced elements</a> must be treated as having an intrinsic width and height of 0.

Then,
its contents must then be laid out into the [=size containment box=]'s resolved size normally (including any pseudo-elements),
i.e. [=size containment=] has no effect in this phase.
<wpt>
contain-size-013.html
contain-size-041.html
contain-size-042.html
contain-size-replaced-001.html
contain-size-replaced-002.html
contain-size-replaced-003a.html
contain-size-replaced-003b.html
contain-size-replaced-003c.html
contain-size-replaced-004.html
contain-size-replaced-005.html
</wpt>

[=Size containment boxes=] must be treated
as if they had no [=intrinsic aspect ratio=].

Note: Size containment only suppresses the [=intrinsic aspect ratio=],
not [=preferred aspect ratio=],
so properties like 'aspect-ratio' which affect that [=preferred aspect ratio=] directly
are honored.

All CSS properties of the [=size containment box=] are taken into account
as they would be when performing layout norally.
<!-- uncomment this (and edit the following note) if we want to allow grid to opt into not doing track sizing etc:
Other specifications may make specific explicit exemptions.
-->

<wpt>
contain-size-replaced-006.html
</wpt>

Note: Even when the element's [=sizing properties=] are ''height/auto''
this does not necessarily make the element zero-sized:
properties set on the element itself,
such as the 'columns' property or the 'grid' property,
continue to be taken into account.

<wpt>
contain-size-grid-002.html
contain-size-grid-003.html
contain-size-multicol-001.html
contain-size-multicol-as-flex-item.html
</wpt>

<dt><dfn>Laying out in-place</dfn>
<dd>
The [=size containment box|containment box=]'s content
(including any pseudo-element)
must then be laid out into the now fixed-size [=size containment box|containment box=] normally.
</dl>

Note: [=size containment=] does not suppress baseline alignment.
See [=layout containment=] for that.
Expand All @@ -528,7 +573,15 @@ Size Containment</h3>
contain-size-baseline-001.html
</wpt>

<a>Replaced elements</a> must be treated as having an intrinsic width and height of 0.
2.
The [=intrinsic sizes=] of the [=size containment box=]
are determined as if the element had no content,
following the same logic as when [=sizing as if empty=].

Note: This affects explit invocations of the ''min-content'' or ''max-content'' keywords,
as well as any calculation that depends on these measurement,
such as sizing <span class=informative>[=grid tracks=]</span> into which a size contained item is placed,
or if [=fit-content sizing=] the contaiing box's parent.

<wpt>
contain-size-013.html
Expand All @@ -544,40 +597,32 @@ Size Containment</h3>
contain-size-replaced-006.html
</wpt>

2. [=Size containment boxes=] must be treated
as if they had no [=intrinsic aspect ratio=].

Note: Size containment only suppresses the [=intrinsic aspect ratio=],
not [=preferred aspect ratio=],
so properties like 'aspect-ratio' which affect that [=preferred aspect ratio=] directly
are honored.

<div class=example>
Given the following markup and style, the image would be sized to 100px by 100px,
as the aspect ratio set by the 'aspect-ratio' property takes effect.
<pre><code class=lang-css>
img {
width: 100px;
aspect-ratio: 1/1;
contain: size;
}
</code><code class=lang-html>
&lt;img src="https://www.example.com/300x100.jpg">
</code></pre>

If the 'aspect-ratio' property had not been declared,
the image would have been 100px by 0px,
as its intrinsic aspect ratio is suppressed,
and its intrinsic height is treated as 0.
</div>

3. [=Size containment boxes=] are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]]).

<wpt>
contain-size-breaks-001.html
contain-size-monolithic-001.html
</wpt>

<div class=example>
Given the following markup and style, the image would be sized to 100px by 100px,
as the aspect ratio set by the 'aspect-ratio' property takes effect.
<pre><code class=lang-css>
img {
width: 100px;
aspect-ratio: 1/1;
contain: size;
}
</code><code class=lang-html>
&lt;img src="https://www.example.com/300x100.jpg">
</code></pre>

If the 'aspect-ratio' property had not been declared,
the image would have been 100px by 0px,
as its intrinsic aspect ratio is suppressed,
and its intrinsic height is treated as 0.
</div>

By itself, <a>size containment</a> does not offer much optimization opportunity.
Its primary benefit on its own is that tools which want to lay out the [=size containment box|containment box=]'s contents
based on the [=size containment box|containment box=]'s size
Expand All @@ -598,7 +643,7 @@ Size Containment</h3>

2. When laying out the page,
if the [=size containment box|containment box=] is off-screen or obscured,
the layout of its contents can be delayed or done at a lower priority.
the layout of its contents (i.e. "[=laying out in-place=]") can be delayed or done at a lower priority.

<h3 id='containment-layout'>
Layout Containment</h3>
Expand Down