[css-values-5] Centralized and generalized definition of fr unit in CSS Values 5

css-borders-4/Overview.bs

@@ -545,7 +545,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
@@ -557,7 +557,7 @@ The 'border-clip' properties</h3>
 	the border edge. The first part is visible, the second is invisible,
 	the third part is visible, etc. Parts can be specified with lengths,
 	percentages, or flexible lengths (expressed by the ''fr'' unit, as per
-	[[CSS3GRID]]).
+	[[css-values-5#fractions]]).
 	The ''border-clip/normal'' value means
 	that the border is not split, but shown normally.
 

css-images-4/Overview.bs

@@ -1986,7 +1986,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=]
@@ -2010,13 +2010,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>
@@ -2044,22 +2044,22 @@ 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.
 
 		<img src="images/stripes2.svg" style="height:1em; width:400px;" alt="">
 
-		(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.
 
 <!--
@@ -2476,7 +2476,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.

css-values-5/Overview.bs

@@ -111,6 +111,79 @@ Request URL Modifiers</h4>
 		given |req|.
 	</div>
 
+<h2 id="other-units">
+Other Quantities</h2>
+
+	See [[css-values-4#other-units]].
+
+<!--
+████████ ████████     ███      ██████  ████████ ████  ███████  ██    ██
+██       ██     ██   ██ ██    ██    ██    ██     ██  ██     ██ ███   ██
+██       ██     ██  ██   ██   ██          ██     ██  ██     ██ ████  ██
+██████   ████████  ██     ██  ██          ██     ██  ██     ██ ██ ██ ██
+██       ██   ██   █████████  ██          ██     ██  ██     ██ ██  ████
+██       ██    ██  ██     ██  ██    ██    ██     ██  ██     ██ ██   ███
+██       ██     ██ ██     ██   ██████     ██    ████  ███████  ██    ██
+-->
+
+<h3 id="fractions">
+Proportional Fractions: the <<fraction>> type</h3>
+
+	<dfn id=flex-fraction>Proportional fractions</dfn> are denoted by <dfn id="fr-value"><<fraction>></dfn>,
+	which is a <<dimension>> with the <dfn value for="<fraction>" lt="fr|fr unit">fr</dfn> unit.
+	They represent a fraction of a reference value
+	(typically a length)
+	as a proportion in relation to other [=flex fractions=] referencing that same value,
+	i.e. a value of ''<var>N</var>fr'' represents <var>N</var> / max(<var>sum of all ''fr'' values</var>, 1).
+	For example, leftover space in [=grid layout=]
+	is distributed to a ''1fr'' track and a ''2fr'' track in a 1:2 ratio.
+
+	The allowed range of <<fraction>> values
+	<em>always</em> excludes negative values,
+	in addition to any explicit ranges that might be specified.
+
+	Note: <<fraction>> values are not <<length>>s
+	(nor are they compatible with <<length>>s, like some <<percentage>> values),
+	so they cannot be represented in or
+	combined with other unit types in ''calc()'' expressions.
+
+	<details class=note>
+		<summary><<fraction>> values between 0fr and 1fr have a somewhat special behavior:
+		when the sum of the flex factors is less than 1,
+		they will take up less than 100% of the leftover space.</summary>
+
+		A <<fraction>> value is effectively a request for some proportion of the leftover space,
+		with ''1fr'' meaning “100% of the leftover space”;
+		then, if the used space sums up to more than 100% of the available space,
+		the requested space is rebalanced to keep the same ratio
+		but use up exactly 100% of it.
+		However, if the sum is <em>less</em> than the full amount
+		(such as three times ''.25fr'')
+		then the requested space is exactly what's used
+		(25% of the leftover space for each fraction,
+		with the final 25% left unfilled).
+
+		This pattern is required for continuous behavior as ''fr'' values approach zero
+		(which means the leftover space is <em>not</em> occupied by any fractions).
+		Without this, a ''1fr'' value would take all of the leftover space;
+		but so would a ''0.1fr'' value,
+		and a ''0.01fr'' value,
+		etc.,
+		until finally the value is small enough to underflow to zero
+		and the fractions suddenly take up none of the leftover space.
+		With this behavior,
+		the fractions instead gradually take less of the leftover space
+		as their flex factor shrinks below ''1fr'',
+		smoothly transitioning to taking none of the leftover space at zero.
+
+		Unless this “partial fill” behavior is <em>specifically</em> what's desired,
+		authors should stick to values &ge; 1;
+		for example, using ''1fr'' and ''2fr'' is usually better
+		than using ''.33fr'' and ''.67fr'',
+		as they're more likely to behave as intended
+		if fractions are added or removed.
+	</details>
+
 <h2 id="progress">
 Interpolation Progress Functional Notations</h2>
 
@@ -731,7 +804,7 @@ Ian's proposal:
 	The <dfn>&lt;dimension-unit></dfn> production matches a literal "%" character
 	(that is, a <<delim-token>> with a value of "%")
 	or an ident whose value is any of the CSS units
-	for <<length>>, <<angle>>, <<time>>, <<frequency>>, or <<flex>> values
+	for <<length>>, <<angle>>, <<time>>, <<frequency>>, or <<fraction>> values
 	(such as ''px'' or ''ms'').
 
 	The arguments of ''attr()'' are:
@@ -1495,6 +1568,9 @@ Additions Since Level 4</h3>
 
 	<ul>
 		<li>Added the ''toggle()'' and ''attr()'' notations
+		<li>Moved the definition of <<flex>> from [[css-grid-2]] to this specification
+			and renamed it to <<fraction>>.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
 
 <h2 class="no-num" id="sec-pri">