[css-round-display] Move 'contain' into offset-path

Author: Jihye Hong

css-round-display/Overview.bs

@@ -400,7 +400,7 @@ A path can be defined with 'offset-path' and 'offset-position'. The position of
 <pre class='propdef'>
     Name: offset-path
     Applies to: All elements. In SVG, it applies to <a>container elements</a> excluding the <{defs}> element and all <a>graphics elements</a>
-    Value: <<url>> | <<angle>> | [ <<basic-shape>> | <<path()>> ] || <<geometry-box>> | none
+    Value: <<url>> | <<angle>> && contain? | [ <<basic-shape>> | <<path()>> ] || <<geometry-box>> | none
     Initial: 0deg for <<angle>>, otherwise no
     Media: visual
     Inherited: no
@@ -416,6 +416,13 @@ Values have the following meanings:
   <dt><<angle>></dt>
   <dd>
     The path is a straight line that starts from the current position of the element and has the degree of the angle as specified in <<angle>> from the Y-axis. The path ends at the edge of the containing block.
+
+    <dl>
+        <dt><dfn>contain</dfn></dt>
+        <dd>
+           Adjust the value of 'offset-distance' when the element goes out of the path. When overflowing occurs, the distance value is reduced, until the end point of the path is on the edge of the element.
+        </dd>
+    </dl>
 
     <p class="note">Note: Defining the path with <<angle>>, the element can be positioned in the polar coordinate system. In polar coordinates, a pole is the reference point and points are described as been a certain distance from it, as also a certain angle from the polar axis. In mathematical theory, the polar axis is commonly defined as the positive direction of the x-axis, but we consider the polar axis as the positive direction of the y-axis position as other CSS specifications usually do. Therefore, when the <<angle>> value of 'offset-path' is 0, the element is positioned on the y-axis. If the <<angle>> value increases in the positive direction from 0, the element moves clockwise. The method to determine a direction using the <<angle>> value for 'offset-path' works the same way in [[!CSS3VAL]], <<angle>> value.</p>
   </dd>
@@ -454,6 +461,38 @@ For SVG elements without associated CSS layout box, the <a>used value</a> for <a
 
 For elements with associated CSS layout box, the <a>used value</a> for <a value for=clip-path>fill-box</a>, <a value for=clip-path>stroke-box</a> and <a value for=clip-path>view-box</a> is <a value for=mask-clip>border-box</a>.
 
+<div class='example'>
+    Here are some examples. The first example shows some parts of elements are outside of the path.
+
+    <pre class="lang-html">
+        &lt;body>
+          &lt;div style="offset-path: 45deg; offset-distance: 100%">&lt;/div>
+          &lt;div style="offset-path: 180deg; offset-distance: 100%">&lt;/div>
+        &lt;/body>
+    </pre>
+    <div class=figure> 
+        <img alt="An image of elements positioned without contain" src="images/offset_distance_without_contain.png" style="width: 300px;"/>
+        <figcaption>
+            'offset-path' without 'contain'
+        </figcaption>
+    </div>
+
+    In the second example, contain, the extent keyword value is added to the 'offset-path' value of each element to avoid overflowing.
+
+    <pre class="lang-html">
+        &lt;body>
+          &lt;div style="offset-path: 45deg contain; offset-distance: 100%">&lt;/div>
+          &lt;div style="offset-path: 180deg contain; offset-distance: 100%">&lt;/div>
+        &lt;/body>
+    </pre>
+    <div class=figure>    
+        <img alt="An image of elements positioned without contain" src="images/offset_distance_with_contain.png" style="width: 300px;"/>
+        <figcaption>
+            'offset-path' with 'contain'
+        </figcaption>
+    </div>
+</div>
+
 <h3 id="offset-position-property">Define the initial position of the path: The 'offset-position' property</h3>
 <pre class='propdef'>
     Name: offset-position
@@ -523,7 +562,7 @@ Values are defined as follows:
 <pre class='propdef'>
     Name: offset-distance
     Applies to: All elements
-    Value: [ <<length>> | <<percentage>> <<size>>? ] && contain?
+    Value: [ <<length>> | <<percentage>> <<size>>? ]
     Initial: 0
     Media: visual
     Inherited: no
@@ -570,10 +609,6 @@ Values are defined as follows:
         </dl>
         <p class='note'>Note: When the initial position is at one of the corners of the containing block, the closest side takes the edge where the initial position is on. Even if the offset given by <<length>> or <<percentage>> changes, the position of the element specified with closest-side is the same.</p>
     </dd>
-    <dt><dfn>contain</dfn></dt>
-    <dd>
-       Adjust the value of 'offset-distance' when the element goes out of the path. When overflowing occurs, the distance value is reduced, until there is a contact point between the path and content block of the element.
-    </dd>
 </dl>
 
 See the section Motion processing for how to process a motion position.
@@ -610,38 +645,6 @@ See the section Motion processing for how to process a motion position.
     </div>
 </div>
 
-<div class='example'>
-    Here are some examples. The first example shows some parts of elements are outside of the path.
-
-    <pre class="lang-html">
-        &lt;body>
-          &lt;div style="offset-path: 45deg; offset-distance: 100%">&lt;/div>
-          &lt;div style="offset-path: 180deg; offset-distance: 100%">&lt;/div>
-        &lt;/body>
-    </pre>
-    <div class=figure> 
-        <img alt="An image of elements positioned without contain" src="images/offset_distance_without_contain.png" style="width: 300px;"/>
-        <figcaption>
-            'offset-distance' without 'contain'
-        </figcaption>
-    </div>
-
-    In the second example, contain, the extent keyword value is added to the 'offset-distance' value of each element to avoid overflowing.
-
-    <pre class="lang-html">
-        &lt;body>
-          &lt;div style="offset-path: 45deg; offset-distance: 100% contain">&lt;/div>
-          &lt;div style="offset-path: 180deg; offset-distance: 100% contain">&lt;/div>
-        &lt;/body>
-    </pre>
-    <div class=figure>    
-        <img alt="An image of elements positioned without contain" src="images/offset_distance_with_contain.png" style="width: 300px;"/>
-        <figcaption>
-            'offset-distance' with 'contain'
-        </figcaption>
-    </div>
-</div>
-
 <h3 id="offset-anchor-property">The anchor of the element: The 'offset-anchor' property</h3>
 <pre class='propdef'>
     Name: offset-anchor