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  margin-right: 50px;
11  border-image-slice: 30%;
12  background-clip: content-box;
13  border-image-source: linear-gradient(45deg, pink, blue, white, black, green);
14}
15.replica {
16  background-color: green;
17}
18</style>
19<body>
20<script src="../testharness/testharness.js"></script>
21<script src="../testharness/testharnessreport.js"></script>
22<script src="resources/interpolation-test.js"></script>
23<script>
24assertInterpolation({
25  property: 'border-image-outset',
26  from: '0px',
27  to: '5px',
28}, [
29  {at: -0.3, is: '0px'}, // CSS border-image-outset can't be negative.
30  {at: 0, is: '0px'},
31  {at: 0.1, is: '0.5px'},
32  {at: 0.2, is: '1px'},
33  {at: 0.3, is: '1.5px'},
34  {at: 0.4, is: '2px'},
35  {at: 0.5, is: '2.5px'},
36  {at: 0.6, is: '3px'},
37  {at: 0.7, is: '3.5px'},
38  {at: 0.8, is: '4px'},
39  {at: 0.9, is: '4.5px'},
40  {at: 1, is: '5px'},
41  {at: 1.5, is: '7.5px'},
42  {at: 10, is: '50px'}
43]);
44assertInterpolation({
45  property: 'border-image-outset',
46  from: '0',
47  to: '5',
48}, [
49  {at: -0.3, is: '0'}, // CSS border-image-outset can't be negative.
50  {at: 0, is: '0'},
51  {at: 0.1, is: '0.5'},
52  {at: 0.2, is: '1'},
53  {at: 0.3, is: '1.5'},
54  {at: 0.4, is: '2'},
55  {at: 0.5, is: '2.5'},
56  {at: 0.6, is: '3'},
57  {at: 0.7, is: '3.5'},
58  {at: 0.8, is: '4'},
59  {at: 0.9, is: '4.5'},
60  {at: 1, is: '5'},
61  {at: 1.5, is: '7.5'},
62  {at: 10, is: '50'}
63]);
64</script>
65</body>
66