[css-values-5][editorial] Reword ua-early random() stuff, and rewrite/expand example.

Author: tabatkins

css-values-5/Overview.bs

@@ -2257,6 +2257,7 @@ attr-security-animation.html
 attr-security-if.html
 attr-security-transition.html
 attr-security.html
+attr-security-transition-interpolated.html
 </wpt>
 
 	An ''attr()'' function can reference attributes
@@ -3223,10 +3224,18 @@ Simplification of <<random-key>></h4>
 			which is then evaluated within 'width',
 			getting <<random-ua-ident>>s of ''ua-width-1'' and ''ua-width-2'' instead.
 		</div>
+
 	* when evaluated inside of an [=arbitrary substitution function=]
 		as part of the substitution process,
-		the prefix is ''ua-early-'' rather than just ''ua-''.
-		The INDEX portion, as well, is tracked across all substitutions in the property.
+		the prefix is ''ua-early-'' rather than just ''ua-'':
+		<css>ua-early-PROPERTY</css> or <css>ua-early-PROPERTY-INDEX</css>.
+
+		Additionally, if the INDEX portion is included in the ident,
+		it is incremented <em>separately</em> from non-"early" usage
+		(that is, the "early" usage counts up from 1, then non-"early" usage will also count up from 1)
+		and increments across substitutions in the property
+		(that is, multiple different [=arbitrary substitution functions=] will use successive indexes, 
+		rather than resetting to 1 for each substitution).
 
 		<div class=example>
 			For example, in this relatively complex value:
@@ -3235,28 +3244,79 @@ Simplification of <<random-key>></h4>
 			.foo {
 				width: calc(
 					if(
-						style(random(/*eA*/) == random(/*eB*/)): random(/*lA*/);
-						else: random(/*lB*/))
+						style(/*eA*/random(auto, ...) < 0.5): 
+							/*lA*/random(auto, ...);
+						else: 
+							/*lB*/random(auto, ...))
+					)
+					+ 
+					if(
+						style(/*eB*/random(auto, ...) < 0.5): 
+							/*lC*/random(auto, ...);
+						else: 
+							/*lD*/random(auto, ...))
+					)
+				);
+			}
+			</xmp>
+
+			During [=/replace an arbitrary substitution function|replacement=],
+			the tests of both ''if()''s are parsed
+			(since using <css>==</css> or <css>></css> provides a numeric context,
+			giving the UA the necessary knowledge to evaluate them),
+			resulting in, effectively, the following code:
+
+			<xmp highlight=css>
+			.foo {
+				width: calc(
+					if(
+						style(/*eA*/random(element-scoped ua-early-width-1, ...) < 0.5): 
+							/*lA*/random(auto, ...);
+						else: 
+							/*lB*/random(auto, ...))
 					)
-					+ if(
-						style(random(/*eC*/) > random(/*eD*/): random(/*lC*/);
-						else: random(/*lD*/))
+					+ 
+					if(
+						style(/*eB*/random(element-scoped ua-early-width-2, ...) < 0.5): 
+							/*lC*/random(auto, ...);
+						else: 
+							/*lD*/random(auto, ...))
 					)
 				);
 			}
 			</xmp>
 
-			The four ''random()''s in the ''if/style()'' tests (''eA'' through ''eD'')
-			are all evaluated
-			(since using <css>==</css> or <css>></css> provides a numeric context)
-			as part of substitution,
-			so their <<random-ua-ident>>s are ''ua-early-width-1''/''-2''/''-3''/''-4''.
+			That is, the two values in the tests have distinct <<random-ua-ident>>s,
+			and will be element-scoped as well,
+			so every instance on every element will evaluate to distinct values.
 
-			Each ''if()'' will resolve to one of the "late" ''random()''s (''lA'' through ''lD''),
-			left unevaluated and substituted into the 'width',
-			giving "normal" <<random-ua-ident>>s of ''ua-width-1'' and ''ua-width-2''.
+			Based on these random values,
+			each ''if()'' will substitute itself with one of its two (unevaluated) branches.
+			When these are then parsed according to the 'width' grammar,
+			they will receive "normal" <<random-ua-ident>>s with their indexes restarting from 1,
+			effectively:
+
+			<xmp highlight=css>
+			.foo {
+				width: calc(
+					/*lA*/random(element-scoped ua-width-1, ...)
+					+ 
+					/*lD*/random(element-scoped ua-width-2, ...)
+					)
+				);
+			}
+			</xmp>
+
+			Since these are using different <<random-ua-ident>>s than the "early" ones,
+			their random values will be distinct as well.
 		</div>
 
+	These additional modifiers can be combined.
+	For example,
+	if a ''random(0, 1)'' is evaluated in the test of an ''if()''
+	used in the '@function/result' of a custom function named ''--foo()'',
+	the <<random-ua-ident>> will be ''ua-early---foo-result-1''.
+
 	If the <<random-key>> contains a <<random-ua-ident>>,
 	this must not be omitted in the serialization of the value,
 	even if this would normally be valid per the