[css-flexbox] Rephrase abspos child positioning in Rossen's preferred terms. (Should be no behavior change.)

--HG--
extra : rebase_source : 4ae3919de2c74cea1d8b8321e2ab1c2ef62def1c

Author: tabatkins

css-flexbox/Overview.bs

@@ -617,16 +617,35 @@ Absolutely-Positioned Flex Children</h3>
 	An absolutely-positioned child of a <i>flex container</i> does not participate in flex layout
 	beyond the <a href="#algo-flex-order">reordering step</a>.
 
-	Its static position is calculated by first doing full flex layout without the absolutely-positioned children,
-	then positioning each absolutely-positioned child as if it were the sole <a>flex item</a>
-	in the <a>flex container</a>,
-	assuming both the child and the <a>flex container</a> were fixed size boxes of their used size.
+	The static position of an absolutely-positioned child of a <a>flex container</a>
+	is determined by the 'justify-*'/'align-*' properties set on the <a>flex container</a> and the child:
+
+	<dl>
+		<dt>In the <a>main axis</a>
+		<dd>
+			If the <a>flex container's</a> 'justify-content' value
+			would distribute a single <a>flex item</a>
+			to the start, center, or end side of the <a>main axis</a>,
+			the static position in the <a>main axis</a> is the start, center, or end respectively.
+
+		<dt>In the <a>cross axis</a>
+		<dd>
+			If the child's 'align-self' value,
+			if specified on a hypothetical single <a>flex item</a> child of the <a>flex container</a>,
+			would align that hypothetical child to the start, center, or end side of the <a>cross axis</a>,
+			the static position in the <a>cross axis</a> is the start, center, or end respectively.
+	</dl>
+
+	Further, the absolutely-positioned child aligns its start, center, or end in the given axis
+	(whichever position the static position was set to)
+	to the static position.
 
 	<div class='example'>
-		For example, by default, the static position of an absolutely positioned child aligns it to the main-start/cross-start corner,
-		corresponding to the default values of 'justify-content' and 'align-content' on the <a>flex container</a>.
-		Setting ''justify-content:center'' on the <a>flex container</a>, however,
-		would center it in the main axis.
+		The effect of this is that if you set, for example,
+		''align-content: center;'' on an absolutely-positioned child of a <a>flex container</a>,
+		the child will be centered in the <a>flex container's</a> <a>cross axis</a>.
+		(The static position will be in the center of the <a>cross axis</a>,
+		and the child will align its center with the static position.)
 	</div>
 
 <h3 id='item-margins'>

css-flexbox/Overview.html

@@ -246,7 +246,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Flexible Box Layout Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140507>7 May 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140519>19 May 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-flexbox-1/>http://www.w3.org/TR/css-flexbox-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ rel=previous>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/ rel=previous>http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/ rel=previous>http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/ rel=previous>http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/ rel=previous>http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a><dd><a href=http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ rel=previous>http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback">www-style@w3.org</a>
@@ -770,16 +770,35 @@ <h3 class="heading settled heading" data-level=4.1 id=abspos-items><span class=s
 <p>An absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> does not participate in flex layout
 	beyond the <a href=#algo-flex-order>reordering step</a>.</p>
 
-<p>Its static position is calculated by first doing full flex layout without the absolutely-positioned children,
-	then positioning each absolutely-positioned child as if it were the sole <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
-	in the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
-	assuming both the child and the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> were fixed size boxes of their used size.</p>
+<p>The static position of an absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>
+	is determined by the <a class=property data-link-type=propdesc title=justify-*>justify-*</a>/<a class=property data-link-type=propdesc title=align-*>align-*</a> properties set on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> and the child:</p>
+
+	<dl>
+		<dt>In the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>
+		<dd>
+			If the <a data-link-type=dfn href=#flex-container title="flex container’s">flex container’s</a> <a class=property data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content</a> value
+			would distribute a single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
+			to the start, center, or end side of the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>,
+			the static position in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a> is the start, center, or end respectively.
+
+		<dt>In the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>
+		<dd>
+			If the child’s <a class=property data-link-type=propdesc href=#propdef-align-self title=align-self>align-self</a> value,
+			if specified on a hypothetical single <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> child of the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
+			would align that hypothetical child to the start, center, or end side of the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>,
+			the static position in the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a> is the start, center, or end respectively.
+	</dl>
+
+<p>Further, the absolutely-positioned child aligns its start, center, or end in the given axis
+	(whichever position the static position was set to)
+	to the static position.</p>
 
 	<div class=example>
