[css-values-4] Renamed <<flex>> to <<fraction>>

Author: SebastianZ

css-borders-4/Overview.bs

@@ -322,7 +322,7 @@ The 'border-clip' properties</h3>
 
 		<pre class="propdef">
   		Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
-  		Value: normal | [ <<length-percentage [0,&infin;]>> | <<flex>> ]+
+  		Value: normal | [ <<length-percentage [0,&infin;]>> | <<fraction>> ]+
   		Initial: normal
   		Inherited: no
   		Percentages: refer to length of border-edge side

css-grid-1/Overview.bs

@@ -1496,7 +1496,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 
 		<dfn>&lt;track-size></dfn>          = <<track-breadth>> | minmax( <<inflexible-breadth>> , <<track-breadth>> ) | fit-content( <<length-percentage [0,∞]>> )
 		<dfn>&lt;fixed-size></dfn>          = <<fixed-breadth>> | minmax( <<fixed-breadth>> , <<track-breadth>> ) | minmax( <<inflexible-breadth>> , <<fixed-breadth>> )
-		<dfn>&lt;track-breadth></dfn>       = <<length-percentage [0,∞]>> | <<flex [0,∞]>> | min-content | max-content | auto
+		<dfn>&lt;track-breadth></dfn>       = <<length-percentage [0,∞]>> | <<fraction [0,∞]>> | min-content | max-content | auto
 		<dfn>&lt;inflexible-breadth></dfn>  = <<length-percentage [0,∞]>> | min-content | max-content | auto
 		<dfn>&lt;fixed-breadth></dfn>       = <<length-percentage [0,∞]>>
 		<dfn>&lt;line-names></dfn>          = '[' <<custom-ident>>* ']'
@@ -1525,10 +1525,10 @@ Track Sizes</h4>
 			and then resolve against that resulting <a>grid container</a> size
 			for the purpose of laying out the <a>grid</a> and its items.
 
-		<dt><dfn><<flex [0,∞]>></dfn>
+		<dt><dfn><<fraction [0,∞]>></dfn>
 		<dd>
 			Specifies the track's <dfn dfn noexport>flex factor</dfn>.
