[css-round-display] Fix some error in code examples

Author: Jihye Hong

css-round-display/Overview.bs

@@ -393,7 +393,7 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <h2 id="positioning-content">Position the element along the path</h2>
 This section introduces specifying a path and positioning the element along it.
 
-A path can be defined with 'offset-path' and 'offset-origin'. The position of the element on the path is computed by the value of 'offset-distance' and 'offset-anchor'.
+A path can be defined with 'offset-path' and 'offset-position'. The position of the element on the path is computed by the value of 'offset-distance' and 'offset-anchor'.
 
 <h3 id="offset-path-property">Define the path: The 'offset-path' property</h3>
 
@@ -408,14 +408,14 @@ A path can be defined with 'offset-path' and 'offset-origin'. The position of th
     Animatable: as specified for <a href="https://www.w3.org/TR/css3-transitions/#animatable-types">angle</a>, otherwise no
 </pre>
 
-Specifies the <a>path</a> the element gets positioned at. The exact element’s position on the path is determined by the 'offset-distance' property. A <dfn>path</dfn> is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape. Each shape or path must define an <dfn>initial position</dfn> for the computed value of "0" for 'offset-distance' or the position specified by 'offset-origin'. An <dfn>initial direction</dfn> which specifies the rotation of the object on the initial position.
+Specifies the <a>path</a> the element gets positioned at. The exact element’s position on the path is determined by the 'offset-distance' property. A <dfn>path</dfn> is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape. Each shape or path must define an <dfn>initial position</dfn> for the computed value of "0" for 'offset-distance' or the position specified by 'offset-position'. An <dfn>initial direction</dfn> which specifies the rotation of the object on the initial position.
 
 Values have the following meanings:
 
 <dl dfn-for="offset-path">
   <dt><<angle>></dt>
   <dd>
-    The path is a straight line that has the degree of the angle as specified in <<angle>> from the Y-axis. The initial position of the path is defined by 'offset-origin' and the end point of the path is on the edge of the containing block.
+    The path is a straight line that has the degree of the angle as specified in <<angle>> from the Y-axis. The initial position of the path is defined by 'offset-position' and the end point of the path is on the edge of the containing block.
 
     <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,9 +454,9 @@ 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>.
 
-<h3 id="offset-origin-property">Define the starting point of the path: The 'offset-origin' property</h3>
+<h3 id="offset-position-property">Define the starting point of the path: The 'offset-position' property</h3>
 <pre class='propdef'>
-    Name: offset-origin
+    Name: offset-position
     Applies to: all elements
     Value: auto | <<position>>
     Initial: auto
@@ -473,7 +473,7 @@ Values are defined as follows:
 <dl>
     <dt><var>'auto'</var></dt>
     <dd>
-       Computes to '50% 50%'('center') if the value for 'offset-path' is specified with <<angle>> and the element is positioned in polar coordinates. In polar coordinates, there are many use cases specifying the position of the origin at the center point of the containing block. Therefore the element is positioned to the horizontally and vertically center in the area of the containing block when auto is given to the 'offset-origin'. 
+       Computes to '50% 50%'('center') if the value for 'offset-path' is specified with <<angle>> and the element is positioned in polar coordinates. In polar coordinates, there are many use cases specifying the position of the origin at the center point of the containing block. Therefore the element is positioned to the horizontally and vertically center in the area of the containing block when auto is given to the 'offset-position'. 
        But the other value types for 'offset-path', it computes to '0% 0%' because 'offset-path' also specifies the initial position.
    </dd>
 </dl>
@@ -593,7 +593,7 @@ Values are defined as follows:
 See the section Motion processing for how to process a motion position.
 
 <div class='example'>
-    This example shows a way to align elements within the polar coordinate system using 'offset-path', 'offset-distance' and 'offset-origin'.
+    This example shows a way to align elements within the polar coordinate system using 'offset-path', 'offset-distance' and 'offset-position'.
 
     <pre class="lang-html">
         &lt;body>
@@ -605,17 +605,17 @@ See the section Motion processing for how to process a motion position.
             #circle1 {
                offset-path: 0deg;
                offset-distance: 50%;
-               offset-origin: 50% 50%;
+               offset-position: 50% 50%;
             }
             #circle2 {
                offset-path: 90deg;
                offset-distance: 20%;
-               offset-origin: 50% 50%;
+               offset-position: 50% 50%;
             }
             #circle3 {
                offset-path: 225deg;
                offset-distance: 100%;
-               offset-origin: 50% 50%;
+               offset-position: 50% 50%;
             }
         &lt;/style>
     </pre>
@@ -632,8 +632,8 @@ See the section Motion processing for how to process a motion position.
 
     <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;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> 
@@ -647,8 +647,8 @@ See the section Motion processing for how to process a motion position.
 
     <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;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>    
@@ -678,7 +678,7 @@ Values have the following meanings:
 <dl>
     <dt><var>'auto'</var></dt>
     <dd>
-       Computes to the value from 'offset-origin'. When 'auto' is given to 'offset-anchor', 'offset-origin' behaves similar to 'background-position'.
+       Computes to the value from 'offset-position'. When 'auto' is given to 'offset-anchor', 'offset-position' behaves similar to 'background-position'.
     </dd>
 
     <dt><<position>></dt>