[css-align] Re-add stretch as an <item-position>, since we removed it very badly and everything's confusing.

Author: tabatkins

css-align/Overview.bs

@@ -13,7 +13,7 @@ Previous Version: http://www.w3.org/TR/2013/WD-css3-align-20130514/
 Previous Version: http://www.w3.org/TR/2012/WD-css3-align-20120612/
 Abstract: This module contains the features of <a href="http://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in [[CSS3TEXT]] and [[CSS3LINE]].)
 !Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/39">http://www.w3.org/Style/CSS/Tracker/products/39</a>
-Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height
+Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height
 Ignored Terms: orthogonal, block container, table cell, main-axis
 At Risk: ''last-baseline''
 </pre>
@@ -184,7 +184,7 @@ Alignment Values</h2>
 	</dl>
 
 <h3 id='positional-values'>
-Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self-end'', ''flex-start'', ''flex-end'', ''left'', and ''right'' keywords</h3>
+Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self-end'', ''flex-start'', ''flex-end'', ''left'', ''right'', and ''<item-position>/stretch'' keywords</h3>
 
 	The positional alignment keywords specify a position for an <a>alignment subject</a>
 	with respect to its <a>alignment container</a>.
@@ -198,7 +198,7 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 
 	<pre class='prod'>
 		<dfn>&lt;item-position></dfn> = center | start | end | self-start | self-end |
-		                   flex-start | flex-end | left | right;
+		                   flex-start | flex-end | left | right | stretch;
 		<dfn>&lt;content-position></dfn> = center | start | end | flex-start | flex-end | left | right;
 	</pre>
 
@@ -208,14 +208,14 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 	<dl dfn-type="value">
 		<dt><dfn for="<item-position>, <content-position>">center</dfn>
 		<dd>Centers the <a>alignment subject</a> within its <a>alignment container</a>.
-<!--
-		<dt><dfn>stretch</dfn>
-		<dd>If the 'width' or 'height' (as appropriate) of the <a>alignment subject</a> is ''auto'',
+
+		<dt><dfn for="<item-position>">stretch</dfn>
+		<dd>If the 'width' or 'height' (as appropriate) of the <a>alignment subject</a> is ''width/auto'',
 			its used value is the length necessary to make the <a>alignment subject</a>’s outer size
 			as close to the size of the <a>alignment container</a> as possible,
-			while still respecting the constraints imposed by 'min/max-width/height'.
+			while still respecting the constraints imposed by 'min-height'/'max-width'/etc.
 			Otherwise, this is equivalent to ''start''.
--->
+
 		<dt><dfn for="<item-position>, <content-position>">start</dfn>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the <a>alignment container</a>’s start edge.
 
@@ -351,7 +351,7 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
 
 
 <h3 id='distribution-values'>
-Distributed Alignment: the ''stretch'', ''space-between'', ''space-around'', and ''space-evenly'' keywords</h3>
+Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between'', ''space-around'', and ''space-evenly'' keywords</h3>
 
 	The distribution values are used by 'justify-content' and 'align-content'
 	to distribute the items in the <a>alignment subject</a>
@@ -506,21 +506,21 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
 
 		<dt>Flex Containers:
 		<dd>
-			''justify-content/auto'' computes to ''stretch''.
+			''justify-content/auto'' computes to ''<content-distribution>/stretch''.
 
 			The <a>alignment container</a> is the <a>flex container</a>’s content box.
 			For 'justify-content', the <a>alignment subject</a> is the <a>flex items</a> in each <a>flex line</a>;
 			for 'align-content', the <a>alignment subject</a> is the <a>flex lines</a>.
 
 			The 'align-content' property applies along the <a>cross axis</a>.
 			The 'justify-content' property applies along the <a>main axis</a>,
-			but ''stretch'' behaves as ''flex-start''.
+			but ''<content-distribution>/stretch'' behaves as ''flex-start''.
 
 			See [[!CSS3-FLEXBOX]] for details.
 
 		<dt>Grid Containers:
 		<dd>
-			''justify-content/auto'' computes to ''start'', and ''stretch'' behaves like ''start''.
+			''justify-content/auto'' computes to ''start'', and ''<content-distribution>/stretch'' behaves like ''start''.
 
 			The <a>alignment container</a> is the <a>grid container</a>’s content box.
 			The <a>alignment subject</a> is the bounds of the <a>grid</a>.
@@ -556,14 +556,14 @@ Baseline Content-Alignment</h3>
 			A <a>flex item</a> participates in first (last) <a>baseline content-alignment</a>
 			in its flex line if
 			its computed 'align-content' is ''baseline'' (''last-baseline'')
-			and its computed 'align-self' is ''stretch'' or ''start'' (''end'').
+			and its computed 'align-self' is ''<item-position>/stretch'' or ''start'' (''end'').
 
 		<dt>Grid Items:
 		<dd>
 			A <a>grid item</a> participates in first (last) <a>baseline content-alignment</a>
 			in either its row or column (whichever matches its <a>inline axis</a>)
 			if its computed 'align-content' is ''baseline'' (''last-baseline''),
