[css-sizing-4] Add intrinsic sizing example for aspect-ratio. w3c#4639

Author: fantasai

css-sizing-4/Overview.bs

@@ -275,6 +275,37 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
 		</pre>
 	</div>
 
+	<div class="example">
+		In the following example:
+
+		<pre>
+			&lt;div id=container style="height: 100px; float: left;">
+				&lt;div id=item style="height: 100%; aspect-ratio: 1/1;">content&lt;/div>
+			&lt;/div>
+		</pre>
+
+		Since the height of the <code>#item</code> is a percentage that resolves against a definite container,
+		the width of the item resolves to 100px for both its intrinsic size contributions as well as for final layout,
+		so the container also sizes to a width of 100px.
+
+		<pre>
+			&lt;div id=container style="height: auto; float: left;">
+				&lt;div id=item style="height: 100%; aspect-ratio: 1/1;">content&lt;/div>
+			&lt;/div>
+		</pre>
+
+		In this next example,
+		the percentage height of the item cannot be resolved and [=behaves as auto=]
+		(see [[CSS2/visudet#the-height-property]]).
+		Since both axes now have an [=automatic size=],
+		the height becomes the [=ratio-dependent axis=].
+		Calculating the [=intrinsic size contributions=] of the box
+		produces a width derived from its content,
+		and a height calculated from that width and the aspect ratio,
+		yielding a square box (and a container) sized
+		to the width of the word “content”.
+	</div>
+
 	On non-replaced elements with an ''width/auto'' <a>inline size</a>
 	(or any replaced element whose intrinsic <a>block size</a>
 	depends on its <a>inline size</a>),