[css-anchor-position] Redesign position fallbacks. #9196 (comment)

Author: tabatkins

css-anchor-position-1/Overview.bs

@@ -291,7 +291,7 @@ Animation type: discrete
 The 'anchor-default' property defines the <dfn>default anchor specifier</dfn>
 for all [=anchor functions=] on the element,
 allowing multiple elements to use the same set of [=anchor functions=]
-(and [=position fallback lists=]!)
+(and [=position options lists=]!)
 while changing which [=anchor element=] each is referring to.
 
 The [=target anchor element=] selected by the [=default anchor specifier=]
@@ -853,7 +853,7 @@ we define:
 		or |query el|'s used [=self-alignment property=] value
 		in the axis is ''anchor-center''.
 
-	Note: If |query el| has a [=position fallback list=],
+	Note: If |query el| has a [=position options list=],
 	then whether it [=needs scroll adjustment=] in an axis
 	is also affected by the applied fallback style.
 
@@ -985,17 +985,18 @@ If no fallback value is specified,
 it resolves to ''0px''.
 
 
-<!--
-████████    ███    ██       ██       ████████     ███     ██████  ██    ██
-██         ██ ██   ██       ██       ██     ██   ██ ██   ██    ██ ██   ██
-██        ██   ██  ██       ██       ██     ██  ██   ██  ██       ██  ██
-██████   ██     ██ ██       ██       ████████  ██     ██ ██       █████
-██       █████████ ██       ██       ██     ██ █████████ ██       ██  ██
-██       ██     ██ ██       ██       ██     ██ ██     ██ ██    ██ ██   ██
-██       ██     ██ ████████ ████████ ████████  ██     ██  ██████  ██    ██
+<!-- Big Text: fallback
+
+█████▌  ███▌  █▌    █▌    ████▌   ███▌   ███▌  █▌  █▌
+█▌     ▐█ ▐█  █▌    █▌    █▌  █▌ ▐█ ▐█  █▌  █▌ █▌ █▌
+█▌     █▌  █▌ █▌    █▌    █▌  █▌ █▌  █▌ █▌     █▌█▌
+████   █▌  █▌ █▌    █▌    █████  █▌  █▌ █▌     ██
+█▌     █████▌ █▌    █▌    █▌  █▌ █████▌ █▌     █▌█▌
+█▌     █▌  █▌ █▌    █▌    █▌  █▌ █▌  █▌ █▌  █▌ █▌ █▌
+█▌     █▌  █▌ █████ █████ ████▌  █▌  █▌  ███▌  █▌  █▌
 -->
 
