1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  width: 100px;
6  height: 100px;
7  display: inline-block;
8  border: 10px solid black;
9  background-repeat: no-repeat;
10}
11.replica {
12  border-color: green;
13  margin-right: 2px;
14}
15</style>
16<body>
17<script src="../testharness/testharness.js"></script>
18<script src="../testharness/testharnessreport.js"></script>
19<script src="resources/interpolation-test.js"></script>
20<script>
21// Image to image
22var from = 'url(../resources/blue-100.png)';
23var to = 'url(../resources/green-100.png)';
24assertInterpolation({
25  property: 'background-image',
26  from: from,
27  to: to,
28}, [
29  {at: -0.3, is: from},
30  {at: 0, is: from},
31  {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
32  {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
33  {at: 1, is: to},
34  {at: 1.5, is: to},
35]);
36
37// Image to gradient
38from = 'url(../resources/blue-100.png)';
39to = 'linear-gradient(45deg, blue, orange)';
40assertInterpolation({
41  property: 'background-image',
42  from: from,
43  to: to,
44}, [
45  {at: -0.3, is: from},
46  {at: 0, is: from},
47  {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
48  {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
49  {at: 1, is: to},
50  {at: 1.5, is: to},
51]);
52
53// Gradient to gradient
54from = 'linear-gradient(-45deg, red, yellow)';
55to = 'linear-gradient(45deg, blue, orange)';
56assertInterpolation({
57  property: 'background-image',
58  from: from,
59  to: to,
60}, [
61  {at: -0.3, is: from},
62  {at: 0, is: from},
63  {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
64  {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
65  {at: 1, is: to},
66  {at: 1.5, is: to},
67]);
68
69// Keyword to image
70from = 'none';
71to = 'url(../resources/green-100.png)';
72assertInterpolation({
73  property: 'background-image',
74  from: from,
75  to: to,
76}, [
77  {at: -0.3, is: from},
78  {at: 0, is: from},
79  {at: 0.3, is: from},
80  {at: 0.6, is: to},
81  {at: 1, is: to},
82  {at: 1.5, is: to},
83]);
84
85// Multiple to multiple
86var fromA = 'url(../resources/stripes-100.png)';
87var fromB = 'linear-gradient(-45deg, blue, transparent)';
88var toA = 'url(../resources/blue-100.png)';
89var toB = 'url(../resources/stripes-100.png)';
90from = fromA + ', ' + fromB;
91to = toA + ', ' + toB;
92assertInterpolation({
93  property: 'background-image',
94  from: from,
95  to: to,
96}, [
97  {at: -0.3, is: from},
98  {at: 0, is: from},
99  {at: 0.3, is: '-webkit-cross-fade(' + fromA + ', ' + toA + ', 0.3), -webkit-cross-fade(' + fromB + ', ' + toB + ', 0.3)'},
100  {at: 0.6, is: '-webkit-cross-fade(' + fromA + ', ' + toA + ', 0.6), -webkit-cross-fade(' + fromB + ', ' + toB + ', 0.6)'},
101  {at: 1, is: to},
102  {at: 1.5, is: to},
103]);
104
105// Single to multiple
106from = 'url(../resources/blue-100.png)';
107var toA = 'url(../resources/stripes-100.png)';
108var toB = 'url(../resources/green-100.png)';
109to = toA + ', ' + toB;
110assertInterpolation({
111  property: 'background-image',
112  from: from,
113  to: to,
114}, [
115  // The interpolation of different numbers of background-images looks a bit strange here.
116  // Animating background-image is not specified to be possible however we do it for backwards compatibility.
117  // With this in mind we kept the implementation simple at the expense of this corner case because there is
118  // no official specification to support.
119  {at: -0.3, is: from + ', ' + from},
120  {at: 0, is: from},
121  {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + toA + ', 0.3), -webkit-cross-fade(' + from + ', ' + toB + ', 0.3)'},
122  {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + toA + ', 0.6), -webkit-cross-fade(' + from + ', ' + toB + ', 0.6)'},
123  {at: 1, is: to},
124  {at: 1.5, is: to},
125]);
126
127// Multiple mismatched types
128from = 'url(../resources/blue-100.png), none';
129to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)';
130assertInterpolation({
131  property: 'background-image',
132  from: from,
133  to: to,
134}, [
135  {at: -0.3, is: from},
136  {at: 0, is: from},
137  {at: 0.3, is: from},
138  {at: 0.6, is: to},
139  {at: 1, is: to},
140  {at: 1.5, is: to},
141]);
142</script>
143</body>
144