[css-easing-2][editorial] Rearrange cubic-bezier() subsections to match linear()

Author: tabatkins

css-easing-2/Overview.bs

@@ -218,8 +218,8 @@ to an [=output progress value=].
   <figcaption>
     ''linear(0, .1 25%, .75 50%, 1)''<br>
     The shape of the curve follows the [=linear()/control points=].<br>
-    Input progress values serve as <var>x</var> values of the curve,
-    whilst the <var>y</var> values are the output progress values.
+    Input progress values serve as <var ignore>x</var> values of the curve,
+    whilst the <var ignore>y</var> values are the output progress values.
   </figcaption>
 </figure>
 
@@ -574,11 +574,10 @@ Cubic Bézier Easing Functions:
 A <dfn export>cubic Bézier easing function</dfn>
 is an [=easing function=] that interpolates smoothly from 0 to 1
 using a cubic polynomial,
-influenced by two control points <var>P1</var> and <var>P2</var>
+influenced by two control points
 that the curve will approach
 but (usually) not actually reach.
-(The "endpoints" of the cubic Bézier,
-referred to as <var>P0</var> and <var>P3</var>,
+(The "endpoints" of the cubic Bézier
 are fixed at (0,0) and (1,1), respectively.)
 
 <figure>
@@ -587,9 +586,9 @@ are fixed at (0,0) and (1,1), respectively.)
   <figcaption>
     A cubic Bézier curve used as an easing function.<br>
     The shape of the curve is determined by the location of the control
-    points <var>P1</var> and <var>P2</var>.<br>
-    Input progress values serve as <var>x</var> values of the curve,
-    whilst the <var>y</var> values are the output progress values.
+    points <var ignore>P1</var> and <var ignore>P2</var>.<br>
+    Input progress values serve as <var ignore>x</var> values of the curve,
+    whilst the <var ignore>y</var> values are the output progress values.
   </figcaption>
 </figure>
 
@@ -605,29 +604,27 @@ A <a>cubic Bézier easing function</a> has the following syntax:
 The meaning of each value is as follows:
 
 <dl dfn-type="value" dfn-for="<cubic-bezier-easing-function>">
-
-: <dfn>ease-in</dfn>
-:: A function that starts slowly and smoothly, then quickly approaches the endpoint with an almost linear curve.
-  Equivalent to ''cubic-bezier(0.42, 0, 1, 1)''.
-: <dfn>ease-out</dfn>
-:: A function that starts quickly with an almost linear curve, then slowly and smoothly approaches the endpoint.
-  Equivalent to ''cubic-bezier(0, 0, 0.58, 1)''.
-: <dfn>ease-in-out</dfn>
-:: A function that starts and ends slowly and smoothly, quickly traversing the middle part.
-  Equivalent to ''cubic-bezier(0.42, 0, 0.58, 1)''.
-: <dfn>ease</dfn>
-:: Similar to ''ease-in-out'', but with a quicker start and a slower finish.
-  Equivalent to ''cubic-bezier(0.25, 0.1, 0.25, 1)''.
-:   ''cubic-bezier( x1, y1, x2, y2 )''
-::  Specifies a <a>cubic Bézier easing function</a>.
-    The <var ignore>x1</var> and <var ignore>y1</var> arguments
-    specify the <var>P1</var> control point,
-    and <var ignore>x2</var> and <var ignore>y2</var> arguments
-    specify the <var>P2</var> control point.
-
-    Both <var ignore>x</var> values must be in the range [0, 1]
-    or the definition is invalid.
-
+  : <dfn>ease-in</dfn>
+  :: A function that starts slowly and smoothly, then quickly approaches the endpoint with an almost linear curve.
+    Equivalent to ''cubic-bezier(0.42, 0, 1, 1)''.
+  : <dfn>ease-out</dfn>
+  :: A function that starts quickly with an almost linear curve, then slowly and smoothly approaches the endpoint.
+    Equivalent to ''cubic-bezier(0, 0, 0.58, 1)''.
+  : <dfn>ease-in-out</dfn>
+  :: A function that starts and ends slowly and smoothly, quickly traversing the middle part.
+    Equivalent to ''cubic-bezier(0.42, 0, 0.58, 1)''.
+  : <dfn>ease</dfn>
+  :: Similar to ''ease-in-out'', but with a quicker start and a slower finish.
+    Equivalent to ''cubic-bezier(0.25, 0.1, 0.25, 1)''.
+  : ''cubic-bezier( x1, y1, x2, y2 )''
+  ::  Specifies a <a>cubic Bézier easing function</a>.
+      The <var ignore>x1</var> and <var ignore>y1</var> arguments
+      specify the first control point,
+      and <var ignore>x2</var> and <var ignore>y2</var> arguments
+      specify the second control point.
+
+      Both <var ignore>x</var> values must be in the range [0, 1]
+      or the definition is invalid.
 </dl>
 
 The keyword values listed above are illustrated below.
@@ -657,40 +654,77 @@ The keyword values listed above are illustrated below.
   </figcaption>
 </figure>
 
+<h4 id="bezier-serialization">
+Serializing</h4>
 
