[css-sizing-4] Define the contain-intrinsic-* longhands. w3c#5432

Author: tabatkins

css-sizing-4/Overview.bs

@@ -482,11 +482,11 @@ Intrinsic Sizes</h3>
 	ISSUE: [[css-sizing-3#intrinsic-sizes]]
 
 <h3 id='intrinsic-size-override'>
-Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
+Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties</h3>
 
-	<pre class="propdef">
-	Name: contain-intrinsic-size
-	Value: none | <<length>>{1,2}
+	<pre class=propdef>
+	Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
+	Value: none | <<length>>
 	Initial: none
 	Inherited: no
 	Applies to: elements with [=size containment=]
@@ -495,7 +495,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
 	Animation type: by computed value type
 	</pre>
 
-	This property allows elements with [=size containment=] to specify
+	These properties allow elements with [=size containment=] to specify
 	an <dfn export>explicit intrinsic inner size</dfn>,
 	causing the box to size as if its in-flow content
 	totals to a width and height
@@ -504,6 +504,29 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
 
 	Note: This is not always equivalent
 	to laying out as if the element had one child of the specified [=explicit intrinsic inner size=].
+	For example, a [=grid container=] with one child of the specified size
+	would still size according to the specified grid,
+	usually ending up with a larger content size than specified.
+
+	Values are defined as:
+
+	<dl dfn-type=value dfn-for="contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size, contain-intrinsic-size">
+		: <dfn>none</dfn>
+		:: The corresponding axis does not have an [=explicit intrinsic inner size=].
+
+		: <dfn><<length>></dfn>
+		:: The corresponding axis has an [=explicit intrinsic inner size=] of the specified <<length>>.
+	</dl>
+
+	If an element has an [=explicit intrinsic inner size=] in an axis,
+	then after laying out the element as normal for [=size containment=],
+	the size of the contents in that axis are instead treated as being the [=explicit intrinsic inner size=]
+	instead of what was calculated in layout,
+	and layout is performed again if necessary.
+	(If it has an [=explicit intrinsic inner size=] in both axises,
+	this implies the first layout can be skipped.)
+
+	These four properties are part of a [=logical property group=].
 
 	Note: An element with [=size containment=] is laid out as if it had no contents [[!CSS-CONTAIN-1]],
 	which in many cases this will cause the element to collapse to zero inner height.
@@ -518,23 +541,18 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
 	preserves the performance benefits of ignoring its contents for layout
 	while still allowing it to size as if it had content.
 
-	Values are defined as:
+	<pre class="propdef shorthand">
+	Name: contain-intrinsic-size
+	Value: [ none | <<length>> ]{1,2}
+	</pre>
 
-	<dl dfn-type=value dfn-for="contain-intrinsic-size">
-		: <dfn>none</dfn>
-		::
-			Does not specify an [=explicit intrinsic inner size=]
-			for elements with [=size containment=].
-
-		: <dfn><<length>>{2}</dfn>
-		::
-			If the element has [=size containment=],
-			specifies an [=explicit intrinsic inner size=].
-			The first <<length>> provides the inner width of the element,
-			the second provides the inner height.
-			If the second <<length>> is omitted,
-			it defaults to the same value as the first.
-	</dl>
+	'contain-intrinsic-size' is a shorthand property
+	that sets the 'contain-intrinsic-width' and 'contain-intrinsic-height' properties.
+
+	The first value represents the 'contain-intrinsic-width' value,
+	and the second represents the 'contain-intrinsic-height' value.
+	If only one value is given,
+	it applies to both properties.
 
 <h4 id='cis-scrollbars'>
 Interaction With ''overflow: auto''</h4>