Skip to content

Commit b8fc867

Browse files
frivoalfrivoal
committed
[css-contain-1] marking up the clarification of size containement as a diff
1 parent 13b0795 commit b8fc867

1 file changed

Lines changed: 145 additions & 117 deletions

File tree

‎css-contain-1/Overview.bs‎

Lines changed: 145 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -437,130 +437,157 @@ Size Containment</h3>
437437
contain-size-056.html
438438
</wpt>
439439

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=].
444-
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.
449-
450-
<wpt>
451-
contain-size-013.html
452-
contain-size-041.html
453-
contain-size-042.html
454-
contain-size-replaced-001.html
455-
contain-size-replaced-002.html
456-
contain-size-replaced-003a.html
457-
contain-size-replaced-003b.html
458-
contain-size-replaced-003c.html
459-
contain-size-replaced-004.html
460-
contain-size-replaced-005.html
461-
contain-size-replaced-006.html
462-
</wpt>
463-
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''.
472-
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
490-
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>
496-
497-
<a>Replaced elements</a> must be treated as having an intrinsic width and height of 0
498-
and no [=intrinsic aspect ratio=].
499-
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>
440+
<div class=correction id=c1>
441+
<span class=marker>Candidate Correction 1:</span>
442+
The way this section was previously written was somewhat ambiguous,
443+
causing implementers to have some doubts about the precise intended effects
444+
in certain cases.
445+
This proposed rewrite clarifies what is meant,
446+
without changing the intended behavior.
447+
</div>
529448

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.
449+
<ol>
450+
<li>
451+
<ins class=c1>
452+
The [=intrinsic sizes=] of the [=size containment box=]
453+
are determined as if the element had no content,
454+
following the same logic as when [=sizing as if empty=].
535455

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>
456+
Note: This affects explicit invocations of the ''min-content'' or ''max-content'' keywords,
457+
as well as any calculation that depends on these measurement,
458+
such as sizing <span class=informative>[=grid tracks=]</span> into which a size contained item is placed,
459+
or if [=fit-content sizing=] the containment box's parent.
542460

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>
461+
<wpt>
462+
contain-size-013.html
463+
contain-size-041.html
464+
contain-size-042.html
465+
contain-size-replaced-001.html
466+
contain-size-replaced-002.html
467+
contain-size-replaced-003a.html
468+
contain-size-replaced-003b.html
469+
contain-size-replaced-003c.html
470+
contain-size-replaced-004.html
471+
contain-size-replaced-005.html
472+
contain-size-replaced-006.html
473+
</wpt>
474+
</ins>
549475

