[css-sizing-4][editorial] Rearrange and create new sections for clarity.

Author: tabatkins

css-sizing-4/Overview.bs

@@ -205,63 +205,6 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
 	need to figure out specific cases that are unclear and define them,
 	either in the appropriate Level 3 spec or here.
 
-	When a box has a [=preferred aspect ratio=],
-	its <a>automatic sizes</a>
-	are calculated the same as for
-	a <a>replaced element</a> with an <a>intrinsic aspect ratio</a>
-	and no <a>intrinsic dimension</a> in that axis,
-	see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2 &sect;&#x202F;10</a>
-	and <a href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item">CSS Flexible Box Model Level 1 &sect;&#x202F;9.2</a>.
-	The axis in which the <a>preferred size</a> calculation
-	depends on this aspect ratio
-	is called the <dfn export>ratio-dependent axis</dfn>,
-	and the resulting size is <a>definite</a>
-	if its input sizes are also <a>definite</a>.
-	The opposite axis (on which the [=ratio-dependent axis=] size depends)
-	is the <dfn export>ratio-determining axis</dfn>.
-
-	Note: A [=preferred aspect ratio=]
-	only ever has an effect if at least one of the box's sizes
-	is [=automatic size|automatic=].
-	If neither 'width' nor 'height' is an [=automatic size=],
-	it can have no effect on its [=preferred sizes=].
-
-	For the purpose of margin collapsing ([[css2/box#collapsing-margins]]),
-	if the [=block axis=] is the [=ratio-dependent axis=],
-	it is not considered to have a [=computed value|computed=] 'block-size' of ''height/auto''.
-
-	If a replaced element's only [=intrinsic dimension=]
-	is an intrinsic width or an intrinsic height,
-	giving it a [=preferred aspect ratio=]
-	also gives it an intrinsic height or width,
-	whichever was missing,
-	by transferring the existing size
-	through the [=preferred aspect ratio=].
-
-	Additionally, sizing constraints in either axis
-	(the <var>origin</var> axis)
-	are transferred through the [=preferred aspect ratio=]
-	to the other axis (the <var>destination</var> axis)
-	as follows:
-
-	* First, any [=definite=] [=minimum size=] is converted and transferred
-		from the <var>origin</var> to <var>destination</var> axis.
-		This transferred minimum is capped
-		by any [=definite=] [=preferred size|preferred=] or [=maximum size=]
-		in the <var>destination</var> axis.
-	* Then, any [=definite=] [=maximum size=] is converted and transferred
-		from the <var>origin</var> to <var>destination</var>.
-		This transferred maximum is floored
-		by any [=definite=] [=preferred size|preferred=] or [=minimum size=]
-		in the <var>destination</var> axis
-		as well as by the transferred minimum, if any.
-
-	Note: The basic principle is that sizing constraints
-	transfer through the aspect-ratio to the other side
-	to preserve the aspect ratio to the extent that they can
-	without violating any sizes specified explictly on that affected axis.
-	<!-- This is the principle that drove the contents of the table in CSS2 Section 10.4. -->
-
 	<div class="example">
 		This example sets each item in the grid to render as a square,
 		determining the number of items and their widths by the available space.
@@ -310,73 +253,50 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
 		</pre>
 	</div>
 
-	<div class="example">
-		In the following example:
-
-		<pre highlight=html>
-			&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>
+<h4 id="aspect-ratio-intrinsic-replaced">
+Intrinsic Sizes Of Replaced Elements</h4>
 
-		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 highlight=html>
-			&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>
-
-<h4 id='aspect-ratio-cyclic'>
-Cyclic Aspect-Ratio Calculations</h4>
+	If a replaced element's only [=intrinsic dimension=]
+	is an intrinsic width or an intrinsic height,
+	giving it a [=preferred aspect ratio=]
+	also gives it an intrinsic height or width,
+	whichever was missing,
+	by transferring the existing size
+	through the [=preferred aspect ratio=].
 
-	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>),
-	the intrinsic <a>block sizes</a> of the box
-	are assumed to be zero
-	when applying 'min-block-size' to the aspect ratio calculations,
-	and assumed to be infinity
-	when applying 'max-block-size' to the aspect ratio calculations.
-	These limits take effect as usual for non-replaced elements
-	once the <a>inline size</a> is resolved.
+<h3 id="aspect-ratio-automatic">
+Automatic Sizes In The Presence Of A Preferred Aspect Ratio</h3>
 
-	<div class="example">
-		For example, given a (<a>horizontal writing mode</a>) element with
-		<pre>
-		  width: auto;
-		  min-height: min-content;
-		  aspect-ratio: 1/1;
-		</pre>
+	When a box has a [=preferred aspect ratio=],
+	its <a>automatic sizes</a>
+	are calculated the same as for
+	a <a>replaced element</a> with an <a>intrinsic aspect ratio</a>
+	and no <a>intrinsic dimension</a> in that axis,
+	see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2 &sect;&#x202F;10</a>
+	and <a href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item">CSS Flexible Box Model Level 1 &sect;&#x202F;9.2</a>.
+	The axis in which the <a>preferred size</a> calculation
+	depends on this aspect ratio
+	is called the <dfn export>ratio-dependent axis</dfn>,
+	and the resulting size is <a>definite</a>
+	if its input sizes are also <a>definite</a>.
+	The opposite axis (on which the [=ratio-dependent axis=] size depends)
+	is the <dfn export>ratio-determining axis</dfn>.
 
-		using the aspect ratio to resolve the width
-		would require knowing the min-content height of the element.
+	Note: A [=preferred aspect ratio=]
+	only ever has an effect if at least one of the box's sizes
+	is [=automatic size|automatic=].
+	If neither 'width' nor 'height' is an [=automatic size=],
+	it can have no effect on its [=preferred sizes=].
 
-		Since for a non-replaced element,
-		this value is not known until the width is resolved,
-		we assume the 'min-height' value is zero
-		while resolving the width.
+<h4 id="aspect-ratio-margin-collapse">
+Margin-collapse</h4>
 
-		Then, once the width is known, we resolve the height,
-		taking into account the ''height/min-content'' minimum.
-	</div>
+	For the purpose of margin collapsing ([[css2/box#collapsing-margins]]),
+	if the [=block axis=] is the [=ratio-dependent axis=],
+	it is not considered to have a [=computed value|computed=] 'block-size' of ''height/auto''.
 
-<h4 id="aspect-ratio-minimum">
-Automatic Content-based Minimum Sizes</h4>
+<h3 id="aspect-ratio-minimum">
+Automatic Content-based Minimum Sizes</h3>
 
 	In order to avoid unintentional overflow,
 	the <a>automatic minimum size</a> in the <a>ratio-dependent axis</a>
@@ -410,7 +330,8 @@ Automatic Content-based Minimum Sizes</h4>
 		</pre>
 
 		When ''overflow: auto'' is specified, however,
-		even the box with excess content maintains the 1:1 aspect ratio.
+		even the box with excess content maintains the 1:1 aspect ratio
+		(and handles overflow by becoming scrollable instead, as usual).
 
 		<pre>
 		  div {
@@ -469,6 +390,98 @@ Automatic Content-based Minimum Sizes</h4>
 		''min-width: 0'' can be specified.
 	</div>
 
+<h3 id="aspect-ratio-size-transfers">
+Min/Max Size Transfers</h3>
+
+	Sizing constraints in either axis
+	(the <var>origin</var> axis)
+	are transferred through the [=preferred aspect ratio=]
+	to the other axis (the <var>destination</var> axis)
+	as follows:
+
+	* First, any [=definite=] [=minimum size=] is converted and transferred
+		from the <var>origin</var> to <var>destination</var> axis.
+		This transferred minimum is capped
+		by any [=definite=] [=preferred size|preferred=] or [=maximum size=]
+		in the <var>destination</var> axis.
+	* Then, any [=definite=] [=maximum size=] is converted and transferred
+		from the <var>origin</var> to <var>destination</var>.
+		This transferred maximum is floored
+		by any [=definite=] [=preferred size|preferred=] or [=minimum size=]
+		in the <var>destination</var> axis
+		as well as by the transferred minimum, if any.
+
+	Note: The basic principle is that sizing constraints
+	transfer through the aspect-ratio to the other side
+	to preserve the aspect ratio to the extent that they can
+	without violating any sizes specified explictly on that affected axis.
+	<!-- This is the principle that drove the contents of the table in CSS2 Section 10.4. -->
+
+	<div class="example">
+		In the following example:
+
+		<pre highlight=html>
+			&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 highlight=html>
+			&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>
+
+<h4 id='aspect-ratio-cyclic'>
+Cyclic Aspect-Ratio Calculations</h4>
+
+	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>),
+	the intrinsic <a>block sizes</a> of the box
+	are assumed to be zero
+	when applying 'min-block-size' to the aspect ratio calculations,
+	and assumed to be infinity
+	when applying 'max-block-size' to the aspect ratio calculations.
+	These limits take effect as usual for non-replaced elements
+	once the <a>inline size</a> is resolved.
+
+	<div class="example">
+		For example, given a (<a>horizontal writing mode</a>) element with
+		<pre>
+		  width: auto;
+		  min-height: min-content;
+		  aspect-ratio: 1/1;
+		</pre>
+
+		using the aspect ratio to resolve the width
+		would require knowing the min-content height of the element.
+
+		Since for a non-replaced element,
+		this value is not known until the width is resolved,
+		we assume the 'min-height' value is zero
+		while resolving the width.
+
+		Then, once the width is known, we resolve the height,
+		taking into account the ''height/min-content'' minimum.
+	</div>
+
 <!--
 ████ ██    ██ ████████ ████████  ████ ██    ██  ██████  ████  ██████
  ██  ███   ██    ██    ██     ██  ██  ███   ██ ██    ██  ██  ██    ██