1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  width: 80px;
6  height: 80px;
7  display: inline-block;
8  background-color: black;
9  margin-right: 5px;
10}
11.replica {
12  background-color: green;
13  margin-right: 15px;
14}
15</style>
16<body>
17<script src="../testharness/testharness.js"></script>
18<script src="../testharness/testharnessreport.js"></script>
19<script src="resources/interpolation-test.js"></script>
20<script>
21assertInterpolation({
22  property: 'border-radius',
23  from: '10px',
24  to: '50px'
25}, [
26  {at: -0.3, is: '0px'}, // CSS border-radius can't be negative.
27  {at: 0, is: '10px'},
28  {at: 0.3, is: '22px'},
29  {at: 0.6, is: '34px'},
30  {at: 1, is: '50px'},
31  {at: 1.5, is: '70px'},
32]);
33assertInterpolation({
34  property: 'border-radius',
35  from: '10px',
36  to: '100%'
37}, [
38  // These expectations are expected to fail on the current animation engine
39  // with different (but equivalent) calc expressions.
40  {at: -0.3, is: 'calc(13px + -30%)'},
41  {at: 0, is: '10px'},
42  {at: 0.3, is: 'calc(7px + 30%)'},
43  {at: 0.6, is: 'calc(4px + 60%)'},
44  {at: 1, is: '100%'},
45  {at: 1.5, is: 'calc(-5px + 150%)'},
46]);
47</script>
48</body>
49