[css-easing-2][editorial] Line up steps() serializing/output with the…

… structure of linear() too.

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. -->