1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  width: 100px;
6  height: 100px;
7  background-color: black;
8  display: inline-block;
9  border: 10px;
10  border-image-source: linear-gradient(45deg, red, blue, green);
11}
12.replica {
13  background-color: green;
14  margin-right: 2px;
15}
16</style>
17<body>
18<script src="../testharness/testharness.js"></script>
19<script src="../testharness/testharnessreport.js"></script>
20<script src="resources/interpolation-test.js"></script>
21<script>
22assertInterpolation({
23  property: 'border-image-width',
24  from: '0px',
25  to: '20px'
26}, [
27  {at: -0.3, is:   '0px'}, // CSS border-image-width can't be negative.
28  {at: 0,    is:   '0px'},
29  {at: 0.3,  is:   '6px'},
30  {at: 0.6,  is:  '12px'},
31  {at: 1,    is:  '20px'},
32  {at: 1.5,  is:  '30px'},
33  {at: 5,    is: '100px'},
34  {at: 10,   is: '200px'}
35]);
36assertInterpolation({
37  property: 'border-image-width',
38  from: '0%',
39  to: '20%'
40}, [
41  {at: -0.3, is:   '0%'}, // CSS border-image-width can't be negative.
42  {at: 0,    is:   '0%'},
43  {at: 0.3,  is:   '6%'},
44  {at: 0.6,  is:  '12%'},
45  {at: 1,    is:  '20%'},
46  {at: 1.5,  is:  '30%'},
47  {at: 5,    is: '100%'},
48  {at: 10,   is: '200%'}
49]);
50assertInterpolation({
51  property: 'border-image-width',
52  from: '0',
53  to: '20'
54}, [
55  {at: -0.3, is:   '0'}, // CSS border-image-width can't be negative.
56  {at: 0,    is:   '0'},
57  {at: 0.3,  is:   '6'},
58  {at: 0.6,  is:  '12'},
59  {at: 1,    is:  '20'},
60  {at: 1.5,  is:  '30'},
61  {at: 5,    is: '100'},
62  {at: 10,   is: '200'}
63]);
64assertInterpolation({
65  property: 'border-image-width',
66  from: '10px 20% 30 40px',
67  to: '80px 70% 60 50px'
68}, [
69  {at: -0.3, is:   '0px   5%  21  37px'}, // CSS border-image-width can't be negative.
70  {at: 0,    is:  '10px  20%  30  40px'},
71  {at: 0.3,  is:  '31px  35%  39  43px'},
72  {at: 0.6,  is:  '52px  50%  48  46px'},
73  {at: 1,    is:  '80px  70%  60  50px'},
74  {at: 1.5,  is: '115px  95%  75  55px'},
75  {at: 5,    is: '360px 270% 180  90px'},
76  {at: 10,   is: '710px 520% 330 140px'}
77]);
78assertInterpolation({
79  property: 'border-image-width',
80  from: '10%',
81  to: '20px'
82}, [
83  // Percentages are relative to the size of the border image area, which is 120px.
84  {at: -0.3, is: 'calc(13% + -6px)'}, // Should be parsed as 16px - 6px = 10px
85  {at: 0,    is: '10%'},              // Should be parsed as 12px
86  {at: 0.3,  is: 'calc(7% + 6px)'},   // Should be parsed as 8px + 6px = 14px
87  {at: 0.6,  is: 'calc(4% + 12px)'},  // Should be parsed as 5px + 12px = 17px
88  {at: 1,    is: '20px'},
89  {at: 1.5,  is: 'calc(-5% + 30px)'}, // Should be parsed as -6px + 30px = 24px
90]);
91assertInterpolation({
92  property: 'border-image-width',
93  from: '10px',
94  to: '20%'
95}, [
96  // Percentages are relative to the size of the border image area, which is 120px.
97  {at: -0.3, is: 'calc(13px + -6%)'}, // Should be parsed as 13px - 7px = 6px
98  {at: 0,    is: '10px'},
99  {at: 0.3,  is: 'calc(7px + 6%)'},   // Should be parsed as 7px + 7px = 14px
100  {at: 0.6,  is: 'calc(4px + 12%)'},  // Should be parsed as 4px + 14px = 18px
101  {at: 1,    is: '20%'},              // Should be parsed as 24px
102  {at: 1.5,  is: 'calc(-5px + 30%)'}, // Should be parsed as -5px + 36px = 31px
103]);
104
105assertInterpolation({
106  property: 'border-image-width',
107  from: '10px',
108  to: '20'
109}, [
110  {at: -0.3, is: '10px'},
111  {at: 0,    is: '10px'},
112  {at: 0.3,  is: '10px'},
113  {at: 0.6,  is: '20'},
114  {at: 1,    is: '20'},
115  {at: 1.5,  is: '20'},
116]);
117assertInterpolation({
118  property: 'border-image-width',
119  from: '10',
120  to: '20px'
121}, [
122  {at: -0.3, is: '10'},
123  {at: 0,    is: '10'},
124  {at: 0.3,  is: '10'},
125  {at: 0.6,  is: '20px'},
126  {at: 1,    is: '20px'},
127  {at: 1.5,  is: '20px'},
128]);
129assertInterpolation({
130  property: 'border-image-width',
131  from: '10%',
132  to: '20'
133}, [
134  {at: -0.3, is: '10%'},
135  {at: 0,    is: '10%'},
136  {at: 0.3,  is: '10%'},
137  {at: 0.6,  is: '20'},
138  {at: 1,    is: '20'},
139  {at: 1.5,  is: '20'},
140]);
141assertInterpolation({
142  property: 'border-image-width',
143  from: '10',
144  to: '20%'
145}, [
146  {at: -0.3, is: '10'},
147  {at: 0,    is: '10'},
148  {at: 0.3,  is: '10'},
149  {at: 0.6,  is: '20%'},
150  {at: 1,    is: '20%'},
151  {at: 1.5,  is: '20%'},
152]);
153</script>
154</body>
155