[css-align][css-position][css-anchor-position] Define the new 'shift to stay in the original containing block' behavior, and revert the anchor-center 'shrink the available space' behavior. #10316 #10315 #9960

Author: tabatkins

css-align-3/Overview.bs

@@ -771,7 +771,9 @@ Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between''
 
 	These values are represented with the <<content-distribution>> grammar term:
 
-	<pre class='prod'><dfn>&lt;content-distribution></dfn> = space-between | space-around | space-evenly | stretch</pre>
+	<pre class='prod'>
+	<dfn>&lt;content-distribution></dfn> = space-between | space-around | space-evenly | stretch
+	</pre>
 
 <h3 id='overflow-values'>
 Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limits</h3>
@@ -865,13 +867,36 @@ Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limit
 		<dt>(no value specified)
 		<dd>
 			If the <a>overflow alignment</a> isn't explicitly specified,
-			the default <a>overflow alignment</a> is a blend of “safe” and “unsafe”
-			in that an overflowing <a>alignment subject</a> is allowed to overflow its <a>alignment container</a>,
-			but if this would cause it to also overflow
-			the <a>scrollable overflow area</a> of its nearest ancestor <a>scroll container</a>
-			(thus extending into the “unscrollable” region),
-			then its overflow in that direction is limited
-			by biasing any remaining overflow to the opposite side.
+			the default <a>overflow alignment</a> is a blend of “safe” and “unsafe”,
+			and also varies slightly depending on layout mode.
+
+			For [=absolutely positioned=] [=alignment subjects=]
+			which are not in [=legacy positioning mode=]
+			in the given axis:
+
+			1. If the [=alignment subject=] overflows its [=inset-modified containing block=]
+				(its normal [=alignment container=]),
+				no effect.
+			2. If the <em>size</em> of the [=alignment subject=]
+				fits within its [=original containing block=],
+				but its alignment would cause it to overflow the [=original containing block=],
+				it is instead shifted the minimum amount
+				to stay within the [=original containing block=]
+				(flush with the edge of the [=original containing block=]
+				it was trying to overflow over).
+			3. If the size of the [=alignment subject=]
+				overflows the [=original containing block=],
+				it is instead start-aligned within the [=original containing block=].
+
+			For all other elements:
+
+			1. If the [=alignment subject=] overflows its [=alignment container=],
+				no effect.
+			2. If the [=alignment subject=] would overflow
+				the [=scrollable overflow area=] of its nearest ancestor [=scroll container=],
+				(thus extending into the “unscrollable” region),
+				then its overflow in that direction is limited
+				by biasing any remaining overflow to the opposite side.
 
 			Issue: It may not be Web-compatible to implement the “smart” default behavior
 			(though we hope so, and believe it to be likely),
@@ -881,6 +906,17 @@ Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limit
 			and ''unsafe'' otherwise.
 	</dl>
 
+	An [=absolutely-positioned element=]
+	is in <dfn export>legacy positioning mode</dfn>
+	in a given axis
+	if all of the following are true:
+
+	* the relevant [=self-alignment property=] is ''justify-self/normal'' on the element.
+	* the elements's 'inset-area' property does not define an [=inset-area grid=].
+
+	Note: A number of newer behaviors across several specifications
+	can't apply to elements in [=legacy positioning mode=],
+	due to backwards-compatibility constraints.
 
 <!--
                    ██████   ███████  ██    ██ ████████ ████████ ██    ██ ████████

css-anchor-position-1/Overview.bs

@@ -559,25 +559,53 @@ Its syntax is:
 		or is not an [=absolutely-positioned=] element,
 		this value has no effect.
 
-		Otherwise, the property selects a region of the [=inset-area grid=],
-		and makes that the element's [=containing block=].
+		Otherwise, it has the following effects:
 
