1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  width: 80px;
6  height: 100px;
7  display: inline-block;
8  border: 10px solid black;
9  background-repeat: no-repeat;
10  background-image: url(../resources/stripes-100.png),
11                    url(../resources/stripes-100.png),
12                    url(../resources/blue-100.png),
13                    url(../resources/green-100.png);
14  background-position: left top, right top, left bottom, right bottom;
15}
16.replica {
17  margin-right: 10px;
18  border-color: green;
19}
20</style>
21<body>
22<script src="../testharness/testharness.js"></script>
23<script src="../testharness/testharnessreport.js"></script>
24<script src="resources/interpolation-test.js"></script>
25<script>
26// Matched keywords in size value list.
27assertInterpolation({
28  property: 'background-size',
29  from: '0px 0px, 0px 0px, contain, cover',
30  to: '40px 40px, 40px 40px, contain, cover',
31}, [
32  {at: -0.25, is: ' 0px  0px,  0px  0px, contain, cover'},
33  {at: 0, is:     ' 0px  0px,  0px  0px, contain, cover'},
34  {at: 0.25, is:  ' 0px  0px,  0px  0px, contain, cover'},
35  {at: 0.5, is:   '40px 40px, 40px 40px, contain, cover'},
36  {at: 0.75, is:  '40px 40px, 40px 40px, contain, cover'},
37  {at: 1, is:     '40px 40px, 40px 40px, contain, cover'},
38  {at: 1.25, is:  '40px 40px, 40px 40px, contain, cover'},
39]);
40
41// Mismatched keywords in size value list.
42assertInterpolation({
43  property: 'background-size',
44  from: '0px 0px, 0px 0px, contain, cover',
45  to: '40px 40px, 40px 40px, cover, contain',
46}, [
47  {at: -0.25, is: ' 0px  0px,  0px  0px, contain, cover'},
48  {at: 0, is:     ' 0px  0px,  0px  0px, contain, cover'},
49  {at: 0.25, is:  ' 0px  0px,  0px  0px, contain, cover'},
50  {at: 0.5, is:   '40px 40px, 40px 40px, cover, contain'},
51  {at: 0.75, is:  '40px 40px, 40px 40px, cover, contain'},
52  {at: 1, is:     '40px 40px, 40px 40px, cover, contain'},
53  {at: 1.25, is:  '40px 40px, 40px 40px, cover, contain'},
54]);
55
56// Equal number of size values as background images.
57assertInterpolation({
58  property: 'background-size',
59  from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
60  to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
61}, [
62  {at: -0.25, is: ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
63  {at: 0, is:     ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
64  {at: 0.25, is:  ' 5px  5px, 10px 10px, 15px 15px,  25px  25px'},
65  {at: 0.5, is:   '10px 10px, 20px 20px, 30px 30px,  50px  50px'},
66  {at: 0.75, is:  '15px 15px, 30px 30px, 45px 45px,  75px  75px'},
67  {at: 1, is:     '20px 20px, 40px 40px, 60px 60px, 100px 100px'},
68  {at: 1.25, is:  '25px 25px, 50px 50px, 75px 75px, 125px 125px'},
69]);
70
71// Single size value repeated over background images.
72assertInterpolation({
73  property: 'background-size',
74  from: '0px 0px',
75  to: '80px 80px',
76}, [
77  {at: -0.25, is: '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
78  {at: 0, is:     '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
79  {at: 0.25, is:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
80  {at: 0.5, is:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
81  {at: 0.75, is:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
82  {at: 1, is:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
83  {at: 1.25, is:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
84]);
85
86// Mismatched numbers of size values.
87assertInterpolation({
88  property: 'background-size',
89  from: '0px 0px, 80px 0px',
90  to: '40px 40px, 80px 80px, 0px 80px',
91}, [
92  {at: -0.25, is: ' 0px  0px, 80px   0px, 0px   0px, 90px  0px'},
93  {at: 0, is:     ' 0px  0px, 80px   0px, 0px   0px, 80px  0px'},
94  {at: 0.25, is:  '10px 10px, 80px  20px, 0px  20px, 70px 10px'},
95  {at: 0.5, is:   '20px 20px, 80px  40px, 0px  40px, 60px 20px'},
96  {at: 0.75, is:  '30px 30px, 80px  60px, 0px  60px, 50px 30px'},
97  {at: 1, is:     '40px 40px, 80px  80px, 0px  80px, 40px 40px'},
98  {at: 1.25, is:  '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
99]);
100</script>
101</body>
102