Bug 1574941 [wpt PR 18547] - Port background-{color, position, size}-interpolation.html to WPT, a=testonly
authorStephen McGruer <smcgruer@chromium.org>
Mon, 26 Aug 2019 11:23:26 +0000
changeset 553906 bae26d2d80dc75d674d481a99af12c2500f33b0e
parent 553905 361984cceb6672b15cfdcb8b9db3e4b84cb4a397
child 553907 f9b465501368bb06ce08e701011b2188fd9622cc
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1574941, 18547, 900581, 1756984, 688099
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1574941 [wpt PR 18547] - Port background-{color, position, size}-interpolation.html to WPT, a=testonly Automatic update from web-platform-tests Port background-{color, position, size}-interpolation.html to WPT Bug: 900581 Change-Id: Ic4e14f4add81f40add7d80906ca402cdd1ed6334 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1756984 Reviewed-by: Xida Chen <xidachen@chromium.org> Commit-Queue: Stephen McGruer <smcgruer@chromium.org> Cr-Commit-Position: refs/heads/master@{#688099} -- wpt-commits: f656b099c019194dfaa6fbe134fb9c4b3cbcb98e wpt-pr: 18547
testing/web-platform/tests/css/css-backgrounds/animations/background-color-interpolation.html
testing/web-platform/tests/css/css-backgrounds/animations/background-position-interpolation.html
testing/web-platform/tests/css/css-backgrounds/animations/background-position-origin-interpolation.html
testing/web-platform/tests/css/css-backgrounds/animations/background-size-interpolation.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-color-interpolation.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<meta name="test" content="background-color supports animation as a <color>">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  background-color: #eee;
+}
+.target {
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  border: 2px solid black;
+  margin-right: 2px;
+  color: rgba(0, 0, 255, 0.5);
+  background-color: black;
+}
+.expected {
+  margin-right: 15px;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'background-color',
+  from: neutralKeyframe,
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgb(0, 0, 0)'},
+  {at: 0, expect: 'rgb(0, 0, 0)'},
+  {at: 0.3, expect: 'rgb(0, 38, 0)'},
+  {at: 0.6, expect: 'rgb(0, 77, 0)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'background-color',
+  from: 'initial',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgba(0, 0, 0, 0)'},
+  {at: 0, expect: 'rgba(0, 0, 0, 0)'},
+  {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'},
+  {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'background-color',
+  from: 'inherit',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgb(255, 255, 255)'},
+  {at: 0, expect: 'rgb(238, 238, 238)'},
+  {at: 0.3, expect: 'rgb(167, 205, 167)'},
+  {at: 0.6, expect: 'rgb(95, 172, 95)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 73, 0)'},
+]);
+
+test_interpolation({
+  property: 'background-color',
+  from: 'unset',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgba(0, 0, 0, 0)'},
+  {at: 0, expect: 'rgba(0, 0, 0, 0)'},
+  {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'},
+  {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'background-color',
+  from: 'white',
+  to: 'orange',
+}, [
+  {at: -0.3, expect: 'white'},
+  {at: 0, expect: 'white'},
+  {at: 0.3, expect: 'rgb(255, 228, 179)'},
+  {at: 0.6, expect: 'rgb(255, 201, 102)'},
+  {at: 1, expect: 'orange'},
+  {at: 1.5, expect: 'rgb(255, 120, 0)'},
+]);
+
+test_interpolation({
+  property: 'background-color',
+  from: 'transparent',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgba(0, 0, 0, 0)'},
+  {at: 0, expect: 'rgba(0, 0, 0, 0)'},
+  {at: 0.3, expect: 'rgba(0, 128, 0, 0.3)'},
+  {at: 0.6, expect: 'rgba(0, 128, 0, 0.6)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'background-color',
+  from: 'currentcolor',
+  to: 'rgba(0, 255, 0, 0.75)',
+}, [
+  {at: -0.5, expect: 'rgba(0, 0, 255, 0.38)'},
+  {at: 0, expect: 'rgba(0, 0, 255, 0.5)'},
+  {at: 0.25, expect: 'rgba(0, 85, 170, 0.56)'},
+  {at: 0.5, expect: 'rgba(0, 153, 102, 0.63)'},
+  {at: 0.75, expect: 'rgba(0, 208, 47, 0.69)'},
+  {at: 1, expect: 'rgba(0, 255, 0, 0.75)'},
+  {at: 1.5, expect: 'rgba(0, 255, 0, 0.88)'},
+]);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-interpolation.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
+<meta name="test" content="background-position supports animation as a repeatable list">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  background-position: 60px 60px;
+}
+.target {
+  width: 120px;
+  height: 120px;
+  display: inline-block;
+  border: 2px solid black;
+  background-repeat: no-repeat;
+  background-image: radial-gradient(20px circle at 20px 20px, red 18px, transparent),
+                    radial-gradient(20px circle at 20px 20px, yellow 18px, transparent),
+                    radial-gradient(20px circle at 20px 20px, lime 18px, transparent),
+                    radial-gradient(20px circle at 20px 20px, blue 18px, transparent);
+  background-position: 40px 40px;
+}
+.expected {
+  margin-right: 10px;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'background-position',
+  from: neutralKeyframe,
+  to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
+}, [
+  {at: -0.25, expect: '30px 30px, 30px 30px, 30px 30px, 30px 30px'},
+  {at: 0, expect:     '40px 40px, 40px 40px, 40px 40px, 40px 40px'},
+  {at: 0.25, expect:  '50px 50px, 50px 50px, 50px 50px, 50px 50px'},
+  {at: 0.5, expect:   '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
+  {at: 0.75, expect:  '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
+  {at: 1, expect:     '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
+  {at: 1.25, expect:  '90px 90px, 90px 90px, 90px 90px, 90px 90px'},
+]);
+
+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'},
+]);
+
+test_interpolation({
+  property: 'background-position',
+  from: 'inherit',
+  to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
+}, [
+  {at: -0.25, expect: '55px 55px, 55px 55px, 55px 55px, 55px 55px'},
+  {at: 0, expect:     '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
+  {at: 0.25, expect:  '65px 65px, 65px 65px, 65px 65px, 65px 65px'},
+  {at: 0.5, expect:   '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
+  {at: 0.75, expect:  '75px 75px, 75px 75px, 75px 75px, 75px 75px'},
+  {at: 1, expect:     '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
+  {at: 1.25, expect:  '85px 85px, 85px 85px, 85px 85px, 85px 85px'},
+]);
+
+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'},
+]);
+
+// Test equal number of position values as background images.
+test_interpolation({
+  property: 'background-position',
+  from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
+  to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
+}, [
+  {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
+  {at: 0, expect:     '  0px   0px,   0px   0px,   0px   0px,   0px   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'},
+]);
+
+// Test single position value repeated over background images.
+test_interpolation({
+  property: 'background-position',
+  from: 'top 0px left 0px',
+  to: 'left 80px top 80px',
+}, [
+  {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
+  {at: 0, expect:     '  0px   0px,   0px   0px,   0px   0px,   0px   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'},
+]);
+
+// Test mismatched numbers of position values.
+test_interpolation({
+  property: 'background-position',
+  from: '0px 0px, 80px 0px',
+  to: '40px 40px, 80px 80px, 0px 80px',
+}, [
+  {at: -0.25, expect: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},
+  {at: 0, expect:     '  0px   0px, 80px   0px, 0px   0px, 80px   0px'},
+  {at: 0.25, expect:  ' 10px  10px, 80px  20px, 0px  20px, 70px  10px'},
+  {at: 0.5, expect:   ' 20px  20px, 80px  40px, 0px  40px, 60px  20px'},
+  {at: 0.75, expect:  ' 30px  30px, 80px  60px, 0px  60px, 50px  30px'},
+  {at: 1, expect:     ' 40px  40px, 80px  80px, 0px  80px, 40px  40px'},
+  {at: 1.25, expect:  ' 50px  50px, 80px 100px, 0px 100px, 30px  50px'},
+]);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-position-origin-interpolation.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
+<meta name="test" content="background-position animation handles origin parameters">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  background-position: 80px 80px;
+}
+.target {
+  border: 3px solid skyblue;
+  width: 100px;
+  height: 100px;
+  background-image: linear-gradient(to right, green, green);
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position: 10px 10px;
+  display: inline-block;
+}
+
+.actual {
+  background-image: linear-gradient(to right, red, red);
+}
+.expected {
+  margin-left: -106px;
+}
+</style>
+
+<body></body>
+
+<script>
+// neutral
+test_interpolation({
+  property: 'background-position',
+  from: neutralKeyframe,
+  to: 'left 20px top 20px',
+}, [
+  {at: 0, expect: '10px 10px'},
+  {at: 0.25, expect: '12.5px 12.5px'},
+  {at: 0.5, expect: '15px 15px'},
+  {at: 0.75, expect: '17.5px 17.5px'},
+  {at: 1, expect: '20px 20px'},
+]);
+
+// initial
+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'},
+]);
+
+// inherit
+test_interpolation({
+  property: 'background-position',
+  from: 'inherit',
+  to: 'left 20px top 20px',
+}, [
+  {at: 0, expect: '80px 80px'},
+  {at: 0.25, expect: '65px 65px'},
+  {at: 0.5, expect: '50px 50px'},
+  {at: 0.75, expect: '35px 35px'},
+  {at: 1, expect: '20px 20px'},
+]);
+
+// unset
+test_interpolation({
+  property: 'background-position',
+  from: 'unset',
+  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'},
+]);
+
+// left-top
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'left 20px top 20px',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: 'calc(5px + 37.5%) calc(5px + 37.5%)'},
+  {at: 0.5, expect: 'calc(10px + 25%) calc(10px + 25%)'},
+  {at: 0.75, expect: 'calc(15px + 12.5%) calc(15px + 12.5%)'},
+  {at: 1, expect: '20px 20px'},
+]);
+
+// center-top
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'center top 20px',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: '50% calc(5px + 37.5%)'},
+  {at: 0.5, expect: '50% calc(10px + 25%)'},
+  {at: 0.75, expect: '50% calc(15px + 12.5%)'},
+  {at: 1, expect: '50% 20px'},
+]);
+
+// right-top
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'right 20px top 20px',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: 'calc(-5px + 62.5%) calc(5px + 37.5%)'},
+  {at: 0.5, expect: 'calc(-10px + 75%) calc(10px + 25%)'},
+  {at: 0.75, expect: 'calc(-15px + 87.5%) calc(15px + 12.5%)'},
+  {at: 1, expect: 'calc(-20px + 100%) 20px'},
+]);
+
+// left-center
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'left 20px center',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: 'calc(5px + 37.5%) 50%'},
+  {at: 0.5, expect: 'calc(10px + 25%) 50%'},
+  {at: 0.75, expect: 'calc(15px + 12.5%) 50%'},
+  {at: 1, expect: '20px 50%'},
+]);
+
+// center-center
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'center center',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: '50% 50%'},
+  {at: 0.5, expect: '50% 50%'},
+  {at: 0.75, expect: '50% 50%'},
+  {at: 1, expect: '50% 50%'},
+]);
+
+// right-center
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'right 20px center',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: 'calc(-5px + 62.5%) 50%'},
+  {at: 0.5, expect: 'calc(-10px + 75%) 50%'},
+  {at: 0.75, expect: 'calc(-15px + 87.5%) 50%'},
+  {at: 1, expect: 'calc(-20px + 100%) 50%'},
+]);
+
+// left-bottom
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'left 20px bottom 20px',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: 'calc(5px + 37.5%) calc(-5px + 62.5%)'},
+  {at: 0.5, expect: 'calc(10px + 25%) calc(-10px + 75%)'},
+  {at: 0.75, expect: 'calc(15px + 12.5%) calc(-15px + 87.5%)'},
+  {at: 1, expect: '20px calc(-20px + 100%)'},
+]);
+
+// center-bottom
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'center bottom 20px',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: '50% calc(-5px + 62.5%)'},
+  {at: 0.5, expect: '50% calc(-10px + 75%)'},
+  {at: 0.75, expect: '50% calc(-15px + 87.5%)'},
+  {at: 1, expect: '50% calc(-20px + 100%)'},
+]);
+
+// right-bottom
+test_interpolation({
+  property: 'background-position',
+  from: 'center center',
+  to: 'right 20px bottom 20px',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'},
+  {at: 0.5, expect: 'calc(-10px + 75%) calc(-10px + 75%)'},
+  {at: 0.75, expect: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'},
+  {at: 1, expect: 'calc(-20px + 100%) calc(-20px + 100%)'},
+]);
+
+// Single values
+test_interpolation({
+  property: 'background-position',
+  from: 'center',
+  to: 'bottom',
+}, [
+  {at: 0, expect: '50% 50%'},
+  {at: 0.25, expect: '50% 62.5%'},
+  {at: 0.5, expect: '50% 75%'},
+  {at: 0.75, expect: '50% 87.5%'},
+  {at: 1, expect: '50% 100%'},
+]);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-size-interpolation.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">
+<meta name="test" content="background-size supports animation as a repeatable list">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  background-size: 100px 100px;
+}
+.target {
+  width: 80px;
+  height: 100px;
+  display: inline-block;
+  border: 10px solid black;
+  background-repeat: no-repeat;
+  background-image: url(../resources/stripes-100.png),
+                    url(../resources/stripes-100.png),
+                    url(../resources/blue-100.png),
+                    url(../resources/green-100.png);
+  background-position: left top, right top, left bottom, right bottom;
+  background-size: 10px 10px;
+}
+.expected {
+  margin-right: 10px;
+  border-color: green;
+}
+</style>
+
+<body></body>
+
+<script>
+// neutral
+test_interpolation({
+  property: 'background-size',
+  from: neutralKeyframe,
+  to: '20px 20px, 0px 0px',
+}, [
+  {at: -0.25, expect: ' 7.5px  7.5px, 12.5px 12.5px,  7.5px  7.5px, 12.5px 12.5px'},
+  {at: 0, expect:     '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'},
+  {at: 0.25, expect:  '12.5px 12.5px,  7.5px  7.5px, 12.5px 12.5px,  7.5px  7.5px'},
+  {at: 0.5, expect:   '15.0px 15.0px,  5.0px  5.0px, 15.0px 15.0px,  5.0px  5.0px'},
+  {at: 0.75, expect:  '17.5px 17.5px,  2.5px  2.5px, 17.5px 17.5px,  2.5px  2.5px'},
+  {at: 1, expect:     '20.0px 20.0px,  0.0px  0.0px, 20.0px 20.0px,  0.0px  0.0px'},
+  {at: 1.25, expect:  '22.5px 22.5px,  0.0px  0.0px, 22.5px 22.5px,  0.0px  0.0px'},
+]);
+
+// initial
+test_no_interpolation({
+  property: 'background-size',
+  from: 'initial',
+  to: '20px 20px, 0px 0px',
+});
+
+// inherit
+test_interpolation({
+  property: 'background-size',
+  from: 'inherit',
+  to: '20px 20px, 0px 0px',
+}, [
+  {at: -0.25, expect: '120px 120px, 125px 125px, 120px 120px, 125px 125px'},
+  {at: 0, expect:     '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
+  {at: 0.25, expect:  ' 80px  80px,  75px  75px,  80px  80px,  75px  75px'},
+  {at: 0.5, expect:   ' 60px  60px,  50px  50px,  60px  60px,  50px  50px'},
+  {at: 0.75, expect:  ' 40px  40px,  25px  25px,  40px  40px,  25px  25px'},
+  {at: 1, expect:     ' 20px  20px,   0px   0px,  20px  20px,   0px   0px'},
+  {at: 1.25, expect:  '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
+]);
+
+// unset
+test_no_interpolation({
+  property: 'background-size',
+  from: 'unset',
+  to: '20px 20px, 0px 0px',
+});
+
+// Matched keywords in size value list.
+test_interpolation({
+  property: 'background-size',
+  from: '0px auto, 0px 0px, contain, cover',
+  to: '40px auto, 40px 40px, contain, cover',
+}, [
+  {at: -0.25, expect: ' 0px auto,  0px  0px, contain, cover'},
+  {at: 0, expect:     ' 0px auto,  0px  0px, contain, cover'},
+  {at: 0.25, expect:  '10px auto, 10px 10px, contain, cover'},
+  {at: 0.5, expect:   '20px auto, 20px 20px, contain, cover'},
+  {at: 0.75, expect:  '30px auto, 30px 30px, contain, cover'},
+  {at: 1, expect:     '40px auto, 40px 40px, contain, cover'},
+  {at: 1.25, expect:  '50px auto, 50px 50px, contain, cover'},
+]);
+
+// Mismatched keywords in size value list.
+test_no_interpolation({
+  property: 'background-size',
+  from: '0px 0px, 0px 0px, contain, cover',
+  to: '40px 40px, 40px 40px, cover, contain',
+});
+
+test_no_interpolation({
+  property: 'background-size',
+  from: '0px auto, 0px 0px',
+  to: 'auto 40px, 40px 40px',
+});
+
+// Equal number of size values as background images.
+test_interpolation({
+  property: 'background-size',
+  from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
+  to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
+}, [
+  {at: -0.25, expect: ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
+  {at: 0, expect:     ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
+  {at: 0.25, expect:  ' 5px  5px, 10px 10px, 15px 15px,  25px  25px'},
+  {at: 0.5, expect:   '10px 10px, 20px 20px, 30px 30px,  50px  50px'},
+  {at: 0.75, expect:  '15px 15px, 30px 30px, 45px 45px,  75px  75px'},
+  {at: 1, expect:     '20px 20px, 40px 40px, 60px 60px, 100px 100px'},
+  {at: 1.25, expect:  '25px 25px, 50px 50px, 75px 75px, 125px 125px'},
+]);
+
+// Single size value repeated over background images.
+test_interpolation({
+  property: 'background-size',
+  from: '0px 0px',
+  to: '80px 80px',
+}, [
+  {at: -0.25, expect: '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
+  {at: 0, expect:     '  0px   0px,   0px   0px,   0px   0px,   0px   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'},
+]);
+
+test_interpolation({
+  property: 'background-size',
+  from: '0px',
+  to: '80px',
+}, [
+  {at: -0.25, expect: '  0px,   0px,   0px,   0px'},
+  {at: 0, expect:     '  0px,   0px,   0px,   0px'},
+  {at: 0.25, expect:  ' 20px,  20px,  20px,  20px'},
+  {at: 0.5, expect:   ' 40px,  40px,  40px,  40px'},
+  {at: 0.75, expect:  ' 60px,  60px,  60px,  60px'},
+  {at: 1, expect:     ' 80px,  80px,  80px,  80px'},
+  {at: 1.25, expect:  '100px, 100px, 100px, 100px'},
+]);
+
+// Mismatched numbers of size values.
+test_interpolation({
+  property: 'background-size',
+  from: '0px 0px, 80px 0px',
+  to: '40px 40px, 80px 80px, 0px 80px',
+}, [
+  {at: -0.25, expect: ' 0px  0px, 80px   0px, 0px   0px, 90px  0px'},
+  {at: 0, expect:     ' 0px  0px, 80px   0px, 0px   0px, 80px  0px'},
+  {at: 0.25, expect:  '10px 10px, 80px  20px, 0px  20px, 70px 10px'},
+  {at: 0.5, expect:   '20px 20px, 80px  40px, 0px  40px, 60px 20px'},
+  {at: 0.75, expect:  '30px 30px, 80px  60px, 0px  60px, 50px 30px'},
+  {at: 1, expect:     '40px 40px, 80px  80px, 0px  80px, 40px 40px'},
+  {at: 1.25, expect:  '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
+]);
+</script>