[css-round-display] Add 'auto' to 'polar-anchor' and make it as initial value

Hi,
I think we need 'auto' value for 'polar-anchor' [1].

Even where a property is not specifically set on an element, the element will often have a default value for that property.
In the specification, default values are referred to as initial values.
In CSS Round Display, the initial value for 'polar-anchor' is 'center'.
Then, if an element is positioned without specifying 'polar-anchor', where would the representative point of the element be?

When I suggested 'polar-anchor' for CSS Round Display, it could be used only in polar coordinates.
After the CSSWG F2F at Sydney, it becomes to be used also in Cartesian coordinates.

Therefore the representative point of an element will be the center point of it even if 'polar-anchor' is not specified to the element.
And it should be the same whether the element is in Cartesian coordinates or in polar coordinates.
But that's against the rules of the box positioning.

This problem can be solved when 'polar-anchor' can have 'auto' and the initial value of 'polar-anchor' is 'auto'.
'auto' works as:
   - 'auto' becomes 'top left' if an element is positioned in Cartesian coordinates (specifying Top/Right/Bottom/Left).
   - 'auto' becomes 'center' if an element is positioned in polar coordinates (specifying 'polar-distance' or 'polar-angle').

For example, if there is an element, #item like below: 

#item {
   position: absolute;
   polar-origin: center;
   width: 50px;
   height: 50px;
   background-color: red;
}

#item is positioned in the Cartesian coordinate system, so the representative point for positioning #item is at the top left corner.
The top left corner of #item is positioned at the center of the containing block.

And when 'polar-distance' is specified on #item, 

#item {
   polar-origin: center;
   polar-distance: 0px;
   width: 50px;
   height: 50px;
   background-color: red;
}

Then the coordinate system for positioning #item changes to polar coordinates.
In this case, the representative point for #item is the center point of it. Therefore the center of #item is positioned at the center of the containing block.

Adding 'auto' value to 'polar-anchor' makes things clear when figuring out use cases about 'polar-anchor' and implementing 'polar-anchor'.

Thanks,
Jihye

[1] https://www.w3.org/TR/css-round-display-1/#polar-anchor-property

Received on Tuesday, 19 April 2016 07:47:25 UTC