Add animation information to all the propdef tables, and flex()

Author: tabatkins

css3-flexbox/Overview.html

@@ -270,8 +270,8 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
   </ul>
   <!--end-toc-->
 
-  <p class=issue>Add "Animatable" and "Canonical Order" fields to all the
-   propdef tables, per <a
+  <p class=issue>Add "Canonical Order" fields to all the propdef tables, per
+   <a
    href="http://wiki.csswg.org/spec/format-update">http://wiki.csswg.org/spec/format-update</a>.
 
   <h2 id=intro><span class=secno>1. </span> Introduction</h2>
@@ -658,6 +658,11 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <table class=propdef>
@@ -696,6 +701,11 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <table class=propdef>
@@ -734,6 +744,11 @@ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <p>The &lsquo;<a href="#flex-direction"><code
@@ -882,6 +897,11 @@ <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>yes
   </table>
 
   <p>The &lsquo;<a href="#flex-order0"><code
@@ -1021,6 +1041,13 @@ <h3 id=flex-function><span class=secno>4.1. </span> The &lsquo;<code
    size</i></a>. Otherwise, it computes to itself, and is resolved to a
    length at used-value time by the flexbox layout algorithm.
 
+  <p>The &lsquo;<code class=css>flex()</code>&rsquo; function is
+   transitionable, by transitioning the <a
+   href="#preferred-size"><i>preferred size</i></a>, <a
+   href="#positive-flexibility"><i>positive flexibility</i></a>, and <a
+   href="#negative-flexibility"><i>negative flexibility</i></a>
+   independently.
+
   <p class=issue>Examples!
 
   <h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
@@ -1134,6 +1161,11 @@ <h3 id=flex-pack><span class=secno>5.1. </span> Main Axis Alignment: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <p>The &lsquo;<a href="#flex-pack0"><code
@@ -1271,6 +1303,11 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <table class=propdef>
@@ -1311,6 +1348,11 @@ <h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <p><a href="#flexbox-item"><i>Flexbox items</i></a> can be aligned in the
@@ -1573,6 +1615,11 @@ <h3 id=flex-line-pack><span class=secno>6.1. </span> &lsquo;<a
      <th>Media:
 
      <td>visual
+
+    <tr>
+     <th>Animatable:
+
+     <td>no
   </table>
 
   <p>The &lsquo;<a href="#flex-line-pack0"><code

css3-flexbox/Overview.src.html

@@ -65,7 +65,7 @@ <h2 class="no-num no-toc" id="status">Status of this document</h2>
 <h2 class="no-num no-toc" id="table">Table of contents</h2>
 <!--toc-->
 
-<p class=issue>Add "Animatable" and "Canonical Order" fields to all the propdef tables, per <a href="http://wiki.csswg.org/spec/format-update">http://wiki.csswg.org/spec/format-update</a>.</p>
+<p class=issue>Add "Canonical Order" fields to all the propdef tables, per <a href="http://wiki.csswg.org/spec/format-update">http://wiki.csswg.org/spec/format-update</a>.</p>
 
 
 <h2 id="intro">
@@ -257,6 +257,9 @@ <h3 id='flex-flow'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<table class=propdef>
@@ -281,6 +284,9 @@ <h3 id='flex-flow'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<table class=propdef>
@@ -305,6 +311,9 @@ <h3 id='flex-flow'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<p>The 'flex-direction' property specifies how <i>flexbox items</i> are placed in the flexbox, by setting the direction of the flexbox's <i>main axis</i>.  This affects the direction that flexbox items are laid out in, and the meaning of the 'flex-pack' property.</p>
@@ -380,6 +389,9 @@ <h3 id='flex-order'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>yes
 	</table>
 
 	<p>The 'flex-order' property assigns <i>flexbox items</i> to ordinal groups.</p>
@@ -467,6 +479,8 @@ <h3 id='flex-function'>
 
 	<p>If the ''flex()'' function is specified on an element that is not a <i>flexbox item</i>, it computes to the <i>preferred size</i>.  Otherwise, it computes to itself, and is resolved to a length at used-value time by the flexbox layout algorithm.</p>
 
+	<p>The ''flex()'' function is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently.</p>
+
 	<p class='issue'>Examples!</p>
 
 
@@ -527,6 +541,9 @@ <h3 id='flex-pack'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<p>The 'flex-pack' property aligns <i>flexbox items</i> in the <i>main axis</i> of the current line of the flexbox.  This is done <em title=''>after</em> any flexible lengths have been resolved.  Typically it helps distribute extra free space leftover when either all the <i>flexbox items</i> on a line are inflexible, or are flexible but have reach their maximum size, but it also exerts some control over the alignment of items when they overflow the line.</p>
@@ -581,6 +598,9 @@ <h3 id='flex-align'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<table class=propdef>
@@ -605,6 +625,9 @@ <h3 id='flex-align'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<p><i>Flexbox items</i> can be aligned in the <i>cross axis</i> of the current line of the flexbox, similar to 'flex-pack' but in the perpendendicular direction.  'flex-align' sets the default alignment for all of the flexbox's <i title="flexbox items">items</i>, including anonymous <i>flexbox items</i>.  'flex-item-align' allows this default alignment to be overridden for individual <i>flexbox items</i>.</p>
@@ -754,6 +777,9 @@ <h3 id='flex-line-pack'>
 		<tr>
 			<th>Media:
 			<td>visual
+		<tr>
+			<th>Animatable:
+			<td>no
 	</table>
 
 	<p>The 'flex-line-pack' property aligns a flexbox's lines within the flexbox when there is extra space in the <i>cross axis</i>, similar to how 'flex-pack' aligns individual items within the <i>main axis</i>:</p>