Mercurial > drafts / changeset

     1.1 --- a/css3-transitions/Overview.html	Mon Feb 04 22:33:00 2013 -0700
     1.2 +++ b/css3-transitions/Overview.html	Mon Feb 04 22:38:44 2013 -0700
     1.3 @@ -1175,70 +1175,74 @@
     1.4     animation.
     1.5  
     1.6    <ul>
     1.7 -   <li> <strong>color</strong>: interpolated via red, green, blue and alpha
     1.8 -    components (treating each as a number, see below). The interpolation is
     1.9 -    done between premultiplied colors (that is, colors for which the red,
    1.10 -    green, and blue components specified have been multiplied by the alpha).
    1.11 +   <li id=animtype-color> <strong>color</strong>: interpolated via red,
    1.12 +    green, blue and alpha components (treating each as a number, see below).
    1.13 +    The interpolation is done between premultiplied colors (that is, colors
    1.14 +    for which the red, green, and blue components specified have been
    1.15 +    multiplied by the alpha).
    1.16  
    1.17 -   <li> <strong>length</strong>: interpolated as real numbers.
    1.18 +   <li id=animtype-length> <strong>length</strong>: interpolated as real
    1.19 +    numbers.
    1.20  
    1.21 -   <li> <strong>percentage</strong>: interpolated as real numbers.
    1.22 +   <li id=animtype-percentage> <strong>percentage</strong>: interpolated as
    1.23 +    real numbers.
    1.24  
    1.25 -   <li> <strong>length, percentage, or calc</strong>: when both values are
    1.26 -    lengths, interpolated as lengths; when both values are percentages,
    1.27 -    interpolated as percentages; otherwise, both values are converted into a
    1.28 -    ‘<code class=css>calc()</code>’ function that is the sum of a length
    1.29 -    and a percentage (each possibly zero), and these ‘<code
    1.30 +   <li id=animtype-lpcalc> <strong>length, percentage, or calc</strong>: when
    1.31 +    both values are lengths, interpolated as lengths; when both values are
    1.32 +    percentages, interpolated as percentages; otherwise, both values are
    1.33 +    converted into a ‘<code class=css>calc()</code>’ function that is the
    1.34 +    sum of a length and a percentage (each possibly zero), and these ‘<code
    1.35      class=css>calc()</code>’ functions have each half interpolated as real
    1.36      numbers.
    1.37  
    1.38 -   <li> <strong>integer</strong>: interpolated via discrete steps (whole
    1.39 -    numbers). The interpolation happens in real number space and is converted
    1.40 -    to an integer using <code>floor()</code>. <span class=issue> This floor
    1.41 -    behavior is inconsistent with SMIL Animation / SVG Animation. </span>
    1.42 +   <li id=animtype-integer> <strong>integer</strong>: interpolated via
    1.43 +    discrete steps (whole numbers). The interpolation happens in real number
    1.44 +    space and is converted to an integer using <code>floor()</code>. <span
    1.45 +    class=issue> This floor behavior is inconsistent with SMIL Animation /
    1.46 +    SVG Animation. </span>
    1.47  
    1.48 -   <li> <strong>font weight</strong>: interpolated via discrete steps
    1.49 -    (multiples of 100). The interpolation happens in real number space and is
    1.50 -    converted to an integer by rounding to the nearest multiple of 100. <span
    1.51 -    class=issue> This round-to-nearest behavior is inconsistent with the
    1.52 -    floor behavior used for integer types, but probably should be consistent
    1.53 -    (one way or the other). </span>
    1.54 +   <li id=animtype-font-weight> <strong>font weight</strong>: interpolated
    1.55 +    via discrete steps (multiples of 100). The interpolation happens in real
    1.56 +    number space and is converted to an integer by rounding to the nearest
    1.57 +    multiple of 100. <span class=issue> This round-to-nearest behavior is
    1.58 +    inconsistent with the floor behavior used for integer types, but probably
    1.59 +    should be consistent (one way or the other). </span>
    1.60  
    1.61 -   <li> <strong>number</strong>: interpolated as real (floating point)
    1.62 -    numbers.
    1.63 +   <li id=animtype-number> <strong>number</strong>: interpolated as real
    1.64 +    (floating point) numbers.
    1.65  
    1.66 -   <li> <strong>transform list</strong>: see CSS Transforms specification <a
    1.67 -    href="#CSS3-TRANSFORMS"
    1.68 +   <li id=animtype-transform> <strong>transform list</strong>: see CSS
    1.69 +    Transforms specification <a href="#CSS3-TRANSFORMS"
    1.70      rel=biblioentry>[CSS3-TRANSFORMS]<!--{{!CSS3-TRANSFORMS}}--></a>.
    1.71  
    1.72 -   <li> <strong>rectangle</strong>: interpolated via the x, y, width and
    1.73 -    height components (treating each as a number).
    1.74 +   <li id=animtype-rect> <strong>rectangle</strong>: interpolated via the x,
    1.75 +    y, width and height components (treating each as a number).
    1.76  
    1.77 -   <li> <strong>visibility</strong>: if one of the values is ‘<code
    1.78 -    class=css>visible</code>’, interpolated as a discrete step where values
    1.79 -    of the timing function between 0 and 1 map to ‘<code
    1.80 -    class=css>visible</code>’ and other values of the timing function
    1.81 -    (which occur only at the start/end of the transition or as a result of
    1.82 -    ‘<code class=css>cubic-bezier()</code>’ functions with Y values
    1.83 -    outside of [0, 1]) map to the closer endpoint; if neither value is
    1.84 +   <li id=animtype-visibility> <strong>visibility</strong>: if one of the
    1.85 +    values is ‘<code class=css>visible</code>’, interpolated as a
    1.86 +    discrete step where values of the timing function between 0 and 1 map to
    1.87 +    ‘<code class=css>visible</code>’ and other values of the timing
    1.88 +    function (which occur only at the start/end of the transition or as a
    1.89 +    result of ‘<code class=css>cubic-bezier()</code>’ functions with Y
    1.90 +    values outside of [0, 1]) map to the closer endpoint; if neither value is
    1.91      ‘<code class=css>visible</code>’ then not interpolable.
    1.92  
    1.93 -   <li> <strong>shadow</strong>: interpolated via the color, x, y and blur
    1.94 -    components (treating them as color and numbers where appropriate). In the
    1.95 -    case where there are lists of shadows, the shorter list is padded at the
    1.96 -    end with shadows whose color is transparent and all lengths (x, y, blur)
    1.97 -    are 0.
    1.98 +   <li id=animtype-shadow> <strong>shadow</strong>: interpolated via the
    1.99 +    color, x, y and blur components (treating them as color and numbers where
   1.100 +    appropriate). In the case where there are lists of shadows, the shorter
   1.101 +    list is padded at the end with shadows whose color is transparent and all
   1.102 +    lengths (x, y, blur) are 0.
   1.103  
   1.104 -   <li> <strong>gradient</strong>: interpolated via the positions and colors
   1.105 -    of each stop. They must have the same type (radial or linear) and same
   1.106 -    number of stops in order to be animated. <span class=note>Note: <a
   1.107 -    href="#CSS3-IMAGES"
   1.108 +   <li id=animtype-gradient> <strong>gradient</strong>: interpolated via the
   1.109 +    positions and colors of each stop. They must have the same type (radial
   1.110 +    or linear) and same number of stops in order to be animated. <span
   1.111 +    class=note>Note: <a href="#CSS3-IMAGES"
   1.112      rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a> may extend this
   1.113      definition.</span>
   1.114  
   1.115 -   <li> <strong>paint server</strong> (SVG): interpolation is only supported
   1.116 -    between: gradient to gradient and color to color. They then work as
   1.117 -    above.
   1.118 +   <li id=animtype-paintserver> <strong>paint server</strong> (SVG):
   1.119 +    interpolation is only supported between: gradient to gradient and color
   1.120 +    to color. They then work as above.
   1.121  
   1.122     <li> <strong>list of above types</strong>: If the lists have the same
   1.123      number of items, each item in the list is interpolated using the rules

     2.1 --- a/css3-transitions/Overview.src.html	Mon Feb 04 22:33:00 2013 -0700
     2.2 +++ b/css3-transitions/Overview.src.html	Mon Feb 04 22:38:44 2013 -0700
     2.3 @@ -1178,20 +1178,20 @@
     2.4        </p>
     2.5  
     2.6        <ul>
     2.7 -        <li>
     2.8 +        <li id="animtype-color">
     2.9            <strong>color</strong>: interpolated via red, green, blue and alpha
    2.10            components (treating each as a number, see below).
    2.11            The interpolation is done between premultiplied colors
    2.12            (that is, colors for which the red, green, and blue components
    2.13            specified have been multiplied by the alpha).
    2.14          </li>
    2.15 -        <li>
    2.16 +        <li id="animtype-length">
    2.17            <strong>length</strong>: interpolated as real numbers.
    2.18          </li>
    2.19 -        <li>
    2.20 +        <li id="animtype-percentage">
    2.21            <strong>percentage</strong>: interpolated as real numbers.
    2.22          </li>
    2.23 -        <li>
    2.24 +        <li id="animtype-lpcalc">
    2.25            <strong>length, percentage, or calc</strong>: when both values
    2.26            are lengths, interpolated as lengths; when both values are
    2.27            percentages, interpolated as percentages; otherwise, both
    2.28 @@ -1200,7 +1200,7 @@
    2.29            these ''calc()'' functions have each half interpolated as real
    2.30            numbers.
    2.31          </li>
    2.32 -        <li>
    2.33 +        <li id="animtype-integer">
    2.34            <strong>integer</strong>: interpolated via discrete steps (whole
    2.35            numbers). The interpolation happens in real number space and is
    2.36            converted to an integer using <code>floor()</code>.
    2.37 @@ -1209,7 +1209,7 @@
    2.38              SVG Animation.
    2.39            </span>
    2.40          </li>
    2.41 -        <li>
    2.42 +        <li id="animtype-font-weight">
    2.43            <strong>font weight</strong>: interpolated via discrete steps
    2.44            (multiples of 100). The interpolation happens in real number
    2.45            space and is converted to an integer by rounding to the
    2.46 @@ -1220,19 +1220,19 @@
    2.47              be consistent (one way or the other).
    2.48            </span>
    2.49          </li>
    2.50 -        <li>
    2.51 +        <li id="animtype-number">
    2.52            <strong>number</strong>: interpolated as real (floating point)
    2.53            numbers.
    2.54          </li>
    2.55 -        <li>
    2.56 +        <li id="animtype-transform">
    2.57            <strong>transform list</strong>: see 
    2.58              CSS Transforms specification [[!CSS3-TRANSFORMS]].
    2.59          </li>
    2.60 -        <li>
    2.61 +        <li id="animtype-rect">
    2.62            <strong>rectangle</strong>: interpolated via the x, y,
    2.63            width and height components (treating each as a number).
    2.64          </li>
    2.65 -        <li>
    2.66 +        <li id="animtype-visibility">
    2.67            <strong>visibility</strong>: if one of the values is
    2.68            ''visible'', interpolated as a discrete step where values of the
    2.69            timing function between 0 and 1 map to ''visible'' and other
    2.70 @@ -1241,21 +1241,21 @@
    2.71            functions with Y values outside of [0, 1]) map to the closer
    2.72            endpoint; if neither value is ''visible'' then not interpolable.
    2.73          </li>
    2.74 -        <li>
    2.75 +        <li id="animtype-shadow">
    2.76            <strong>shadow</strong>: interpolated via the color, x, y
    2.77            and blur components (treating them as color and numbers where
    2.78            appropriate). In the case where there are lists of shadows,
    2.79            the shorter list is padded at the end with shadows whose
    2.80            color is transparent and all lengths (x, y, blur) are 0.
    2.81          </li>
    2.82 -        <li>
    2.83 +        <li id="animtype-gradient">
    2.84            <strong>gradient</strong>: interpolated via the
    2.85            positions and colors of each stop. They must have the same type
    2.86            (radial or linear) and same number of stops in order to be animated.
    2.87            <span class="note">Note: [[CSS3-IMAGES]] may extend this
    2.88            definition.</span>
    2.89          </li>
    2.90 -        <li>
    2.91 +        <li id="animtype-paintserver">
    2.92            <strong>paint server</strong> (SVG): interpolation is only supported
    2.93            between: gradient to gradient and color to color. They then
    2.94            work as above.