1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  width: 50px;
6  height: 50px;
7  background-color: black;
8  display: inline-block;
9  border: 25px;
10}
11.replica {
12  background-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// None to image
22var from = 'none';
23var to = 'url(../resources/stripes-100.png)';
24assertInterpolation({
25  property: 'border-image-source',
26  from: from,
27  to: to
28}, [
29  {at: -0.3, is: from},
30  {at: 0, is: from},
31  {at: 0.3, is: from},
32  {at: 0.6, is: to},
33  {at: 1, is: to},
34  {at: 1.5, is: to},
35]);
36
37// Image to image
38from = 'url(../resources/green-100.png)';
39to = 'url(../resources/stripes-100.png)';
40assertInterpolation({
41  property: 'border-image-source',
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// Image to gradient
54to = 'linear-gradient(45deg, blue, orange)';
55assertInterpolation({
56  property: 'border-image-source',
57  from: from,
58  to: to
59}, [
60  {at: -0.3, is: from},
61  {at: 0, is: from},
62  {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
63  {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
64  {at: 1, is: to},
65  {at: 1.5, is: to},
66]);
67
68// Gradient to gradient
69from = 'linear-gradient(-45deg, red, yellow)';
70assertInterpolation({
71  property: 'border-image-source',
72  from: from,
73  to: to
74}, [
75  {at: -0.3, is: from},
76  {at: 0, is: from},
77  {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
78  {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
79  {at: 1, is: to},
80  {at: 1.5, is: to},
81]);
82</script>
83</body>
84