-			Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
+			Each <<fraction>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
 			For example, given a track listing of ''1fr 2fr'',
 			the tracks will take up ⅓ and ⅔ of the <a>leftover space</a>, respectively.
 			See [[#flexible-tracks]] for more details.
@@ -1538,7 +1538,7 @@ Track Sizes</h4>
 			rather than expanding to fill the entire thing.
 
 			When appearing outside a ''minmax()'' notation,
-			implies an automatic minimum (i.e. ''minmax(auto, <<flex>>)'').
+			implies an automatic minimum (i.e. ''minmax(auto, <<fraction>>)'').
 
 		<dt><dfn function lt="minmax()">minmax(<var>min</var>, <var>max</var>)</dfn>
 		<dd>
@@ -1548,10 +1548,10 @@ Track Sizes</h4>
 			If the <var>max</var> is less than the <var>min</var>,
 			then the <var>max</var> will be floored by the <var>min</var>
 			(essentially yielding ''minmax(<var>min</var>, <var>min</var>)'').
-			As a maximum, a <<flex>> value sets the track's <a>flex factor</a>;
+			As a maximum, a <<fraction>> value sets the track's <a>flex factor</a>;
 			it is invalid as a minimum.
 
-			Note: A future level of this spec may allow <<flex>> minimums,
+			Note: A future level of this spec may allow <<fraction>> minimums,
 			and will update the <a>track sizing algorithm</a> to account for this correctly
 
 		<dt><dfn>auto</dfn>
@@ -1633,7 +1633,7 @@ Track Sizes</h4>
 		(the ''1fr'' sizes both resolve to ''0'').
 		If the sum is less than the <a>grid container</a>’s width,
 		the final <a>grid line</a> will be exactly at the end edge of the <a>grid container</a>.
-		This is true in general whenever there's at least one <<flex>> value among the <a>grid track</a> sizes.
+		This is true in general whenever there's at least one <<fraction>> value among the <a>grid track</a> sizes.
 	</div>
 
 	<div class='example'>
@@ -1847,9 +1847,11 @@ Interpolation/Combination of ''repeat()''</h5>
 <h4 id='flexible-tracks'>
 Flexible Tracks</h4>
 
-	Tracks sized using <<flex>> values are called <dfn>flexible tracks</dfn>
+	Tracks sized using a <<fraction>> of the <a>leftover space</a>
+	are called <dfn>flexible tracks</dfn>
 	as they flex in response to <a>leftover space</a>
-	similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
+	similar to how <a>flex items</a> with a zero base size
+	fill space in a <a>flex container</a>.
 
 	The distribution of <a>leftover space</a> occurs after all non-flexible <a>track sizing functions</a> have reached their maximum.
 	The total size of such rows or columns is subtracted from the available space, yielding the <a>leftover space</a>,
@@ -3561,7 +3563,7 @@ Inline-axis Alignment: the 'justify-self' and 'justify-items' properties</h3>
 	that item does not participate in baseline alignment,
 	and instead uses its <a>fallback alignment</a>
 	as if that were originally specified.
-	For this purpose, <<flex>> track sizes count as “intrinsically-sized”
+	For this purpose, <<fraction>> track sizes count as “intrinsically-sized”
 	when the [=grid container=] has an [=indefinite=] size in the relevant axis.
 
 	Note: Whether the fallback alignment is used or not
@@ -3584,7 +3586,7 @@ Block-axis Alignment: the 'align-self' and 'align-items' properties</h3>
 	that item does not participate in baseline alignment,
 	and instead uses its <a>fallback alignment</a>
 	as if that were originally specified.
-	For this purpose, <<flex>> track sizes count as “intrinsically-sized”
+	For this purpose, <<fraction>> track sizes count as “intrinsically-sized”
 	when the [=grid container=] has an [=indefinite=] size in the relevant axis.
 
 <h3 id='grid-align'>
@@ -3780,7 +3782,7 @@ Grid Sizing Algorithm</h3>
 	<ul>
 		<li>A <dfn>fixed sizing function</dfn> (<<length>> or resolvable <<percentage>>).
 		<li>An <dfn>intrinsic sizing function</dfn> (''min-content'', ''max-content'', ''grid-template-rows/auto'', ''fit-content()'').
-		<li>A <dfn>flexible sizing function</dfn> (<<flex>>).
+		<li>A <dfn>flexible sizing function</dfn> (<<fraction>>).
 	</ul>
 
 	The <a>grid sizing algorithm</a> defines how to resolve these sizing constraints into used track sizes.
@@ -3821,7 +3823,7 @@ Grid Sizing Algorithm</h3>
 				<li>
 					infinity, if any track that it spans
 					has a ''max-content'' min sizing function
-					or a ''max-content'', ''auto'', or <<flex>> max sizing function.
+					or a ''max-content'', ''auto'', or <<fraction>> max sizing function.
 			</ul>
 
 			This is may reduce the amount of re-layout passes that are necessary,
@@ -3894,7 +3896,7 @@ Track Sizing Terminology</h3>
 		<dd>
 			If the track was sized with a ''minmax()'' function,
 			this is the first argument to that function.
-			If the track was sized with a <<flex>> value or ''fit-content()'' function,
+			If the track was sized with a <<fraction>> value or ''fit-content()'' function,
 			''auto''.
 			Otherwise, the track's sizing function.
 
@@ -4872,7 +4874,7 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/">
 			See [[#layout-algorithm]].
 			(<a href="https://github.com/w3c/csswg-drafts/issues/3418">Issue 3418</a>)
 		<li id="change-2020-fr-unit">
-			Moved the definition of <<flex>> to [[css-values-4#fractions]],
+			Moved the definition of <<fraction>> to [[css-values-4#fractions]],
 			as other specs also make use of it.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
@@ -5568,7 +5570,7 @@ Major Changes</h4>
 			when <<percentage>> sizes are used
 			in <a lt="fit-content size">fit-content</a>-sized <a>grid containers</a>
 			such as ''width/auto''-sized inline or floated <a>grid containers</a>.
-			(To avoid this problem, use <<flex>> units instead,
+			(To avoid this problem, use <<fraction>> units instead,
 			which are intended to maintain their ratios and not overflow
 			when the grid is intrinsically-sized.)
 			<blockquote>

css-grid-2/Overview.bs

@@ -1591,7 +1591,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 		<dfn>&lt;line-name-list></dfn>      = [ <<line-names>> | <<name-repeat>> ]+
 		<dfn>&lt;track-size></dfn>          = <<track-breadth>> | minmax( <<inflexible-breadth>> , <<track-breadth>> ) | fit-content( <<length-percentage [0,∞]>> )
 		<dfn>&lt;fixed-size></dfn>          = <<fixed-breadth>> | minmax( <<fixed-breadth>> , <<track-breadth>> ) | minmax( <<inflexible-breadth>> , <<fixed-breadth>> )
-		<dfn>&lt;track-breadth></dfn>       = <<length-percentage [0,∞]>> | <<flex [0,∞]>> | min-content | max-content | auto
+		<dfn>&lt;track-breadth></dfn>       = <<length-percentage [0,∞]>> | <<fraction [0,∞]>> | min-content | max-content | auto
 		<dfn>&lt;inflexible-breadth></dfn>  = <<length-percentage [0,∞]>> | min-content | max-content | auto
 		<dfn>&lt;fixed-breadth></dfn>       = <<length-percentage [0,∞]>>
 		<dfn>&lt;line-names></dfn>          = '[' <<custom-ident>>* ']'
@@ -1620,10 +1620,10 @@ Track Sizes</h4>
 			and then resolve against that resulting <a>grid container</a> size
 			for the purpose of laying out the <a>grid</a> and its items.
 
-		<dt><dfn><<flex [0,∞]>></dfn>
+		<dt><dfn><<fraction [0,∞]>></dfn>
 		<dd>
 			A non-negative dimension with the unit ''fr'' specifying the track's <dfn dfn noexport>flex factor</dfn>.
-			Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
+			Each <<fraction>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
 			For example, given a track listing of ''1fr 2fr'',
 			the tracks will take up ⅓ and ⅔ of the <a>leftover space</a>, respectively.
 			See [[#fr-unit]] for more details.
@@ -1633,7 +1633,7 @@ Track Sizes</h4>
 			rather than expanding to fill the entire thing.
 
 			When appearing outside a ''minmax()'' notation,
-			implies an automatic minimum (i.e. ''minmax(auto, <<flex>>)'').
+			implies an automatic minimum (i.e. ''minmax(auto, <<fraction>>)'').
 
 		<dt><dfn function lt="minmax()">minmax(<var>min</var>, <var>max</var>)</dfn>
 		<dd>
@@ -1643,10 +1643,10 @@ Track Sizes</h4>
 			If the <var>max</var> is less than the <var>min</var>,
 			then the <var>max</var> will be floored by the <var>min</var>
 			(essentially yielding ''minmax(<var>min</var>, <var>min</var>)'').
-			As a maximum, a <<flex>> value sets the track's <a>flex factor</a>;
+			As a maximum, a <<fraction>> value sets the track's <a>flex factor</a>;
 			it is invalid as a minimum.
 
-			Note: A future level of this spec may allow <<flex>> minimums,
+			Note: A future level of this spec may allow <<fraction>> minimums,
 			and will update the <a>track sizing algorithm</a> to account for this correctly
 
 		<dt><dfn>auto</dfn>
@@ -1728,7 +1728,7 @@ Track Sizes</h4>
 		(the ''1fr'' sizes both resolve to ''0'').
 		If the sum is less than the <a>grid container</a>’s width,
 		the final <a>grid line</a> will be exactly at the end edge of the <a>grid container</a>.
-		This is true in general whenever there's at least one <<flex>> value among the <a>grid track</a> sizes.
+		This is true in general whenever there's at least one <<fraction>> value among the <a>grid track</a> sizes.
 	</div>
 
 	<div class='example'>
@@ -1948,9 +1948,11 @@ Interpolation/Combination of ''repeat()''</h5>
 <h4 id='flexible-tracks'>
 Flexible Tracks</h4>
 
-	Tracks sized using <<flex>> values are called <dfn>flexible tracks</dfn>
+	Tracks sized using a <<fraction>> of the <a>leftover space</a>
+	are called <dfn>flexible tracks</dfn>
 	as they flex in response to <a>leftover space</a>
-	similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
+	similar to how <a>flex items</a> with a zero base size
+	fill space in a <a>flex container</a>.
 
 	The distribution of <a>leftover space</a> occurs after all non-flexible <a>track sizing functions</a> have reached their maximum.
 	The total size of such rows or columns is subtracted from the available space, yielding the <a>leftover space</a>,
@@ -4113,7 +4115,7 @@ Inline-axis Alignment: the 'justify-self' and 'justify-items' properties</h3>
 	that item does not participate in baseline alignment,
 	and instead uses its <a>fallback alignment</a>
 	as if that were originally specified.
-	For this purpose, <<flex>> track sizes count as “intrinsically-sized”
+	For this purpose, <<fraction>> track sizes count as “intrinsically-sized”
 	when the [=grid container=] has an [=indefinite=] size in the relevant axis.
 
 	Note: Whether the fallback alignment is used or not
@@ -4136,7 +4138,7 @@ Block-axis Alignment: the 'align-self' and 'align-items' properties</h3>
 	that item does not participate in baseline alignment,
 	and instead uses its <a>fallback alignment</a>
 	as if that were originally specified.
-	For this purpose, <<flex>> track sizes count as “intrinsically-sized”
+	For this purpose, <<fraction>> track sizes count as “intrinsically-sized”
 	when the [=grid container=] has an [=indefinite=] size in the relevant axis.
 
 <h3 id='grid-align'>
@@ -4333,7 +4335,7 @@ Grid Sizing Algorithm</h3>
 	<ul>
 		<li>A <dfn>fixed sizing function</dfn> (<<length>> or resolvable <<percentage>>).
 		<li>An <dfn>intrinsic sizing function</dfn> (''min-content'', ''max-content'', ''grid-template-rows/auto'', ''fit-content()'').
-		<li>A <dfn>flexible sizing function</dfn> (<<flex>>).
+		<li>A <dfn>flexible sizing function</dfn> (<<fraction>>).
 	</ul>
 
 	The <a>grid sizing algorithm</a> defines how to resolve these sizing constraints into used track sizes.
@@ -4576,7 +4578,7 @@ Track Sizing Terminology</h3>
 		<dd>
 			If the track was sized with a ''minmax()'' function,
 			this is the first argument to that function.
-			If the track was sized with a <<flex>> value or ''fit-content()'' function,
+			If the track was sized with a <<fraction>> value or ''fit-content()'' function,
 			''auto''.
 			Otherwise, the track's sizing function.
 
@@ -5484,7 +5486,7 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/">
 			(<a href="https://github.com/w3c/csswg-drafts/issues/3418">Issue 3418</a>)
 
 		<li id="change-2020-fr-unit">
-			Moved the definition of <<flex>> to [[css-values-4#fractions]],
+			Moved the definition of <<fraction>> to [[css-values-4#fractions]],
 			as other specs also make use of it.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
@@ -5533,7 +5535,7 @@ Acknowledgements</h2>
 	and contributed illustrations;
 <!-- add this in once we spec it
 	to Eric Meyer,
-	who asked us to define useful behavior for <<flex>> min track sizes;
+	who asked us to define useful behavior for <<fraction>> min track sizes;
 -->
 	and Rachel Andrew and Jen Simmons
 	who helped bridge the feedback gap between the CSS Working Group

css-images-4/Overview.bs

@@ -1941,7 +1941,7 @@ Color Stop “Fixup”</h4>
 	<pre class=prod>
 		&lt;image-1D> = <<stripes()>>
 		<<stripes()>> = stripes( <<color-stripe>># )
-		<<color-stripe>> = <<color>> && [ <<length-percentage>> | <<flex>> ]?
+		<<color-stripe>> = <<color>> && [ <<length-percentage>> | <<fraction>> ]?
 	</pre>
 
 	The <dfn>stripes()</dfn> function defines a [=1D image=]
@@ -1965,13 +1965,13 @@ Color Stop “Fixup”</h4>
 		<dd>
 			Negative length values are invalid.
 
-		<dt><dfn><<flex>></dfn>
+		<dt><dfn><<fraction>></dfn>
 		<dd>
-			A <<flex>> is evaluated as a fraction of the |total width|
-			relative to the total sum of <<flex>> entries in the function,
-			after subtracting the thickness of any non-<<flex>> entries
+			A <<fraction>> is evaluated as a fraction of the |total width|
+			relative to the total sum of <<fraction>> entries in the function,
+			after subtracting the thickness of any non-<<fraction>> entries
 			(flooring the subtraction result at zero).
-			If the sum of <<flex>> values is less than ''1fr'',
+			If the sum of <<fraction>> values is less than ''1fr'',
 			the result of the subtraction is multiplied by the sum's value
 			before being distributed.
 	</dl>
@@ -1997,20 +1997,20 @@ Color Stop “Fixup”</h4>
 		will instead give a 30px red stripe and 60px green stripe,
 		followed by 100px of blue and then 210px of transparent.
 		The 300px of leftover space is multiplied by .3,
-		the value of the sum of the <<flex>> values,
+		the value of the sum of the <<fraction>> values,
 		to obtain only 90px,
 		which is then distributed in the 1:2 ratio
-		dictated by the <<flex>> values.
+		dictated by the <<fraction>> values.
 
-		(This is similar to how [=flex layout=] deals with small <<flex>> sums on a line,
+		(This is similar to how [=flex layout=] deals with small <<fraction>> sums on a line,
 		and ensures smoothly continuous behavior
-		as the <<flex>> values approach zero.)
+		as the <<fraction>> values approach zero.)
 	</div>
 
 	The [=computed value=] of this function is
 	an ordered list of stripes,
 	each given as a [=computed color=]
-	and a thickness represented either a <<flex>> value
+	and a thickness represented either a <<fraction>> value
 	or a computed <<length-percentage>> value.
 
 <!--
@@ -2427,7 +2427,7 @@ Interpolating ''stripes()'' {#interpolating-stripes}
 	1. Both the starting and ending image must have the same number of <<color-stripe>>s.
 
 	2. Each pair of interpolated thicknesses must be of the same type,
-		i.e. both must either be of type <<length-percentage>>, or <<flex>>.
+		i.e. both must either be of type <<length-percentage>>, or <<fraction>>.
 
 	If the two images satisfy both constraints,
 	they must be interpolated as described below.