-		Note: This means that the [=inset properties=] specify offsets from the inset-area,
-		and some property values,
-		like ''max-height: 100%'',
-		will be relative to the inset-area as well.
+		* The property selects a region of the [=inset-area grid=],
+			and makes that the element's [=containing block=].
+			See [[#resolving-spans]] for details.
 
-		Additionally, the ''align-self/normal'' value for the [=self-alignment properties=]
-		behaves as either ''align-self/start'', ''align-self/end'',
-		or ''align-self/anchor-center'',
-		depending on the positioning of the region,
-		to give a good default alignment for the positioned element.
+			Note: This means that the [=inset properties=] specify offsets from the inset-area,
+			and some property values,
+			like ''max-height: 100%'',
+			will be relative to the inset-area as well.
 
-		See [[#resolving-spans]] for details on both of these effects.
+		* The ''align-self/normal'' value for the [=self-alignment properties=]
+			behaves as either ''align-self/start'', ''align-self/end'',
+			or ''align-self/anchor-center'',
+			depending on the positioning of the region,
+			to give a good default alignment for the positioned element.
+			Again, see [[#resolving-spans]] for details.
 
-		Also, any ''top/auto'' [=inset properties=] resolve to ''0''.
+		* Any ''top/auto'' [=inset properties=] resolve to ''0''.
+
+		* The element is not considered to be in a [=legacy alignment mode=]
+			in either axis.
 </dl>
 
+<div class=note>
+	If the element overflows its 'inset-area' (and 'inset') -modified [=containing block=],
+	but would still fit within its [=original containing block=],
+	by default it will "shift" to stay within its [=original containing block=],
+	even if that violates its normal alignment.
+	See [[css-align-3#overflow-values]] for details.
+
+	This behavior makes it more likely
+	that positioned elements remain visible
+	and within their intended bounds,
+	even when their [=containing block=]
+	ends up smaller than anticipated.
+
+	For example, an ''inset-area: bottom span-right'' value
+	lets the positioned element stretch
+	from its anchors left edge
+	to its containing block's right edge,
+	and left-aligns it in that space by default.
+	But if the positioned element is larger than that space
+	(such as if the anchor is very close to the right edge of the screen),
+	it will shift leftwards to stay visible.
+</di>
+
 
 <h4 id=resolving-spans>
 Resolving <<inset-area>>s</h4>
@@ -918,18 +946,20 @@ in the relevant axis.
 
 Additionally,
 any ''top/auto'' [=inset properties=] resolve to ''0''.
-However, the [=available space=] for the positioned element in the relevant axis
-is reduced to the size of the largest rectangle
-that is centered on the [=default anchor element=]
-and doesn't overflow the [=inset-modified containing block=].
-(Possibly being zero-sized,
-if the anchor's center is not within the [=inset-modified containing block=].)
 
 If the element is not [=absolutely positioned=],
 or does not have a [=default anchor element=],
 this value behaves as ''<self-position>/center''
 and has no additional effect on how [=inset properties=] resolve.
 
+Note: Similar to 'inset-area',
+when using ''anchor-center'',
+if the anchor is too close to the edge of the element's
+[=original containing block=],
+by default it will "shift" from being purely centered,
+to instead remain within the [=original containing block=].
+See [[css-align-3#overflow-values]] for more details.
+
 
 <!-- Big Text: scroll
 

css-position-3/Overview.bs

@@ -373,6 +373,31 @@ Containing Blocks of Positioned Boxes</h3>
 	(i.e., that generated by "div1").
 </div>
 
+<h4 id="original-cb">
+Further Shrinking the Containing Block</h4>
+
+Some features can additionally change the [=containing block=]
+of [=absolutely positioned=] boxes.
+These are applied in the following order,
+with earlier steps modifying the containing block
+that later steps see:
+
+1. If the [=containing block=] is generated by a [=grid container=],
+	the [=grid positioning properties=]
+	on the positioned element
+	change the [=containing block=]
+	to the corresponding [=grid area=]
+	of that [=grid container=].
+	See [[css-grid-1#abspos-items]].
+
+2. If 'inset-area' has an effect on the positioned element,
+	the [=containing block=] is the specified area of the [=inset-area grid=].
+	See [[css-anchor-position-1#inset-area]].
+
+The element's <dfn export>original containing block</dfn>
+is its [=containing block=]
+before applying any of these effects.
+
 <h3 id="stacking">
 Painting Order and Stacking Contexts</h3>