[css-anchor-position-1] Add justify/align-self:anchor-center value. #…

…8979 (#9136)

css-anchor-position-1/Overview.bs

@@ -295,6 +295,10 @@ allowing multiple elements to use the same set of [=anchor functions=]
 (and [=position fallback lists=]!)
 while changing which [=anchor element=] each is referring to.
 
+The [=target anchor element=] selected by the [=default anchor specifier=]
+(if one exists)
+is the element's <dfn>default anchor element</dfn>.
+
 Its values are identical to the <<anchor-element>> term
 in ''anchor()'' and ''anchor-size()''.
 
@@ -630,16 +634,77 @@ This has two effects:
 	to find one that won't trigger overflow.
 </div>
 
+<!--
+   ███             ██████  ████████ ██    ██ ████████ ████████ ████████ 
+  ██ ██           ██    ██ ██       ███   ██    ██    ██       ██     ██
+ ██   ██          ██       ██       ████  ██    ██    ██       ██     ██
+██     ██ ███████ ██       ██████   ██ ██ ██    ██    ██████   ████████ 
+█████████         ██       ██       ██  ████    ██    ██       ██   ██  
+██     ██         ██    ██ ██       ██   ███    ██    ██       ██    ██ 
+██     ██          ██████  ████████ ██    ██    ██    ████████ ██     ██
+-->
+
+<h2 id="anchor-center">
+Centering on the Anchor: the ''anchor-center'' value</h2>
+
+<pre class=propdef>
+Name: justify-self, align-self, justify-items, align-items
+New Values: anchor-center
+</pre>
+
+The [=self-alignment properties=] allow an [=absolutely-positioned=] element
+to align itself within the [=inset-modified containing block=].
+The existing values,
+plus carefully chosen [=inset properties=],
+are usually enough for useful alignment,
+but a common case for anchored positioning--
+centering over the anchor element--
+requires careful and somewhat complex set-up to achieve.
+
+The new <dfn value for="justify-self, align-self, justify-items, align-items">anchor-center</dfn> value
+makes this case extremely simple:
+if the positioned element has a [=default anchor element=],
+then it is aligned so as to center itself
+over the [=default anchor element=]
+in the appropriate axis.
+If this alignment would cause it to overflow its [=inset-modified containing block=]
+in the appropriate axis,
+it instead is aligned flush with the side that it would have overflowed;
+if it would overflow both sides,
+it's instead aligned as for ''justify-self/start''.
+
+Additionally,
+if both [=inset properties=] in the appropriate axis are ''top/auto'',
+they resolve to the offsets necessary
+to create the largest rectangle possible
+that is centered over the [=default anchor element=]
+and does not overflow the [=containing block=].
+If only one [=inset property=] is ''top/auto'',
+it resolves to ''0''.
+
+Issue: See <a href="https://github.com/w3c/csswg-drafts/issues/9124">Issue 9124</a>
+about making this the behavior in general
+for non-''justify-self/auto'' alignment values.
+
+If the element is not [=absolutely positioned=],
+or does not have a [=default anchor element=],
+this value behaves as ''center''
+and has no additional effect on how [=inset properties=] resolve.
+
+Issue: Do we want to hook the "try to stay in the IMCB" behavior to safe vs unsafe?
+Right now it'll only trigger fallback if it overflows both sides;
+it might be useful to be able to trigger fallback
+as soon as it can't center itself.
 
 
 <!--
-   ███             ██████   ██████  ████████   ███████  ██       ██
-  ██ ██           ██    ██ ██    ██ ██     ██ ██     ██ ██       ██
- ██   ██          ██       ██       ██     ██ ██     ██ ██       ██
-██     ██ ███████  ██████  ██       ████████  ██     ██ ██       ██
-█████████               ██ ██       ██   ██   ██     ██ ██       ██
-██     ██         ██    ██ ██    ██ ██    ██  ██     ██ ██       ██
-██     ██          ██████   ██████  ██     ██  ███████  ████████ ████████
+ ██████   ██████  ████████   ███████  ██       ██      
+██    ██ ██    ██ ██     ██ ██     ██ ██       ██      
+██       ██       ██     ██ ██     ██ ██       ██      
+ ██████  ██       ████████  ██     ██ ██       ██      
+      ██ ██       ██   ██   ██     ██ ██       ██      
+██    ██ ██    ██ ██    ██  ██     ██ ██       ██      
+ ██████   ██████  ██     ██  ███████  ████████ ████████
 -->
 
 Taking Scroll Into Account {#scroll}
@@ -1255,7 +1320,7 @@ the ''@position-fallback'' rule:
 <pre class='idl' export>
 [Exposed=Window]
 interface CSSPositionFallbackRule : CSSGroupingRule {
-  readonly attribute CSSOMString name;
+	readonly attribute CSSOMString name;
 };
 </pre>
 
@@ -1273,7 +1338,7 @@ declared in a ''@position-fallback'' rule:
 <pre class='idl' export>
 [Exposed=Window]
 interface CSSTryRule : CSSRule {
-  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
+	[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
 };
 </pre>