OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
3 <style> | 3 <style> |
4 .parent { | 4 .parent { |
5 rotate: 90deg; | 5 rotate: 90deg; |
6 } | 6 } |
7 .target { | 7 .target { |
8 width: 100px; | 8 width: 40px; |
9 height: 100px; | 9 height: 20px; |
10 background-color: black; | 10 background-color: grey; |
| 11 rotate: 10deg; |
11 } | 12 } |
12 .expected { | 13 .expected { |
13 background-color: green; | 14 background-color: green; |
14 } | 15 } |
15 </style> | 16 </style> |
16 <template id="target-template"> | 17 <template id="target-template"> |
17 <div class="parent"> | 18 <div class="parent"> |
18 <div class="target"></div> | 19 <div class="target">Text</div> |
19 </div> | 20 </div> |
20 </template> | 21 </template> |
21 <script src="resources/interpolation-test.js"></script> | 22 <script src="resources/interpolation-test.js"></script> |
22 <script> | 23 <script> |
23 assertInterpolation({ | 24 assertInterpolation({ |
24 property: 'rotate', | 25 property: 'rotate', |
| 26 from: '', |
| 27 to: '30deg', |
| 28 }, [ |
| 29 {at: -1, is: '-10deg'}, |
| 30 {at: 0, is: '10deg'}, |
| 31 {at: 0.25, is: '15deg'}, |
| 32 {at: 0.75, is: '25deg'}, |
| 33 {at: 1, is: '30deg'}, |
| 34 {at: 2, is: '50deg'}, |
| 35 ]); |
| 36 |
| 37 assertInterpolation({ |
| 38 property: 'rotate', |
| 39 from: 'unset', |
| 40 to: '30deg', |
| 41 }, [ |
| 42 {at: -1, is: '-30deg'}, |
| 43 {at: 0, is: '0deg'}, |
| 44 {at: 0.25, is: '7.5deg'}, |
| 45 {at: 0.75, is: '22.5deg'}, |
| 46 {at: 1, is: '30deg'}, |
| 47 {at: 2, is: '60deg'}, |
| 48 ]); |
| 49 |
| 50 assertInterpolation({ |
| 51 property: 'rotate', |
25 from: '100deg', | 52 from: '100deg', |
26 to: '-100deg', | 53 to: '-100deg', |
27 }, [ | 54 }, [ |
28 {at: -1, is: '300deg'}, | 55 {at: -1, is: '300deg'}, |
29 {at: 0, is: '100deg'}, | 56 {at: 0, is: '100deg'}, |
30 {at: 0.25, is: '50deg'}, | 57 {at: 0.25, is: '50deg'}, |
31 {at: 0.75, is: '-50deg'}, | 58 {at: 0.75, is: '-50deg'}, |
32 {at: 1, is: '-100deg'}, | 59 {at: 1, is: '-100deg'}, |
33 {at: 2, is: '-300deg'}, | 60 {at: 2, is: '-300deg'}, |
34 ]); | 61 ]); |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
91 to: '180deg 0 1 1', | 118 to: '180deg 0 1 1', |
92 }, [ | 119 }, [ |
93 {at: -1, is: '120deg 0.41 -0.41 -0.82'}, | 120 {at: -1, is: '120deg 0.41 -0.41 -0.82'}, |
94 {at: 0, is: '90deg 1 1 0'}, | 121 {at: 0, is: '90deg 1 1 0'}, |
95 {at: 0.25, is: '82.76deg 0.8 0.27 -0.53'}, | 122 {at: 0.25, is: '82.76deg 0.8 0.27 -0.53'}, |
96 {at: 0.75, is: '138.89deg 0.27 -0.54 -0.8'}, | 123 {at: 0.75, is: '138.89deg 0.27 -0.54 -0.8'}, |
97 {at: 1, is: '180deg 0 1 1'}, | 124 {at: 1, is: '180deg 0 1 1'}, |
98 {at: 2, is: '90deg 0.71 0 -0.71'}, | 125 {at: 2, is: '90deg 0.71 0 -0.71'}, |
99 ]); | 126 ]); |
100 | 127 |
101 assertInterpolation({ | |
102 property: 'rotate', | |
103 from: 'inherit', | |
104 to: '0deg', | |
105 }, [ | |
106 {at: -1, is: '180deg'}, | |
107 {at: 0, is: '90deg'}, | |
108 {at: 0.25, is: '67.5deg'}, | |
109 {at: 0.75, is: '22.5deg'}, | |
110 {at: 1, is: '0deg'}, | |
111 {at: 2, is: '-90deg'}, | |
112 ]); | |
113 | |
114 assertInterpolation({ | |
115 property: 'rotate', | |
116 from: '0deg', | |
117 to: 'inherit', | |
118 }, [ | |
119 {at: -1, is: '-90deg'}, | |
120 {at: 0, is: '0deg'}, | |
121 {at: 0.25, is: '22.5deg'}, | |
122 {at: 0.75, is: '67.5deg'}, | |
123 {at: 1, is: '90deg'}, | |
124 {at: 2, is: '180deg'}, | |
125 ]); | |
126 | |
127 assertInterpolation({ | |
128 property: 'rotate', | |
129 from: 'initial', | |
130 to: '90deg', | |
131 }, [ | |
132 {at: -1, is: '-90deg'}, | |
133 {at: 0, is: '0deg'}, | |
134 {at: 0.25, is: '22.5deg'}, | |
135 {at: 0.75, is: '67.5deg'}, | |
136 {at: 1, is: '90deg'}, | |
137 {at: 2, is: '180deg'}, | |
138 ]); | |
139 | |
140 assertInterpolation({ | |
141 property: 'rotate', | |
142 from: '90deg', | |
143 to: 'initial', | |
144 }, [ | |
145 {at: -1, is: '180deg'}, | |
146 {at: 0, is: '90deg'}, | |
147 {at: 0.25, is: '67.5deg'}, | |
148 {at: 0.75, is: '22.5deg'}, | |
149 {at: 1, is: '0deg'}, | |
150 {at: 2, is: '-90deg'}, | |
151 ]); | |
152 | |
153 assertInterpolation({ | |
154 property: 'rotate', | |
155 from: 'initial', | |
156 to: 'inherit', | |
157 }, [ | |
158 {at: -1, is: '-90deg'}, | |
159 {at: 0, is: '0deg'}, | |
160 {at: 0.25, is: '22.5deg'}, | |
161 {at: 0.75, is: '67.5deg'}, | |
162 {at: 1, is: '90deg'}, | |
163 {at: 2, is: '180deg'}, | |
164 ]); | |
165 | |
166 assertInterpolation({ | |
167 property: 'rotate', | |
168 from: 'inherit', | |
169 to: 'initial', | |
170 }, [ | |
171 {at: -1, is: '180deg'}, | |
172 {at: 0, is: '90deg'}, | |
173 {at: 0.25, is: '67.5deg'}, | |
174 {at: 0.75, is: '22.5deg'}, | |
175 {at: 1, is: '0deg'}, | |
176 {at: 2, is: '-90deg'}, | |
177 ]); | |
178 | |
179 </script> | 128 </script> |
OLD | NEW |