-		For example, by default, the static position of an absolutely positioned child aligns it to the main-start/cross-start corner,
-		corresponding to the default values of <a class=property data-link-type=propdesc href=#propdef-justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=#propdef-align-content title=align-content>align-content</a> on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>.
-		Setting <span class=css data-link-type=maybe title=justify-content:center>justify-content:center</span> on the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>, however,
-		would center it in the main axis.
+		The effect of this is that if you set, for example,
+		<a class=css data-link-type=propdesc href=#propdef-align-content title=align-content>align-content: center;</a> on an absolutely-positioned child of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
+		the child will be centered in the <a data-link-type=dfn href=#flex-container title="flex container’s">flex container’s</a> <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>.
+		(The static position will be in the center of the <a data-link-type=dfn href=#cross-axis title="cross axis">cross axis</a>,
+		and the child will align its center with the static position.)
 	</div>
 
 <h3 class="heading settled heading" data-level=4.2 id=item-margins><span class=secno>4.2 </span><span class=content>
@@ -959,8 +978,8 @@ <h3 class="heading settled heading" data-level=4.5 id=min-size-auto><span class=
 
 <p>Otherwise,
 			this keyword computes to <span class=css data-link-type=maybe title=0>0</span>
-			(unless otherwise defined by a future specification).</p>
-	</dl>
+			(unless otherwise defined by a future specification).
+	</dl><p></p>
 
 	<div class=note id=min-size-opt><a class=self-link href=#min-size-opt></a>
 		<p>
@@ -2218,8 +2237,8 @@ <h3 class="heading settled heading" data-level=9.4 id=cross-sizing><span class=s
 					(even if it’s a multi-line flex container),
 					then clamp the line’s cross-size to be within the container’s computed min and max cross-size properties.
 					<span class=note>Note that if CSS 2.1’s definition of min/max-width/height applied more generally,
-					this behavior would fall out automatically.</span></p>
-			</ol>
+					this behavior would fall out automatically.</span>
+			</ol><p></p>
 
 
 		<li id=algo-line-stretch><a class=self-link href=#algo-line-stretch></a>
@@ -2393,13 +2412,13 @@ <h4 class="heading settled heading" data-level=9.7.1 id=resolve-flexible-lengths
 			the initial <a data-link-type=dfn href=#free-space title="free space">free space</a> multiplied by the item’s <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>.</p>
 
 <p>If the initial <a data-link-type=dfn href=#free-space title="free space">free space</a> is negative,
-			first find the <dfn data-dfn-type=dfn data-noexport="" id=scaled-flex-factor-sum>scaled flex factor sum<a class=self-link href=#scaled-flex-factor-sum></a></dfn>,</p>
+			first find the <dfn data-dfn-type=dfn data-noexport="" id=scaled-flex-factor-sum>scaled flex factor sum<a class=self-link href=#scaled-flex-factor-sum></a></dfn>,
 			<code>max(1, ∑unfrozen flex factors)</code>.
 			Then, for each unfrozen flex item,
 			find its <dfn data-dfn-type=dfn data-noexport="" id=scaled-flex-factor>scaled flex factor<a class=self-link href=#scaled-flex-factor></a></dfn> by multipling its <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a> by its <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a>
 			and normalizing so that the sum of these <a data-link-type=dfn href=#scaled-flex-factor title="scaled flex factors">scaled flex factors</a> equals the <var>scaled flex factor sum</var>.
 			Then, multiply each item’s <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a> by the initial <a data-link-type=dfn href=#free-space title="free space">free space</a>,
-			and let the result be its <a data-link-type=dfn href=#desired-free-space title="desired free space">desired free space</a>.
+			and let the result be its <a data-link-type=dfn href=#desired-free-space title="desired free space">desired free space</a>.</p>
 
 		<li>
 			<strong>Distribute <a data-link-type=dfn href=#free-space title="free space">free space</a>.</strong>