-<h4 id=cubic-bezier-algo>
-Output</h4>
-
-The mapping from input progress to output progress is performed by
-determining the corresponding <var>y</var> value ([=output progress value=]) for
-a given <var>x</var> value ([=input progress value=]).
-The evaluation of this curve is covered in many sources such as
-[[FUND-COMP-GRAPHICS]].
-
-For [=input progress values=] outside the range [0, 1], the curve is extended
-infinitely using tangent of the curve at the closest endpoint as follows:
+The ''ease-in'', ''ease-out'', ''ease-in-out'', and ''ease'' keywords
+serialize as themselves.
 
-*   For [=input progress values=] less than zero,
+<div algorithm>
+  To <dfn export>serialize a cubic-bezier() function</dfn>:
 
-    1.   If the <var>x</var> value of <var>P1</var> is greater than zero, use
-         a straight line that passes through <var>P1</var> and <var>P0</var> as the tangent.
+  1. Let |s| be the string "cubic-bezier(".
 
-    1.   Otherwise, if the <var>x</var> value of <var>P2</var> is greater than
-         zero, use a straight line that passes through <var>P2</var> and <var>P0</var> as the tangent.
+  2. Serialize the function's four arguments as <<number>>s,
+    [=concatenate=] the results using the separator ", ",
+    and append the result to |s|.
 
-    1.   Otherwise, let the [=output progress value=] be zero for all
-         [=input progress values=] in the range [-&infin;, 0).
+  3. Append ")" to |s|, and return it.
+</div>
 
-*   For [=input progress values=] greater than one,
 
-    1.   If the <var>x</var> value of <var>P2</var> is less than one, use
-         a straight line that passes through <var>P2</var> and <var>P3</var> as the tangent.
+<h4 id=cubic-bezier-algo>
+Output</h4>
 
-    1.   Otherwise, if the <var>x</var> value of <var>P1</var> is less than
-         one, use a straight line that passes through <var>P1</var> and <var>P3</var> as the tangent.
+<div algorithm>
+  To <dfn export lt="calculate cubic Bézier easing output progress|calculate cubic Bezier easing output progress">calculate cubic Bézier easing output progress</dfn>
+  for a given [=cubic Bézier easing function=] |func|
+  and an [=input progress value=] |inputProgress|,
+  perform the following.
+  It returns an [=output progress value=].
 
-    1.   Otherwise, let the [=output progress value=] be one for all
-         [=input progress values=] in the range (1, &infin;].
+  1. Let |p0| be the point (0,0),
+    |p1| be the point given by |func|'s first two arguments,
+    |p2| be the point given by |func|'s second two arguments,
+    and |p3| be the point (1,1).
+
+  2. If |inputProgress| is within the range [0,1] (inclusive),
+    return the y value
+    corresponding to |inputProgress| as an x value
+    for the cubic Bézier curve
+    defined as having |p0| and |p3| as endpoints,
+    and |p1| and |p2| as control points.
+
+    The evaluation of this curve is covered in many sources,
+    such as [[FUND-COMP-GRAPHICS]].
+
+  3. Otherwise, the curve is extended infinitely,
+    using the tangent of the curve at the endpoints.
+    This tangent is defined as the line between two points,
+    |t1| and |t2|.
+
+    * If |inputProgress| is less than 0,
+      let |t1| be |p0|.
+
+      1. If the x value of |p1| is greater than 0,
+        let |t2| be |p1|.
+      2. Otherwise, if the x value of |p2| is greater than 0,
+        let |t2| be |p2|.
+      3. Otherwise, return 0.
+
+    * If |inputProgress| is greater than 1,
+      let |t2| be |p3|.
+
+      1. If the x value of |p2| is less than 1,
+        let |t1| be |p2|.
+      2. Otherwise, if the x value of |p1| is less than 1,
+        let |t1| be |p1|.
+      3. Otherwise, return 1.
+
+    Return the y value
+    corresponding to |inputProgress| as an x value
+    for the line passing through |t1| and |t2|.
+</div>
 
 <wpt>
   cubic-bezier-timing-functions-output.html
@@ -967,11 +1001,6 @@ and [=before flag=] as follows:
 Easing functions are serialized using the common serialization patterns
 defined in [[CSSOM]] with the following additional requirements:
 
-*   The keyword values ''ease'', ''linear'', ''ease-in'', ''ease-out'',
-    and ''ease-in-out'' are serialized as-is, that is, they are
-    <em>not</em> converted to the equivalent ''cubic-bezier()'' or
-    ''linear()'' function before serializing.
-
 *   Step easing functions, whether they are specified using the
     ''steps()'' function or either of the ''step-start'' or ''step-end''
     keywords, are serialized as follows:
@@ -982,9 +1011,6 @@ defined in [[CSSOM]] with the following additional requirements:
     2.   Otherwise, serialize as <a lt="steps()"
          function>steps(&lt;integer&gt;, &lt;step-position&gt;)</a>.
 
-*   A [=linear easing function=] created via ''linear()''
-    is serialized by getting its [=linear easing function/serialized computed value=].
-
 <wpt>
   timing-functions-syntax-computed.html
 </wpt>