[css-flexbox] Implement WG resolution to revert 'flex-basis: main-size' addition and to instead add 'flex-basis: content'.

Author: fantasai

css-flexbox/Overview.bs

@@ -917,7 +917,7 @@ Implied Minimum Size of Flex Items</h3>
 			<dl>
 				<dt><var>clamped size</var>
 				<dd>
-					is defined if the item’s 'flex-basis' is ''main-size''
+					is defined if the item’s computed 'flex-basis' is ''auto''
 					and its computed <a>main size property</a> is <a>definite</a>,
 					and is that size (clamped by its <a>max main size property</a> if it's <a>definite</a>).
 
@@ -1465,7 +1465,7 @@ The 'flex' Shorthand</h3>
 
 	<pre class='propdef'>
 	Name: flex
-	Value: none | auto | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
+	Value: none | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
 	Initial: see individual properties
 	Applies to: <a>flex items</a>
 	Inherited: see individual properties
@@ -1510,15 +1510,18 @@ The 'flex' Shorthand</h3>
 		<dt><dfn><<'flex-basis'>></dfn>
 		<dd>
 			<p>
-				This component, which takes the same values as the 'width' property,
+				This component, which takes the same values as the 'width' property
+				(plus an additional ''content'' keyword),
 				sets the 'flex-basis' <a href="#flex-components">longhand</a>
 				and specifies the <dfn dfn>flex basis</dfn>:
 				the initial <i>main size</i> of the <i>flex item</i>,
 				before free space is distributed according to the flex factors.
 				When omitted from the 'flex' shorthand, its specified value is ''0%''.
 			<p>
-				If the specified 'flex-basis' is <a value for=flex-basis>main-size</a>,
+				If the specified 'flex-basis' is <a value for=flex-basis>auto</a>,
 				the used <i>flex basis</i> is the computed value of the flex item’s <i>main size property</i>.
+				If that value is itself ''auto'',
+				then the used <i>flex basis</i> is automatically-determined based on its content (i.e. ''content'').
 
 			<figure>
 				<img src='images/rel-vs-abs-flex.svg' width='504' height='240'>
@@ -1531,20 +1534,13 @@ The 'flex' Shorthand</h3>
 				</figcaption>
 			</figure>
 
-		<dt><dfn>auto</dfn>
-		<dd>
-			The keyword ''flex/auto'' expands to ''1 1 main-size''.
-
-			<!-- This is a legacy value, because the "main-size" keyword used to be "auto", but that was confusing. -->
-
-
 		<dt><dfn>none</dfn>
 		<dd>
-			<p>The keyword ''none'' expands to ''0 0 main-size''.
+			<p>The keyword ''none'' expands to ''0 0 auto''.
 	</dl>
 
 	<p>
-		The initial values of the 'flex' components are equivalent to <a class="css-code" href="#flex-initial">flex: 0 1 main-size</a>.
+		The initial values of the 'flex' components are equivalent to <a class="css-code" href="#flex-initial">flex: 0 1 auto</a>.
 	<p class="note">
 		Note that the initial values of 'flex-grow' and 'flex-basis'
 		are different from their defaults when omitted in the 'flex' shorthand.
@@ -1557,38 +1553,37 @@ The 'flex' Shorthand</h3>
 		authors must specify a zero <<'flex-basis'>> component
 		with a unit or precede it by two flex factors.
 
-<h3 id='flex-common'>
-Common Values of 'flex'</h3>
+<h4 id='flex-common'>
+Common Values of 'flex'</h4>
 
 	<p><em>This section is informative.</em>
 
 	<p>
 		The list below summarizes the effects of the most common 'flex' values:
 
 	<dl>
-		<dt id="flex-initial">''flex: 0 main-size''
-		<dt>''flex: initial''
+		<dt id="flex-initial">''flex: initial''
 		<dd>
-			Equivalent to ''flex: 0 1 main-size''. (This is the initial value.)
+			Equivalent to ''flex: 0 1 auto''. (This is the initial value.)
 			Sizes the item based on the 'width'/'height' properties.
 			(If the item's <i>main size property</i> computes to <a value for=width>auto</a>,
 			this will size the flex item based on its contents.)
 			Makes the flex item inflexible when there is positive free space,
-			but allows it to shrink to its min-size when there is insufficient space.
+			but allows it to shrink to its minimum size when there is insufficient space.
 			The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins"><span class=css>auto</span> margins</a>
 			can be used to align flex items along the <i>main axis</i>.
 
 		<dt>''flex: auto''
 		<dd>
-			Equivalent to ''flex: 1 1 main-size''.
+			Equivalent to ''flex: 1 1 auto''.
 			Sizes the item based on the 'width'/'height' properties,
 			but makes them fully flexible, so that they absorb any free space along the <i>main axis</i>.
 			If all items are either ''flex: auto'', ''flex: initial'', or ''flex: none'',
 			any positive free space after the items have been sized will be distributed evenly to the items with ''flex: auto''.
 
 		<dt>''flex: none''
 		<dd>
-			Equivalent to ''flex: 0 0 main-size''.
+			Equivalent to ''flex: 0 0 auto''.
 			This value sizes the item according to the 'width'/'height' properties,
 			but makes the flex item fully inflexible.
 			This is similar to ''initial'',
@@ -1674,8 +1669,8 @@ The 'flex-basis' property</h4>
 
 	<pre class='propdef'>
 	Name: flex-basis
-	Value: main-size | <<'width'>>
-	Initial: main-size
+	Value: content | <<'width'>>
+	Initial: auto
 	Applies to: <a>flex items</a>
 	Inherited: no
 	Computed value: as specified, with lengths made absolute
@@ -1691,49 +1686,29 @@ The 'flex-basis' property</h4>
 
 	<p>
 		The 'flex-basis' property sets the <i>flex basis</i>.
-		It accepts the same values as the 'width' and 'height' property.
-
-	<p>
-		The <dfn value for=flex-basis>main-size</dfn> keyword, when specified on a <i>flex item</i>,
-		retrieves the value of the <i>main size property</i>.
-
-	<div class="issue" id="issue-auto-name">
-		This value was originally named ''auto'',
-		but that was problematic because it left us with no keyword to represent an automatic flex basis.
-		There were two options for fixing this:
-
-		<dl>
-			<dt>''auto'' for automatic sizing; ''main-axis'' for size lookup
-			<dd>
-				The advantage of this is primarily that ''auto'' means “automatic”
-				both when it is specified for 'flex-basis' and when it is pulled in from 'width'/'height'.
-				It has the disadvantage (due to back-compat concerns) that the 'flex' shorthand had to be tweaked
-				to expand ''flex: auto'' to ''flex: 1 main-size'' rather than to ''flex: 1 auto''.
-				This fix is currently implemented in WebKit and Gecko,
-				but may be unshippable due to back-compat constraints.
-			<dt>''auto'' for size lookup; ''content''<sup>1</sup> for automatic sizing
-			<dd>
-				The advantage of this is that it will not break existing content:
-				a 'flex-basis' keyword for automatic sizing did not exist in the original CR,
-				so this option adds a new keyword but does not rename existing functionality.
-				It therefore avoids the ''flex: auto'' &ne; ''flex: 1 auto'' inequality,
-				but maintains the ''flex-basis: auto'' &ne; ''width: auto'' inequality.
-		</dl>
-
-		The CSSWG is waiting for feedback from implementers on this issue.
-
-		<small><sup>1</sup> Alternate keyword suggestions welcome.</small>
-	</div>
+		It accepts the same values as the 'width' and 'height' property, plus ''content''.
 
-	<p>
-		The <i>flex basis</i> is resolved the same way as 'width' in horizontal writing modes [[!CSS21]]:
+	<dl value for=flex-basis>
+		<dt><dfn>auto</dfn>
+		<dd>When specified on a <i>flex item</i>, the ''flex-basis/auto'' keyword
+			retrieves the value of the <i>main size property</i> as the used <i>flex basis</i>.
+			If that value is also ''auto'', then the used value is ''flex-basis/content''.
+
+		<dt><dfn>content</dfn>
+		<dd>Indicates automatic sizing, based on the <i>flex item</i>’s content.
+		
+		<dt><<'width'>>
+		<dd>
+		For all other values,
+		<i>flex basis</i> is resolved the same way as 'width' in horizontal writing modes [[!CSS21]]:
 		percentage values of 'flex-basis' are resolved against
 		the flex item's containing block, i.e. its flex container,
 		and if that containing block's size is <a>indefinite</a>,
 		the result is the same as a <i>main size</i> of <a value for=width>auto</a>.
 		Similarly, 'flex-basis' determines the size of the content box,
 		unless otherwise specified
 		such as by 'box-sizing' [[CSS3UI]].
+	</dl>
 
 <h2 id='alignment'>
 Alignment</h2>
@@ -3171,7 +3146,7 @@ Boris Zbarsky.
 <h3 id="changes-201403">
 Changes since the 25 March 2014 LCWD</h3>
 
-	This section documents the changes since the previous publication.
+	This section documents the changes since previous publications.
 	A <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325">Disposition of Comments</a> is also available.
 
 <h4 id="change-201403-substantive">
@@ -3217,7 +3192,7 @@ Substantive Changes and Bugfixes</h4>
 			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-19">19</a>)
 
 			<blockquote>
-				<p>&hellip; is defined if <ins>the item’s flex-basis is ''main-size'' and</ins>
+				<p>&hellip; is defined if <ins>the item’s computed flex-basis is ''auto'' and</ins>
 				its computed main size property is definite &hellip;
 			</blockquote>
 
@@ -3240,14 +3215,8 @@ Substantive Changes and Bugfixes</h4>
 			so that “lookup from main-size property” and “automatic sizing” behaviors
 			could each be explicitly specified.
 			(Issue <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140325#issue-20">20</a>)
-
-			<blockquote>
-				<p><ins>The ''flex-basis/main-size'' keyword, when specified on a flex item, retrieves the value of the main size property.</ins>
-				<p><del>Except for auto, which retrieves the value of the main size property,</del> &hellip;
-			</blockquote>
-
-			<p>See <a href="#issue-auto-name">further discussion</a> on this issue
-			and a proposed alternative to solving the same problem.
+			This change was later reverted with an alternative proposal solving the same problem
+			by instead introducing the ''content'' keyword.
 
 		<li id="change-201403-definite-flexing">
 			Defined <i>flex items</i> with a <i>definite</i> <i>flex basis</i>