[css-anchor-position] Specify how flipping exactly works. w3c#10049

Author: tabatkins

css-anchor-position-1/Overview.bs

@@ -1293,12 +1293,10 @@ Values have the following meanings:
 	::
 		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,
+		by [=swapping due to a try-tactic=]
+		according to the specified keyword,
+		and adding the constructed [=position option=]
+		to the element's [=position options list=].
 		and adds it to the [=position options list=].
 
 		<pre class=prod>
@@ -1330,11 +1328,6 @@ Values have the following meanings:
 		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.
-
 	: <dfn><<dashed-ident>> || <<try-tactic>></dfn>
 	::
 		Combines the effects of the previous two options:
@@ -1354,6 +1347,113 @@ Values have the following meanings:
 		with the given value.
 </dl>
 
+<div algorithm>
+	To <dfn>swap due to a try-tactic</dfn>
+	the styles of an element |el|
+	between two directions |directions|,
+	returning a set of styles:
+
+	0. If |directions| are opposites along the same axis,
+		they are "opposing".
+		Otherwise (when they are specifying different axises),
+		they are "perpendicular".
+
+	1. Determine the specified values of the [=accepted @position-try properties=]
+		on |el|,
+		and let |styles| be the result.
+
+	2. [=substitute a var()|Substitute variables=],
+		''env()'' functions,
+		and similar substitution functions
+		in |styles|.
+
+		Issue: Need to define a term to hook for substitution functions,
+		to make sure we can hit var(), env(), random(), etc...
+
+	3. Swap the values of the |styles| between
+		the associated properties
+		corresponding to |directions|.
+
+		<div class=example>
+			For example, if "top" and "left" are being swapped,
+			then the values of 'margin-top' and 'margin-left' are swapped,
+			'width' and 'height' are swapped,
+			etc.
+		</div>
+
+		Note: If the directions are opposites along the same axis,
+		some properties (like 'width' or 'align-self')
+		wont' swap,
+		since they're associated with themselves across the two directions,
+		but their values might be changed by the next step.
+
+	4. Modify the values of the properties
+		as they swap to match the new directions,
+		as follows:
+
+		* For [=inset properties=],
+			change the specified side in ''anchor()'' functions
+			to maintain the same relative relationship to the new direction
+			that they had to the old.
+
+			If a <<percentage>> is used,
+			and |directions| are opposing,
+			change it to ''100%'' minus the original percentage.
+
+			<div class=example>
+				For example, if "top" and "left" are being swapped,
+				then ''margin-top: anchor(bottom)''
+				will become ''margin-left: anchor(right)''.
+
+				If "top" and "bottom" are being swapped,
+				then ''margin-top: anchor(20%)''
+				will become ''margin-bottom: anchor(80%)''.
+			</div>
+		* For [=sizing properties=],
+			change the specified axis in ''anchor-size()'' functions
+			to maintain the same relative relationship to the new direction
+			that they had to the old.
+
+			<div class=example>
+				For example, if "top" and "left" are being swapped,
+				then ''width: anchor-size(width)''
+				will become ''height: anchor-size(height)''.
+			</div>
+		* For the [=self-alignment properties=],
+			if |directions| are opposing,
+			change the specified <<self-position>>
+			(or ''align-self/left''/''align-self/right'' keywords),
+			if any,
+			to maintain the same relative relationship to the new direction
+			that they had to the old.
+
+			<div class=example>
+				For example, if "top" and "bottom" are being swapped,
+				then ''align-self: start''
+				will become ''align-self: end''.
+
+				However, ''align-self: center'' will remain unchanged,
+				as it has the same relationship to both directions.
+
+				Similarly, ''align-self: first baseline'' will remain unchanged,
+				as it's a <<baseline-position>>
+				rather than a <<self-position>>.
+			</div>
+		* For 'inset-area',
+			change the value
+			so that the selected rows/columns of the [=inset-area grid=]
+			maintain the same relative relationship to the new direction
+			that they had to the old.
+
+			<div class=example>
+				For example, if "top" and "left" are being swapped,
+				then ''inset-area: left span-bottom''
+				will become ''inset-area: top span-right''.
+			</div>
+
+	5. Return |styles|.
+</div>
+
 <!-- Big Text: -order
 
        ███▌  ████▌  ████▌  █████▌ ████▌