[csswg-drafts] [css-backgrounds] `calc()` values when interpolating `background-position` (#6197)

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

== [css-backgrounds] `calc()` values when interpolating `background-position` ==
I'm confused by the two interpolation WPT tests for `background-position`.

First, in [css/css-backgrounds/animations/background-position-origin-interpolation.html](https://wpt.fyi/results/css/css-backgrounds/animations/background-position-origin-interpolation.html):

```javascript
test_interpolation({
  property: 'background-position',
  from: 'initial',
  to: 'left 20px top 20px',
}, [
  {at: 0, expect: '0% 0%'},
  {at: 0.25, expect: '5px 5px'},
  {at: 0.5, expect: '10px 10px'},
  {at: 0.75, expect: '15px 15px'},
  {at: 1, expect: '20px 20px'},
]);
```

Chrome passes this test while Firefox yields `calc()` values with an addition with `0%`, for instance `calc(0 % + 10px) calc(0% + 10px)` for the `0.5` case. Safari fails in a different way but I have a pending WebKit fix that would produce the same result as Firefox.

Then, consider [css/css-backgrounds/animations/background-position-interpolation.html](https://wpt.fyi/results/css/css-backgrounds/animations/background-position-interpolation.html):

```javascript
test_interpolation({
  property: 'background-position',
  from: 'initial',
  to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
}, [
  {at: -0.25, expect: 'calc(0% - 20px)  calc(0% - 20px),  calc(0% - 20px)  calc(0% - 20px),  calc(0% - 20px)  calc(0% - 20px),  calc(0% - 20px)  calc(0% - 20px)'},
  {at: 0, expect:     '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
  {at: 0.25, expect:  'calc(0% + 20px)  calc(0% + 20px),  calc(0% + 20px)  calc(0% + 20px),  calc(0% + 20px)  calc(0% + 20px),  calc(0% + 20px)  calc(0% + 20px)'},
  {at: 0.5, expect:   'calc(0% + 40px)  calc(0% + 40px),  calc(0% + 40px)  calc(0% + 40px),  calc(0% + 40px)  calc(0% + 40px),  calc(0% + 40px)  calc(0% + 40px)'},
  {at: 0.75, expect:  'calc(0% + 60px)  calc(0% + 60px),  calc(0% + 60px)  calc(0% + 60px),  calc(0% + 60px)  calc(0% + 60px),  calc(0% + 60px)  calc(0% + 60px)'},
  {at: 1, expect:     'calc(0% + 80px)  calc(0% + 80px),  calc(0% + 80px)  calc(0% + 80px),  calc(0% + 80px)  calc(0% + 80px),  calc(0% + 80px)  calc(0% + 80px)'},
  {at: 1.25, expect:  'calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px), calc(0% + 100px) calc(0% + 100px)'},
]);
```

There, Firefox and Chrome both pass the test, and my pending patch in WebKit also passes it.

Is there spec wording anywhere that would support this difference?

As far as WebKit is concerned, I can explain the behavior: since [`left`](https://drafts.csswg.org/css-backgrounds-3/#valdef-background-position-left) and [`top`](https://drafts.csswg.org/css-backgrounds-3/#valdef-background-position-top) keywords compute to 0%, we blend between a percentage and a dimension and yield `calc()` values. I imagine Chrome might treat these values differently due to their origin as keywords, but I'm not finding wording in the spec to support this approach.

_Prior discussion about this with @birtles and @flackr can be found in an [Animation at work Slack thread](https://animationatwork.slack.com/archives/C0M0JAC7P/p1617896371000900) but all the relevant information is found in this issue as well._

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


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

Received on Friday, 9 April 2021 07:44:54 UTC