From dfbcfc73bfd8081c9cb15b2f4265fdb1906b3259 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Thu, 8 Oct 2020 14:34:12 +0900 Subject: [PATCH 1/3] [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 6ec24fa3fa82..7b7217965603 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

From 12107801f0acf6aebb026d84ded15253f398c1c2 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Mon, 26 Oct 2020 17:51:18 +0900 Subject: [PATCH 2/3] Review tweaks --- css-contain-2/Overview.bs | 79 ++++++++++++++++++++------------------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs index 7b7217965603..4a810cb150a2 100644 --- a/css-contain-2/Overview.bs +++ b/css-contain-2/Overview.bs @@ -480,7 +480,31 @@ Size Containment contain-size-056.html - 1. Laying out a [=size containment box=] and its content is conceptually done in two phases: + 1. + 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 explicit 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 containment box's parent. + + + 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 + contain-size-replaced-006.html + + + 2. Laying out a [=size containment box=] and its content is conceptually done in two phases:
Sizing as if empty
@@ -513,7 +537,13 @@ Size Containment contain-size-grid-001.html - Replaced elements must be treated as having an intrinsic width and height of 0. + Replaced elements must be treated as having an intrinsic width and height of 0 + and no [=intrinsic aspect ratio=]. + + Note: Size containment only suppresses the [=intrinsic aspect ratio=], + so properties like 'aspect-ratio' which affect that [=preferred aspect ratio=] directly + are honored. + contain-size-013.html @@ -527,17 +557,14 @@ Size Containment 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. + + replaced-element-023.html + replaced-element-025.html + replaced-element-027.html + All CSS properties of the [=size containment box=] are taken into account - as they would be when performing layout norally. + as they would be when performing layout normally. @@ -546,7 +573,7 @@ Size Containment contain-size-replaced-006.html - Note: Even when the element's [=sizing properties=] are ''height/auto'' + Note: Even when the element's [=sizing properties=] specify an intrinsic size, this does not necessarily make the element zero-sized: properties set on the element itself, such as the 'columns' property or the 'grid' property, @@ -562,41 +589,17 @@ Size Containment
Laying out in-place
The [=size containment box|containment box=]'s content - (including any pseudo-element) + (including any pseudo-elements) must then be laid out into the now fixed-size [=size containment box|containment box=] normally.
- Note: [=size containment=] does not suppress baseline alignment. + Note: [=Size containment=] does not suppress baseline alignment. See [=layout containment=] for that. contain-size-baseline-001.html - 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 - 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 - contain-size-replaced-006.html - - 3. [=Size containment boxes=] are monolithic (See [[CSS-BREAK-3#possible-breaks]]). From 04847a398f63c13d90ddd43a3e93eddea91009f7 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Thu, 5 Nov 2020 09:29:35 +0900 Subject: [PATCH 3/3] [css-contain-2] Allow exceptions to size containment Normally, properties applied on a size-contained element itself do affect the size of the element. There may be an interest in exempting some properties, like grid track sizing properties, from that, but it is currently undecided. For now, just spec the simple behavior without exemptions, but allow exemptions in other specs to exist. --- css-contain-2/Overview.bs | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs index 0c5b594faeae..86d25489d7d9 100644 --- a/css-contain-2/Overview.bs +++ b/css-contain-2/Overview.bs @@ -564,9 +564,7 @@ Size Containment All CSS properties of the [=size containment box=] are taken into account as they would be when performing layout normally. - + Other specifications may make specific exemptions. contain-size-replaced-006.html @@ -574,9 +572,9 @@ Size Containment Note: Even when the element's [=sizing properties=] specify an intrinsic size, 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. + properties set on the element itself + continue to be taken into account, + which can cause it to be larger. contain-size-grid-002.html