550-
Note: [=Size containment=] does not suppress baseline alignment.
551-
See [=layout containment=] for that.
476+
<li>
477+
<del class=c1>
478+
When calculating the size of [=size containment box=],
479+
it must be treated as having no contents.
480+
</del>
481+
<ins class=c1>Laying out a [=size containment box=] and its content is conceptually done in two phases:</ins>
482+
<dl>
483+
<dt><ins class=c1><dfn>Sizing as if empty</dfn></ins>
484+
<dd>
485+
<ins class=c1>
486+
The [=used value|used=] 'width' and 'height' of the [=size containment box|containment box=]
487+
are determined as if performing a normal layout of the box,
488+
except that it is treated as having no content--
489+
not even through pseudo elements such as ''::before'', ''::after'', or ''::marker''.
490+
491+
<wpt>
492+
contain-size-021.html
493+
contain-size-023.html
494+
contain-size-025.html
495+
contain-size-027.html
496+
contain-size-061.html
497+
contain-size-062.html
498+
contain-size-063.html
499+
contain-size-borders.html
500+
contain-size-fieldset-001.html
501+
contain-size-fieldset-002.html
502+
contain-size-select-001.html
503+
contain-size-select-002.html
504+
contain-size-scrollbars-001.html
505+
contain-size-scrollbars-002.html
506+
contain-size-scrollbars-003.html
507+
contain-size-scrollbars-004.html
508+
509+
contain-size-button-001.html
510+
contain-size-flexbox-001.html
511+
contain-size-flexbox-002.html
512+
contain-size-grid-001.html
513+
</wpt>
514+
515+
<a>Replaced elements</a> must be treated as having an intrinsic width and height of 0
516+
and no [=intrinsic aspect ratio=].
517+
518+
Note: Size containment only suppresses the [=intrinsic aspect ratio=],
519+
so properties like 'aspect-ratio' which affect that [=preferred aspect ratio=] directly
520+
are honored.
521+
522+
<wpt>
523+
contain-size-013.html
524+
contain-size-041.html
525+
contain-size-042.html
526+
contain-size-replaced-001.html
527+
contain-size-replaced-002.html
528+
contain-size-replaced-003a.html
529+
contain-size-replaced-003b.html
530+
contain-size-replaced-003c.html
531+
contain-size-replaced-004.html
532+
contain-size-replaced-005.html
533+
</wpt>
534+
<wpt pathprefix=css/css-sizing/aspect-ratio/>
535+
replaced-element-023.html
536+
replaced-element-025.html
537+
replaced-element-027.html
538+
</wpt>
539+
540+
All CSS properties of the [=size containment box=] are taken into account
541+
as they would be when performing layout normally.
542+
Other specifications may make specific exemptions.
543+
544+
<wpt>
545+
contain-size-replaced-006.html
546+
</wpt>
547+
</ins>
548+
549+
Note: Even when the element's [=sizing properties=] <del class=c1>are auto</del><ins class=c1>specify an intrinsic size</ins>,
550+
this does not necessarily make the element zero-sized:
551+
properties set on the element itself<del class=c1>,
552+
such as the 'columns' property or the 'grid' property,</del>
553+
continue to be taken into account<ins class=c1>,
554+
which can cause it to be larger</ins>.
555+
556+
<wpt>
557+
contain-size-grid-002.html
558+
contain-size-grid-003.html
559+
contain-size-multicol-001.html
560+
contain-size-multicol-as-flex-item.html
561+
</wpt>
562+
563+
<dt><ins class=c1><dfn>Laying out in-place</dfn></ins>
564+
<dd>
565+
<del class=c1>Then, its contents</del>
566+
<ins class=c1>
567+
The [=size containment box|containment box=]'s content
568+
(including any pseudo-elements)
569+
</ins>
570+
must then be laid out into
571+
the <ins class=c1>now fixed-size</ins> [=size containment box|containment box=]<del class=c1>'s resolved size</del><ins class=c1> normally</ins>.
572+
</dl>
573+
574+
Note: [=Size containment=] does not suppress baseline alignment.
575+
See [=layout containment=] for that.
552576

553-
<wpt>
554-
contain-size-baseline-001.html
555-
</wpt>
577+
<wpt>
578+
contain-size-baseline-001.html
579+
</wpt>
556580

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

559-
<wpt>
560-
contain-size-breaks-001.html
561-
contain-size-monolithic-001.html
562-
</wpt>
584+
<wpt>
585+
contain-size-breaks-001.html
586+
contain-size-monolithic-001.html
587+
</wpt>
588+
</ol>
563589

590+
<ins class=c1>
564591
<div class=example>
565592
Given the following markup and style, the image would be sized to 100px by 100px,
566593
as the aspect ratio set by the 'aspect-ratio' property takes effect.
@@ -579,6 +606,7 @@ Size Containment</h3>
579606
as its intrinsic aspect ratio is suppressed,
580607
and its intrinsic height is treated as 0.
581608
</div>
609+
</ins>
582610

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

601629
2. When laying out the page,
602630
if the [=size containment box|containment box=] is off-screen or obscured,
603-
the layout of its contents (i.e. "[=laying out in-place=]") can be delayed or done at a lower priority.
631+
the layout of its contents <ins class=c1>(i.e. "[=laying out in-place=]") </ins>can be delayed or done at a lower priority.
604632

605633
<h3 id='containment-layout'>
606634
Layout Containment</h3>

0 commit comments

Comments
 (0)