[css-align] Handle cases where safe alignment would disrupt alignment of the box edges. Refactor baseline-alignment conditions slightly to group things together better. Fixes w3c#1556.

Author: tabatkins

css-align-3/Overview.bs

@@ -837,20 +837,20 @@ Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limit
                    ██████   ███████  ██    ██    ██    ████████ ██    ██    ██
 -->
 
-<h2 id='content-distribution'>
+<h2 id='content-distribution' dfn lt="content-distribution" export>
 Content Distribution: aligning a box's contents within itself</h2>
 
-<h3 id='align-justify-content'>
-The 'justify-content' And 'align-content' Properties</h3>
-
-	The <dfn export>content-distribution properties</dfn> 'align-content' and 'justify-content'
-	(and their 'place-content' shorthand)
-	control alignment of the box's content within its content box.
+	Content-distribution controls alignment of the box's content within its content box.
+	It is specified by the <dfn export>content-distribution properties</dfn> 'align-content' and 'justify-content'
+	(and their 'place-content' shorthand).
 
 	<div class="figure">
 		<img alt="Diagram showing that the alignment of the content within the element is affected." src="images/content-example.svg" width=212 height=212>
 	</div>
 
+<h3 id='align-justify-content'>
+The 'justify-content' And 'align-content' Properties</h3>
+
 	<pre class="propdef">
 	Name: align-content
 	Value: normal | <<baseline-position>> |  <<content-distribution>> | <<overflow-position>>? <<content-position>>
@@ -1075,7 +1075,7 @@ Baseline Content-Alignment</h3>
 
 	The content of boxes participating in row-like layout contexts (<a>shared alignment contexts</a>)
 	can be baseline-aligned to each other.
-	<dfn export lt="baseline content-alignment|first-baseline content-alignment|last-baseline content-alignment">baseline content-alignment</dfn> effectively increases the <strong>padding</strong> on the box
+	<dfn export lt="baseline content-alignment|first-baseline content-alignment|last-baseline content-alignment">Baseline content-alignment</dfn> effectively increases the <strong>padding</strong> on the box
 	to align the <a>alignment baseline</a> of its contents
 	with that of other baseline-aligned boxes in its <a>baseline-sharing group</a>.
 
@@ -1099,27 +1099,34 @@ Baseline Content-Alignment</h3>
 		<dd>
 			A <a>flex item</a> participates in first (last) <a>baseline content-alignment</a>
 			in its flex line if
-			its computed 'align-content' is ''first baseline'' (''last baseline''),
-			its <a>inline axis</a> is parallel to the <a>main axis</a>,
-			and its computed 'align-self' is ''align-self/stretch'' or ''self-start'' (''self-end'').
-			For this purpose,
-			the ''start'', ''end'', ''flex-start'', and ''flex-end'' values of 'align-self'
-			are treated as either ''self-start'' or ''self-end'',
-			whichever they end up equivalent to.
+			its computed 'align-content' is ''first baseline'' (''last baseline'')
+			and its <a>inline axis</a> is parallel to the <a>main axis</a>.
 
 		<dt>Grid Items:
 		<dd>
 			A <a>grid item</a> participates in first (last) <a>baseline content-alignment</a>
 			in its startmost (endmost) row or column (whichever is parallel to its <a>inline axis</a>)
-			if its computed 'align-content' is ''first baseline'' (''last baseline''),
-			and its computed 'align-self' or 'justify-self' (whichever affects its <a>block axis</a>)
-			is ''align-self/stretch'' or ''self-start'' (''self-end'').
-			For this purpose,
-			the ''start'', ''end'', ''flex-start'', and ''flex-end'' values of 'align-self'
-			are treated as either ''self-start'' or ''self-end'',
-			whichever they end up equivalent to.
+			and if its computed 'align-content' is ''first baseline'' (''last baseline'').
 	</dl>
 
+	Additionally, if <a>self-alignment</a> applies to the box in an axis,
+	in order to participate in <a>baseline content-alignment</a> in that axis 
+	it must also have a <dfn>coordinated self-alignment preference</dfn>;
+	that is:
+
+	* If its <a>baseline alignment preference</a> is “first” (“last”),
+		the relevant computed <a>self-alignment property</a>
+		is either 'align-self/stretch'' or ''self-start'' (''self-end'').
+		For this purpose,
+		the ''start'', ''end'', ''flex-start'', and ''flex-end'' values
+		are treated as either ''self-start'' or ''self-end'',
+		whichever they end up equivalent to.
+	* Its used self-alignment is not affected by its [=overflow alignment=].
+		(That is, the used self-alignment is what would result from an ''unsafe'' [=overflow alignment=].)
+
+	<!-- This is because such a box is no longer guaranteed to line up the relevant edge with its siblings -->
+	It otherwise takes its <a>fallback alignment</a>.
+
 	See [[#align-by-baseline]] for exact details.
 	<a>Baseline content-alignment</a> can increase the intrinsic size of the box.
 
@@ -1133,12 +1140,12 @@ Baseline Content-Alignment</h3>
                    ██████  ████████ ████████ ██
 -->
 
-<h2 id='self-alignment'>
+<h2 id='self-alignment' dfn lt="self-alignment" export>
 Self-Alignment: Aligning the Box within its Parent</h2>
 
-	The <dfn export>self-alignment properties</dfn> 'align-self' and 'justify-self'
-	(and their 'place-self' shorthand)
-	control alignment of the box within its containing block.
+	Self-alignment controls alignment of the box within its containing block.
+	It is specified by the <dfn export>self-alignment properties</dfn> 'align-self' and 'justify-self'
+	(and their 'place-self' shorthand).
 
 	<div class="figure">
 		<img alt="Diagram showing that the alignment of the element within its containing block is affected." src="images/self-example.svg" width=212 height=212>