-			and its computed 'align-self' or 'justify-self' (whichever affects its <a>block axis</a>) is ''stretch'' or ''start'' (''end'').
+			and its computed 'align-self' or 'justify-self' (whichever affects its <a>block axis</a>) is ''<item-position>/stretch'' or ''start'' (''end'').
 	</dl>
 
 	If a box spans multiple <a>shared alignment contexts</a>,
@@ -613,7 +613,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
 
 	<pre class="propdef">
 	Name: justify-self
-	Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
+	Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
 	Initial: auto
 	Applies to: block-level boxes, absolutely-positioned boxes, and grid items
 	Inherited: no
@@ -628,7 +628,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
 	<a href="#alignment-values">as described by its alignment value</a>.
 
 	The <dfn value for="justify-self">auto</dfn> keyword computes to
-	''stretch'' on absolutely-positioned elements,
+	''<item-position>/stretch'' on absolutely-positioned elements,
 	and to the computed value of 'justify-items' on the parent
 	(minus any ''legacy'' keywords) on all other boxes.
 
@@ -652,7 +652,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
 			are ignored in favor of alignment as specified here
 			and the used value of the offset properties are not adjusted to correct for the over-constraint.
 
-			The ''stretch'' value is equivalent to ''start'' on block-level boxes.
+			The ''<item-position>/stretch'' value is equivalent to ''start'' on block-level boxes.
 
 			This property does not apply to floats.
 
@@ -663,7 +663,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
 
 			When neither margin in this dimension is ''margin/auto''
 			and neither offset property in this dimension is ''top/auto'',
-			values other than ''stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
+			values other than ''<item-position>/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
 			to use shrink-to-fit sizing for calculating ''width/auto'' measures,
 			and 'justify-self' dictates alignment as follows:
 
@@ -677,7 +677,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
 			are ignored in favor of alignment as specified here
 			and the used value of the offset properties are not adjusted to correct for the over-constraint.
 
-			The ''stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
+			The ''<item-position>/stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
 			(This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
 
 		<dt>Table Cells:
@@ -701,7 +701,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
 	</dl>
 
 	<p class='issue'>
-		Should we make ''stretch'' actually work on block-level/abspos replaced boxes?
+		Should we make ''<item-position>/stretch'' actually work on block-level/abspos replaced boxes?
 		To maintain legacy compat, this requires adding a new value (named ''normal''?)
 		which has the current behavior of stretching non-replaced boxes and start-aligning replaced ones.
 
@@ -719,7 +719,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
 
 	<pre class="propdef">
 	Name: align-self
-	Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
+	Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
 	Initial: auto
 	Applies to: block-level boxes
 	Inherited: no
@@ -734,7 +734,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
 	<a href="#alignment-values">as described by its alignment value</a>.
 
 	The <dfn value for="align-self">auto</dfn> keyword computes to
-	''stretch'' on absolutely-positioned elements,
+	''<item-position>/stretch'' on absolutely-positioned elements,
 	and to the computed value of 'align-items' on the parent
 	(minus any ''legacy'' keywords) on all other boxes.
 
@@ -753,7 +753,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
 
 			When neither margin in this dimension is ''margin/auto''
 			and neither offset property in this dimension is ''top/auto'',
-			values other than ''stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
+			values other than ''<item-position>/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
 			to use shrink-to-fit sizing for calculating ''width/auto'' measures,
 			and 'align-self' dictates alignment as follows:
 
@@ -767,7 +767,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
 			are ignored in favor of alignment as specified here
 			and the used value of the offset properties are not adjusted to correct for the over-constraint.
 
-			The ''stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
+			The ''<item-position>/stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
 			(This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
 
 		<dt>Table Cells:
@@ -844,7 +844,7 @@ Inline/Main-Axis Alignment: the 'justify-items' property</h3>
 
 	<pre class="propdef">
 	Name: justify-items
-	Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ] | [ legacy && [ ''left'' | ''right'' | ''center'' ] ]
+	Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ] | [ legacy && [ ''left'' | ''right'' | ''center'' ] ]
 	Initial: auto
 	Applies to: block containers, flex containers, and grid containers
 	Inherited: no
@@ -868,7 +868,7 @@ Inline/Main-Axis Alignment: the 'justify-items' property</h3>
 			Otherwise, ''justify-items/auto'' computes to:
 
 			<ul>
-				<li>''stretch'' for flex containers and grid containers
+				<li>''<item-position>/stretch'' for flex containers and grid containers
 				<li>''start'' for everything else
 			</ul>
 
@@ -887,7 +887,7 @@ Block/Cross-Axis Alignment: the 'align-items' property</h3>
 
 	<pre class="propdef">
 	Name: align-items
-	Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
+	Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
 	Initial: auto
 	Applies to: block-level elements
 	Inherited: no
@@ -908,7 +908,7 @@ Block/Cross-Axis Alignment: the 'align-items' property</h3>
 			Computes to:
 
 			<ul>
-				<li>''stretch'' for flex containers and grid containers
+				<li>''<item-position>/stretch'' for flex containers and grid containers
 				<li>''start'' for everything else
 			</ul>
 	</dl>