Mercurial > drafts / changeset

     1.1 --- a/css3-transitions/Overview.html	Mon Feb 04 22:54:31 2013 -0700
     1.2 +++ b/css3-transitions/Overview.html	Mon Feb 04 23:05:19 2013 -0700
     1.3 @@ -1223,11 +1223,11 @@
     1.4      values outside of [0, 1]) map to the closer endpoint; if neither value is
     1.5      ‘<code class=css>visible</code>’ then not interpolable.
     1.6  
     1.7 -   <li id=animtype-shadow> <strong>shadow</strong>: interpolated via the
     1.8 -    color, x, y and blur components (treating them as color and numbers where
     1.9 -    appropriate). In the case where there are lists of shadows, the shorter
    1.10 -    list is padded at the end with shadows whose color is transparent and all
    1.11 -    lengths (x, y, blur) are 0.
    1.12 +   <li id=animtype-shadow-list> <strong>shadow list</strong>: interpolated
    1.13 +    via the color, x, y and blur components (treating them as color and
    1.14 +    numbers where appropriate). In the case where there are lists of shadows,
    1.15 +    the shorter list is padded at the end with shadows whose color is
    1.16 +    transparent and all lengths (x, y, blur) are 0.
    1.17  
    1.18     <li id=animtype-gradient> <strong>gradient</strong>: interpolated via the
    1.19      positions and colors of each stop. They must have the same type (radial
    1.20 @@ -1240,15 +1240,17 @@
    1.21      interpolation is only supported between: gradient to gradient and color
    1.22      to color. They then work as above.
    1.23  
    1.24 -   <li id=animtype-list> <strong>list of above types</strong>: If the lists
    1.25 -    have the same number of items, each item in the list is interpolated
    1.26 -    using the rules above. Otherwise the interpolation is determined by the
    1.27 -    property rules. If the property extends its list by repeating values,
    1.28 -    then this repeated form will be used in the interpolation (‘<code
    1.29 -    class=property>background-position</code>’ is an example of a property
    1.30 -    that would transition between lists of different lengths). If the
    1.31 -    property does not allow extending its list, then no interpolation will
    1.32 -    occur.
    1.33 +   <li id=animtype-simple-list> <strong>simple list</strong> of other types:
    1.34 +    If the lists have the same number of items, and each pair of values can
    1.35 +    be interpolated, each item in the list is interpolated using the rules
    1.36 +    given for those types. Otherwise the values are not interpolable.
    1.37 +
    1.38 +   <li id=animtype-repeatable-list> <strong>repeatable list</strong> of other
    1.39 +    types: The result list has a length that is the least common multiple of
    1.40 +    the lengths of the input lists. Each item in the result is the
    1.41 +    interpolation of the value from each input list repeated to the length of
    1.42 +    the result list. If a pair of values cannot be interpolated, then the
    1.43 +    lists are not interpolable.
    1.44    </ul>
    1.45  
    1.46    <p>Future specifications may define additional types that can be animated.
    1.47 @@ -1306,7 +1308,9 @@
    1.48      <tr>
    1.49       <td>background-position
    1.50  
    1.51 -     <td><a href="#animtype-lpcalc">length, percentage, or calc</a>
    1.52 +     <td><a href="#animtype-repeatable-list">repeatable list</a> of <a
    1.53 +      href="#animtype-simple-list">simple list</a> of <a
    1.54 +      href="#animtype-lpcalc">length, percentage, or calc</a>
    1.55  
    1.56      <tr>
    1.57       <td>border-bottom-color
    1.58 @@ -1341,7 +1345,8 @@
    1.59      <tr>
    1.60       <td>border-spacing
    1.61  
    1.62 -     <td><a href="#animtype-length">length</a>
    1.63 +     <td><a href="#animtype-simple-list">simple list</a> of <a
    1.64 +      href="#animtype-length">length</a>
    1.65  
    1.66      <tr>
    1.67       <td>border-top-color
    1.68 @@ -1501,7 +1506,7 @@
    1.69      <tr>
    1.70       <td>text-shadow
    1.71  
    1.72 -     <td><a href="#animtype-shadow">shadow</a>
    1.73 +     <td><a href="#animtype-shadow-list">shadow list</a>
    1.74  
    1.75      <tr>
    1.76       <td>top
    1.77 @@ -1565,7 +1570,7 @@
    1.78           <td>stroke</td><td><a href="#animtype-paintserver">paint server</a></td>
    1.79         </tr>
    1.80         <tr>
    1.81 -         <td>stroke-dasharray</td><td><a href="#animtype-list">list</a> of <a href="#animtype-number">number</a></td>
    1.82 +         <td>stroke-dasharray</td><td><a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
    1.83         </tr>
    1.84         <tr>
    1.85           <td>stroke-dashoffset</td><td><a href="#animtype-number">number</a></td>

     2.1 --- a/css3-transitions/Overview.src.html	Mon Feb 04 22:54:31 2013 -0700
     2.2 +++ b/css3-transitions/Overview.src.html	Mon Feb 04 23:05:19 2013 -0700
     2.3 @@ -1237,8 +1237,8 @@
     2.4            functions with Y values outside of [0, 1]) map to the closer
     2.5            endpoint; if neither value is ''visible'' then not interpolable.
     2.6          </li>
     2.7 -        <li id="animtype-shadow">
     2.8 -          <strong>shadow</strong>: interpolated via the color, x, y
     2.9 +        <li id="animtype-shadow-list">
    2.10 +          <strong>shadow list</strong>: interpolated via the color, x, y
    2.11            and blur components (treating them as color and numbers where
    2.12            appropriate). In the case where there are lists of shadows,
    2.13            the shorter list is padded at the end with shadows whose
    2.14 @@ -1256,15 +1256,22 @@
    2.15            between: gradient to gradient and color to color. They then
    2.16            work as above.
    2.17          </li>
    2.18 -        <li id="animtype-list">
    2.19 -          <strong>list of above types</strong>: If the lists have the
    2.20 -          same number of items, each item in the list is interpolated using the
    2.21 -          rules above. Otherwise the interpolation is determined by the property
    2.22 -          rules. If the property extends its list by repeating values, then this
    2.23 -          repeated form will be used in the interpolation ('background-position'
    2.24 -          is an example of a property that would transition between lists of different lengths). If
    2.25 -          the property does not allow extending its list, then no interpolation
    2.26 -          will occur.
    2.27 +        <li id="animtype-simple-list">
    2.28 +          <strong>simple list</strong> of other types:
    2.29 +          If the lists have the same number of items,
    2.30 +          and each pair of values can be interpolated,
    2.31 +          each item in the list is interpolated using
    2.32 +          the rules given for those types.
    2.33 +          Otherwise the values are not interpolable.
    2.34 +        </li>
    2.35 +        <li id="animtype-repeatable-list">
    2.36 +          <strong>repeatable list</strong> of other types:
    2.37 +          The result list has a length that is the least common multiple
    2.38 +          of the lengths of the input lists.
    2.39 +          Each item in the result is the interpolation of the value
    2.40 +          from each input list repeated to the length of the result list.
    2.41 +          If a pair of values cannot be interpolated, then the lists
    2.42 +          are not interpolable.
    2.43          </li>
    2.44        </ul>
    2.45  
    2.46 @@ -1321,7 +1328,7 @@
    2.47         <tr>
    2.48           <td>background-color</td><td><a href="#animtype-color">color</a></tr>
    2.49         <tr>
    2.50 -         <td>background-position</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
    2.51 +         <td>background-position</td><td><a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
    2.52         </tr>
    2.53         <tr>
    2.54           <td>border-bottom-color</td><td><a href="#animtype-color">color</a></td>
    2.55 @@ -1342,7 +1349,7 @@
    2.56           <td>border-right-width</td><td><a href="#animtype-length">length</a></td>
    2.57         </tr>
    2.58         <tr>
    2.59 -         <td>border-spacing</td><td><a href="#animtype-length">length</a></td>
    2.60 +         <td>border-spacing</td><td><a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
    2.61         </tr>
    2.62         <tr>
    2.63           <td>border-top-color</td><td><a href="#animtype-color">color</a></td>
    2.64 @@ -1435,7 +1442,7 @@
    2.65           <td>text-indent</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
    2.66         </tr>
    2.67         <tr>
    2.68 -         <td>text-shadow</td><td><a href="#animtype-shadow">shadow</a></td>
    2.69 +         <td>text-shadow</td><td><a href="#animtype-shadow-list">shadow list</a></td>
    2.70         </tr>
    2.71         <tr>
    2.72           <td>top</td><td><a href="#animtype-lpcalc">length, percentage, or calc</a></td>
    2.73 @@ -1505,7 +1512,7 @@
    2.74           <td>stroke</td><td><a href="#animtype-paintserver">paint server</a></td>
    2.75         </tr>
    2.76         <tr>
    2.77 -         <td>stroke-dasharray</td><td><a href="#animtype-list">list</a> of <a href="#animtype-number">number</a></td>
    2.78 +         <td>stroke-dasharray</td><td><a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
    2.79         </tr>
    2.80         <tr>
    2.81           <td>stroke-dashoffset</td><td><a href="#animtype-number">number</a></td>