[css-easing-2][editorial] Line up steps() serializing/output with the structure of linear() too.

Author: tabatkins

css-easing-2/Overview.bs

@@ -859,7 +859,37 @@ The ''jump-*'' keywords values are illustrated below:
   </figcaption>
 </figure>
 
-</dl>
+
+
+
+<h4 id=steps-serialization>
+Serializing</h4>
+
+Unlike the other [=easing function=] keywords,
+''step-start'' and ''step-end'' <em>do not</em> serialize as themselves.
+Instead, they serialize as "steps(1, start)" and "steps(1)", respectively.
+
+<div algorithm>
+  To <dfn export>serialize a steps() functions</dfn>:
+
+  1. Let |s| be the string "steps(".
+
+  2. Serialize the function's [=steps()/steps=],
+    and append it to |s|.
+
+  3. If the function's [=steps()/step position=] is ''end'' or ''jump-end'',
+    append ")" to |s| and return |s|.
+
+  4. Otherwise, append ", " to |s|.
+    Serialize the [=steps()/step position=] as a keyword,
+    and append the result to |s|.
+    Append ")" to |s|.
+    Return |s|.
+</div>
+
+<wpt>
+  timing-functions-syntax-computed.html
+</wpt>
 
 <h4 id=step-easing-algo oldids=step-timing-function-algo>
 Output</h4>
@@ -881,9 +911,9 @@ Output</h4>
     each with an associated value,
     as follows:
 
-    1. [-&infin;, 0] has the value 0.
-    2. (1, &infin;] has the value 1.
-    3. [0, 1] is divided into |steps| intervals,
+    1. [-&infin;, 0) has the value 0.
+    2. [1, &infin;] has the value 1.
+    3. [0, 1) is divided into |steps| half-open intervals,
       [0, ...) to [..., 1)
       with their values assigned as defined for the |position|
       (see <<step-position>>).
@@ -896,125 +926,10 @@ Output</h4>
     for the interval that |inputProgress| is in.
 </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:
-
-  <pre class='lang-css'>
-  animation: moveRight 5s 1s steps(5, start);
-  </pre>
-
-  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
-[=step position=] <a value for="steps()">start</a> is considered equivalent to
-<a value for="steps()">jump-start</a>.
-Likewise <a value for="steps()">end</a> is considered equivalent to <a value
-for="steps()">jump-end</a>.
-As a result, the following algorithm does not make explicit reference to
-<a value for="steps()">start</a> or <a value for="steps()">end</a>.
-
-Note: User agents must still differentiate between
-<a value for="steps()">jump-start</a> and <a value for="steps()">start</a> for
-the purpose of serialization (see [[#serialization]]).
-
-The [=output progress value=] is calculated from the [=input progress value=]
-and [=before flag=] as follows:
-
-1.   Calculate the <var>current step</var> as
-     <code>floor([=input progress value=] &times; [=steps=])</code>.
-
-1.   If the [=step position=] property is one of:
-
-     * <a value for="steps()">jump-start</a>,
-     * <a value for="steps()">jump-both</a>,
-
-     increment <var>current step</var> by one.
-
-1.   If <em>both</em> of the following conditions are true:
-
-     *   the [=before flag=] is set, <em>and</em>
-     *   [=input progress value=] &times; [=steps=] mod 1 equals zero
-         (that is, if [=input progress value=] &times; [=steps=] is
-         integral), then
-
-     decrement <var>current step</var> by one.
-
-1.   If [=input progress value=] &ge; 0 and <var>current step</var> &lt; 0,
-     let <var>current step</var> be zero.
-
-1.   Calculate |jumps| based on the [=step position=] as follows:
-
-      :   <a value for="steps()">jump-start</a> or
-          <a value for="steps()">jump-end</a>
-      ::  [=steps=]
-      :   <a value for="steps()">jump-none</a>
-      ::  [=steps=] - 1
-      :   <a value for="steps()">jump-both</a>
-      ::  [=steps=] + 1
-
-1.   If [=input progress value=] &le; 1 and <var>current step</var> &gt;
-     |jumps|, let <var>current step</var> be |jumps|.
-
-     <div class=note>
-
-     Steps 4 and 6 in this procedure ensure that given an [=input progress
-     value=] in the range [0, 1], a step easing function does not produce an
-     [=output progress value=] outside that range.
-
-     For example, although mathematically we might expect that a step easing
-     function with a [=step position=] of <a value for="steps()">jump-start</a>
-     would step up (i.e. beyond 1) when the [=input progress value=] is 1,
-     intuitively,
-     when we apply such an easing function to a forwards-filling animation,
-     we expect it to produce an [=output progress value=] of 1
-     as the animation fills forwards.
-
-     A similar situation arises for a step easing function with
-     a [=step position=] of <a value for="steps()">jump-end</a>
-     when applied to an animation during its delay phase.
-
-     </div>
-
-1.   The [=output progress value=] is <code><var>current step</var> /
-     |jumps|</code>.
-
 <wpt>
   step-timing-functions-output.html
 </wpt>
 
-<h3 id=serialization oldids=serializing-a-timing-function>Serialization</h3>
-
-Easing functions are serialized using the common serialization patterns
-defined in [[CSSOM]] with the following additional requirements:
-
-*   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:
-
-    1.   If the [=step position=] is ''jump-end'' or ''end'', serialize
-         as <a lt="steps()" function>steps(&lt;integer&gt;)</a>.
-
-    2.   Otherwise, serialize as <a lt="steps()"
-         function>steps(&lt;integer&gt;, &lt;step-position&gt;)</a>.
-
-<wpt>
-  timing-functions-syntax-computed.html
-</wpt>
-
 <h2 class=no-num id=privacy>Privacy Considerations</h2>
 
 <!-- Horizontal review wants Security and Privacy sections to be separate. -->