[css-timing-1] Move cubic-bezier syntax before algorithm

Author: birtles

css-timing-1/Overview.bs

@@ -121,14 +121,8 @@ end points <var ignore>P0</var> and <var ignore>P3</var> are fixed at (0, 0) and
 The <var>x</var> coordinates of <var>P1</var> and <var>P2</var> are
 restricted to the range [0, 1].
 
-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]].
-
 <figure>
-  <img src="cubic-bezier-timing-curve.svg" width="500"
+  <img src="cubic-bezier-timing-curve.svg" width="400"
       alt="A cubic Bezier curve used as a timing function.">
   <figcaption>
     A cubic B&eacute;zier curve used as a timing function.<br>
@@ -139,33 +133,8 @@ The evaluation of this curve is covered in many sources such as
   </figcaption>
 </figure>
 
-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:
-
-*   For [=input progress values=] less than zero,
-
-    1.   If the <var>x</var> value of P1 is greater than zero, use
-         a straight line that passes through P1 and P0 as the tangent.
-
-    1.   Otherwise, if the <var>x</var> value of P2 is greater than
-         zero, use a straight line that passes through P2 and P0 as the tangent.
-
-    1.   Otherwise, let the [=output progress value=] be zero for all
-         [=input progress values=] in the range [-&infin;, 0).
-
-*   For [=input progress values=] greater than one,
-
-    1.   If the <var>x</var> value of P2 is less than one, use
-         a straight line that passes through P2 and P3 as the tangent.
-
-    1.   Otherwise, if the <var>x</var> value of P1 is less than
-         one, use a straight line that passes through P1 and P3 as the tangent.
-
-    1.   Otherwise, let the [=output progress value=] be one for all
-         [=input progress values=] in the range (1, &infin;].
-
-A <a>cubic B&eacute;zier timing function</a> may be specified as a string
-using the following syntax (using notation from [[!CSS3VAL]]):
+A <a>cubic B&eacute;zier timing function</a> has the following syntax
+(using notation from [[!CSS3VAL]]):
 
 <div class="prod"><dfn type>&lt;cubic-bezier-timing-function&gt;</dfn> =
   ''ease'' | ''ease-in'' | ''ease-out'' | ''ease-in-out'' |
@@ -178,13 +147,13 @@ The meaning of each value is as follows:
 <dl dfn-type="value" dfn-for="cubic-bezier-timing-function, <cubic-bezier-timing-function>">
 
 :   <dfn>ease</dfn>
-::  Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
+::  Equivalent to ''cubic-bezier(0.25, 0.1, 0.25, 1)''.
 :   <dfn>ease-in</dfn>
-::  Equivalent to cubic-bezier(0.42, 0, 1, 1).
+::  Equivalent to ''cubic-bezier(0.42, 0, 1, 1)''.
 :   <dfn>ease-out</dfn>
-::  Equivalent to cubic-bezier(0, 0, 0.58, 1).
+::  Equivalent to ''cubic-bezier(0, 0, 0.58, 1)''.
 :   <dfn>ease-in-out</dfn>
-::  Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
+::  Equivalent to ''cubic-bezier(0.42, 0, 0.58, 1)''.
 :   <dt><dfn function lt="cubic-bezier()">cubic-bezier(<<number>>, <<number>>, <<number>>, <<number>>)</dfn></dt>
 ::  Specifies a <a>cubic B&eacute;zier timing function</a>.
     The four numbers specify points <var>P1</var> and <var>P2</var> of
@@ -206,6 +175,39 @@ The keyword values listed above are illustrated below.
   </figcaption>
 </figure>
 
+### Output of a cubic b&eacute;zier timing function ### {#cubic-bezier-algo}
+
+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:
+
+*   For [=input progress values=] less than zero,
+
+    1.   If the <var>x</var> value of P1 is greater than zero, use
+         a straight line that passes through P1 and P0 as the tangent.
+
+    1.   Otherwise, if the <var>x</var> value of P2 is greater than
+         zero, use a straight line that passes through P2 and P0 as the tangent.
+
+    1.   Otherwise, let the [=output progress value=] be zero for all
+         [=input progress values=] in the range [-&infin;, 0).
+
+*   For [=input progress values=] greater than one,
+
+    1.   If the <var>x</var> value of P2 is less than one, use
+         a straight line that passes through P2 and P3 as the tangent.
+
+    1.   Otherwise, if the <var>x</var> value of P1 is less than
+         one, use a straight line that passes through P1 and P3 as the tangent.
+
+    1.   Otherwise, let the [=output progress value=] be one for all
+         [=input progress values=] in the range (1, &infin;].
+
 
 Step timing functions: ''step-start'', ''step-end'', ''steps()'' {#step-timing-functions}
 ----------------------------------------------------------------