diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index c9cf7457e64..4ad4b8ce3c7 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -545,7 +545,7 @@ The 'border-clip' properties 
 		Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
-		Value: normal | [ <> | <> ]+
+		Value: normal | [ <> | <> ]+
 		Initial: normal
 		Inherited: no
 		Percentages: refer to length of border-edge side
@@ -557,7 +557,7 @@ The 'border-clip' properties
 	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.
 
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index f92fa7be6f0..5efe272d5ec 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1986,7 +1986,7 @@ Color Stop “Fixup”
 	
 		<image-1D> = <>
 		<> = stripes( <># )
-		<> = <> && [ <> | <> ]?
+		<> = <> && [ <> | <> ]?
 	

 	
 	The stripes() function defines a [=1D image=]
@@ -2010,13 +2010,13 @@ Color Stop “Fixup”
 		

 			Negative length values are invalid.
 
-		
<>
+		
<>
 		

-			A <> is evaluated as a fraction of the |total width|
-			relative to the total sum of <> entries in the function,
-			after subtracting the thickness of any non-<> entries
+			A <> is evaluated as a fraction of the |total width|
+			relative to the total sum of <> entries in the function,
+			after subtracting the thickness of any non-<> entries
 			(flooring the subtraction result at zero).
-			If the sum of <> values is less than ''1fr'',
+			If the sum of <> values is less than ''1fr'',
 			the result of the subtraction is multiplied by the sum's value
 			before being distributed.
 	
@@ -2044,22 +2044,22 @@ Color Stop “Fixup”
 		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 <> values,
+		the value of the sum of the <> values,
 		to obtain only 90px,
 		which is then distributed in the 1:2 ratio
-		dictated by the <> values.
+		dictated by the <> values.
 
 		
 
-		(This is similar to how [=flex layout=] deals with small <> sums on a line,
+		(This is similar to how [=flex layout=] deals with small <> sums on a line,
 		and ensures smoothly continuous behavior
-		as the <> values approach zero.)
+		as the <> values approach zero.)
 	
 
 	The [=computed value=] of this function is
 	an ordered list of stripes,
 	each given as a [=computed color=]
-	and a thickness represented either a <> value
+	and a thickness represented either a <> value
 	or a computed <> value.
 
 
+
+

+Proportional Fractions: the <> type

+
+	Proportional fractions are denoted by <>,
+	which is a <> with the fr 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 ''Nfr'' represents N / max(sum of all ''fr'' values, 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 <> values
+	always excludes negative values,
+	in addition to any explicit ranges that might be specified.
+
+	Note: <> values are not <>s
+	(nor are they compatible with <>s, like some <> values),
+	so they cannot be represented in or
+	combined with other unit types in ''calc()'' expressions.
+
+	

+		<> 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.
+
+		A <> 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 less 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 not 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 specifically what's desired,
+		authors should stick to values ≥ 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.
+	

+
 

 Interpolation Progress Functional Notations

 
@@ -731,7 +804,7 @@ Ian's proposal:
 	The <dimension-unit> production matches a literal "%" character
 	(that is, a <> with a value of "%")
 	or an ident whose value is any of the CSS units
-	for <>, <>, <