rotate-interpolation.html (6349B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>rotate interpolation</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> 7 <meta name="assert" content="rotate supports animation."> 8 <meta name="timeout" content="long"> 9 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/css/support/interpolation-testcommon.js"></script> 13 </head> 14 15 <style> 16 .parent { 17 rotate: 90deg; 18 } 19 20 .target { 21 width: 40px; 22 height: 20px; 23 background-color: grey; 24 rotate: 10deg; 25 } 26 27 .expected { 28 background-color: green; 29 } 30 </style> 31 32 <template id="target-template"> 33 <div class="parent"> 34 <div class="target">Text</div> 35 </div> 36 </template> 37 38 <body> 39 <script> 40 test_interpolation({ 41 property: 'rotate', 42 from: '100deg', 43 to: '180deg', 44 }, [ 45 {at: -1, expect: '20deg'}, 46 {at: 0, expect: '100deg'}, 47 {at: 0.125, expect: '110deg'}, 48 {at: 0.875, expect: '170deg'}, 49 {at: 1, expect: '180deg'}, 50 {at: 2, expect: '260deg'} 51 ]); 52 53 test_interpolation({ 54 property: 'rotate', 55 from: '45deg', 56 to: '-1 1 0 60deg', 57 }, [ 58 {at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'}, 59 {at: 0, expect: '45deg'}, 60 {at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'}, 61 {at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'}, 62 {at: 1, expect: '-0.71 0.71 0 60deg'}, 63 {at: 2, expect: '-0.637897 0.637897 -0.431479 124.975deg'} 64 ]); 65 66 test_interpolation({ 67 property: 'rotate', 68 from: 'none', 69 to: '7 -8 9 400grad', 70 }, [ 71 {at: -1, expect: '0.5 -0.57 0.65 -400grad'}, 72 {at: 0, expect: '0.5 -0.57 0.65 0deg'}, 73 {at: 0.125, expect: '0.5 -0.57 0.65 50grad'}, 74 {at: 0.875, expect: '0.5 -0.57 0.65 350grad'}, 75 {at: 1, expect: '0.5 -0.57 0.65 400grad'}, 76 {at: 2, expect: '0.5 -0.57 0.65 800grad'} 77 ]); 78 79 test_interpolation({ 80 property: 'rotate', 81 from: 'none', 82 to: 'none', 83 }, [ 84 {at: -1, expect: 'none'}, 85 {at: 0, expect: 'none'}, 86 {at: 0.125, expect: 'none'}, 87 {at: 0.875, expect: 'none'}, 88 {at: 1, expect: 'none'}, 89 {at: 2, expect: 'none'} 90 ]); 91 92 test_interpolation({ 93 property: 'rotate', 94 from: 'none', 95 to: '30deg', 96 }, [ 97 {at: -1, expect: '-30deg'}, 98 {at: 0, expect: '0deg'}, 99 {at: 0.25, expect: '7.5deg'}, 100 {at: 0.75, expect: '22.5deg'}, 101 {at: 1, expect: '30deg'}, 102 {at: 2, expect: '60deg'}, 103 ]); 104 105 test_interpolation({ 106 property: 'rotate', 107 from: neutralKeyframe, 108 to: '30deg', 109 }, [ 110 {at: -1, expect: '-10deg'}, 111 {at: 0, expect: '10deg'}, 112 {at: 0.25, expect: '15deg'}, 113 {at: 0.75, expect: '25deg'}, 114 {at: 1, expect: '30deg'}, 115 {at: 2, expect: '50deg'}, 116 ]); 117 118 test_interpolation({ 119 property: 'rotate', 120 from: 'inherit', 121 to: '270deg', 122 }, [ 123 {at: -1, expect: '-90deg'}, 124 {at: 0, expect: '90deg'}, 125 {at: 0.25, expect: '135deg'}, 126 {at: 0.75, expect: '225deg'}, 127 {at: 1, expect: '270deg'}, 128 {at: 2, expect: '450deg'}, 129 ]); 130 131 test_interpolation({ 132 property: 'rotate', 133 from: 'unset', 134 to: '30deg', 135 }, [ 136 {at: -1, expect: '-30deg'}, 137 {at: 0, expect: '0deg'}, 138 {at: 0.25, expect: '7.5deg'}, 139 {at: 0.75, expect: '22.5deg'}, 140 {at: 1, expect: '30deg'}, 141 {at: 2, expect: '60deg'}, 142 ]); 143 144 test_interpolation({ 145 property: 'rotate', 146 from: '100deg', 147 to: '-100deg', 148 }, [ 149 {at: -1, expect: '300deg'}, 150 {at: 0, expect: '100deg'}, 151 {at: 0.25, expect: '50deg'}, 152 {at: 0.75, expect: '-50deg'}, 153 {at: 1, expect: '-100deg'}, 154 {at: 2, expect: '-300deg'}, 155 ]); 156 157 test_interpolation({ 158 property: 'rotate', 159 from: '0 1 0 100deg', 160 to: '0 1 0 -100deg', 161 }, [ 162 {at: -1, expect: '0 1 0 300deg'}, 163 {at: 0, expect: '0 1 0 100deg'}, 164 {at: 0.25, expect: '0 1 0 50deg'}, 165 {at: 0.75, expect: '0 1 0 -50deg'}, 166 {at: 1, expect: '0 1 0 -100deg'}, 167 {at: 2, expect: '0 1 0 -300deg'}, 168 ]); 169 170 test_interpolation({ 171 property: 'rotate', 172 from: '1 -2.5 3.64 100deg', 173 to: '1 -2.5 3.64 -100deg', 174 }, [ 175 {at: -1, expect: '0.22 -0.55 0.8 300deg'}, 176 {at: 0, expect: '0.22 -0.55 0.8 100deg'}, 177 {at: 0.25, expect: '0.22 -0.55 0.8 50deg'}, 178 {at: 0.75, expect: '0.22 -0.55 0.8 -50deg'}, 179 {at: 1, expect: '0.22 -0.55 0.8 -100deg'}, 180 {at: 2, expect: '0.22 -0.55 0.8 -300deg'}, 181 ]); 182 183 // The rotation angle gets interpolated numerically and the rotation vector 184 // of the non-zero angle is used or (0, 0, 1) if both angles are zero. 185 // So, we have to convert "1 0 0 0deg" into "0 1 0 0deg", and apply the same 186 // concept for other test cases. 187 // https://drafts.csswg.org/css-transforms-2/#interpolation-of-transform-functions 188 test_interpolation({ 189 property: 'rotate', 190 from: '1 0 0 0deg', 191 to: '0 1 0 10deg', 192 }, [ 193 {at: -1, expect: '0 1 0 -10deg'}, 194 {at: 0, expect: '0 1 0 0deg'}, 195 {at: 0.25, expect: '0 1 0 2.5deg'}, 196 {at: 0.75, expect: '0 1 0 7.5deg'}, 197 {at: 1, expect: '0 1 0 10deg'}, 198 {at: 2, expect: '0 1 0 20deg'}, 199 ]); 200 201 test_interpolation({ 202 property: 'rotate', 203 from: '1 1 0 90deg', 204 to: '0 1 1 135deg', 205 }, [ 206 {at: -1, expect: '0.67 -0.06 -0.74 124.97deg'}, 207 {at: 0, expect: '0.71 0.71 0 90deg'}, 208 {at: 0.25, expect: '0.54 0.8 0.26 94.83deg'}, 209 {at: 0.75, expect: '0.17 0.78 0.61 118.68deg'}, 210 {at: 1, expect: '0 0.71 0.71 135deg'}, 211 // The result in Blink is '0.52 -0.29 -0.81 151.04deg', and the result in 212 // Gecko is `-0.52 0.29 0.8 208.96deg`. Both of them can be represented as the 213 // same 3d rotation (but by an opposite direction vector and angle). 214 // The spec only mentions we should use Slerp to do interpolation for rotate 215 // property, but it seems the implementation detail for extrapolation are 216 // different (because this is not in the range of [0, 1]). 217 // For now, we make both results pass because their rendering results are the 218 // same. 219 {at: 2, expect: '0.52 -0.29 -0.81 151.04deg', 220 option: '-0.52 0.29 0.81 208.96deg'}, 221 ]); 222 223 test_interpolation({ 224 property: 'rotate', 225 from: '0 1 0 0deg', 226 to: '1 0 0 450deg', 227 }, [ 228 {at: -1, expect: '1 0 0 -450deg'}, 229 {at: 0, expect: '1 0 0 0deg'}, 230 {at: 0.25, expect: '1 0 0 112.5deg'}, 231 {at: 0.75, expect: '1 0 0 337.5deg'}, 232 {at: 1, expect: '1 0 0 450deg'}, 233 {at: 2, expect: '1 0 0 900deg'}, 234 ]); 235 236 test_interpolation({ 237 property: 'rotate', 238 from: '1 0 0 450deg', 239 to: '0 1 0 0deg', 240 }, [ 241 {at: -1, expect: '1 0 0 900deg'}, 242 {at: 0, expect: '1 0 0 450deg'}, 243 {at: 0.25, expect: '1 0 0 337.5deg'}, 244 {at: 0.75, expect: '1 0 0 112.5deg'}, 245 {at: 1, expect: '1 0 0 0deg'}, 246 {at: 2, expect: '1 0 0 -450deg'}, 247 ]); 248 </script> 249 </body> 250 </html>