[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

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>