[css-position-3] Fix computed value lines, add animation type, update offset-* to inset-*

Author: fantasai

css-position-3/Overview.bs

@@ -733,7 +733,8 @@ Choosing a positioning scheme: 'position' property</h3>
   Inherited: no
   Animatable: no
   Percentages: N/A
-  Computed value: specified value
+  Computed value: specified keyword
+  Animation type: discrete
   </pre>
 
   The values of this property have the following meanings:
@@ -843,7 +844,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
   Inherited: no
   Animation type: length or percentage
   Percentages: refer to height of <a>containing block</a>
-  Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''top/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''top/auto''.
+  Computed value: the keyword ''top/auto'' or an absolute length and/or percentage expression
+  Animation type: by computed value
   </pre>
 
   This property specifies how far an absolutely positioned box’s top margin
@@ -868,7 +870,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
   Inherited: no
   Animation type: length or percentage
   Percentages: refer to height of <a>containing block</a>
-  Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''right/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''right/auto''.
+  Computed value: the keyword ''right/auto'' or an absolute length and/or percentage expression
+  Animation type: by computed value
   </pre>
 
   Similar to 'top', but specifies how far a box’s right margin edge is offset
@@ -893,7 +896,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
   Inherited: no
   Animation type: length or percentage
   Percentages: refer to height of <a>containing block</a>
-  Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''bottom/auto''.<br/> Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''bottom/auto''.
+  Computed value: the keyword ''bottom/auto'' or an absolute length and/or percentage expression
+  Animation type: by computed value
   </pre>
 
   Similar to 'top', but specifies how far a box’s bottom margin edge is offset
@@ -918,7 +922,8 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
   Inherited: no
   Animation type: length or percentage
   Percentages: refer to height of <a>containing block</a>
-  Computed value: For 'position': ''relative'', see Relative positioning.<br/> For 'position': ''sticky'', see Sticky positioning.<br/> For 'position': ''static'', ''left/auto''. Otherwise: if specified as a '&lt;length>', the corresponding absolute length; if specified as a '&lt;percentage>', the specified value; otherwise, ''left/auto''.
+  Computed value: the keyword ''left/auto'' or an absolute length and/or percentage expression
+  Animation type: by computed value
   </pre>
 
   Similar to 'top', but specifies how far a box’s left margin edge is offset
@@ -971,11 +976,11 @@ Box offsets: 'top', 'right', 'bottom', 'left'</h3>
 <!-- End section: Box offsets: 'top', 'right', 'bottom', 'left'  -->
 
 <h3 id="logical-box-offsets-beaso">
-Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-start'</h3>
+Logical box insets: 'inset-before', 'inset-end', 'inset-after' and 'inset-start'</h3>
 
   Issue: See [[!CSS-LOGICAL-1]]; this section is not up-to-date.
 
-  Logical offset properties allow for offsetting positioned boxes based on the
+  Logical offset properties allow for insetting positioned boxes based on the
   'writing-mode' and 'direction' properties. When both the physical property and
   equivalent logical property (based on 'writing-mode' and 'direction') are
   specified the physical property computes to the computed value of the corresponding
@@ -986,14 +991,15 @@ Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-s
   and 'direction' of the <a>containing block</a>:
 
   <pre class="propdef">
-    Name: offset-before, offset-after, offset-start, offset-end
+    Name: inset-before, inset-after, inset-start, inset-end
     Value: auto | <<length-percentage>>
     Initial: auto
     Applies to: positioned elements
     Inherited: no
     Animation type: length or percentage
     Percentages: refer to height of <a>containing block</a>
-    Computed value: For ''position: relative'', see Relative positioning.<br/> For ''position: sticky'', see Sticky positioning.<br/> For ''position: static'', ''top/auto''.<br/> Otherwise: if specified as a <<length>>, the corresponding absolute length; if specified as a <<percentage>>, the specified value; otherwise, ''top/auto''.
+    Computed value: the keyword ''inset-before/auto'' or an absolute length and/or percentage expression
+    Animation type: by computed value
   </pre>
 
   For an absolutely positioned box this property specifies how far the corresponding
