[css-timing-1] Replace frames() timing function with jump-* keywords

This closes #1680.

Author: birtles

css-timing-1/Overview.bs

@@ -92,8 +92,7 @@ The syntax for specifying a [=timing function=] is as follows:
 <div class="prod"><dfn type>&lt;timing-function&gt;</dfn> =
   ''linear'' |
   <<cubic-bezier-timing-function>> |
-  <<step-timing-function>> |
-  <<frames-timing-function>></div>
+  <<step-timing-function>></div>
 
 
 The linear timing function: ''linear'' {#linear-timing-function-section}
@@ -227,10 +226,15 @@ Some example step timing functions are illustrated below.
 </figure>
 
 A [=step timing function=] is defined by a non-zero positive number of
-<dfn>steps</dfn>, and a <dfn>step position</dfn> property that may be either
-<a value for="steps()">start</a> or <a value for="steps()">end</a>.
-
-At the exact point where a step occurs the result of the function is
+<dfn>steps</dfn>, and a <dfn>step position</dfn> property that may one of:
+<a value for="steps()">jump-start</a>,
+<a value for="steps()">jump-end</a>,
+<a value for="steps()">jump-none</a>, or
+<a value for="steps()">jump-both</a>, or the legacy
+<a value for="steps()">start</a> or
+<a value for="steps()">end</a> values.
+
+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 timing function=], if true, will cause the
 result of the function to correspond to the bottom of the step at the step
@@ -242,7 +246,12 @@ 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 <a value for="steps()">start</a>,
+1.   If the [=step position=] property is one of:
+
+     * <a value for="steps()">jump-start</a>,
+     * <a value for="steps()">start</a>, or
+     * <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:
@@ -257,30 +266,43 @@ and [=before flag=] as follows:
 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>,
+          <a value for="steps()">start</a>,
+          <a value for="steps()">jump-end</a>, or
+          <a value for="steps()">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;
-     [=steps=], let <var>current step</var> be [=steps=].
+     |jumps|, let <var>current step</var> be |jumps|.
 
      <div class=note>
 
-     Steps 4 and 5 in this procedure ensure that given an [=input progress
+     Steps 5 and 6 in this procedure ensure that given an [=input progress
      value=] in the range [0, 1], a step timing function does not produce an
      [=output progress value=] outside that range.
 
      For example, although mathematically we might expect that a step timing
      function with a [=step position=] of <a value for="steps()">start</a>
-     would step up when the [=input progress value=] is 1, intuitively, when we
-     apply such a timing function to a forwards-filling animation, we expect
-     it to produce an [=output progress value=] of 1 as the animation fills
-     forwards.
+     would step up (i.e. beyond 1) when the [=input progress value=] is 1,
+     intuitively,
+     when we apply such a timing 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 timing function with a [=step
      position=] of <a value for="steps()">end</a> when applied to an animation
      during its delay phase.
 
      </div>
 
-1.   The [=output progress value=] is <code><var>current step</var>
-     / [=steps=]</code>.
+1.   The [=output progress value=] is <code><var>current step</var> /
+     |jumps|</code>.
 
 <div class=example>
 
@@ -308,10 +330,16 @@ the result of the timing function will correspond to the top of the first step.
 
 The syntax for specifying a step timing function is as follows:
 
-<div class="prod"><dfn type>&lt;step-timing-function&gt;</dfn> =
+<div class="prod">
+  <dfn type>&lt;step-position&gt;</dfn> =
+    ''jump-start'' | ''jump-end'' |
+    ''jump-none'' | ''jump-both'' |
+    ''start'' | ''end''
+
+  <dfn type>&lt;step-timing-function&gt;</dfn> =
   ''step-start'' | ''step-end'' |
   <span class="atom"><a lt="steps()" function>steps</a>(<<integer>>[,
-                          [ ''start'' | ''end'' ] ]?)</span></div>
+    <<step-position>>]?)</span></div>
 
 The meaning of each value is as follows:
 
