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 motion-rotation: 30deg; | 5 offset-rotation: 30deg; |
6 } | 6 } |
7 .target { | 7 .target { |
8 width: 80px; | 8 width: 80px; |
9 height: 80px; | 9 height: 80px; |
10 display: inline-block; | 10 display: inline-block; |
11 background-color: black; | 11 background-color: black; |
12 margin-right: 5px; | 12 margin-right: 5px; |
13 motion-rotation: 10deg; | 13 offset-rotation: 10deg; |
14 } | 14 } |
15 .expected { | 15 .expected { |
16 background-color: green; | 16 background-color: green; |
17 margin-right: 15px; | 17 margin-right: 15px; |
18 } | 18 } |
19 </style> | 19 </style> |
20 <body> | 20 <body> |
21 <script src="resources/interpolation-test.js"></script> | 21 <script src="resources/interpolation-test.js"></script> |
22 <script> | 22 <script> |
23 assertInterpolation({ | 23 assertInterpolation({ |
24 property: 'motion-rotation', | 24 property: 'offset-rotation', |
25 from: neutralKeyframe, | 25 from: neutralKeyframe, |
26 to: '20deg', | 26 to: '20deg', |
27 }, [ | 27 }, [ |
28 {at: -0.3, is: '7deg'}, | 28 {at: -0.3, is: '7deg'}, |
29 {at: 0, is: '10deg'}, | 29 {at: 0, is: '10deg'}, |
30 {at: 0.3, is: '13deg'}, | 30 {at: 0.3, is: '13deg'}, |
31 {at: 0.6, is: '16deg'}, | 31 {at: 0.6, is: '16deg'}, |
32 {at: 1, is: '20deg'}, | 32 {at: 1, is: '20deg'}, |
33 {at: 1.5, is: '25deg'}, | 33 {at: 1.5, is: '25deg'}, |
34 ]); | 34 ]); |
35 | 35 |
36 assertNoInterpolation({ | 36 assertNoInterpolation({ |
37 property: 'motion-rotation', | 37 property: 'offset-rotation', |
38 from: 'initial', | 38 from: 'initial', |
39 to: '20deg', | 39 to: '20deg', |
40 }); | 40 }); |
41 | 41 |
42 assertInterpolation({ | 42 assertInterpolation({ |
43 property: 'motion-rotation', | 43 property: 'offset-rotation', |
44 from: 'inherit', | 44 from: 'inherit', |
45 to: '20deg', | 45 to: '20deg', |
46 }, [ | 46 }, [ |
47 {at: -0.3, is: '33deg'}, | 47 {at: -0.3, is: '33deg'}, |
48 {at: 0, is: '30deg'}, | 48 {at: 0, is: '30deg'}, |
49 {at: 0.3, is: '27deg'}, | 49 {at: 0.3, is: '27deg'}, |
50 {at: 0.6, is: '24deg'}, | 50 {at: 0.6, is: '24deg'}, |
51 {at: 1, is: '20deg'}, | 51 {at: 1, is: '20deg'}, |
52 {at: 1.5, is: '15deg'}, | 52 {at: 1.5, is: '15deg'}, |
53 ]); | 53 ]); |
54 | 54 |
55 assertNoInterpolation({ | 55 assertNoInterpolation({ |
56 property: 'motion-rotation', | 56 property: 'offset-rotation', |
57 from: 'unset', | 57 from: 'unset', |
58 to: '20deg', | 58 to: '20deg', |
59 }); | 59 }); |
60 | 60 |
61 assertInterpolation({ | 61 assertInterpolation({ |
62 property: 'motion-rotation', | 62 property: 'offset-rotation', |
63 from: '10deg', | 63 from: '10deg', |
64 to: '50deg' | 64 to: '50deg' |
65 }, [ | 65 }, [ |
66 {at: -0.3, is: '-2deg'}, | 66 {at: -0.3, is: '-2deg'}, |
67 {at: 0, is: '10deg'}, | 67 {at: 0, is: '10deg'}, |
68 {at: 0.3, is: '22deg'}, | 68 {at: 0.3, is: '22deg'}, |
69 {at: 0.6, is: '34deg'}, | 69 {at: 0.6, is: '34deg'}, |
70 {at: 1, is: '50deg'}, | 70 {at: 1, is: '50deg'}, |
71 {at: 1.5, is: '70deg'}, | 71 {at: 1.5, is: '70deg'}, |
72 ]); | 72 ]); |
73 assertInterpolation({ | 73 assertInterpolation({ |
74 property: 'motion-rotation', | 74 property: 'offset-rotation', |
75 from: 'auto 10deg', | 75 from: 'auto 10deg', |
76 to: 'auto 50deg' | 76 to: 'auto 50deg' |
77 }, [ | 77 }, [ |
78 {at: -0.3, is: 'auto -2deg'}, | 78 {at: -0.3, is: 'auto -2deg'}, |
79 {at: 0, is: 'auto 10deg'}, | 79 {at: 0, is: 'auto 10deg'}, |
80 {at: 0.3, is: 'auto 22deg'}, | 80 {at: 0.3, is: 'auto 22deg'}, |
81 {at: 0.6, is: 'auto 34deg'}, | 81 {at: 0.6, is: 'auto 34deg'}, |
82 {at: 1, is: 'auto 50deg'}, | 82 {at: 1, is: 'auto 50deg'}, |
83 {at: 1.5, is: 'auto 70deg'}, | 83 {at: 1.5, is: 'auto 70deg'}, |
84 ]); | 84 ]); |
85 assertInterpolation({ | 85 assertInterpolation({ |
86 property: 'motion-rotation', | 86 property: 'offset-rotation', |
87 from: 'reverse -170deg', | 87 from: 'reverse -170deg', |
88 to: 'reverse -130deg' | 88 to: 'reverse -130deg' |
89 }, [ | 89 }, [ |
90 {at: -0.3, is: 'auto -2deg'}, | 90 {at: -0.3, is: 'auto -2deg'}, |
91 {at: 0, is: 'auto 10deg'}, | 91 {at: 0, is: 'auto 10deg'}, |
92 {at: 0.3, is: 'auto 22deg'}, | 92 {at: 0.3, is: 'auto 22deg'}, |
93 {at: 0.6, is: 'auto 34deg'}, | 93 {at: 0.6, is: 'auto 34deg'}, |
94 {at: 1, is: 'auto 50deg'}, | 94 {at: 1, is: 'auto 50deg'}, |
95 {at: 1.5, is: 'auto 70deg'}, | 95 {at: 1.5, is: 'auto 70deg'}, |
96 ]); | 96 ]); |
97 assertInterpolation({ | 97 assertInterpolation({ |
98 property: 'motion-rotation', | 98 property: 'offset-rotation', |
99 from: 'auto 10deg', | 99 from: 'auto 10deg', |
100 to: 'reverse -130deg' | 100 to: 'reverse -130deg' |
101 }, [ | 101 }, [ |
102 {at: -0.3, is: 'auto -2deg'}, | 102 {at: -0.3, is: 'auto -2deg'}, |
103 {at: 0, is: 'auto 10deg'}, | 103 {at: 0, is: 'auto 10deg'}, |
104 {at: 0.3, is: 'auto 22deg'}, | 104 {at: 0.3, is: 'auto 22deg'}, |
105 {at: 0.6, is: 'auto 34deg'}, | 105 {at: 0.6, is: 'auto 34deg'}, |
106 {at: 1, is: 'auto 50deg'}, | 106 {at: 1, is: 'auto 50deg'}, |
107 {at: 1.5, is: 'auto 70deg'}, | 107 {at: 1.5, is: 'auto 70deg'}, |
108 ]); | 108 ]); |
109 assertInterpolation({ | 109 assertInterpolation({ |
110 property: 'motion-rotation', | 110 property: 'offset-rotation', |
111 from: 'reverse -170deg', | 111 from: 'reverse -170deg', |
112 to: 'auto 50deg' | 112 to: 'auto 50deg' |
113 }, [ | 113 }, [ |
114 {at: -0.3, is: 'auto -2deg'}, | 114 {at: -0.3, is: 'auto -2deg'}, |
115 {at: 0, is: 'auto 10deg'}, | 115 {at: 0, is: 'auto 10deg'}, |
116 {at: 0.3, is: 'auto 22deg'}, | 116 {at: 0.3, is: 'auto 22deg'}, |
117 {at: 0.6, is: 'auto 34deg'}, | 117 {at: 0.6, is: 'auto 34deg'}, |
118 {at: 1, is: 'auto 50deg'}, | 118 {at: 1, is: 'auto 50deg'}, |
119 {at: 1.5, is: 'auto 70deg'}, | 119 {at: 1.5, is: 'auto 70deg'}, |
120 ]); | 120 ]); |
121 assertNoInterpolation({ | 121 assertNoInterpolation({ |
122 property: 'motion-rotation', | 122 property: 'offset-rotation', |
123 from: 'auto 200deg', | 123 from: 'auto 200deg', |
124 to: '300deg' | 124 to: '300deg' |
125 }); | 125 }); |
126 assertNoInterpolation({ | 126 assertNoInterpolation({ |
127 property: 'motion-rotation', | 127 property: 'offset-rotation', |
128 from: '300deg', | 128 from: '300deg', |
129 to: 'reverse 20deg' | 129 to: 'reverse 20deg' |
130 }); | 130 }); |
131 </script> | 131 </script> |
132 </body> | 132 </body> |
OLD | NEW |