Style and accessibility updates for Animation module.
--- a/master/animate.html Fri May 25 16:38:51 2012 +0200
+++ b/master/animate.html Fri May 25 11:57:02 2012 -0700
@@ -1263,8 +1263,9 @@
<p>Using the <a>'keySplines'</a> values for each of the four cases
above, the approximate interpolated values as the animation
proceeds are:</p>
- <table class='vert' summary="keySplines values">
- <tbody>
+ <table class="data">
+ <caption>keySplines values</caption>
+ <thead>
<tr>
<th>Value of <span class='attr-name'>'keySplines'</span></th>
<th>Initial value</th>
@@ -1273,6 +1274,8 @@
<th>After 3s</th>
<th>Final value</th>
</tr>
+ </thead>
+ <tbody>
<tr>
<td>0 0 1 1</td>
<td>10.0</td>
@@ -1783,29 +1786,34 @@
<p>The following table shows the supplemental transformation
matrices that are applied to achieve the effect of the motion
path animation.</p>
- <table class='vert' summary="Example animMotion01 time slices">
- <tr>
- <th></th>
- <th>After 0s</th>
- <th>After 3s</th>
- <th>After 6s</th>
- </tr>
- <tr>
- <td>Supplemental transform
- due to movement
- along motion path</td>
- <td>translate(100,250)</td>
- <td>translate(250,100)</td>
- <td>translate(400,250)</td>
- </tr>
- <tr>
- <td>Supplemental transform
- due to
- <span class="attr-value">rotate="auto"</span></td>
- <td>rotate(-90)</td>
- <td>rotate(0)</td>
- <td>rotate(90)</td>
- </tr>
+ <table class="data">
+ <caption>Example animMotion01 time slices</caption>
+ <thead>
+ <tr>
+ <th></th>
+ <th>After 0s</th>
+ <th>After 3s</th>
+ <th>After 6s</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Supplemental transform
+ due to movement
+ along motion path</td>
+ <td>translate(100,250)</td>
+ <td>translate(250,100)</td>
+ <td>translate(400,250)</td>
+ </tr>
+ <tr>
+ <td>Supplemental transform
+ due to
+ <span class="attr-value">rotate="auto"</span></td>
+ <td>rotate(-90)</td>
+ <td>rotate(0)</td>
+ <td>rotate(90)</td>
+ </tr>
+ </tbody>
</table>
<p>For a list of elements that can be animated using the <a>'animateMotion'</a>
@@ -2132,154 +2140,159 @@
subsequent animation uses a keyword value, additive animation
is not possible.</p>
-<table class='vert' summary="animatable data types">
- <tr>
- <th>Data type</th>
- <th>Additive?</th>
- <th><a>'animate'</a></th>
- <th><a>'set'</a></th>
- <th><a>'animateColor'</a></th>
- <th><a>'animateTransform'</a></th>
- <!--
- <th><a href="animate.html#AnimateColorElement"><span class="element-name">‘animate<br /> Color’</span></a></th>
- <th><a href="animate.html#AnimateTransformElement"><span class="element-name">‘animate<br /> Transform’</span></a></th>
- -->
- <th>Notes</th>
- </tr>
- <tr>
- <td><a><angle></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeColor"><color></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>Only additive if each value can be converted to an RGB color.</td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeCoordinate"><coordinate></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeFrequency"><frequency></a></td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeInteger"><integer></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a><length></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></td>
- <td>no</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a><number></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypePaint"><paint></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>Only additive if each value can be converted to an RGB color.</td>
- </tr>
- <tr>
- <td><a><percentage></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a href="types.html#DataTypeTime"><time></a></td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeTransformList"><transform-list></a></td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>yes</td>
- <td>Additive means that a transformation is post-multiplied
- to the base set of transformations.</td>
- </tr>
- <tr>
- <td><a href="types.html#DataTypeIRI"><iri></a></td>
- <td>no</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td>All other data types used in animatable attributes and
- properties</td>
- <td>no</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
+<table class="data">
+ <caption>Animatable data types</caption>
+ <thead>
+ <tr>
+ <th>Data type</th>
+ <th>Additive?</th>
+ <th><a>'animate'</a></th>
+ <th><a>'set'</a></th>
+ <th><a>'animateColor'</a></th>
+ <th><a>'animateTransform'</a></th>
+ <!--
+ <th><a href="animate.html#AnimateColorElement"><span class="element-name">‘animate<br /> Color’</span></a></th>
+ <th><a href="animate.html#AnimateTransformElement"><span class="element-name">‘animate<br /> Transform’</span></a></th>
+ -->
+ <th>Notes</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a><angle></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeColor"><color></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>Only additive if each value can be converted to an RGB color.</td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeFrequency"><frequency></a></td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeInteger"><integer></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a><length></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a><number></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypePaint"><paint></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>Only additive if each value can be converted to an RGB color.</td>
+ </tr>
+ <tr>
+ <td><a><percentage></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeTime"><time></a></td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeTransformList"><transform-list></a></td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>yes</td>
+ <td>Additive means that a transformation is post-multiplied
+ to the base set of transformations.</td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeIRI"><iri></a></td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>All other data types used in animatable attributes and
+ properties</td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ </tbody>
</table>
<p>Any deviation from the above table or other special note