@@ -321,69 +349,27 @@ The meaning of each value is as follows:
 ::  Equivalent to steps(1, start);
 :   <dfn>step-end</dfn>
 ::  Equivalent to steps(1, end);
-:   <dfn function lt="steps()">steps(&lt;integer&gt;[, [ start | end ] ]?)</dfn>
+:   <dfn function lt="steps()">steps(&lt;integer&gt;[, &lt;step-position&gt; ]?)</dfn>
 ::  Specifies a <a>step timing function</a>.
-    The first parameter specifies the number of intervals in the function.
-    It must be a positive integer greater than 0.
-    The second parameter, which is optional, is
-    either the value <dfn value for="steps()">start</dfn> or <dfn value
-    for="steps()">end</dfn>, and specifies the [=step position=].
-    If the second parameter is omitted, it is given the value ''end''.
 
-</dl>
-
-Frames timing functions: ''frames()'' {#frames-timing-functions}
-----------------------------------------------------------------
-
-A <dfn>frames timing function</dfn> is a type of <a>timing function</a>
-that divides the input time into a specified number of intervals of equal
-length, each of which is associated with an <a>output progress value</a> of
-increasing value.
-The difference between a [=frames timing function=] and a [=step timing
-function=] is that a frames timing function returns the [=output progress
-values=] 0 and 1 for an equal portion of the [=input progress values=] in
-the range [0, 1].
-This makes it suitable, for example, for using in animation loops where the
-animation should display the first and last frame of the animation for an equal
-amount of time as each other frame during each loop.
-
-Some example frames timing functions are illustrated below.
-
-<figure>
-  <img src="frames-timing-func-examples.svg" width="500"
-      alt="Example frames timing functions.">
-  <figcaption>
-    Example frames timing functions.
-    In each case the domain is the input progress whilst the range
-    represents the output progress produced by the function.
-  </figcaption>
-</figure>
-
-A [=frames timing function=] is defined by an integral number of
-<dfn>frames</dfn> greater than one.
-
-As with [=step timing functions=], at the exact point where a step occurs the
-result of the function is conceptually the top of the step.
-
-The [=output progress value=] is calculated from the [=input progress value=]
-as follows:
-
-1.   Calculate the <var>current frame</var> as <code>floor([=input progress
-     value=] &times; [=frames=])</code>.
-
-1.   Let the initial [=output progress value=] be <code><var>current frame</var>
-     / ([=frames=] - 1)</code>.
+    The first parameter specifies the number of intervals in the function.
+    It must be a positive integer greater than 0
+    unless the second parameter is <a value for="steps()">jump-none</a>
+    in which case it must be a positive integer greather than 1.
 
-1.   If [=input progress value=] &le; 1 and [=output progress value=] &gt; 1,
-     let [=output progress value=] be 1.
+    The second parameter, which is optional, specifies the [=step position=]
+    using one of the following values:
 
-The syntax for specifying a frames timing function is as follows:
+    * <dfn value for="steps()">jump-start</dfn>
+    * <dfn value for="steps()">jump-end</dfn>
+    * <dfn value for="steps()">jump-none</dfn>
+    * <dfn value for="steps()">jump-both</dfn>
+    * <dfn value for="steps()">start</dfn>
+    * <dfn value for="steps()">end</dfn>
 
-<div class="prod"><dfn type>&lt;frames-timing-function&gt;</dfn> =
-  <span class="atom"><dfn lt="frames()" function>frames(<<integer>>)</dfn></span></div>
+    If the second parameter is omitted, it is given the value ''end''.
 
-The parameter to the function specifies the number of [=frames=].
-It must be a positive integer greater than 1.
+</dl>
 
 
 Serialization {#serializing-a-timing-function}
@@ -401,11 +387,12 @@ defined in [[CSSOM]] with the following additional requirements:
     ''steps()'' function or either of the ''step-start'' or ''step-end''
     keywords, are serialized as follows:
 
-    1.   If the [=step position=] is ''end'', serialize
+    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;, start)</a>.
+         function>steps(&lt;integer&gt;, &lt;step-position&gt;)</a>.
+
 
 Acknowledgements {#acknowledgements}
 ================