[css-easing-2][editorial] Add a note about cubic bezier restrictions.

Author: tabatkins

css-easing-2/Overview.bs

@@ -45,7 +45,7 @@ WPT Display: closed
 }
 </style>
 <style>
-/* Creates an easing example. Use like <div style="--easing: linear"></div>. */
+/* Creates an easing example. Use like <div class=easing-track style="--easing: linear"></div>. */
 .easing-track {
   position: relative;
   height: 1em;
@@ -628,6 +628,29 @@ The meaning of each value is as follows:
 
       Both <var ignore>x</var> values must be in the range [0, 1]
       or the definition is invalid.
+
+      <details class=note>
+        <summary>Details on cubic Bézier curves</summary>
+
+        Note that this does <em>not</em> use the [=input progress value=] as the "t" value
+        commonly used to parametrize cubic Bézier curves
+        (producing a 2d point as the output),
+        but rather uses it as the "x" value on the graph
+        (producing a y value as the output).
+        This means that only the <em>shape</em> of the curve matters,
+        not the velocity along that curve.
+        For example, ''cubic-bezier(0, 0, 0, 0)'' and ''cubic-bezier(1, 1, 1, 1)''
+        produce exactly the same (linear) easing,
+        despite the first's <em>velocity</em> following a <code>t<sup>3</sup></code> curve,
+        while the second follows a <code>t<sup>1/3</sup></code> curve.
+
+        <em>In general</em>, cubic Bézier curves can have loops:
+        places where a single x value is associated with multiple y values.
+        The restriction placed on the control points
+        (that their x values be in the [0,1] range)
+        prevent this,
+        so the resulting easing function is well-defined.
+      </details>
 </dl>
 
 The keyword values listed above are illustrated below.