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  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-slice',
24  from: '0%',
25  to: '50%',
26}, [
27  {at: -0.3, is: '0%'}, // CSS border-image-slice can't be negative.
28  {at: 0, is: '0%'},
29  {at: 0.1, is: '5%'},
30  {at: 0.2, is: '10%'},
31  {at: 0.3, is: '15%'},
32  {at: 0.4, is: '20%'},
33  {at: 0.5, is: '25%'},
34  {at: 0.6, is: '30%'},
35  {at: 0.7, is: '35%'},
36  {at: 0.8, is: '40%'},
37  {at: 0.9, is: '45%'},
38  {at: 1, is: '50%'},
39  {at: 1.5, is: '75%'},
40  {at: 10, is: '500%'}
41]);
42</script>
43</body>
44