1 files changed, 230 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html b/testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html
new file mode 100644
index 0000000000..feda6afebe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/animations/background-image-interpolation.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">
+<meta name="test" content="background-image supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  background-image: url(../resources/blue-100.png);
+  background-size: 0 0;
+}
+.target {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  border: 10px solid black;
+  background-repeat: no-repeat;
+  background-image: url(../resources/blue-100.png);
+}
+.expected {
+  border-color: green;
+  margin-right: 2px;
+}
+</style>
+
+<body>
+<script>
+// Neutral to image
+var from = 'url(../resources/blue-100.png)';
+var to = 'url(../resources/green-100.png)';
+test_interpolation({
+  property: 'background-image',
+  from: neutralKeyframe,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// initial to image
+to = 'url(../resources/green-100.png)';
+test_interpolation({
+  property: 'background-image',
+  from: 'initial',
+  to: to,
+}, [
+  {at: -0.3, expect: 'none'},
+  {at: 0, expect: 'none'},
+  {at: 0.3, expect: 'none'},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// inherit to image
+from = 'url(../resources/blue-100.png)';
+to = 'url(../resources/green-100.png)';
+test_interpolation({
+  property: 'background-image',
+  from: 'inherit',
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// unset to image
+test_interpolation({
+  property: 'background-image',
+  from: 'unset',
+  to: to,
+}, [
+  {at: -0.3, expect: 'none'},
+  {at: 0, expect: 'none'},
+  {at: 0.3, expect: 'none'},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Image to image
+from = 'url(../resources/blue-100.png)';
+to = 'url(../resources/green-100.png)';
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Image to gradient
+from = 'url(../resources/blue-100.png)';
+to = 'linear-gradient(45deg, blue, orange)';
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Image to crossfade
+from = 'url(../resources/blue-100.png)';
+to = 'cross-fade(url(../resources/green-100.png), url(../resources/stripes-100.png), 0.5)';
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Gradient to gradient
+from = 'linear-gradient(-45deg, red, yellow)';
+to = 'linear-gradient(45deg, blue, orange)';
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Keyword to image
+from = 'none';
+to = 'url(../resources/green-100.png)';
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Multiple to multiple
+var fromA = 'url(../resources/stripes-100.png)';
+var fromB = 'url(../resources/blue-100.png)';
+var toA = 'url(../resources/blue-100.png)';
+var toB = 'url(../resources/stripes-100.png)';
+from = fromA + ', ' + fromB;
+to = toA + ', ' + toB;
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Single to multiple
+from = 'url(../resources/blue-100.png)';
+var toA = 'url(../resources/stripes-100.png)';
+var toB = 'url(../resources/green-100.png)';
+to = toA + ', ' + toB;
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  // The interpolation of different numbers of background-images looks a bit strange here.
+  // Animating background-image is not specified to be possible however we do it for backwards compatibility.
+  // With this in mind we kept the implementation simple at the expense of this corner case because there is
+  // no official specification to support.
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+
+// Multiple mismatched types
+from = 'url(../resources/blue-100.png), none';
+to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)';
+test_interpolation({
+  property: 'background-image',
+  from: from,
+  to: to,
+}, [
+  {at: -0.3, expect: from},
+  {at: 0, expect: from},
+  {at: 0.3, expect: from},
+  {at: 0.6, expect: to},
+  {at: 1, expect: to},
+  {at: 1.5, expect: to},
+]);
+</script>
+</body>