Merge pull request w3c#227 from ewilligers/side-external

[motion] Clarify meaning of closest-side

Author: ewilligers

motion-1/Overview.bs

@@ -153,19 +153,19 @@ Values have the following meanings:
       &nbsp;<b>&lt;size&gt;</b> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]
 
       <dl dfn-for="<size>">
-        <dt><dfn>closest-side</dfn></dt>
-        <dd>The distance is measured between the initial position and the closest side
-        of the box from it.</dd>
+        <dt><dfn for="<size>" id=size-closest-side>closest-side</dfn></dt>
+        <dd>The perpendicular distance is measured between the initial position and the
+        closest side of the box from it.</dd>
 
-        <dt><dfn>closest-corner</dfn></dt>
+        <dt><dfn for="<size>" id=size-closest-corner>closest-corner</dfn></dt>
         <dd>The distance is measured between the initial position and the closest corner
         of the box from it.</dd>
 
-        <dt><dfn>farthest-side</dfn></dt>
-        <dd>The distance is measured between the initial position and the farthest side
-        of the box from it.</dd>
+        <dt><dfn for="<size>" id=size-farthest-side>farthest-side</dfn></dt>
+        <dd>The perpendicular distance is measured between the initial position and the
+        farthest side of the box from it.</dd>
 
-        <dt><dfn>farthest-corner</dfn></dt>
+        <dt><dfn for="<size>" id=size-farthest-corner>farthest-corner</dfn></dt>
         <dd>The distance is measured between the initial position and the farthest corner
         of the box from it.</dd>
 
@@ -175,6 +175,9 @@ Values have the following meanings:
       <p class='note'>Note: When the initial position is on one of the edges of
       the containing block, the closest side takes the edge that the initial position
       is on, and thus the path length used for percentage 'offset-distance' values is 0.</p>
+      <p class='note'>Note: When <a href="#size-closest-side">closest-side</a> or
+      <a href="#size-farthest-side">farthest-side</a> are used, and the initial
+      position is outside the box, the sides are considered to extend indefinitely.</p>
     </dd>
 
     <dt><dfn>contain</dfn></dt>
@@ -255,6 +258,7 @@ Values have the following meanings:
       <img alt="An image of boxes positioned with contain" src="images/offset_distance_with_contain.png" style="width: 200px;"/>
       <figcaption>'offset-path' with 'contain'</figcaption>
     </figure>
+
     In the third example, the path size is increased so that the box can be contained. The <a>used offset distance</a> is negative.
     <pre class="lang-html">
       &lt;style>
@@ -285,6 +289,39 @@ Values have the following meanings:
       <img alt="An image of an increased path size" src="images/increase-size.svg" style="width: 400px; height: 335;"/>
       <figcaption>'offset-path' with path size increased</figcaption>
     </figure>
+
+    In the fourth example, the initial position is outside the containing block.
+    <pre class="lang-html">
+      &lt;style>
+        #container {
+          transform-style: preserve-3d;
+          width: 200px;
+          height: 200px;
+        }
+        .box {
+          width: 20%;
+          height: 20%;
+          offset-position: 140% 70%;
+          offset-distance: 100%;
+        }
+        #redBox {
+          background-color: red;
+          offset-path: ray(-90deg sides);
+        }
+        #blueBox {
+          background-color: blue;
+          offset-path: ray(180deg closest-side);
+        }
+      &lt;/style>
+      &lt;div id="container">
+        &lt;div class="box" id="redBox">&lt;/div>
+        &lt;div class="box" id="blueBox">&lt;/div>
+      &lt;/div>
+    </pre>
+    <figure>
+      <img alt="An image with initial position outside the containing block" src="images/initial-outside.svg" style="width: 700px;" />
+      <figcaption>Initial position outside the containing block</figcaption>
+    </figure>
   </div>
 
   <dt><<basic-shape>> || <<geometry-box>></dt>