1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.container {
5  width: 100px;
6  height: 100px;
7  border: black solid 1px;
8  display: inline-block;
9  margin-right: 5px;
10  background-color: white;
11}
12.target {
13  width: 100px;
14  height: 100px;
15  background-color: black;
16}
17.replica {
18  background-color: green;
19}
20</style>
21<body>
22<template id="target-template">
23  <div class="container">
24    <div class="target"></div>
25  </div>
26</template>
27<script src="../testharness/testharness.js"></script>
28<script src="../testharness/testharnessreport.js"></script>
29<script src="resources/interpolation-test.js"></script>
30<script>
31assertInterpolation({
32  property: 'width',
33  from: '0px',
34  to: '100px'
35}, [
36  {at: -0.3, is: '0px'}, // CSS width can't be negative.
37  {at: 0, is: '0px'},
38  {at: 0.3, is: '30px'},
39  {at: 0.6, is: '60px'},
40  {at: 1, is: '100px'},
41  {at: 1.5, is: '150px'}
42]);
43assertInterpolation({
44  property: 'width',
45  from: '10px',
46  to: '100%'
47}, [
48  {at: -0.3, is: '0px'}, // CSS width can't be negative.
49  {at: 0, is: '10px'},
50  {at: 0.3, is: '37px'},
51  {at: 0.6, is: '64px'},
52  {at: 1, is: '100px'},
53  {at: 1.5, is: '145px'}
54]);
55</script>
56</body>
57