1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4.target {
5  color: white;
6  width: 100px;
7  height: 100px;
8  background-color: black;
9  display: inline-block;
10  overflow: hidden;
11}
12.replica {
13  background-color: green;
14}
15.target div {
16  width: 10px;
17  height: 10px;
18  display: inline-block;
19  background: orange;
20  margin: 1px;
21}
22.test {
23  overflow: hidden;
24}
25</style>
26<body>
27<template id="target-template">
28<div></div>
29</template>
30<script src="../testharness/testharness.js"></script>
31<script src="../testharness/testharnessreport.js"></script>
32<script src="resources/interpolation-test.js"></script>
33<script>
34
35assertInterpolation({
36  property: 'transform',
37  prefixedProperty: ['-webkit-transform'],
38  from: 'rotate(30deg)',
39  to: 'rotate(330deg)'
40}, [
41  {at: -1, is: 'rotate(-270deg)'},
42  {at: 0, is: 'rotate(30deg)'},
43  {at: 0.25, is: 'rotate(105deg)'},
44  {at: 0.75, is: 'rotate(255deg)'},
45  {at: 1, is: 'rotate(330deg)'},
46  {at: 2, is: 'rotate(630deg)'},
47]);
48assertInterpolation({
49  property: 'transform',
50  prefixedProperty: ['-webkit-transform'],
51  from: 'rotateX(0deg)',
52  to: 'rotateX(700deg)'
53}, [
54  {at: -1, is: 'rotateX(-700deg)'},
55  {at: 0, is: 'rotateX(0deg)'},
56  {at: 0.25, is: 'rotateX(175deg)'},
57  {at: 0.75, is: 'rotateX(525deg)'},
58  {at: 1, is: 'rotateX(700deg)'},
59  {at: 2, is: 'rotateX(1400deg)'},
60]);
61assertInterpolation({
62  property: 'transform',
63  prefixedProperty: ['-webkit-transform'],
64  from: 'rotateY(0deg)',
65  to: 'rotateY(800deg)'
66}, [
67  {at: -1, is: 'rotateY(-800deg)'},
68  {at: 0, is: 'rotateY(0deg)'},
69  {at: 0.25, is: 'rotateY(200deg)'},
70  {at: 0.75, is: 'rotateY(600deg)'},
71  {at: 1, is: 'rotateY(800deg)'},
72  {at: 2, is: 'rotateY(1600deg)'},
73]);
74assertInterpolation({
75  property: 'transform',
76  prefixedProperty: ['-webkit-transform'],
77  from: 'rotateZ(0deg)',
78  to: 'rotateZ(900deg)'
79}, [
80  {at: -1, is: 'rotateZ(-900deg)'},
81  {at: 0, is: 'rotateZ(0deg)'},
82  {at: 0.25, is: 'rotateZ(225deg)'},
83  {at: 0.75, is: 'rotateZ(675deg)'},
84  {at: 1, is: 'rotateZ(900deg)'},
85  {at: 2, is: 'rotateZ(1800deg)'},
86]);
87assertInterpolation({
88  property: 'transform',
89  prefixedProperty: ['-webkit-transform'],
90  from: 'rotate3d(7, 8, 9, 100deg)',
91  to: 'rotate3d(7, 8, 9, 260deg)'
92}, [
93  {at: -1, is: 'rotate3d(7, 8, 9, -60deg)'},
94  {at: 0, is: 'rotate3d(7, 8, 9, 100deg)'},
95  {at: 0.25, is: 'rotate3d(7, 8, 9, 140deg)'},
96  {at: 0.75, is: 'rotate3d(7, 8, 9, 220deg)'},
97  {at: 1, is: 'rotate3d(7, 8, 9, 260deg)'},
98  {at: 2, is: 'rotate3d(7, 8, 9, 420deg)'},
99]);
100assertInterpolation({
101  property: 'transform',
102  prefixedProperty: ['-webkit-transform'],
103  from: 'none',
104  to: 'rotate(90deg)'
105}, [
106  {at: -1, is: 'rotate(-90deg)'},
107  {at: 0, is: 'none'},
108  {at: 0.25, is: 'rotate(22.5deg)'},
109  {at: 0.75, is: 'rotate(67.5deg)'},
110  {at: 1, is: 'rotate(90deg)'},
111  {at: 2, is: 'rotate(180deg)'},
112]);
113assertInterpolation({
114  property: 'transform',
115  prefixedProperty: ['-webkit-transform'],
116  from: 'rotate(90deg)',
117  to: 'none'
118}, [
119  {at: -1, is: 'rotate(180deg)'},
120  {at: 0, is: 'rotate(90deg)'},
121  {at: 0.25, is: 'rotate(67.5deg)'},
122  {at: 0.75, is: 'rotate(22.5deg)'},
123  {at: 1, is: 'none'},
124  {at: 2, is: 'rotate(-90deg)'},
125]);
126assertInterpolation({
127  property: 'transform',
128  prefixedProperty: ['-webkit-transform'],
129  from: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
130  to: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'
131}, [
132  {at: -1, is: 'rotateX(-700deg) rotateY(-800deg) rotateZ(-900deg)'},
133  {at: 0, is: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'},
134  {at: 0.25, is: 'rotateX(175deg) rotateY(200deg) rotateZ(225deg)'},
135  {at: 0.75, is: 'rotateX(525deg) rotateY(600deg) rotateZ(675deg)'},
136  {at: 1, is: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'},
137  {at: 2, is: 'rotateX(1400deg) rotateY(1600deg) rotateZ(1800deg)'},
138]);
139</script>
140</body>
141