[css-backgrounds] calc() values when interpolating background-position

[graouts]

I'm confused by the two interpolation WPT tests for background-position.

First, in css/css-backgrounds/animations/background-position-origin-interpolation.html:

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:

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 and 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 but all the relevant information is found in this issue as well.

[graouts]

@birtles suggested I Cc @emilio to this issue.

[graouts]

@emilio pointed out on the WebKit Slack that this is covered by #3482.