Skip to content

Commit d09a0d3

Browse files
committed
[css-contain-1] Sync-up with edits made in Level 2
1 parent 6fb9e16 commit d09a0d3

File tree

1 file changed

+127
-93
lines changed

1 file changed

+127
-93
lines changed

css-contain-1/Overview.bs

+127-93
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ spec:css-break-3; type:dfn; text:fragmentation context
4141
spec:css-break-3; type:dfn; text:fragmented flow
4242
spec:css2; type:value; property: height; text:auto
4343
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
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-
&lt;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+
&lt;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'>
573606
Layout 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

Comments
 (0)