1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.container {
5  position: relative;
6  width: 50px;
7  height: 50px;
8  border: black solid 2px;
9  display: inline-block;
10  margin-left: 10px;
11  margin-right: 10px;
12  background-color: white;
13}
14.target {
15  position: absolute;
16  width: 10px;
17  height: 50px;
18  background-color: black;
19}
20.replica {
21  position: absolute;
22  background-color: green;
23}
24</style>
25<body>
26<template id="target-template">
27  <div class="container">
28    <div class="target"></div>
29  </div>
30</template>
31<script src="../testharness/testharness.js"></script>
32<script src="../testharness/testharnessreport.js"></script>
33<script src="resources/interpolation-test.js"></script>
34<script>
35assertInterpolation({
36  property: 'margin-left',
37  from: 'calc(50% - 25px)',
38  to: 'calc(100% - 10px)'
39}, [
40  {at: -0.25, is: '-10px'},
41  {at: 0, is: '0px'},
42  {at: 0.25, is: '10px'},
43  {at: 0.5, is: '20px'},
44  {at: 0.75, is: '30px'},
45  {at: 1, is: '40px'},
46  {at: 1.25, is: '50px'}
47]);
48
49assertInterpolation({
50  property: 'text-indent',
51  from: 'calc(50% - 25px)',
52  to: 'calc(100% - 10px)'
53}, [
54  {at: -0.25, is: 'calc(((50% - 25px) * 1.25) + ((100% - 10px) * -0.25))'},
55  {at: 0, is: 'calc(50% - 25px)'},
56  {at: 0.25, is: 'calc(((50% - 25px) * 0.75) + ((100% - 10px) * 0.25))'},
57  {at: 0.5, is: 'calc(((50% - 25px) * 0.5) + ((100% - 10px) * 0.5))'},
58  {at: 0.75, is: 'calc(((50% - 25px) * 0.25) + ((100% - 10px) * 0.75))'},
59  {at: 1, is: 'calc(100% - 10px)'},
60  {at: 1.25, is: 'calc(((50% - 25px) * -0.25) + ((100% - 10px) * 1.25))'}
61]);
62
63assertInterpolation({
64  property: 'text-indent',
65  from: '0em',
66  to: '100px'
67}, [
68  {at: -0.25, is: '-25px'},
69  {at: 0, is: '0em'},
70  {at: 0.25, is: '25px'},
71  {at: 0.5, is: '50px'},
72  {at: 0.75, is: '75px'},
73  {at: 1, is: '100px'},
74  {at: 1.25, is: '125px'}
75]);
76
77assertInterpolation({
78  property: 'text-indent',
79  from: '0%',
80  to: '100px'
81}, [
82  {at: -0.25, is: 'calc(0% + -25px)'},
83  {at: 0, is: '0%'},
84  {at: 0.25, is: 'calc(0% + 25px)'},
85  {at: 0.5, is: 'calc(0% + 50px)'},
86  {at: 0.75, is: 'calc(0% + 75px)'},
87  {at: 1, is: '100px'},
88  {at: 1.25, is: 'calc(0% + 125px)'}
89]);
90
91</script>
92</body>
93