-Fallback Sizing/Positioning {#fallback}
+Overflow Management {#fallback}
 ===========================
 
 Anchor positioning,
@@ -1007,95 +1008,225 @@ so positioning an element in any particular fashion
 might result in the positioned element overflowing its [=containing block=]
 or being positioned partially off screen.
 
-To ameliorate this, an [=absolutely positioned=] element
+<s>To ameliorate this, an [=absolutely positioned=] element
 can use the 'position-fallback' property
 to refer to a ''@position-fallback'' block,
 giving a list of possible style rules to try out.
 Each is applied to the element, one by one,
 and the first that doesn't cause the element
 to overflow its [=containing block=]
-is taken as the winner.
+is taken as the winner.</s>
 
-The 'position-fallback' Property {#fallback-property}
+Giving Fallback Options: the 'position-try-options' property {#position-try-options}
 --------------------------------
 
 <pre class=propdef>
-Name: position-fallback
-Value: none | <<dashed-ident>>
+Name: position-try-options
+Value: none | [ <<dashed-ident>> | <<try-tactic>> ]#
 Initial: none
 Inherited: no
 Applies to: [=absolutely-positioned=] elements
 Animation type: discrete
 </pre>
 
+This property provides a list of alternate positioning styles
+to try when the [=absolutely positioned box=]
+overflows its [=inset-modified containing block=].
+This <dfn export>position options list</dfn>
+initially contains the element's own computed style.
+
+Each comma-separated entry in the list is a separate option:
+either the name of a ''@position-try'' block,
+or a <<try-tactic>> representing an automatic transformation of the element's existing computed style.
+
 Values have the following meanings:
 
-<dl dfn-type=value dfn-for=position-fallback>
+<dl dfn-type=value dfn-for=position-try-options>
 	: <dfn>none</dfn>
-	:: The property has no effect;
-		the element does not use a [=position fallback list=].
+	::
+		The property has no effect;
+		the only entry in the [=position options list=]
+		is the element's computed style.
 
 	: <dfn><<dashed-ident>></dfn>
-	:: If there is a ''@position-fallback'' rule
-		with a name matching the specified ident,
-		then the element uses that [=position fallback list=].
+	::
+		If there is a ''@position-try'' rule
+		with the given name,
+		its associated [=position option=]
+		is added to the [=position options list=].
 
 		Otherwise,
 		this value has no effect.
+
+	: <dfn><<try-tactic>></dfn>
+	::
+		Automatically creates a [=position option=]
+		from the element's computed style,
+		by swapping the
+		[=margin property|margin=],
+		[=sizing property|sizing=],
+		[=inset property|inset=],
+		and [=self-alignment property|self-alignment=] property values
+		among the element's sides,
+		and adds it to the [=position options list=].
+
+		<pre class=prod>
+		<dfn type><<try-tactic>></dfn> = flip-block || flip-inline || flip-start
+		</pre>
+
+		: <dfn>flip-block</dfn>
+		::
+			swaps the values in the [=block axis=]
+			(between, for example, 'margin-block-start' and 'margin-block-end'),
+			essentially mirroring across an [=inline-axis=] line.
+
+		: <dfn>flip-inline</dfn>
+		::
+			swaps the values in the [=inline axis=],
+			essentially mirroring across a [=block-axis=] line.
+
+		: <dfn>flip-start</dfn>
+		::
+			swaps the values of the [=start=] properties with each other,
+			and the [=end=] properties with each other
+			(between, for example,
+			'margin-block-start' and 'margin-inline-start'),
+			essentially mirroring across a diagonal drawn
+			from the [=block-start|start=]-[=inline-start|start=] corner
+			to the [=block-end|end=]-[=inline-end|end=] corner.
+
+		If multiple keywords are given,
+		the transformations are composed in order
+		to produce a single [=position option=].
+
+		Issue: Define how the values themselves are changed upon flipping:
+		anchor(top) becomes anchor(bottom);
+		start becomes end;
+		etc.
+</dl>
+
+
+Determining Fallback Order: the 'position-try-order' property {#position-try-order-property}
+----------------------------------
+
+<pre class=propdef>
+Name: position-try-order
+Value: normal | <<try-size>>
+Initial: normal
+Applies to: [=absolutely positioned elements=]
+Inherited: no
+Animation Type: discrete
+</pre>
+
+This property specifies the order in which
+the [=position options list=] will be tried.
+
+<pre class=prod>
+<dfn type><<try-size>></dfn> = most-width | most-height | most-block-size | most-inline-size
+</pre>
+
+<dl dfn-type=value dfn-for=position-try-order>
+	: <dfn>normal</dfn>
+	::
+		Try the [=position options=]
+		in the order specified by 'position-try-options'.
+
+	: <dfn>most-width</dfn>
+	: <dfn>most-height</dfn>
+	: <dfn>most-block-size</dfn>
+	: <dfn>most-inline-size</dfn>
+	::
+		Stable sort the [=position options list=]
+		in order of greatest to least
+		[=inset-modified containing block=] size
+		in the matching axis.
 </dl>
 
-The ''@position-fallback'' Rule {#fallback-rule}
+Final Fallback Strategy: the 'position-try-final' property {#position-try-final-property}
+----------------------
+
+<pre class=propdef>
+Name: position-try-final
+Value: [ always? && [ first | <<try-size>> ] ] | hide
+Initial: first
+Applies to: [=absolutely positioned elements=]
+Inherited: no
+Animation Type: discrete
+</pre>
+
+When all options in the [=position options list=]
+would result in the element overflowing its [=inset-modified containing block=],
+this property determines which [=position option=] to use.
+
+<dl dfn-type=value dfn-for=position-try-final>
+	: <dfn>first</dfn>
+	::
+		Use the first option in the [=position options list=]
+		(after sorting by 'position-try-order').
+
+	: <dfn lt="<try-size> | most-width | most-height | most-block-size | most-inline-size"><<try-size>></dfn>
+	::
+		Stable sort the [=position options list=] as if this was the specified 'position-try-order',
+		then use the first option.
+
+	: <dfn>always</dfn>
+	::
+		If this keyword is <em>not</em> specified,
+		and this box has previously been laid out
+		with a [=position option=]
+		that didn't result in overflow,
+		use that option.
+
+	: <dfn>hide</dfn>
+	::
+		Use the first option (as for ''first''),
+		but also hide the box such that it (and all of its contents)
+		are invisible (like ''visibility: hidden'')
+		and do not contribute to [=scrollable overflow=].
+</dl>
+
+
+The ''@position-try'' Rule {#fallback-rule}
 -------------------------------
 
-The <dfn>@position-fallback</dfn> rule
-defines a [=position fallback list=]
+The <dfn>@position-try</dfn> rule
+defines a <dfn>position option</dfn>
 with a given name,
 specifying one or more sets of positioning properties
-inside of <dfn>@try</dfn> blocks
-that will be applied to an element,
-with each successive one serving as fallback
-if the previous would cause the element
-to partially or fully overflow its [=containing block=].
+that will be applied to an element
+via 'position-try-options',
 
-The grammar of the ''@position-fallback'' rule is:
+The syntax of the ''@position-try'' rule is:
 
 <pre class=prod>
-@position-fallback <<dashed-ident>> {
-	<<rule-list>>
+@position-try <<dashed-ident>> {
+	<<declaration-list>>
 }
-
-@try { <<declaration-list>> }
 </pre>
 
-The ''@position-fallback'' rule only accepts ''@try'' rules.
 The <<dashed-ident>> specified in the prelude
 is the rule's name.
-If multiple ''@position-fallback'' rules are declared with the same name,
+If multiple ''@position-try'' rules are declared with the same name,
 the last one in document order "wins".
 
-The ''@try'' rule only <dfn lt="accepted @try properties">accepts</dfn>
+Issue: Or should they cascade together?
+
+The ''@position-try'' rule only <dfn lt="accepted @position-try properties">accepts</dfn>
 the following [=properties=]:
 
 * [=inset properties=]
 * [=margin properties=]
-* [=border properties=]
-* [=padding properties=]
 * [=sizing properties=]
-* [=box alignment properties=]
+* [=self-alignment properties=]
 
-Issue: What exactly are the constraints that determine what's allowed here?
+Issue(#9195): What exactly are the constraints that determine what's allowed here?
 Current list is based off of what's reasonable
 from Chrome's experimental impl.
 We can make a CQ that keys off of which fallback was used
 to allow more general styling,
 at least for descendants.
 
-The ''@try'' rules inside a ''@position-fallback''
-specify a <dfn>position fallback list</dfn>,
-where each entry consists of the properties specified by each ''@try'',
-in order.
-
-Issue: Would be useful to be able to detect
+Issue(#7758): Would be useful to be able to detect
 when your anchor(s) are fully off-screen
 and suppress your display entirely.
 For example, tooltips living outside the scroller
@@ -1113,9 +1244,9 @@ and specify each element's anchor in 'anchor-default' instead.
 Note: The most common types of fallback positioning
 (putting the positioned element on one side of the anchor normally,
 but flipping to the opposite side if needed)
-can be done automatically,
-without using ''@position-fallback'' at all,
-by using TODO FILL ME IN WITH NEW DETAILS.
+can be done automatically
+with keywords in 'position-try-options',
+without using ''@position-try'' at all.
 
 Applying Stronger Fallback Bounds: the 'position-fallback-bounds' property {#fallback-bounds}
 --------------------------------------------------------------------------
@@ -1156,7 +1287,7 @@ Animation type: discrete
 	: <dfn>normal</dfn>
 	:: The element uses its normal (scroll-adjusted, inset-modified) containing block
 		to determine if it's overflowing
-		for the purpose of selecting a [=position fallback list=] entry.
+		for the purpose of selecting a [=position options list=] entry.
 
 	: <<dashed-ident>>
 	::
@@ -1178,7 +1309,7 @@ Animation type: discrete
 Applying Position Fallback {#fallback-apply}
 --------------------------
 
-When an element uses a [=position fallback list=],
+When an element uses a [=position options list=],
 it selects one entry from the list
 as defined below,
 and applies those properties to itself as [=used values=].
@@ -1203,9 +1334,9 @@ to trigger automatic "animation" of the fallback'd properties.
 
 	1. Let |base styles| be the current used styles of |el|.
 
-	2. [=list/For each=] |fallback styles| in the [=position fallback list=]:
+	2. [=list/For each=] |fallback styles| in the [=position options list=]:
 
-		1. Apply the values of the [=accepted @try properties=]
+		1. Apply the values of the [=accepted @position-try properties=]
 			in |fallback styles| to |el|,
 			overriding the corresponding properties in |base styles|.
 
@@ -1239,7 +1370,7 @@ to trigger automatic "animation" of the fallback'd properties.
 
 	3. If the previous step finished without selecting a set of styles,
 		use the |adjusted styles|
-		corresponding to the final entry in the [=position fallback list=].
+		corresponding to the final entry in the [=position options list=].
 
 	Note: Descendants overflowing |el|
 	don't affect this calculation,
@@ -1250,7 +1381,7 @@ The styles returned by [=determining the position fallback styles=]
 are taken as the final values for the specified properties.
 
 Implementations may choose to impose an implementation-defined limit
-on the length of [=position fallback lists=],
+on the length of [=position options lists=],
 to limit the amount of excess layout work that may be required.
 This limit must be <em>at least</em> five.