[css-round-display] Add 'polar-anchor' property

Author: Jihye Hong

css-round-display/Overview.bs

@@ -394,3 +394,100 @@ One of the profits of polar coordinate system is performance improvement. The si
 <p class="issue">
 By 'polar-distance' property, a position of an element is specified based on the containing block's center. In other way, is the method of positioning elements by the distance based on the edge of the containing block needed?
 </p>
+<h3 id="polar-angle-property">The 'polar-anchor' property</h3>
+<p>
+The ‘polar-anchor’ property sets an anchor point of the element. The anchor point specifies a position which is a representative point of the element. The anchor point could be set as any point within a content area of the element rather than being positioned to the upper left corner of the element by CSS box model.
+
+With position: polar, the value of polar-distance is given to the distance between an anchor point and a center point of a containing block.
+</p>
+<pre class='propdef'>
+    Name: polar-anchor
+    Applies to: all elements
+    Value: <<position>>
+    Initial: center
+    Media: visual
+    Inherited: no
+    Percentages: relative to width and height of an element
+	Animatable: as <<position>>
+</pre>
+<p>
+The property's value is given as <position> specified in ‘background-position’ property, but meanings of some keywords in value type are different in ‘polar-anchor’ property.
+
+Where
+</p>
+
+<pre class='prod'>
+<dfn id=position><var>&lt;position&gt;</var></dfn>
+ = [
+  [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+|
+  [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+  [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
+|
+  [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
+  [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
+]
+</pre>
+<p>
+<dt><var>&lt;percentage&gt;</var></dt>
+<dd>
+A percentage for the horizontal offset is relative to width of content box area of the element. A percentage for the vertical offset is relative to height of content box area of the element. For example, with a value pair of ‘100%, 0%’, an anchor point is on the upper right corner of the element.
+</dd>
+
+<dt><var>&lt;length&gt;</var></dt>
+<dd>
+A length value gives a length offset from the upper left corner of the element’s content area.
+</dd>
+</p>
+<p>
+Only with 'polar-angle' and 'polar-distance' to position elements, adjusting values of those properties for avoiding elements sticking out of the containing block is required. When the appropriate anchor point is given, there is no need to adjust polar-distance value to avoid overflowing when positioning elements in the containing block.
+</p>
+
+<div class='example'>
+This example shows an alignment of four elements with different anchor points positioned in a containing block.
+
+<pre>&lt;style>
+    #item1 {
+        position: polar;
+		polar-angle: 45deg;
+		polar-distance: 100%;
+		polar-anchor: right top;
+
+    }
+    #item2 {
+        position: polar;
+		polar-angle: 135deg;
+		polar-distance: 100%;
+		polar-anchor: right bottom;
+    }
+    #item3 {
+        position: polar;
+		polar-angle: 225deg;
+		polar-distance: 100%;	
+		polar-anchor: left bottom;
+    }
+    #item4 {
+        position: polar;
+		polar-angle: 315deg;
+		polar-distance: 100%;	
+		polar-anchor: left top;
+    }
+&lt;/style>
+&lt;body>
+    &lt;div id="item1">&lt;/div>
+    &lt;div id="item2">&lt;/div>
+    &lt;div id="item3">&lt;/div>
+	&lt;div id="item4">&lt;/div>
+&lt;/body>
+</pre>
+<div style="width: 400px; text-align: center">
+	<img alt="An image of four elements with different anchor points positioned in a containing block" src="images/polar_anchor.png" style="width: 200px; border: 1px #AAA solid; text-align: center"/>
+	<p class="caption">An example of 'polar-anchor'</p>
+</div>
+</div>
+<p class="issue">
+Is ‘auto’ needed for value of ‘polar-anchor’?
+</p>
+<p class="issue">
+How to solve overflowing when an anchor point is set to ‘top’, polar-angle value is 0deg and polar-distance is equal to the distance from center to edge of containing block?
+</p>