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