Style and accessibility updates for Animation module.
authorDirk Schulze <dschulze@adobe.com>
Fri, 25 May 2012 11:57:02 -0700
changeset 161 678a62ab07f9
parent 160 3fd1c403de6b
child 162 e5d456f92586
Style and accessibility updates for Animation module.
master/animate.html
--- 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>&lt;angle&gt;</a></td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a
-    href="types.html#DataTypeColor">&lt;color&gt;</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">&lt;coordinate&gt;</a></td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a
-    href="types.html#DataTypeFrequency">&lt;frequency&gt;</a></td>
-    <td>no</td>
-    <td>no</td>
-    <td>no</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a
-    href="types.html#DataTypeInteger">&lt;integer&gt;</a></td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a>&lt;length&gt;</a></td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a href="types.html#DataTypeList">&lt;list-of-<var>T</var>s&gt;</a></td>
-    <td>no</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a>&lt;number&gt;</a></td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a
-    href="types.html#DataTypePaint">&lt;paint&gt;</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>&lt;percentage&gt;</a></td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a href="types.html#DataTypeTime">&lt;time&gt;</a></td>
-    <td>no</td>
-    <td>no</td>
-    <td>no</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td><a
-    href="types.html#DataTypeTransformList">&lt;transform-list&gt;</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">&lt;iri&gt;</a></td>
-    <td>no</td>
-    <td>yes</td>
-    <td>yes</td>
-    <td>no</td>
-    <td>no</td>
-    <td>&nbsp;</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>&nbsp;</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>&lt;angle&gt;</a></td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a
+      href="types.html#DataTypeColor">&lt;color&gt;</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">&lt;coordinate&gt;</a></td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a
+      href="types.html#DataTypeFrequency">&lt;frequency&gt;</a></td>
+      <td>no</td>
+      <td>no</td>
+      <td>no</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a
+      href="types.html#DataTypeInteger">&lt;integer&gt;</a></td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a>&lt;length&gt;</a></td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a href="types.html#DataTypeList">&lt;list-of-<var>T</var>s&gt;</a></td>
+      <td>no</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a>&lt;number&gt;</a></td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a
+      href="types.html#DataTypePaint">&lt;paint&gt;</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>&lt;percentage&gt;</a></td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a href="types.html#DataTypeTime">&lt;time&gt;</a></td>
+      <td>no</td>
+      <td>no</td>
+      <td>no</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td><a
+      href="types.html#DataTypeTransformList">&lt;transform-list&gt;</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">&lt;iri&gt;</a></td>
+      <td>no</td>
+      <td>yes</td>
+      <td>yes</td>
+      <td>no</td>
+      <td>no</td>
+      <td>&nbsp;</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>&nbsp;</td>
+    </tr>
+  </tbody>
 </table>
 
 <p>Any deviation from the above table or other special note