@@ -1029,59 +1035,59 @@ Logical box offsets: 'offset-before', 'offset-end', 'offset-after' and 'offset-s
         <tr>
           <td rowspan="4"><div>Edge</div></td>
           <td>top</td>
-          <td>offset-before</td>
-          <td>offset-before</td>
-          <td>offset-start</td>
-          <td>offset-end</td>
-          <td>offset-start</td>
-          <td>offset-end</td>
+          <td>inset-before</td>
+          <td>inset-before</td>
+          <td>inset-start</td>
+          <td>inset-end</td>
+          <td>inset-start</td>
+          <td>inset-end</td>
         </tr>
         <tr>
           <td>right</td>
-          <td>offset-end</td>
-          <td>offset-start</td>
-          <td>offset-before</td>
-          <td>offset-before</td>
-          <td>offset-after</td>
-          <td>offset-after</td>
+          <td>inset-end</td>
+          <td>inset-start</td>
+          <td>inset-before</td>
+          <td>inset-before</td>
+          <td>inset-after</td>
+          <td>inset-after</td>
         </tr>
         <tr>
           <td>bottom</td>
-          <td>offset-after</td>
-          <td>offset-after</td>
-          <td>offset-end</td>
-          <td>offset-start</td>
-          <td>offset-end</td>
-          <td>offset-start</td>
+          <td>inset-after</td>
+          <td>inset-after</td>
+          <td>inset-end</td>
+          <td>inset-start</td>
+          <td>inset-end</td>
+          <td>inset-start</td>
         </tr>
         <tr>
           <td>left</td>
-          <td>offset-start</td>
-          <td>offset-end</td>
-          <td>offset-after</td>
-          <td>offset-after</td>
-          <td>offset-before</td>
-          <td>offset-before</td>
+          <td>inset-start</td>
+          <td>inset-end</td>
+          <td>inset-after</td>
+          <td>inset-after</td>
+          <td>inset-before</td>
+          <td>inset-before</td>
         </tr>
       </tbody>
     </table>
     <p class="caption">
-      Relationship of physical offset edges and the logical properties per
+      Relationship of physical inset edges and the logical properties per
       'writing-mode' and 'direction'.
     </p>
   </div>
 
   <p class="issue">The logical property definitions should move to the Logical Properties module.</p>
 
-  For relatively positioned boxes, the offset is with respect to the property’s
+  For relatively positioned boxes, the inset is with respect to the property’s
   corresponding physical reference edge of the box itself (i.e., the box is given a
   position in the <a>normal flow</a>, and then offset from that position according
   to the property).
 
   <p class="issue">This needs to be defined for sticky positioning.</p>
 
   For absolutely positioned elements whose <a>containing block</a>
-  is based on a block-level element, this property is an offset from the corresponding
+  is based on a block-level element, this property is an inset from the corresponding
   padding edge of that element.
 
   <p class="note">
@@ -1111,6 +1117,7 @@ Inherited: no
 Animatable: no
 Percentages: n/a
 Computed value: specified value, but see prose
+Animation type: discrete
 </pre>
 
 The values of this property have the following meanings:
@@ -1502,7 +1509,7 @@ Auto heights for block formatting context roots</h3>
   the bottommost block-level child box.
 
   Absolutely positioned children are ignored, and relatively positioned boxes are
-  considered without their offset. Note that the child box may be an <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">anonymous block box</a>.
+  considered without their inset. Note that the child box may be an <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">anonymous block box</a>.
 
   In addition, if the element has any floating descendants whose bottom margin edge
   is below the element’s bottom content edge, then the height is increased to
@@ -1941,7 +1948,8 @@ Layered presentation</h2>
   Inherited: no
   Animatable: &lt;integer>
   Percentages: N/A
-  Computed value: as specified
+  Computed value: the keyword ''z-index/auto'' or an integer
+  Animation type: per computed value
   </pre>
 
   For a positioned box, the 'z-index' property specifies: