[css-values-4] Make hypot() take 1+ arguments, to match JS behavior. Fixes #3765.

Author: tabatkins

css-values-4/Overview.bs

@@ -2574,11 +2574,11 @@ Exponential  Functions: ''pow()'', ''sqrt()'', ''hypot()''</h3>
 	''sqrt()'' is a common enough function
 	that it is provided as a convenience.)
 
-	The <dfn lt="hypot()">hypot(A,B)</dfn> function
-	contains two comma-separated [=calculations=] A and B,
-	and returns the length of the hypotenuse of a right-angled triangle
-	with legs equal to A and B.
-	A and B can resolve to any <<number>>, <<dimension>>, or <<percentage>>,
+	The <dfn lt="hypot()">hypot(A, …)</dfn> function
+	contains one or more comma-separated [=calculations=],
+	and returns the length of an N-dimensional vector
+	with components equal to each of the [=calculations=].
+	The argument [=calculations=] can resolve to any <<number>>, <<dimension>>, or <<percentage>>,
 	but must have the <em>same</em> [=determine the type of a calculation|type=],
 	or else the function is invalid;
 	the result will have the same [=CSSNumericValue/type=] as the arguments.
@@ -2661,6 +2661,48 @@ Exponential  Functions: ''pow()'', ''sqrt()'', ''hypot()''</h3>
 		Thus it's fine to let author use dimensions directly in ''hypot()''.
 	</details>
 
+	<div class=example>
+		The ''pow()'' function can be useful for strategies like <a href="https://www.modularscale.com/">CSS Modular Scale</a>,
+		which relates all the font-sizes on a page to each other by a fixed ratio.
+
+		These sizes can be easily written into custom properties like:
+
+		<pre class=lang-css>
+		:root {
+			--h6: calc(1rem * pow(1.5, -1);
+			--h5: 1rem;
+			--h4: calc(1rem * pow(1.5, 2);
+			--h3: calc(1rem * pow(1.5, 3);
+			--h2: calc(1rem * pow(1.5, 4);
+			--h1: calc(1rem * pow(1.5, 5);
+		}
+		</pre>
+
+		...rather than writing out the values in pre-calculated numbers like ''7.6rem''
+		(what ''calc(1rem * pow(1.5, 5))'' resolves to)
+		which have less clear provenance when encountered in a stylesheet.
+	</div>
+
+	<div class=example>
+		With a single argument,
+		''hypot()'' gives the absolute value of its input;
+		''hypot(2em)'' and ''hypot(-2em)'' both resolve to ''2em''.
+
+		With more arguments,
+		it gives the size of the main diagonal of a box
+		whose side lengths are given by the arguments.
+		This can be useful for transform-related things,
+		giving the distance that an element will actually travel
+		when it's translated by a particular X, Y, and Z amount.
+
+		For example, ''hypot(30px, 40px)'' resolves to ''50px'',
+		which is indeed the distance between an element's starting and ending positions
+		when it's translated by a ''translate(30px, 40px)'' transform.
+		If an author wanted elements to get smaller as they moved further away from their starting point
+		(drawing some sort of word cloud, for example),
+		they could then use this distance in their scaling factor calculations.
+	</div>
+
 <h4 id="exponent-infinities">
 Argument Ranges</h4>
 
@@ -2699,8 +2741,8 @@ Argument Ranges</h4>
 	If A is less than 0,
 	the result is NaN.
 
-	In ''hypot(A, B)'',
-	if either or both values are infinite,
+	In ''hypot(A, …)'',
+	if any of the inputs are infinite,
 	the result is +∞.
 
 	(See [[#calc-type-checking]] for details on how [=math functions=] handle NaN and infinities.)