Fix background-position-interpolation.html for initial/unset

The initial/unset value for background-position is 0% 0%, so any
interpolation from/to that involves a calc with a percentage in it.  By
the calc spec, calcs with percentages in them are not resolved when
getting the computed value - even if the percentage is 0%.

The test shouldn't pass in Chrome after this CL, but does anyway as it
resolves the expected values to not include percentages either!

See https://bugzilla.mozilla.org/show_bug.cgi?id=1574913 for where we
discovered the test was wrong.

Bug: 1002430
Change-Id: Ibacb8f9e1745f13cd2fe92894ac0f8e67e3228fa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1795842Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#695277}

third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/background-position-interpolation.html

@@ -45,18 +45,20 @@ test_interpolation({
   {at: 1.25, expect:  '90px 90px, 90px 90px, 90px 90px, 90px 90px'},
 ]);
 
+// background-position's initial value is 0% 0%, and calcs involving percentages
+// are never resolved by the calc spec (even when the percentage is 0%).
 test_interpolation({
   property: 'background-position',
   from: 'initial',
   to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
 }, [
-  {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
-  {at: 0, expect:     '  0%    0% ,   0%    0% ,   0%    0% ,   0%    0% '}, // TODO(alancutter): Should these be 0px?
-  {at: 0.25, expect:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
-  {at: 0.5, expect:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
-  {at: 0.75, expect:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
-  {at: 1, expect:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
-  {at: 1.25, expect:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
+  {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)'},
 ]);
 
 test_interpolation({
@@ -73,18 +75,19 @@ test_interpolation({
   {at: 1.25, expect:  '85px 85px, 85px 85px, 85px 85px, 85px 85px'},
 ]);
 
+// background-position is not inherited, so 'unset' is equivalent to initial.
 test_interpolation({
   property: 'background-position',
   from: 'unset',
   to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
 }, [
-  {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
-  {at: 0, expect:     '  0%    0% ,   0%    0% ,   0%    0% ,   0%    0% '},
-  {at: 0.25, expect:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
-  {at: 0.5, expect:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
-  {at: 0.75, expect:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
-  {at: 1, expect:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
-  {at: 1.25, expect:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
+  {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)'},
 ]);
 
 // Test equal number of position values as background images.