From dfbcfc73bfd8081c9cb15b2f4265fdb1906b3259 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Thu, 8 Oct 2020 14:34:12 +0900 Subject: [PATCH] [css-contain-2] Clarify how sizing containment works This is not meant to change the expected behavior, however the original text was not very clearly phrased, hence this rewrite. --- css-contain-2/Overview.bs | 183 ++++++++++++++++++++++++-------------- 1 file changed, 114 insertions(+), 69 deletions(-) diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs index 6ec24fa3fa8..7b721796560 100644 --- a/css-contain-2/Overview.bs +++ b/css-contain-2/Overview.bs @@ -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

@@ -476,50 +480,91 @@ Size Containment

contain-size-056.html - 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: +
+
Sizing as if empty +
+ 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''. - - 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 - + + 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 + - - contain-size-grid-002.html - contain-size-grid-003.html - contain-size-multicol-001.html - contain-size-multicol-as-flex-item.html - + Replaced elements 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. + + 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 + + + [=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. + + + + contain-size-replaced-006.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-grid-002.html + contain-size-grid-003.html + contain-size-multicol-001.html + contain-size-multicol-as-flex-item.html + + +
Laying out in-place +
+ 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. +
Note: [=size containment=] does not suppress baseline alignment. See [=layout containment=] for that. @@ -528,7 +573,15 @@ Size Containment contain-size-baseline-001.html - Replaced elements 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 [=grid tracks=] into which a size contained item is placed, + or if [=fit-content sizing=] the contaiing box's parent. contain-size-013.html @@ -544,33 +597,6 @@ Size Containment contain-size-replaced-006.html - 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. - -
- 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. - 

-			img {
-				width: 100px;
-				aspect-ratio: 1/1;
-				contain: size;
-			}
-			
-			<img src="https://www.example.com/300x100.jpg">
-
- - 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. -
- 3. [=Size containment boxes=] are monolithic (See [[CSS-BREAK-3#possible-breaks]]). @@ -578,6 +604,25 @@ Size Containment contain-size-monolithic-001.html +
+ 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. + 

+		img {
+			width: 100px;
+			aspect-ratio: 1/1;
+			contain: size;
+		}
+		
+		<img src="https://www.example.com/300x100.jpg">
+
+ + 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. +
+ By itself, size containment 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 @@ -598,7 +643,7 @@ Size Containment 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.

Layout Containment