[css-contain] Notes and examples about aspect ratio and size containment

Closes #5550

Author: frivoal

css-contain-1/Overview.bs

@@ -40,6 +40,7 @@ spec:css-break-3; type:dfn; text:fragmentation container
 spec:css-break-3; type:dfn; text:fragmentation context
 spec:css-break-3; type:dfn; text:fragmented flow
 spec:css2; type:value; property: height; text:auto
+spec:css-sizing-4; type:property; text:aspect-ratio
 </pre>
 
 <h2 id='intro'>
@@ -498,6 +499,30 @@ Size Containment</h3>
 	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.
+
+		<div class=example>
+			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.
+			<pre><code class=lang-css>
+			img {
+				width: 100px;
+				aspect-ratio: 1/1;
+				contain: size;
+			}
+			</code><code class=lang-html>
+			&lt;img src="https://www.example.com/300x100.jpg">
+			</code></pre>
+
+			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.
+		</div>
+
 	3. [=Size containment boxes=] are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]]).
 
 		<wpt>

css-contain-2/Overview.bs

@@ -43,6 +43,7 @@ spec:css-break-3; type:dfn; text:fragmentation container
 spec:css-break-3; type:dfn; text:fragmentation context
 spec:css-break-3; type:dfn; text:fragmented flow
 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
 </pre>
@@ -546,6 +547,30 @@ Size Containment</h3>
 	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.
+
+		<div class=example>
+			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.
+			<pre><code class=lang-css>
+			img {
+				width: 100px;
+				aspect-ratio: 1/1;
+				contain: size;
+			}
+			</code><code class=lang-html>
+			&lt;img src="https://www.example.com/300x100.jpg">
+			</code></pre>
+
+			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.
+		</div>
+
 	3. [=Size containment boxes=] are <a spec=css-break-3>monolithic</a> (See [[CSS-BREAK-3#possible-breaks]]).
 
 		<wpt>