[css-shapes-1] The interpolation for at <position> when it is omitted

[BorisChiou]

This is the follow-up issue per my comment in #8695 (comment). Per #8695, we omit the at <position> when it was omitted by the author, for serialization. So how about the interpolation? I think there are two different scenarios:

1. offset-path: the default at <position> depends on offset-position, so if one of the animation value doesn't specify at <position>, e.g. ellipse(10% 10%) -> ellipse(40% 50% at 25% 25%), I expect they can not be interpolated.
2. clip-path, shape-outside, and others: per spec, this defaults to center if omitted. So the used value is center. However, if we would like to do interpolation for the same case, i.e. ellipse(10% 10%) -> ellipse(40% 50% at 25% 25%), should we add the default value for interpolation? In the case, the start value becomes ellipse(10% 10% at 50% 50%), and we still can do interpolation between them. These properties have been shipped, and so we don't have to worry about breaking the existing websites because they are still interpolatable. However, the conversion may change the serialization of the start value. This means, at 0%, getComputedStyle(div).clipPath returns ellipse(10% 10% at 50% 50%), instead of ellipse(10% 10%), during the animation. Perhaps this is fine and I'm OK with this.

The 1st scenario is straightforward. The omitted at <position> cannot be interpolated with the specified at <position>. So the test case looks like this:

test_no_interpolation({
  property: 'offset-path',
  from: 'ellipse(10% 10%)',
  to: 'ellipse(40% 50% at 25% 25%)',
});

About the 2nd scenario, I expect we still want to convert the omit at <position> to the default center for properties which use the standard default center if author omits it, for interpolation. So I expect the test case looks like this:

test_interpolation({
  property: 'clip-path',
  from: 'ellipse(10% 10%)',
  to: 'ellipse(40% 40% at 20% 20%)',
}, [
  {at: 0, expect: 'ellipse(10% 10% at 50% 50%)'},
  {at: 0.5, expect: 'ellipse(25% 20% at 35% 35%)'},
  {at: 1, expect: 'ellipse(40% 40% at 20% 20%)'},
]);

// We add default center, 50% 50%, even if both "from" value and "to" value don't specify at <position>. Or should we omit all of them?
test_interpolation({
  property: 'clip-path',
  from: 'ellipse(10% 10%)',
  to: 'ellipse(40% 40%)',
}, [
  {at: 0, expect: 'ellipse(10% 10% at 50% 50%)'},
  {at: 0.5, expect: 'ellipse(25% 25% at 50% 50%)'},
  {at: 1, expect: 'ellipse(40% 40% at 50% 50%)'},
]);

Do these test cases make sense?

[nt1m]

We should either make it non-interpolable, or always include the position. I chose to do the latter for WebKit, but either is fine.