RE: [css-round-display][motion-path] Integrate polar positioning to the motion path spec

> On Jun 14, 2016, at 1:12 AM, Brad Kemper <[email protected]> wrote:
> > On Jun 13, 2016, at 2:00 AM, Jihye Hong <[email protected]> wrote:
> >
> > At the SF f2f, there was an resolution [1][2] to integrate polar positioning to Motion Path [3].
> > Some properties from CSS Round Display are merged into Motion Path:
> >   * polar-angle + motion-path => offset-path
> >   * polar-distance + motion-offset => offset-distance
> >   * polar-origin => offset-origin
> >   * polar-anchor => offset-anchor
> >
> > My extra proposal(Not included in the resolution):
> >   * 2d rotation transform extension + motion-rotation => offset-rotation
> 
> I think that was discussed. There is still some controversy over whether this needs to be a separate property, or
still integrated into transforms.
> 
> If we have a 'offset-rotation' ins treat of using transforms, then we also need something like
'offset-rotation-anchor', the equivalent of 'motion-origin' that is mentioned in the motion path FPWG.
> We can't really use offset-anchor for both without getting unwanted side effects.

'offset-anchor' in the CSS Round Display works as 'motion-origin'. It specifies the origin of the element. 
In the plane image [5], the position of a red dot is decided by 'offset-anchor'.
This was the part of the resolution at the SF f2f [6].
 
> I didn't see anything in there about 'offset-position', which was part of the same resolution. It is supposed to be a
means of positioning that is similar to how background-position works.
> You have 'offset-anchor' described as "Defines an origin of the element in the path." 
> But as discussed, it should work with offset-position to set the alignment point of the element ('auto' for
'offset-position:<percentage>' would copy percentages from offset-position)
> to set the alignment point in the element to align to the offset-position point in the containing block).

The name of the property which specifies the initial position of the path was suggested 'offset-origin' or
'offset-position' [2].
As you mentioned, when the property is specified with 'offset-anchor' to an element, it works similar to how
'background-position' works.
I wrote the property as 'offset-origin' instead of 'offset-position'.

For example,

<style>
#one {
  offset-origin: top left;
  offset-anchor: auto;
  offset-path: 90deg;
  offset-distance: 0px;
}
#two {
  offset-origin: top right;
  offset-anchor: auto;
  offset-path: 90deg;
  offset-distance: 0px;
}
#three {
  offset-origin: top left;
  offset-anchor: top right;
  offset-path: 90deg;
  offset-distance: 0px;
}
</style>

<div style="width: 100px; height: 100px;">
  <div id="one" style="width: 50px; height: 50px;"></div>
  <div id="two" style="width: 50px; height: 50px;"></div>
  <div id="three" style="width: 50px; height: 50px;"></div>
</div>

For #one, its upper left corner is positioned to the upper left corner of the containing block.
The upper right corner of #two is positioned to the upper right corner of the containing block.
But upper right corner of #three is positioned to the upper left corner of the containing block.

> > 2. Need for 'offset-origin'
> >
> > 'offset-origin' can set the initial position of the path.
> > But in the specification of 'offset-path', the value types except for <angle> already define the initial position
for each case.
> > Therefore, 'offset-origin' is useful only when 'offset-path' is specified with <angle> value type.
> 
> It isn't useful for angle values. The origin of the element is wherever other positioning properties (including 'top',
etc. or 'offset-position') put it.

I guess maybe you are confusing between 'offset-origin' and 'offset-anchor'.
'offset-anchor' sets the origin of the element.

'offset-origin'('offset-position') doesn't matter with the origin of the element. It decides the initial position of the
path.
When 'offset-origin' and 'offset-path' with <angle> is specified in an element, the position given by 'offset-origin'
works as the origin point of the coordinate system.


> If all those positioning properties are 'auto', then the origin is wherever the element would have been if it wasn't
positioned. 
> When you want the origin to be in the middle of the containing block, you would use 'offset-position: 50% 50%' (or
'offset-position: center', etc. that computes to the same).

Yes, 'offset-position' above is the same with 'offset-origin' that I mentioned and in the latest CSS Round Display spec
draft.

> > There could be some solution about this:
> >  i. Keep 'offset-origin' and make it works only when <angle> type value is given to 'offset-path'.
> >  ii. Define the initial position of the path as the center of the containing block when the path is defined by
<angle> value and drop 'offset-origin'
> >
> > Which would be better?
> 
> iii. Drop offset-origin. It's useless. I think the minutes might be wrong or perhaps fantasai misspoke when she
mentioned it, because everywhere it's mentioned it should be 'offset-position'. 
> The similar 'background-position' doesn't have it need anything like offset-origin (background-origin is unrelated).

I thought the property was mentioned as 'offset-origin' more than 'offset-position', so I wrote the spec draft with
'offset-origin'.
But I'm open to change the name if 'offset-position' is more appropriate for it.

> > 3. The direction where 0deg points
> > When 'offset-path' is given to 0deg, the path points the direction of the positive y-axis.
> > But in the specification of 'motion-rotation', 0deg means the right side in the direction of the positive x-axis. I
know that this is the
> > common way in mathematical theory but in the CSS Value Spec [5], 0deg is defined as the upside direction.
> > So I think it would be better to specify 0deg as the direction of the positive y-axis.
> 
> Yes. All other specs that use angles, including linear-gradient, have 0deg = north.
> 
> You should clarify the airplane example by showing what the unrotated plane looks like (with its nose at the top).

Thank you for the opinion. I added an example about the plane positioned on the path without rotation.

= Jihye

[1] https://lists.w3.org/Archives/Public/www-style/2016May/0233.html 
[2] https://lists.w3.org/Archives/Public/www-archive/2016May/att-0000/whiteboard.jpg 
[3] https://drafts.fxtf.org/motion-1/ 
[4] https://drafts.csswg.org/css-round-display/#positioning-content 
[5] https://drafts.csswg.org/css-round-display/images/plane.svg 
[6] https://log.csswg.org/irc.w3.org/css/2016-05-10/#e683750