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  margin: 18px;
10  border-collapse: separate;
11}
12.target td {
13  background-color: white;
14  border: 1px solid orange;
15  width: 10px;
16  height: 10px;
17}
18.replica {
19  background-color: green;
20}
21</style>
22<body>
23<template id="target-template">
24  <table>
25    <tbody>
26      <tr>
27        <td></td>
28        <td></td>
29      </tr>
30    </tbody>
31  </table>
32</template>
33<script src="../testharness/testharness.js"></script>
34<script src="../testharness/testharnessreport.js"></script>
35<script src="resources/interpolation-test.js"></script>
36<script>
37assertInterpolation({
38  property: 'border-spacing',
39  from: '0px',
40  to: '10px'
41}, [
42  {at: -0.3, is: '0px 0px'}, // Can't be negative.
43  {at: 0, is: '0px 0px'},
44  {at: 0.3, is: '3px 3px'},
45  {at: 0.6, is: '6px 6px'},
46  {at: 1, is: '10px 10px'},
47  {at: 1.5, is: '15px 15px'}
48]);
49assertInterpolation({
50  property: '-webkit-border-horizontal-spacing',
51  from: '0px',
52  to: '10px'
53}, [
54  {at: -0.3, is: '0px'}, // Can't be negative.
55  {at: 0, is: '0px'},
56  {at: 0.3, is: '3px'},
57  {at: 0.6, is: '6px'},
58  {at: 1, is: '10px'},
59  {at: 1.5, is: '15px'}
60]);
61assertInterpolation({
62  property: '-webkit-border-vertical-spacing',
63  from: '0px',
64  to: '10px'
65}, [
66  {at: -0.3, is: '0px'}, // Can't be negative.
67  {at: 0, is: '0px'},
68  {at: 0.3, is: '3px'},
69  {at: 0.6, is: '6px'},
70  {at: 1, is: '10px'},
71  {at: 1.5, is: '15px'}
72]);
73</script>
74</body>
75