w3c
diff --git a/Collapse file
‎motion-1/Overview.bs‎
Copy file name to clipboardExpand all lines: motion-1/Overview.bs
+33-32Lines changed: 33 additions & 32 deletions b/Collapse file
‎motion-1/Overview.bs‎
Copy file name to clipboardExpand all lines: motion-1/Overview.bs
+33-32Lines changed: 33 additions & 32 deletions
@@ -77,8 +77,8 @@ that can be applied to an element.
 
 As described in [[css-transforms-2#ctm]],
 the transforms defined by this document are layered
-after the [=individual transform properties=]
-(defined in [[css-transforms-2]])
+after the individual transform properties
+('translate'/'rotate'/'scale', defined in [[css-transforms-2]])
 and before the 'transform' property
 (defined in [[css-transforms-1]]).
 
@@ -144,61 +144,62 @@ Values have the following meanings:
     : <<ray()>>
     ::
         The [=offset path=] is a line extending from the [=initial position=]
+        at some angle.
+        See [[#ray-function]] for details.
 
-
-
-    : <<basic-shape>> && <<coord-box>>?
+    : <<basic-shape>>
     ::
         The <a>offset path</a> is a basic shape as specified in CSS Shapes [[!CSS-SHAPES]].
 
-        'offset-position' is ignored for circle and ellipse basic shapes with explicit center positions, and for other types of basic shapes. If a circle or ellipse basic shape has no explicit center position, the shape is centered at the <var>initial position</var> of the path, as described in 'offset-position'.
+        'offset-position' is ignored for circle and ellipse basic shapes with explicit center positions, and for other types of basic shapes. If a circle or ellipse basic shape has no explicit center position, the shape is centered at the [=initial position=] of the path, as described in 'offset-position'.
 
-        The <var>initial position</var> for basic shapes are defined as follows:
+        The [=initial position=] for basic shapes are defined as follows:
 
         : <<path()>>
         ::
-            The <var>initial position</var> is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1 [[!SVG11]].
+            The [=initial position=] is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1 [[!SVG11]].
         : <<circle()>>
         : <<ellipse()>>
         ::
-            The <var>initial position</var> is defined by the point where a horizontal tangent to the circle/ellipse would reach the top vertical position.
+            The [=initial position=] is defined by the point where a horizontal tangent to the circle/ellipse would reach the top vertical position.
+
         : <<inset()>>
         ::
-            The <var>initial position</var> is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc.
+            The [=initial position=] is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc.
         : <<polygon()>>
         ::
-            The <var>initial position</var> is defined by the first coordinate pair of the polygon.
+            The [=initial position=] is defined by the first coordinate pair of the polygon.
 
             The <var>initial direction</var> is defined by the vector connecting.
 
-            the <var>initial position</var> with the next following coordinate pair that isn't equal to the <var>initial position</var>.
+            the [=initial position=] with the next following coordinate pair that isn't equal to the [=initial position=].
 
         The <<coord-box>> specified in combination with a <<basic-shape>> provides the reference box for the <<basic-shape>>. If no reference box is specified, it defaults to ''&lt;coord-box>/border-box''.
 
         Apart from polygons with non-zero length, the <var>initial direction</var> is 90 degrees (i.e. to the right).
 
-        Note: This gives ''0deg'' rotation when 'offset-rotate' is ''auto''.
+        Note: This gives ''0deg'' rotation when 'offset-rotate' is ''offset-rotate/auto''.
 
     : <<coord-box>>
     ::
         The [=offset path=] is the specified [=edge=] of the box,
         including the effect of any 'border-radius'.
 
-        The <var>initial position</var> is the left end of the top horizontal line,
+        The [=initial position=] is the left end of the top horizontal line,
         immediately to the right of any 'border-radius' arc,
         and the <var>initial direction</var> is to the right.
 
     : <<url>>
     ::
         References an SVG <a>shape element</a> and uses its geometry as <a>offset path</a>.
-        See SVG 1.1 for more information about the <var>initial position</var> and <var>initial direction</var> [[!SVG11]].
+        See SVG 1.1 for more information about the [=initial position=] and <var>initial direction</var> [[!SVG11]].
 
     : <dfn for=offset-path id=offsetpath-none>none</dfn>
     ::
         No <a>offset path</a> gets created. When 'offset-path' is <a href="#offsetpath-none">none</a>, 'offset-distance' and 'offset-rotate' have no effect.
 </dl>
 
-A computed value of other than <a href="#offsetpath-none">none</a> results in the creation of a <a>stacking context</a> [[!CSS21]] and <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, per usual for <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">transforms</a>.
+A computed value of other than <a href="#offsetpath-none">none</a> results in the creation of a <a>stacking context</a> [[!CSS21]] and [=containing block=], per usual for 'transform'.
 
 A reference that fails to download, is not a reference to an SVG <a>shape element</a>, or is non-existent, is treated as equivalent to <code>path("m 0 0")</code>.
 
@@ -249,7 +250,7 @@ Its arguments are:
         Specifies the length of the [=offset path=]
         (the distance between the ''offset-distance: 0%''
         and ''offset-distance: 100%'' points)
-        relative to the [=containing box=].
+        relative to the containing box.
 
         If no <<ray-size>> is specified it defaults to ''closest-side''.
 
@@ -542,9 +543,9 @@ Specifies the position of the box as a distance along the <a>offset path</a>.
 <dl dfn-for="offset-distance" dfn-type="value">
     : <<length-percentage>>
     ::
-        Specifies the distance from the <var>initial position</var> of the <a>offset path</a> to the position of the box’s <a>anchor point</a>.
+        Specifies the distance from the [=initial position=] of the <a>offset path</a> to the position of the box’s <a>anchor point</a>.
 
-        Percentages are relative to the length of the <a>offset path</a>-- that is, the distance between the <var>initial position</var> and the end position of the <a>offset path</a>.
+        Percentages are relative to the length of the <a>offset path</a>-- that is, the distance between the [=initial position=] and the end position of the <a>offset path</a>.
 </dl>
 
 ### Calculating the computed distance along a path ### {#calculating-the-computed-distance-along-a-path}
@@ -765,7 +766,7 @@ Values are defined as follows:
     </code></pre>
     <figure>
         <img alt="An image of offset-position: auto" src="images/offset_position_auto.png" width="300"/>
-        <figcaption>An example when ''auto'' is given to 'offset-position'</figcaption>
+        <figcaption>An example when ''offset-position/auto'' is given to 'offset-position'</figcaption>
     </figure>
 </div>
 
@@ -1176,18 +1177,18 @@ Values have the following meanings:
 <dl dfn-for="offset-rotate" dfn-type="value">
     : <dfn>auto</dfn>
     ::
-        Indicates that the object is rotated (over time if 'offset-distance' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''auto''.
+        Indicates that the object is rotated (over time if 'offset-distance' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''offset-rotate/auto''.
 
-        Note: For ray paths, the rotation implied by ''auto'' is 90 degrees less than the ray's bearing <<angle>>.
+        Note: For ray paths, the rotation implied by ''offset-rotate/auto'' is 90 degrees less than the ray's bearing <<angle>>.
 
     : <dfn>reverse</dfn>
     ::
-        Indicates that the object is rotated (over time if 'offset-distance' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis, plus 180 degrees. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''reverse''.
+        Indicates that the object is rotated (over time if 'offset-distance' is animated) by the angle of the direction (i.e., directional tangent vector) of the <a>offset path</a>, relative to the positive x-axis, plus 180 degrees. If specified in combination with <<angle>>, the computed value of <<angle>> is added to the computed value of ''offset-rotate/reverse''.
 
         Note: This is the same as specifying ''auto 180deg''.
-    : <<angle>>
+    : <dfn><<angle>></dfn>
     ::
-        Indicates that the box has a constant clockwise rotation transformation applied to it by the specified rotation angle. See definitions of ''auto'' or ''reverse'' if specified in combination with either one of the keywords.
+        Indicates that the box has a constant clockwise rotation transformation applied to it by the specified rotation angle. See definitions of ''offset-rotate/auto'' or ''offset-rotate/reverse'' if specified in combination with either one of the keywords.
 </dl>
 
 When the <a>offset path</a> is a zero length path, the value of 'offset-rotate' is 0 degree, the direction of the positive x-axis.
@@ -1213,7 +1214,7 @@ When the shape's <a>anchor point</a> is placed at different positions along the
     rotation transforms.</figcaption>
 </figure>
 
-If the 'offset-rotate' property is set to ''auto'', and the shape's <a>anchor point</a> is placed at different positions along the path, the shape is rotated based on the gradient at the current position and faces the direction of the path at this position.
+If the 'offset-rotate' property is set to ''offset-rotate/auto'', and the shape's <a>anchor point</a> is placed at different positions along the path, the shape is rotated based on the gradient at the current position and faces the direction of the path at this position.
 
 <figure>
     <img src="images/offset-rotate-auto.svg" width="470" height="120" alt="Path with auto rotation">
@@ -1239,9 +1240,9 @@ The last example sets the 'offset-rotate' property to ''-45deg''. The shape is r
 </div>
 
 <div class=example>
-This example shows how ''auto'' or ''reverse'' work when specified in combination
+This example shows how ''offset-rotate/auto'' or ''offset-rotate/reverse'' work when specified in combination
 with <<angle>>.
-The computed value of <<angle>> is added to the computed value of ''auto'' or ''reverse''.
+The computed value of <<angle>> is added to the computed value of ''offset-rotate/auto'' or ''offset-rotate/reverse''.
 
 <pre><code highlight=html>
 &lt;style>
@@ -1299,7 +1300,7 @@ The computed value of <<angle>> is added to the computed value of ''auto'' or ''
 </code></pre>
 <figure>
     <img alt="An image of example for offset-rotate" src="images/rotate_by_angle_with_auto.png" style="width: 250px; text-align: center"/>
-    <figcaption>The boxes are rotated by the value of ''auto'' with a fixed amount of degree.</figcaption>
+    <figcaption>The boxes are rotated by the value of ''offset-rotate/auto'' with a fixed amount of degree.</figcaption>
 </figure>
 </div>
 
@@ -1308,7 +1309,7 @@ The computed value of <<angle>> is added to the computed value of ''auto'' or ''
 
 <div class=switch>
     1. Create a supplemental transformation matrix <dfn>T1</dfn> for the local coordinate system of the box.
-    2. Find the <var>initial position</var> of the <a>offset path</a> specified by 'offset-position' as <dfn>T2</dfn>.
+    2. Find the [=initial position=] of the <a>offset path</a> specified by 'offset-position' as <dfn>T2</dfn>.
     3. Let <dfn>P</dfn> be the point at the <a>used offset distance</a> along the <a>offset path</a>.
     4. Find the translation of the box such that its <a>anchor point</a> is placed at <a>P</a>, and apply that to <a>T2</a>.
     5. Post-multiply <a>T2</a> by the rotation specified by 'offset-rotate'.
@@ -1364,10 +1365,10 @@ The following changes were made since the <a href="https://www.w3.org/TR/2015/WD
     * Added <<size>> and 'contain' value for the ''ray()''.
 * Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-offset">motion-offset</a> to 'offset-distance' for integrating with <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-distance-property">polar-distance</a>.
 * Renamed <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion-rotation">motion-rotation</a> to 'offset-rotate'.
-* Added 'offset-position' to specify the <var>initial position</var> of the path by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-origin-property">polar-origin</a> from [[CSS-ROUND-DISPLAY-1]].
+* Added 'offset-position' to specify the [=initial position=] of the path by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-origin-property">polar-origin</a> from [[CSS-ROUND-DISPLAY-1]].
 * Added 'offset-anchor' to specify the origin point of the element by merging <a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/#polar-anchor-property">polar-anchor</a> from [[CSS-ROUND-DISPLAY-1]].
 * Renamed the shorthand property <a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/#propdef-motion">motion</a> to 'offset'.
-* Made 'offset-rotate' specify the rotation transformation by ''auto'' or ''reverse'' in combination with <<angle>>.
+* Made 'offset-rotate' specify the rotation transformation by ''offset-rotate/auto'' or ''offset-rotate/reverse'' in combination with <<angle>>.
 
 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>