@@ -103,7 +103,7 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
103103 <pre class="descdef mq">
104104 Name : fallback
105105 For : @container
106- Value : none | [ [<<dashed-ident>> || <<try-tactic>>] | <<position-area>> ]
106+ Value : none | [ [<<dashed-ident>> || <<try-tactic>>] | <<position-area-query >> ]
107107 Type : discrete
108108 </pre>
109109
@@ -131,13 +131,15 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
131131 <code> flip-start flip-block</code> is not the same as
132132 <code> flip-block flip-start</code> . Hence, the order must match for
133133 '@container/fallback' queries.
134- <dt> <<position-area>> </dt>
134+ <dt> <<position-area-query >> </dt>
135135 <dd>
136136 The ''container-type/anchored'' container has a ''<<position-area>>''
137137 applied from 'position-try-fallbacks' . The query matches if the applied
138138 ''<<position-area>>'' from the fallback and the query value represent the
139- same physical area. That is, ''position-area/block-start'' will match
139+ same physical area. That is, ''< position-area-query> /block-start'' will match
140140 ''position-area/top'' when the 'writing-mode' is ''writing-mode/horizontal-tb'' .
141+
142+ A query value of ''<position-area-query>/any'' always matches for the given axis.
141143 </dl>
142144
143145 <div class=example>
@@ -181,7 +183,7 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
181183 </div>
182184
183185 <div class=example>
184- Matching named fallback option with '<<position-area>>' in vertical 'writing-mode' :
186+ Matching '<<position-area>>' fallback option in vertical 'writing-mode' :
185187
186188 <pre class=lang-css>
187189 .anchored {
@@ -199,6 +201,94 @@ Applied 'position-try-fallbacks': the '@container/fallback' feature</h4>
199201 </pre>
200202 </div>
201203
204+ <div class=example>
205+ Matching '<<position-area>>' fallback option with ''<position-area-query>/any'' :
206+
207+ <pre class=lang-css>
208+ .anchored {
209+ container-type: anchored;
210+ position-anchor: --a;
211+ position-try-fallbacks: bottom right;
212+ writing-mode: vertical-rl;
213+
214+ @container anchored(fallback: bottom any) {
215+ /* Applies because 'any' matches 'right' . */
216+ .inner { color: lime; }
217+ }
218+ @container anchored(fallback: right) {
219+ /* Applies because implicit 'any' in the vertical axis matches 'bottom' . */
220+ .inner { background-color: green; }
221+ }
222+ }
223+ </pre>
224+ </div>
225+
226+ <h4 id="position-area-query-syntax">
227+ Syntax of <<position-area-query>> Values</h4>
228+
229+ Values for querying position-area fallbacks have the same syntax as <<position-area>> ,
230+ with an additional ''any'' keyword added to every production:
231+
232+ <pre class=prod>
233+ <dfn><position-area-query></dfn> = [
234+ [ left | center | right | span-left | span-right
235+ | x-start | x-end | span-x-start | span-x-end
236+ | x-self-start | x-self-end | span-x-self-start | span-x-self-end
237+ | span-all | any ]
238+ ||
239+ [ top | center | bottom | span-top | span-bottom
240+ | y-start | y-end | span-y-start | span-y-end
241+ | y-self-start | y-self-end | span-y-self-start | span-y-self-end
242+ | span-all | any ]
243+ |
244+ [ block-start | center | block-end | span-block-start | span-block-end | span-all | any ]
245+ ||
246+ [ inline-start | center | inline-end | span-inline-start | span-inline-end
247+ | span-all | any ]
248+ |
249+ [ self-block-start | center | self-block-end | span-self-block-start
250+ | span-self-block-end | span-all | any ]
251+ ||
252+ [ self-inline-start | center | self-inline-end | span-self-inline-start
253+ | span-self-inline-end | span-all | any ]
254+ |
255+ [ start | center | end | span-start | span-end | span-all | any ]{1,2}
256+ |
257+ [ self-start | center | self-end | span-self-start | span-self-end | span-all | any ]{1,2}
258+ ]
259+ </pre>
260+
261+ <dl dfn-type=value dfn-for="<position-area-query> ">
262+ : <dfn>any</dfn>
263+ :: ''any'' can be used for one or both of the axes. It is ambiguous about which
264+ axis it refers to, and is handled like other ambiguous keywords for
265+ '<<position-area>>' such as ''start'' or ''center'' when it comes to assigning
266+ axis and duplicating single keyword values.
267+
268+ : <dfn>start</dfn> , <dfn>end</dfn> , <dfn>self-start</dfn> , <dfn>self-end</dfn>
269+ : <dfn>top</dfn> , <dfn>bottom</dfn> , <dfn>left</dfn> , <dfn>right</dfn>
270+ : <dfn>y-start</dfn> , <dfn>y-end</dfn> , <dfn>y-self-start</dfn> , <dfn>y-self-end</dfn>
271+ : <dfn>x-start</dfn> , <dfn>x-end</dfn> , <dfn>x-self-start</dfn> , <dfn>x-self-end</dfn>
272+ : <dfn>block-start</dfn> , <dfn>block-end</dfn> , <dfn>self-block-start</dfn> , <dfn>self-block-end</dfn>
273+ : <dfn>inline-start</dfn> , <dfn>inline-end</dfn> , <dfn>self-inline-start</dfn> , <dfn>self-inline-end</dfn>
274+ : <dfn>center</dfn>
275+ : <dfn>span-start</dfn> , <dfn>span-end</dfn> , <dfn>span-self-start</dfn> , <dfn>span-self-end</dfn>
276+ : <dfn>span-top</dfn> , <dfn>span-bottom</dfn> , <dfn>span-left</dfn> , <dfn>span-right</dfn>
277+ : <dfn>span-y-start</dfn> , <dfn>span-y-end</dfn> , <dfn>span-y-self-start</dfn> , <dfn>span-y-self-end</dfn>
278+ : <dfn>span-x-start</dfn> , <dfn>span-x-end</dfn> , <dfn>span-x-self-start</dfn> , <dfn>span-x-self-end</dfn>
279+ : <dfn>span-block-start</dfn> , <dfn>span-block-end</dfn> , <dfn>span-self-block-start</dfn> , <dfn>span-self-block-end</dfn>
280+ : <dfn>span-inline-start</dfn> , <dfn>span-inline-end</dfn> , <dfn>span-self-inline-start</dfn> , <dfn>span-self-inline-end</dfn>
281+ : <dfn>span-all</dfn>
282+ :: See respective definitions for '<<position-area>>' .
283+
284+ If only a single keyword is given, '<<position-area-query>>' behaves as if the
285+ second keyword is ''any'' if the given keyword is unambigous about its axis.
286+ This is different from how single keywords are handled for '<<position-area>>' ,
287+ which behaves as if the second keyword is ''span-all'' .
288+ Otherwise, '<<position-area-query>>' behaves as '<<position-area>>'
289+ when it comes to assigning axes.
290+
291+
202292Security Considerations {#sec}
203293=======================
204294
0 commit comments