| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> |
| 3 <style> |
| 4 .target { |
| 5 width: 100px; |
| 6 height: 100px; |
| 7 background-color: black; |
| 8 } |
| 9 .expected { |
| 10 background-color: green; |
| 11 } |
| 12 </style> |
| 13 <body> |
| 14 <template id="target-template"> |
| 15 <div></div> |
| 16 </template> |
| 17 <script src="resources/interpolation-test.js"></script> |
| 18 <script> |
| 19 |
| 20 assertInterpolation({ |
| 21 property: 'translate', |
| 22 from: '-100px', |
| 23 to: '100px', |
| 24 }, [ |
| 25 {at: -1, is: '-300px'}, |
| 26 {at: 0, is: '-100px'}, |
| 27 {at: 0.25, is: '-50px'}, |
| 28 {at: 0.75, is: '50px'}, |
| 29 {at: 1, is: '100px'}, |
| 30 {at: 2, is: '300px'}, |
| 31 ]); |
| 32 |
| 33 assertInterpolation({ |
| 34 property: 'translate', |
| 35 from: '-100%', |
| 36 to: '100%', |
| 37 }, [ |
| 38 {at: -1, is: '-300%'}, |
| 39 {at: 0, is: '-100%'}, |
| 40 {at: 0.25, is: '-50%'}, |
| 41 {at: 0.75, is: '50%'}, |
| 42 {at: 1, is: '100%'}, |
| 43 {at: 2, is: '300%'}, |
| 44 ]); |
| 45 |
| 46 assertInterpolation({ |
| 47 property: 'translate', |
| 48 from: '-100px -50px', |
| 49 to: '100px 50px', |
| 50 }, [ |
| 51 {at: -1, is: '-300px -150px'}, |
| 52 {at: 0, is: '-100px -50px'}, |
| 53 {at: 0.25, is: '-50px -25px'}, |
| 54 {at: 0.75, is: '50px 25px'}, |
| 55 {at: 1, is: '100px 50px'}, |
| 56 {at: 2, is: '300px 150px'}, |
| 57 ]); |
| 58 |
| 59 assertInterpolation({ |
| 60 property: 'translate', |
| 61 from: '-100px -50px 100px', |
| 62 to: '100px 50px 0px', |
| 63 }, [ |
| 64 {at: -1, is: '-300px -150px 200px'}, |
| 65 {at: 0, is: '-100px -50px 100px'}, |
| 66 {at: 0.25, is: '-50px -25px 75px'}, |
| 67 {at: 0.75, is: '50px 25px 25px'}, |
| 68 {at: 1, is: '100px 50px 0px'}, |
| 69 {at: 2, is: '300px 150px -100px'}, |
| 70 ]); |
| 71 |
| 72 assertInterpolation({ |
| 73 property: 'scale', |
| 74 from: '-10', |
| 75 to: '10', |
| 76 }, [ |
| 77 {at: -1, is: '-30'}, |
| 78 {at: 0, is: '-10'}, |
| 79 {at: 0.25, is: '-5'}, |
| 80 {at: 0.75, is: '5'}, |
| 81 {at: 1, is: '10'}, |
| 82 {at: 2, is: '30'}, |
| 83 ]); |
| 84 |
| 85 assertInterpolation({ |
| 86 property: 'scale', |
| 87 from: '-10 5', |
| 88 to: '10 -5', |
| 89 }, [ |
| 90 {at: -1, is: '-30 15'}, |
| 91 {at: 0, is: '-10 5'}, |
| 92 {at: 0.25, is: '-5 2.5'}, |
| 93 {at: 0.75, is: '5 -2.5'}, |
| 94 {at: 1, is: '10 -5'}, |
| 95 {at: 2, is: '30 -15'}, |
| 96 ]); |
| 97 |
| 98 assertInterpolation({ |
| 99 property: 'scale', |
| 100 from: '-10 5 1', |
| 101 to: '10 -5 0', |
| 102 }, [ |
| 103 {at: -1, is: '-30 15 2'}, |
| 104 {at: 0, is: '-10 5 1'}, |
| 105 {at: 0.25, is: '-5 2.5 0.75'}, |
| 106 {at: 0.75, is: '5 -2.5 0.25'}, |
| 107 {at: 1, is: '10 -5 0'}, |
| 108 {at: 2, is: '30 -15 -1'}, |
| 109 ]); |
| 110 |
| 111 assertInterpolation({ |
| 112 property: 'rotate', |
| 113 from: '100deg', |
| 114 to: '-100deg', |
| 115 }, [ |
| 116 {at: -1, is: '300deg'}, |
| 117 {at: 0, is: '100deg'}, |
| 118 {at: 0.25, is: '50deg'}, |
| 119 {at: 0.75, is: '-50deg'}, |
| 120 {at: 1, is: '-100deg'}, |
| 121 {at: 2, is: '-300deg'}, |
| 122 ]); |
| 123 |
| 124 assertInterpolation({ |
| 125 property: 'rotate', |
| 126 from: '100deg', |
| 127 to: '-100deg', |
| 128 }, [ |
| 129 {at: -1, is: '300deg'}, |
| 130 {at: 0, is: '100deg'}, |
| 131 {at: 0.25, is: '50deg'}, |
| 132 {at: 0.75, is: '-50deg'}, |
| 133 {at: 1, is: '-100deg'}, |
| 134 {at: 2, is: '-300deg'}, |
| 135 ]); |
| 136 |
| 137 assertInterpolation({ |
| 138 property: 'rotate', |
| 139 from: '100deg 0 1 0', |
| 140 to: '-100deg 0 1 0', |
| 141 }, [ |
| 142 {at: -1, is: '300deg 0 1 0'}, |
| 143 {at: 0, is: '100deg 0 1 0'}, |
| 144 {at: 0.25, is: '50deg 0 1 0'}, |
| 145 {at: 0.75, is: '-50deg 0 1 0'}, |
| 146 {at: 1, is: '-100deg 0 1 0'}, |
| 147 {at: 2, is: '-300deg 0 1 0'}, |
| 148 ]); |
| 149 |
| 150 assertInterpolation({ |
| 151 property: 'rotate', |
| 152 from: '100deg 1 -2.5 3.64', |
| 153 to: '-100deg 1 -2.5 3.64', |
| 154 }, [ |
| 155 {at: -1, is: '300deg 1 -2.5 3.64'}, |
| 156 {at: 0, is: '100deg 1 -2.5 3.64'}, |
| 157 {at: 0.25, is: '50deg 1 -2.5 3.64'}, |
| 158 {at: 0.75, is: '-50deg 1 -2.5 3.64'}, |
| 159 {at: 1, is: '-100deg 1 -2.5 3.64'}, |
| 160 {at: 2, is: '-300deg 1 -2.5 3.64'}, |
| 161 ]); |
| 162 |
| 163 assertInterpolation({ |
| 164 property: 'rotate', |
| 165 from: '0deg 1 0 0', |
| 166 to: '10deg 0 1 0', |
| 167 }, [ |
| 168 {at: -1, is: '-10deg 1 0 0'}, |
| 169 {at: 0, is: '0deg 1 0 0'}, |
| 170 {at: 0.25, is: '2.5deg 1 0 0'}, |
| 171 {at: 0.75, is: '7.5deg 1 0 0'}, |
| 172 {at: 1, is: '10deg 0 1 0'}, |
| 173 {at: 2, is: '20deg 1 0 0'}, |
| 174 ]); |
| 175 |
| 176 assertInterpolation({ |
| 177 property: 'rotate', |
| 178 from: '90deg 1 1 0', |
| 179 to: '180deg 0 1 1', |
| 180 }, [ |
| 181 {at: -1, is: '120deg 0.41 -0.41 -0.82'}, |
| 182 {at: 0, is: '90deg 1 1 0'}, |
| 183 {at: 0.25, is: '82.76deg 0.8 0.27 -0.53'}, |
| 184 {at: 0.75, is: '138.89deg 0.27 -0.54 -0.8'}, |
| 185 {at: 1, is: '180deg 0 1 1'}, |
| 186 {at: 2, is: '90deg 0.71 0 -0.71'}, |
| 187 ]); |
| 188 </script> |
| 189 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1196913005:
Implement animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master