[css-anchor-position-2] Add 'any' keyword for position-area queries #12610 (#12860)

Per resolution:

#12610 (comment)

Author: lilles

css-anchor-position-2/Overview.bs

@@ -103,7 +103,7 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
 	<pre class="descdef mq">
 		Name: fallback
 		For: @container
-		Value: none | [ [<<dashed-ident>> || <<try-tactic>>] | <<position-area>> ]
+		Value: none | [ [<<dashed-ident>> || <<try-tactic>>] | <<position-area-query>> ]
 		Type: discrete
 	</pre>
 
@@ -131,13 +131,15 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
 			<code>flip-start flip-block</code> is not the same as
 			<code>flip-block flip-start</code>. Hence, the order must match for
 			'@container/fallback' queries.
-		<dt><<position-area>></dt>
+		<dt><<position-area-query>></dt>
 		<dd>
 			The ''container-type/anchored'' container has a ''<<position-area>>''
 			applied from 'position-try-fallbacks'. The query matches if the applied
 			''<<position-area>>'' from the fallback and the query value represent the
-			same physical area. That is, ''position-area/block-start'' will match
+			same physical area. That is, ''<position-area-query>/block-start'' will match
 			''position-area/top'' when the 'writing-mode' is ''writing-mode/horizontal-tb''.
+
+			A query value of ''<position-area-query>/any'' always matches for the given axis.
 	</dl>
 
 	<div class=example>
@@ -181,7 +183,7 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
 	</div>
 
 	<div class=example>
-		Matching named fallback option with '<<position-area>>' in vertical 'writing-mode':
+		Matching '<<position-area>>' fallback option in vertical 'writing-mode':
 
 		<pre class=lang-css>
 		.anchored {
@@ -199,6 +201,94 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
 		</pre>
 	</div>
 
+	<div class=example>
+		Matching '<<position-area>>' fallback option with ''<position-area-query>/any'':
+
+		<pre class=lang-css>
+		.anchored {
+			container-type: anchored;
+			position-anchor: --a;
+			position-try-fallbacks: bottom right;
+			writing-mode: vertical-rl;
+
+			@container anchored(fallback: bottom any) {
+				/* Applies because 'any' matches 'right'. */
+				.inner { color: lime; }
+			}
+			@container anchored(fallback: right) {
+				/* Applies because implicit 'any' in the vertical axis matches 'bottom'. */
+				.inner { background-color: green; }
+			}
+		}
+		</pre>
+	</div>
+
+<h4 id="position-area-query-syntax">
+Syntax of <<position-area-query>> Values</h4>
+
+Values for querying position-area fallbacks have the same syntax as <<position-area>>,
+with an additional ''any'' keyword added to every production:
+
+<pre class=prod>
+<dfn>&lt;position-area-query></dfn> = [
+	[ left | center | right | span-left | span-right
+	| x-start | x-end | span-x-start | span-x-end
+	| x-self-start | x-self-end | span-x-self-start | span-x-self-end
+	| span-all | any ]
+	||
+	[ top | center | bottom | span-top | span-bottom
+	| y-start | y-end | span-y-start | span-y-end
+	| y-self-start | y-self-end | span-y-self-start | span-y-self-end
+	| span-all | any ]
+|
+	[ block-start | center | block-end | span-block-start | span-block-end | span-all | any ]
+	||
+	[ inline-start | center | inline-end | span-inline-start | span-inline-end
+	| span-all | any ]
+|
+	[ self-block-start | center | self-block-end | span-self-block-start
+	| span-self-block-end | span-all | any ]
+	||
+	[ self-inline-start | center | self-inline-end | span-self-inline-start
+	| span-self-inline-end | span-all | any ]
+|
+	[ start | center | end | span-start | span-end | span-all | any ]{1,2}
+|
+	[ self-start | center | self-end | span-self-start | span-self-end | span-all | any ]{1,2}
+]
+</pre>
+
+<dl dfn-type=value dfn-for="<position-area-query>">
+	: <dfn>any</dfn>
+	:: ''any'' can be used for one or both of the axes. It is ambiguous about which
+		axis it refers to, and is handled like other ambiguous keywords for
+		'<<position-area>>' such as ''start'' or ''center'' when it comes to assigning
+		axis and duplicating single keyword values.
+
+	: <dfn>start</dfn>, <dfn>end</dfn>, <dfn>self-start</dfn>, <dfn>self-end</dfn>
+	: <dfn>top</dfn>, <dfn>bottom</dfn>, <dfn>left</dfn>, <dfn>right</dfn>
+	: <dfn>y-start</dfn>, <dfn>y-end</dfn>, <dfn>y-self-start</dfn>, <dfn>y-self-end</dfn>
+	: <dfn>x-start</dfn>, <dfn>x-end</dfn>, <dfn>x-self-start</dfn>, <dfn>x-self-end</dfn>
+	: <dfn>block-start</dfn>, <dfn>block-end</dfn>, <dfn>self-block-start</dfn>, <dfn>self-block-end</dfn>
+	: <dfn>inline-start</dfn>, <dfn>inline-end</dfn>, <dfn>self-inline-start</dfn>, <dfn>self-inline-end</dfn>
+	: <dfn>center</dfn>
+	: <dfn>span-start</dfn>, <dfn>span-end</dfn>, <dfn>span-self-start</dfn>, <dfn>span-self-end</dfn>
+	: <dfn>span-top</dfn>, <dfn>span-bottom</dfn>, <dfn>span-left</dfn>, <dfn>span-right</dfn>
+	: <dfn>span-y-start</dfn>, <dfn>span-y-end</dfn>, <dfn>span-y-self-start</dfn>, <dfn>span-y-self-end</dfn>
+	: <dfn>span-x-start</dfn>, <dfn>span-x-end</dfn>, <dfn>span-x-self-start</dfn>, <dfn>span-x-self-end</dfn>
+	: <dfn>span-block-start</dfn>, <dfn>span-block-end</dfn>, <dfn>span-self-block-start</dfn>, <dfn>span-self-block-end</dfn>
+	: <dfn>span-inline-start</dfn>, <dfn>span-inline-end</dfn>, <dfn>span-self-inline-start</dfn>, <dfn>span-self-inline-end</dfn>
+	: <dfn>span-all</dfn>
+	:: See respective definitions for '<<position-area>>'.
+
+If only a single keyword is given, '<<position-area-query>>' behaves as if the
+second keyword is ''any'' if the given keyword is unambigous about its axis.
+This is different from how single keywords are handled for '<<position-area>>',
+which behaves as if the second keyword is ''span-all''.
+Otherwise, '<<position-area-query>>' behaves as '<<position-area>>'
+when it comes to assigning axes.
+
+
 Security Considerations {#sec}
 =======================