| 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: 40px; | 8 width: 40px; |
| 9 height: 20px; | 9 height: 20px; |
| 10 background-color: grey; | 10 background-color: grey; |
| 11 rotate: 10deg; | 11 rotate: 10deg; |
| 12 } | 12 } |
| 13 .expected { | 13 .expected { |
| 14 background-color: green; | 14 background-color: green; |
| 15 } | 15 } |
| 16 </style> | 16 </style> |
| 17 <template id="target-template"> | 17 <template id="target-template"> |
| 18 <div class="parent"> | 18 <div class="parent"> |
| 19 <div class="target">Text</div> | 19 <div class="target">Text</div> |
| 20 </div> | 20 </div> |
| 21 </template> | 21 </template> |
| 22 <script src="resources/interpolation-test.js"></script> | 22 <script src="resources/interpolation-test.js"></script> |
| 23 <script> | 23 <script> |
| 24 assertInterpolation({ | 24 assertInterpolation({ |
| 25 property: 'rotate', | 25 property: 'rotate', |
| 26 from: 'none', |
| 27 to: '30deg', |
| 28 }, [ |
| 29 {at: -1, is: '-30deg'}, |
| 30 {at: 0, is: 'none'}, |
| 31 {at: 0.25, is: '7.5deg'}, |
| 32 {at: 0.75, is: '22.5deg'}, |
| 33 {at: 1, is: '30deg'}, |
| 34 {at: 2, is: '60deg'}, |
| 35 ]); |
| 36 |
| 37 assertInterpolation({ |
| 38 property: 'rotate', |
| 26 from: neutralKeyframe, | 39 from: neutralKeyframe, |
| 27 to: '30deg', | 40 to: '30deg', |
| 28 }, [ | 41 }, [ |
| 29 {at: -1, is: '-10deg'}, | 42 {at: -1, is: '-10deg'}, |
| 30 {at: 0, is: '10deg'}, | 43 {at: 0, is: '10deg'}, |
| 31 {at: 0.25, is: '15deg'}, | 44 {at: 0.25, is: '15deg'}, |
| 32 {at: 0.75, is: '25deg'}, | 45 {at: 0.75, is: '25deg'}, |
| 33 {at: 1, is: '30deg'}, | 46 {at: 1, is: '30deg'}, |
| 34 {at: 2, is: '50deg'}, | 47 {at: 2, is: '50deg'}, |
| 35 ]); | 48 ]); |
| 36 | 49 |
| 37 assertInterpolation({ | 50 assertInterpolation({ |
| 38 property: 'rotate', | 51 property: 'rotate', |
| 39 from: 'unset', | 52 from: 'unset', |
| 40 to: '30deg', | 53 to: '30deg', |
| 41 }, [ | 54 }, [ |
| 42 {at: -1, is: '-30deg'}, | 55 {at: -1, is: '-30deg'}, |
| 43 {at: 0, is: '0deg'}, | 56 {at: 0, is: 'none'}, |
| 44 {at: 0.25, is: '7.5deg'}, | 57 {at: 0.25, is: '7.5deg'}, |
| 45 {at: 0.75, is: '22.5deg'}, | 58 {at: 0.75, is: '22.5deg'}, |
| 46 {at: 1, is: '30deg'}, | 59 {at: 1, is: '30deg'}, |
| 47 {at: 2, is: '60deg'}, | 60 {at: 2, is: '60deg'}, |
| 48 ]); | 61 ]); |
| 49 | 62 |
| 50 assertInterpolation({ | 63 assertInterpolation({ |
| 51 property: 'rotate', | 64 property: 'rotate', |
| 52 from: '100deg', | 65 from: '100deg', |
| 53 to: '-100deg', | 66 to: '-100deg', |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 108 {at: 0, is: '1 0 0 0deg'}, | 121 {at: 0, is: '1 0 0 0deg'}, |
| 109 {at: 0.25, is: '0 1 0 2.5deg'}, | 122 {at: 0.25, is: '0 1 0 2.5deg'}, |
| 110 {at: 0.75, is: '0 1 0 7.5deg'}, | 123 {at: 0.75, is: '0 1 0 7.5deg'}, |
| 111 {at: 1, is: '0 1 0 10deg'}, | 124 {at: 1, is: '0 1 0 10deg'}, |
| 112 {at: 2, is: '0 1 0 20deg'}, | 125 {at: 2, is: '0 1 0 20deg'}, |
| 113 ]); | 126 ]); |
| 114 | 127 |
| 115 assertInterpolation({ | 128 assertInterpolation({ |
| 116 property: 'rotate', | 129 property: 'rotate', |
| 117 from: '1 1 0 90deg', | 130 from: '1 1 0 90deg', |
| 118 to: '0 1 1 180deg', | 131 to: '0 1 1 135deg', |
| 119 }, [ | 132 }, [ |
| 120 {at: -1, is: '0.41 -0.41 -0.82 120deg'}, | 133 {at: -1, is: '0.67 -0.06 -0.74 124.97deg'}, |
| 121 {at: 0, is: '1 1 0 90deg'}, | 134 {at: 0, is: '1 1 0 90deg'}, |
| 122 {at: 0.25, is: '0.8 0.27 -0.53 82.76deg'}, | 135 {at: 0.25, is: '0.54 0.8 0.26 94.83deg'}, |
| 123 {at: 0.75, is: '0.27 -0.54 -0.8 138.89deg'}, | 136 {at: 0.75, is: '0.17 0.78 0.61 118.68deg'}, |
| 124 {at: 1, is: '0 1 1 180deg'}, | 137 {at: 1, is: '0 1 1 135deg'}, |
| 125 {at: 2, is: '0.71 0 -0.71 90deg'}, | 138 {at: 2, is: '0.52 -0.29 -0.81 151.04deg'}, |
| 126 ]); | 139 ]); |
| 127 | 140 |
| 128 assertInterpolation({ | 141 assertInterpolation({ |
| 129 property: 'rotate', | 142 property: 'rotate', |
| 130 from: '0 1 0 0deg', | 143 from: '0 1 0 0deg', |
| 131 to: '1 0 0 450deg', | 144 to: '1 0 0 450deg', |
| 132 }, [ | 145 }, [ |
| 133 {at: -1, is: '1 0 0 -450deg'}, | 146 {at: -1, is: '1 0 0 -450deg'}, |
| 134 {at: 0, is: '0 1 0 0deg'}, | 147 {at: 0, is: '0 1 0 0deg'}, |
| 135 {at: 0.25, is: '1 0 0 112.5deg'}, | 148 {at: 0.25, is: '1 0 0 112.5deg'}, |
| 136 {at: 0.75, is: '1 0 0 337.5deg'}, | 149 {at: 0.75, is: '1 0 0 337.5deg'}, |
| 137 {at: 1, is: '1 0 0 450deg'}, | 150 {at: 1, is: '1 0 0 450deg'}, |
| 138 {at: 2, is: '1 0 0 900deg'}, | 151 {at: 2, is: '1 0 0 900deg'}, |
| 139 ]); | 152 ]); |
| 140 | 153 |
| 141 assertInterpolation({ | 154 assertInterpolation({ |
| 142 property: 'rotate', | 155 property: 'rotate', |
| 143 from: '1 0 0 450deg', | 156 from: '1 0 0 450deg', |
| 144 to: '0 1 0 0deg', | 157 to: '0 1 0 0deg', |
| 145 }, [ | 158 }, [ |
| 146 {at: -1, is: '1 0 0 900deg'}, | 159 {at: -1, is: '1 0 0 900deg'}, |
| 147 {at: 0, is: '1 0 0 450deg'}, | 160 {at: 0, is: '1 0 0 450deg'}, |
| 148 {at: 0.25, is: '1 0 0 337.5deg'}, | 161 {at: 0.25, is: '1 0 0 337.5deg'}, |
| 149 {at: 0.75, is: '1 0 0 112.5deg'}, | 162 {at: 0.75, is: '1 0 0 112.5deg'}, |
| 150 {at: 1, is: '0 1 0 0deg'}, | 163 {at: 1, is: '0 1 0 0deg'}, |
| 151 {at: 2, is: '1 0 0 -450deg'}, | 164 {at: 2, is: '1 0 0 -450deg'}, |
| 152 ]); | 165 ]); |
| 153 </script> | 166 </script> |
| OLD | NEW |