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}
10.replica {
11  background-color: green;
12  display: inline-block;
13}
14</style>
15<body>
16<script src="../testharness/testharness.js"></script>
17<script src="../testharness/testharnessreport.js"></script>
18<script src="resources/interpolation-test.js"></script>
19<script>
20assertInterpolation({
21  property: 'vertical-align',
22  from: '0px',
23  to: '100px'
24}, [
25  {at: -0.5, is: '-50px'},
26  {at: 0, is: '0px'},
27  {at: 0.3, is: '30px'},
28  {at: 0.6, is: '60px'},
29  {at: 1, is: '100px'},
30  {at: 1.5, is: '150px'}
31]);
32
33assertInterpolation({
34  property: 'vertical-align',
35  from: '40px',
36  to: '40%'
37}, [
38  {at: -0.5, is: 'calc(60px - 20%)'},
39  {at: 0, is: '40px'},
40  {at: 0.3, is: 'calc(28px + 12%)'},
41  {at: 1, is: '40%'},
42  {at: 1.5, is: 'calc(-20px + 60%)'}
43]);
44
45assertInterpolation({
46  property: 'vertical-align',
47  from: 'super',
48  to: '40%'
49}, [
50  {at: 0, is: 'super'},
51  {at: 0.3, is: 'super'},
52  {at: 0.5, is: '40%'},
53  {at: 1, is: '40%'},
54]);
55</script>
56</body>
57