[css-easing-2][editorial] Rewrite the step output algo to have parallel structure with linear.

Author: tabatkins

css-easing-2/Overview.bs

@@ -164,8 +164,8 @@ If easing functions are used outside of the CSS context,
 care must be taken to either correctly handle potential infinities,
 or clamp the [=output progress value=].
 
-Some types of easing functions also take an additional boolean [=before flag=]
-input which is defined subsequently.
+Some types of easing functions also take an additional boolean <dfn export for="easing function">before flag</dfn>,
+which is defined subsequently.
 
 This specification defines four types of easing functions whose definitions
 follow.
@@ -700,7 +700,8 @@ infinitely using tangent of the curve at the closest endpoint as follows:
  ███▌    █▌   █████▌ █▌      ███▌ 
 -->
 
-<h3 id=step-easing-functions oldids=step-timing-functions>Step easing functions:
+<h3 id=step-easing-functions oldids=step-timing-functions>
+Step Easing Functions:
 ''step-start'', ''step-end'', ''steps()''</h3>
 
 A <dfn>step easing function</dfn> is an [=easing function=]
@@ -821,34 +822,63 @@ The ''jump-*'' keywords values are illustrated below:
 <h4 id=step-easing-algo oldids=step-timing-function-algo>
 Output</h4>
 
-At the exact point where a step occurs, the result of the function is
-conceptually the top of the step. However, an additional <dfn>before flag</dfn>
-passed as input to the [=step easing function=], if true, will cause the
-result of the function to correspond to the bottom of the step at the step
-point.
+<div class=algorithm>
+  To <dfn export>calculate step easing output progress</dfn>
+  for a given [=step easing function=] |func|,
+  an [=input progress value=] |inputProgress|,
+  and an optional [=before flag=] (defaulting to false),
+  perform the following.
+  It returns an [=output progress value=].
 
-<div class=example>
+  1. Let |steps| be |func|'s [=steps()/steps=],
+    and |position| be |func|'s [=steps()/step position=].
 
-As an example of how the [=before flag=] affects the behavior of this function,
-consider an animation with a [=step easing function=] whose [=step
-position=] is <a value for="steps()">start</a> and which has a positive
-delay and backwards fill.
+  2. Divide the interval [-&infin;, &infin;] into several segments,
+    each with an associated value,
+    as follows:
 
-For example, using CSS animation:
+    1. [-&infin;, 0] has the value 0.
+    2. [1, &infin;] has the value 1.
+    3. [0, 1] is divided into |steps| intervals,
+      with their values assigned as defined for the |position|
+      (see <<step-position>>).
 
-<pre class='lang-css'>
-animation: moveRight 5s 1s steps(5, start);
-</pre>
+    Note: All intervals are inclusive,
+    so some values are part of two intervals at once.
+
+  3. If |inputProgress| is in a single interval,
+    return the associated value for that interval.
+
+  4. Otherwise, |inputProgress| is in two intervals,
+    with two associated values
+    (which might be the same).
+
+    If the [=before flag=] is true,
+    return the smaller associated value;
+    otherwise, return the larger associated value.
+</div>
+
+<div class=example>
+
+  As an example of how the [=before flag=] affects the behavior of this function,
+  consider an animation with a [=step easing function=] whose [=step
+  position=] is <a value for="steps()">start</a> and which has a positive
+  delay and backwards fill.
+
+  For example, using CSS animation:
 
-During the delay phase, the [=input progress value=] will be zero but if the
-[=before flag=] is set to indicate that the animation has yet to reach its
-animation interval, the easing function will produce zero as its [=output
-progress value=], i.e. the bottom of the first step.
+  <pre class='lang-css'>
+  animation: moveRight 5s 1s steps(5, start);
+  </pre>
 
-At the exact moment when the animation interval begins, the [=input progress
-value=] will still be zero, but the [=before flag=] will not be set and hence
-the result of the easing function will correspond to the top of the first step.
+  During the delay phase, the [=input progress value=] will be zero but if the
+  [=before flag=] is set to indicate that the animation has yet to reach its
+  animation interval, the easing function will produce zero as its [=output
+  progress value=], i.e. the bottom of the first step.
 
+  At the exact moment when the animation interval begins, the [=input progress
+  value=] will still be zero, but the [=before flag=] will not be set and hence
+  the result of the easing function will correspond to the top of the first step.
 </div>
 
 For the purposes of calculating the [=output progress value=], the