[csswg-drafts] [css-shapes-1] The interpolation for at <position> when it is omitted (#9068)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes-1] The interpolation for at <position> when it is omitted ==
This is the follow-up issue per my comment in https://github.com/w3c/csswg-drafts/issues/8695#issuecomment-1581500094. Per https://github.com/w3c/csswg-drafts/issues/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](https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes), 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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9068 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 14 July 2023 16:53:27 UTC