[css-align-3] Static position calculations should be keying off abspos’s self-alignment (like everything else) not CB's content-alignment. Define this every clearly. w3c#1432

Author: fantasai

css-align-3/Overview.bs

@@ -918,9 +918,7 @@ The 'justify-content' and 'align-content' Properties</h3>
 		<tr>
 			<th>'justify-content' Axis
 			<td>
-				Does not apply to and has no effect on <a>block containers</a>
-				except insofar as it affects absolutely-positioned elements,
-				see [[#distribution-abspos-static]].
+				Does not apply to and has no effect on <a>block containers</a>.
 		<tr>
 			<th>''justify-content/normal'' Behavior
 			<td>
@@ -936,62 +934,6 @@ The 'justify-content' and 'align-content' Properties</h3>
 				''justify-content/normal'' otherwise behaves as ''start''.
 	</table>
 
-### Static Position of Absolutely-Positioned Boxes ### {#distribution-abspos-static}
-
-	When sizing absolutely-positioned boxes
-	whose inline-axis offsets are both ''left/auto''
-	according to [[CSS2#abs-non-replaced-width]] and [[CSS2#abs-replaced-width]],
-	wherever the 'direction' property of the <a>static-position containing block</a> is referenced,
-	instead reference the value of the 'justify-content' or 'align-content' property
-	(whichever is defined to apply to the <a>static-position containing block</a>’s <a>inline axis</a>),
-	treating ''justify-content/normal'' as ''start''
-	and any <a>distributed alignment</a> value as its <a>fallback alignment</a>.
-	For example,
-	when 'direction' is ''ltr'' and 'justify-content' is ''justify-content/end'',
-	apply the rules for ''direction: rtl'';
-	when 'direction' is ''rtl'' and 'justify-content' is ''justify-content/space-between'',
-	apply the rules for ''direction: rtl'';
-	etc.
-
-	Fundamentally these rules set one of the ''left/auto'' insets
-	(by default, the start-edge inset)
-	to the corresponding edge of the <a>static position rectangle</a>
-	and the other to the corresponding edge of the <a>containing block</a>
-	(i.e. set the inset to zero).
-	For the case of ''justify-content/center'' (or its equivalent),
-	split the difference:
-	when both 'inset-inline-start' and 'inset-inline-end'
-	('left' and 'right' in horizontal LTR <a>writing modes</a>)
-	are ''left/auto'',
-	set both sides to match the <a>static position</a>.
-	The absolutely-positioned box is then sized into
-	the resulting space (floored at zero).
-
-	Note: The 'align-self'/'justify-self' properties
-	additionally modify the sizing and positioning rules
-	specified in [[!CSS2]].
-	For example, ''justify-self: stretch'' will replace
-	shrink-to-fit sizing with <a>stretch-fit</a> sizing.
-
-<div class="example">
-	What this means is that,
-	instead of always sizing an absolutely-positioned element
-	within the available space between
-	its inline-start <a>static position</a>
-	and its inline-end <a>containing block</a> edge,
-	the author can choose to instead use the space between
-	its inline-start <a>containing block</a> edge
-	and inline-end <a>static position</a>
-	or between its inline-start and inline-end <a>static positions</a>
-	by changing the <a>static-position containing block</a>’s
-	<a>content-distribution properties</a>.
-
-	<figure>
-		<img src="images/place-content-abspos.svg" width=480 height=330 alt="">
-		<figcaption>An illustration of the above rules.</figcaption>
-	</figure>
-</div>
-
 ### Multicol Containers ### {#distribution-multicol}
 
 	<table class="data align-details">
@@ -1700,6 +1642,79 @@ Baseline Self-Alignment</h3>
 	See [[#align-by-baseline]] for exact details.
 	<a>Baseline self-alignment</a> can increase the intrinsic size contribution of the box.
 
+<h3 id="abspos-sizing">
+Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</h3>
+
+	For absolutely-positioned boxes
+	whose inline-axis offsets are both ''left/auto'',
+	the <a>available space</a> for calculating the <a>inline size</a>
+	is also affected by alignment.
+
+	In [[CSS2]], this is keyed off of the the 'direction' property
+	of the <a>static-position containing block</a>.
+	(See <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2&sect;10.3.7</a>
+	and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2&sect;10.3.8</a>.)
+	Fundamentally these rules set one of the ''left/auto'' insets
+	(by default, the start-edge inset)
+	to the corresponding edge of the <a>static position rectangle</a>
+	and the other to the corresponding edge of the <a>containing block</a>
+	(i.e. set the inset to zero).
+
+	Just as the <a>self-alignment properties</a>
+	replace the <a>containing block</a>’s 'direction' for placement,
+	they also replace this lookup for sizing.
+	Thus,
+	when interpreting the rules in
+	<a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2&sect;10.3.7</a>
+	and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2&sect;10.3.8</a>,
+	wherever the 'direction' property of the <a>static-position containing block</a> is referenced,
+	instead reference the value of the 'align-self' or 'justify-self' property
+	(whichever is defined to apply to the relevant axis),
+	treating ''justify-content/normal'' as ''start''
+	and any <a>distributed alignment</a> value as its <a>fallback alignment</a>.
+
+	<figure>
+		<img src="images/place-content-abspos.svg" width=480 height=330
+		     alt="Start alignment sizes into the space between
+		          the start edge of the static-position rectangle and the end edge of the containing block.
+		          End alignment sizes into the space between
+		          the end edge of the static-position rectangle and the start edge of the containg block.
+		          Center alignment sizes into the space between
+		          the two edges of the static-position rectangle.">
+		<figcaption>
+			Instead of always sizing
+			within the available space between
+			the <a>inline-start</a> <a>static position</a>
+			and the <a>inline-end</a> <a>containing block</a> edge,
+			an absolutely-positioned element with ''left/auto'' insets
+			will be sized with reference to
+			the <a>static position rectangle</a>’s edge(s)
+			<em>most appropriate</em> to its specified <a>self-alignment</a>.
+		</figcaption>
+	</figure>
+
+	<div class="example">
+		For example,
+		when the box’s <a>containing block</a>’s 'direction' is ''ltr''
+		and its own 'justify-self' is ''justify-content/end'',
+		apply the rules for ''direction: rtl'';
+		when 'direction' is ''rtl'' and 'justify-content' is ''justify-content/space-between'',
+		apply the rules for ''direction: rtl'';
+		etc.
+		For the case of ''justify-content/center'' (or its equivalent),
+		set both sides to match the <a>static position</a>.
+		The absolutely-positioned box is then sized into
+		the resulting space (floored at zero).
+	</div>
+
+
+	Note: The 'align-self'/'justify-self' properties
+	can also modify additional aspects of sizing:
+	for example, ''justify-self: stretch'' will replace
+	“shrink-to-fit” (<a>fit-content</a>) sizing into the <a>available space</a>
+	with <a>stretch-fit sizing</a> (consuming all of the <a>available space</a>).
+	This is an independent effect from the available space adjustment here.
+
 <!--
                   ████ ████████ ████████ ██     ██  ██████
  ██   ██           ██     ██    ██       ███   ███ ██    ██