third_party/WebKit/LayoutTests/animations/interpolation/webkit-transform-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .target {
   5   color: white;
   6   width: 100px;
   7   height: 100px;
   8   background-color: black;
   9   display: inline-block;
  10   overflow: hidden;
  11 }
  12 .expected {
  13   background-color: green;
  14 }
  15 .target div {
  16   width: 10px;
  17   height: 10px;
  18   display: inline-block;
  19   background: orange;
  20   margin: 1px;
  21 }
  22 .test {
  23   overflow: hidden;
  24 }
  25 </style>
  26 <body>
  27 <template id="target-template">
  28 <div></div>
  29 </template>
  30 <script src="resources/interpolation-test.js"></script>
  31 <script>
  32
  33 // Perspective
  34 assertInterpolation({
  35   property: '-webkit-transform',
  36   from: 'perspective(400px)',
  37   to: 'perspective(500px)'
  38 }, [
  39   {at: -1, is: 'perspective(300px)'},
  40   {at: 0, is: 'perspective(400px)'},
  41   {at: 0.25, is: 'perspective(425px)'},
  42   {at: 0.75, is: 'perspective(475px)'},
  43   {at: 1, is: 'perspective(500px)'},
  44   {at: 2, is: 'perspective(600px)'},
  45 ]);
  46 assertInterpolation({
  47   property: '-webkit-transform',
  48   from: 'skewX(10rad) perspective(400px)',
  49   to: 'skewX(20rad) perspective(500px)'
  50 }, [
  51   {at: -1, is: 'skewX(0rad) perspective(300px)'},
  52   {at: 0, is: 'skewX(10rad) perspective(400px)'},
  53   {at: 0.25, is: 'skewX(12.5rad) perspective(425px)'},
  54   {at: 0.75, is: 'skewX(17.5rad) perspective(475px)'},
  55   {at: 1, is: 'skewX(20rad) perspective(500px)'},
  56   {at: 2, is: 'skewX(30rad) perspective(600px)'},
  57 ]);
  58 assertInterpolation({
  59   property: '-webkit-transform',
  60   from: 'scaleZ(1) perspective(400px)',
  61   to: 'scaleZ(2) perspective(500px)'
  62 }, [
  63   {at: -1, is: 'scaleZ(0) perspective(300px)'},
  64   {at: 0, is: 'scaleZ(1) perspective(400px)'},
  65   {at: 0.25, is: 'scaleZ(1.25) perspective(425px)'},
  66   {at: 0.75, is: 'scaleZ(1.75) perspective(475px)'},
  67   {at: 1, is: 'scaleZ(2) perspective(500px)'},
  68   {at: 2, is: 'scaleZ(3) perspective(600px)'},
  69 ]);
  70
  71 // Rotate
  72 assertInterpolation({
  73   property: '-webkit-transform',
  74   from: 'rotate(30deg)',
  75   to: 'rotate(330deg)'
  76 }, [
  77   {at: -1, is: 'rotate(-270deg)'},
  78   {at: 0, is: 'rotate(30deg)'},
  79   {at: 0.25, is: 'rotate(105deg)'},
  80   {at: 0.75, is: 'rotate(255deg)'},
  81   {at: 1, is: 'rotate(330deg)'},
  82   {at: 2, is: 'rotate(630deg)'},
  83 ]);
  84 assertInterpolation({
  85   property: '-webkit-transform',
  86   from: 'rotateX(0deg)',
  87   to: 'rotateX(700deg)'
  88 }, [
  89   {at: -1, is: 'rotateX(-700deg)'},
  90   {at: 0, is: 'rotateX(0deg)'},
  91   {at: 0.25, is: 'rotateX(175deg)'},
  92   {at: 0.75, is: 'rotateX(525deg)'},
  93   {at: 1, is: 'rotateX(700deg)'},
  94   {at: 2, is: 'rotateX(1400deg)'},
  95 ]);
  96 assertInterpolation({
  97   property: '-webkit-transform',
  98   from: 'rotateY(0deg)',
  99   to: 'rotateY(800deg)'
 100 }, [
 101   {at: -1, is: 'rotateY(-800deg)'},
 102   {at: 0, is: 'rotateY(0deg)'},
 103   {at: 0.25, is: 'rotateY(200deg)'},
 104   {at: 0.75, is: 'rotateY(600deg)'},
 105   {at: 1, is: 'rotateY(800deg)'},
 106   {at: 2, is: 'rotateY(1600deg)'},
 107 ]);
 108 assertInterpolation({
 109   property: '-webkit-transform',
 110   from: 'rotateZ(0deg)',
 111   to: 'rotateZ(900deg)'
 112 }, [
 113   {at: -1, is: 'rotateZ(-900deg)'},
 114   {at: 0, is: 'rotateZ(0deg)'},
 115   {at: 0.25, is: 'rotateZ(225deg)'},
 116   {at: 0.75, is: 'rotateZ(675deg)'},
 117   {at: 1, is: 'rotateZ(900deg)'},
 118   {at: 2, is: 'rotateZ(1800deg)'},
 119 ]);
 120 assertInterpolation({
 121   property: '-webkit-transform',
 122   from: 'rotate3d(7, 8, 9, 100deg)',
 123   to: 'rotate3d(7, 8, 9, 260deg)'
 124 }, [
 125   {at: -1, is: 'rotate3d(7, 8, 9, -60deg)'},
 126   {at: 0, is: 'rotate3d(7, 8, 9, 100deg)'},
 127   {at: 0.25, is: 'rotate3d(7, 8, 9, 140deg)'},
 128   {at: 0.75, is: 'rotate3d(7, 8, 9, 220deg)'},
 129   {at: 1, is: 'rotate3d(7, 8, 9, 260deg)'},
 130   {at: 2, is: 'rotate3d(7, 8, 9, 420deg)'},
 131 ]);
 132 assertInterpolation({
 133   property: '-webkit-transform',
 134   from: 'none',
 135   to: 'rotate(90deg)'
 136 }, [
 137   {at: -1, is: 'rotate(-90deg)'},
 138   {at: 0, is: 'rotate(0deg)'},
 139   {at: 0.25, is: 'rotate(22.5deg)'},
 140   {at: 0.75, is: 'rotate(67.5deg)'},
 141   {at: 1, is: 'rotate(90deg)'},
 142   {at: 2, is: 'rotate(180deg)'},
 143 ]);
 144 assertInterpolation({
 145   property: '-webkit-transform',
 146   from: 'rotate(90deg)',
 147   to: 'none'
 148 }, [
 149   {at: -1, is: 'rotate(180deg)'},
 150   {at: 0, is: 'rotate(90deg)'},
 151   {at: 0.25, is: 'rotate(67.5deg)'},
 152   {at: 0.75, is: 'rotate(22.5deg)'},
 153   {at: 1, is: 'rotate(0deg)'},
 154   {at: 2, is: 'rotate(-90deg)'},
 155 ]);
 156 assertInterpolation({
 157   property: '-webkit-transform',
 158   from: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
 159   to: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'
 160 }, [
 161   {at: -1, is: 'rotateX(-700deg) rotateY(-800deg) rotateZ(-900deg)'},
 162   {at: 0, is: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'},
 163   {at: 0.25, is: 'rotateX(175deg) rotateY(200deg) rotateZ(225deg)'},
 164   {at: 0.75, is: 'rotateX(525deg) rotateY(600deg) rotateZ(675deg)'},
 165   {at: 1, is: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'},
 166   {at: 2, is: 'rotateX(1400deg) rotateY(1600deg) rotateZ(1800deg)'},
 167 ]);
 168
 169 // Scale
 170 assertInterpolation({
 171   property: '-webkit-transform',
 172   from: 'scale(10, 5)',
 173   to: 'scale(20, 9)'
 174 }, [
 175   {at: -1, is: 'scale(0, 1)'},
 176   {at: 0, is: 'scale(10, 5)'},
 177   {at: 0.25, is: 'scale(12.5, 6)'},
 178   {at: 0.75, is: 'scale(17.5, 8)'},
 179   {at: 1, is: 'scale(20, 9)'},
 180   {at: 2, is: 'scale(30, 13)'},
 181 ]);
 182 assertInterpolation({
 183   property: '-webkit-transform',
 184   from: 'scaleX(10)',
 185   to: 'scaleX(20)'
 186 }, [
 187   {at: -1, is: 'scaleX(0)'},
 188   {at: 0, is: 'scaleX(10)'},
 189   {at: 0.25, is: 'scaleX(12.5)'},
 190   {at: 0.75, is: 'scaleX(17.5)'},
 191   {at: 1, is: 'scaleX(20)'},
 192   {at: 2, is: 'scaleX(30)'},
 193 ]);
 194 assertInterpolation({
 195   property: '-webkit-transform',
 196   from: 'scaleY(5)',
 197   to: 'scaleY(9)'
 198 }, [
 199   {at: -1, is: 'scaleY(1)'},
 200   {at: 0, is: 'scaleY(5)'},
 201   {at: 0.25, is: 'scaleY(6)'},
 202   {at: 0.75, is: 'scaleY(8)'},
 203   {at: 1, is: 'scaleY(9)'},
 204   {at: 2, is: 'scaleY(13)'},
 205 ]);
 206 assertInterpolation({
 207   property: '-webkit-transform',
 208   from: 'scaleZ(1)',
 209   to: 'scaleZ(2)'
 210 }, [
 211   {at: -1, is: 'scaleZ(0)'},
 212   {at: 0, is: 'scaleZ(1)'},
 213   {at: 0.25, is: 'scaleZ(1.25)'},
 214   {at: 0.75, is: 'scaleZ(1.75)'},
 215   {at: 1, is: 'scaleZ(2)'},
 216   {at: 2, is: 'scaleZ(3)'},
 217 ]);
 218 assertInterpolation({
 219   property: '-webkit-transform',
 220   from: 'scale3d(10, 0.5, 1)',
 221   to: 'scale3d(20, 1, 2)'
 222 }, [
 223   {at: -1, is: 'scale3d(0, 0, 0)'},
 224   {at: 0, is: 'scale3d(10, 0.5, 1)'},
 225   {at: 0.25, is: 'scale3d(12.5, 0.625, 1.25)'},
 226   {at: 0.75, is: 'scale3d(17.5, 0.875, 1.75)'},
 227   {at: 1, is: 'scale3d(20, 1, 2)'},
 228   {at: 2, is: 'scale3d(30, 1.5, 3)'},
 229 ]);
 230 assertInterpolation({
 231   property: '-webkit-transform',
 232   from: 'none',
 233   to: 'scale3d(2, 3, 5)'
 234 }, [
 235   {at: -1, is: 'scale3d(0, -1, -3)'},
 236   {at: 0, is: 'scale3d(1, 1, 1)'},
 237   {at: 0.25, is: 'scale3d(1.25, 1.5, 2)'},
 238   {at: 0.75, is: 'scale3d(1.75, 2.5, 4)'},
 239   {at: 1, is: 'scale3d(2, 3, 5)'},
 240   {at: 2, is: 'scale3d(3, 5, 9)'},
 241 ]);
 242 assertInterpolation({
 243   property: '-webkit-transform',
 244   from: 'scale3d(2, 3, 5)',
 245   to: 'none'
 246 }, [
 247   {at: -1, is: 'scale3d(3, 5, 9)'},
 248   {at: 0, is: 'scale3d(2, 3, 5)'},
 249   {at: 0.25, is: 'scale3d(1.75, 2.5, 4)'},
 250   {at: 0.75, is: 'scale3d(1.25, 1.5, 2)'},
 251   {at: 1, is: 'scale3d(1, 1, 1)'},
 252   {at: 2, is: 'scale3d(0, -1, -3)'},
 253 ]);
 254 assertInterpolation({
 255   property: '-webkit-transform',
 256   from: 'scaleX(10) scaleY(0.5) scaleZ(1)',
 257   to: 'scaleX(20) scaleY(1) scaleZ(2)'
 258 }, [
 259   {at: -1, is: 'scaleX(0) scaleY(0) scaleZ(0)'},
 260   {at: 0, is: 'scaleX(10) scaleY(0.5) scaleZ(1)'},
 261   {at: 0.25, is: 'scaleX(12.5) scaleY(0.625) scaleZ(1.25)'},
 262   {at: 0.75, is: 'scaleX(17.5) scaleY(0.875) scaleZ(1.75)'},
 263   {at: 1, is: 'scaleX(20) scaleY(1) scaleZ(2)'},
 264   {at: 2, is: 'scaleX(30) scaleY(1.5) scaleZ(3)'},
 265 ]);
 266 assertInterpolation({
 267   property: '-webkit-transform',
 268   from: 'skewX(10rad) scaleZ(1)',
 269   to: 'skewX(20rad) scaleZ(2)'
 270 }, [
 271   {at: -1, is: 'skewX(0rad) scaleZ(0)'},
 272   {at: 0, is: 'skewX(10rad) scaleZ(1)'},
 273   {at: 0.25, is: 'skewX(12.5rad) scaleZ(1.25)'},
 274   {at: 0.75, is: 'skewX(17.5rad) scaleZ(1.75)'},
 275   {at: 1, is: 'skewX(20rad) scaleZ(2)'},
 276   {at: 2, is: 'skewX(30rad) scaleZ(3)'},
 277 ]);
 278 assertInterpolation({
 279   property: '-webkit-transform',
 280   from: 'skewX(10rad)',
 281   to: 'skewX(20rad) scaleZ(2)'
 282 }, [
 283   {at: -1, is: 'matrix3d(1, 0, 0, 0, -0.940439289306569, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1)'},
 284   {at: 0, is: 'skewX(10rad)'},
 285   {at: 0.25, is: 'matrix3d(1, 0, 0, 0, 1.0455608566505006, 1, 0, 0, 0, 0, 1.25, 0, 0, 0, 0, 1)'},
 286   {at: 0.75, is: 'matrix3d(1, 0, 0, 0, 1.8399609150333283, 1, 0, 0, 0, 0, 1.75, 0, 0, 0, 0, 1)'},
 287   {at: 1, is: 'skewX(20rad) scaleZ(2)'},
 288   {at: 2, is: 'matrix3d(1, 0, 0, 0, 3.825961060990398, 1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1)'},
 289 ]);
 290 assertInterpolation({
 291   property: '-webkit-transform',
 292   from: 'scaleZ(3) perspective(400px)',
 293   to: 'scaleZ(4) skewX(1rad) perspective(500px)'
 294 }, [
 295   {at: -1, is: 'matrix3d(1, 0, 0, 0, -1.5574077246549023, 1, 0, 0, 0, 0, 2, -0.002333333333333333, 0, 0, 0, 1)'},
 296   {at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 3, -0.0025, 0, 0, 0, 1)'},
 297   {at: 0.25, is: 'matrix3d(1, 0, 0, 0, 0.3893519311637256, 1, 0, 0, 0, 0, 3.25, -0.0024375, 0, 0, 0, 1)'},
 298   {at: 0.75, is: 'matrix3d(1, 0, 0, 0, 1.1680557934911766, 1, 0, 0, 0, 0, 3.75, -0.0021874999999999998, 0, 0, 0, 1)'},
 299   {at: 1, is: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, 0, 0, 4, -0.002, 0, 0, 0, 1)'},
 300   {at: 2, is: 'matrix3d(1, 0, 0, 0, 3.1148154493098046, 1, 0, 0, 0, 0, 5, -0.0008333333333333337, 0, 0, 0, 1)'},
 301 ]);
 302 assertInterpolation({
 303   property: '-webkit-transform',
 304   from: 'translateY(70%) scaleZ(1)',
 305   to: 'translateY(90%) scaleZ(2)'
 306 }, [
 307   {at: -1, is: 'translateY(50%) scaleZ(0)'},
 308   {at: 0, is: 'translateY(70%) scaleZ(1)'},
 309   {at: 0.25, is: 'translateY(75%) scaleZ(1.25)'},
 310   {at: 0.75, is: 'translateY(85%) scaleZ(1.75)'},
 311   {at: 1, is: 'translateY(90%) scaleZ(2)'},
 312   {at: 2, is: 'translateY(110%) scaleZ(3)'},
 313 ]);
 314 assertInterpolation({
 315   property: '-webkit-transform',
 316   from: 'translateY(70%)',
 317   to: 'translateY(90%) scaleZ(2)'
 318 }, [
 319   {at: -1, is: 'translateY(50%) scaleZ(0)'},
 320   {at: 0, is: 'translateY(70%)'},
 321   {at: 0.25, is: 'translateY(75%) scaleZ(1.25)'},
 322   {at: 0.75, is: 'translateY(85%) scaleZ(1.75)'},
 323   {at: 1, is: 'translateY(90%) scaleZ(2)'},
 324   {at: 2, is: 'translateY(110%) scaleZ(3)'},
 325 ]);
 326
 327 // Skew
 328 assertInterpolation({
 329   property: '-webkit-transform',
 330   from: 'skewX(10rad)',
 331   to: 'skewX(20rad)'
 332 }, [
 333   {at: -1, is: 'skewX(0rad)'},
 334   {at: 0, is: 'skewX(10rad)'},
 335   {at: 0.25, is: 'skewX(12.5rad)'},
 336   {at: 0.75, is: 'skewX(17.5rad)'},
 337   {at: 1, is: 'skewX(20rad)'},
 338   {at: 2, is: 'skewX(30rad)'},
 339 ]);
 340 assertInterpolation({
 341   property: '-webkit-transform',
 342   from: 'skewY(10rad)',
 343   to: 'skewY(20rad)'
 344 }, [
 345   {at: -1, is: 'skewY(0rad)'},
 346   {at: 0, is: 'skewY(10rad)'},
 347   {at: 0.25, is: 'skewY(12.5rad)'},
 348   {at: 0.75, is: 'skewY(17.5rad)'},
 349   {at: 1, is: 'skewY(20rad)'},
 350   {at: 2, is: 'skewY(30rad)'},
 351 ]);
 352
 353 // Translate
 354 assertInterpolation({
 355   property: '-webkit-transform',
 356   from: 'translate(12px, 70%)',
 357   to: 'translate(13px, 90%)'
 358 }, [
 359   {at: -1, is: 'translate(11px, 50%)'},
 360   {at: 0, is: 'translate(12px, 70%)'},
 361   {at: 0.25, is: 'translate(12.25px, 75%)'},
 362   {at: 0.75, is: 'translate(12.75px, 85%)'},
 363   {at: 1, is: 'translate(13px, 90%)'},
 364   {at: 2, is: 'translate(14px, 110%)'},
 365 ]);
 366 assertInterpolation({
 367   property: '-webkit-transform',
 368   from: 'translateX(12px)',
 369   to: 'translateX(13px)'
 370 }, [
 371   {at: -1, is: 'translateX(11px)'},
 372   {at: 0, is: 'translateX(12px)'},
 373   {at: 0.25, is: 'translateX(12.25px)'},
 374   {at: 0.75, is: 'translateX(12.75px)'},
 375   {at: 1, is: 'translateX(13px)'},
 376   {at: 2, is: 'translateX(14px)'},
 377 ]);
 378 assertInterpolation({
 379   property: '-webkit-transform',
 380   from: 'translateY(70%)',
 381   to: 'translateY(90%)'
 382 }, [
 383   {at: -1, is: 'translateY(50%)'},
 384   {at: 0, is: 'translateY(70%)'},
 385   {at: 0.25, is: 'translateY(75%)'},
 386   {at: 0.75, is: 'translateY(85%)'},
 387   {at: 1, is: 'translateY(90%)'},
 388   {at: 2, is: 'translateY(110%)'},
 389 ]);
 390 assertInterpolation({
 391   property: '-webkit-transform',
 392   from: 'translateZ(2em)',
 393   to: 'translateZ(3em)'
 394 }, [
 395   {at: -1, is: 'translateZ(1em)'},
 396   {at: 0, is: 'translateZ(2em)'},
 397   {at: 0.25, is: 'translateZ(2.25em)'},
 398   {at: 0.75, is: 'translateZ(2.75em)'},
 399   {at: 1, is: 'translateZ(3em)'},
 400   {at: 2, is: 'translateZ(4em)'},
 401 ]);
 402 assertInterpolation({
 403   property: '-webkit-transform',
 404   from: 'translate3d(12px, 70%, 2em)',
 405   to: 'translate3d(13px, 90%, 3em)'
 406 }, [
 407   {at: -1, is: 'translate3d(11px, 50%, 1em)'},
 408   {at: 0, is: 'translate3d(12px, 70%, 2em)'},
 409   {at: 0.25, is: 'translate3d(12.25px, 75%, 2.25em)'},
 410   {at: 0.75, is: 'translate3d(12.75px, 85%, 2.75em)'},
 411   {at: 1, is: 'translate3d(13px, 90%, 3em)'},
 412   {at: 2, is: 'translate3d(14px, 110%, 4em)'},
 413 ]);
 414 assertInterpolation({
 415   property: '-webkit-transform',
 416   from: 'translateX(12px) translateY(70%) translateZ(2em)',
 417   to: 'translateX(13px) translateY(90%) translateZ(3em)'
 418 }, [
 419   {at: -1, is: 'translateX(11px) translateY(50%) translateZ(1em)'},
 420   {at: 0, is: 'translateX(12px) translateY(70%) translateZ(2em)'},
 421   {at: 0.25, is: 'translateX(12.25px) translateY(75%) translateZ(2.25em)'},
 422   {at: 0.75, is: 'translateX(12.75px) translateY(85%) translateZ(2.75em)'},
 423   {at: 1, is: 'translateX(13px) translateY(90%) translateZ(3em)'},
 424   {at: 2, is: 'translateX(14px) translateY(110%) translateZ(4em)'},
 425 ]);
 426 assertInterpolation({
 427   property: '-webkit-transform',
 428   from: 'skewX(10rad) translateY(70%)',
 429   to: 'skewX(20rad) translateY(90%)'
 430 }, [
 431   {at: -1, is: 'skewX(0rad) translateY(50%)'},
 432   {at: 0, is: 'skewX(10rad) translateY(70%)'},
 433   {at: 0.25, is: 'skewX(12.5rad) translateY(75%)'},
 434   {at: 0.75, is: 'skewX(17.5rad) translateY(85%)'},
 435   {at: 1, is: 'skewX(20rad) translateY(90%)'},
 436   {at: 2, is: 'skewX(30rad) translateY(110%)'},
 437 ]);
 438 assertInterpolation({
 439   property: '-webkit-transform',
 440   from: 'skewX(1rad)',
 441   to: 'translate3d(8px, -4px, 12px) skewX(2rad)'
 442 }, [
 443   {at: -1, is: 'matrix3d(1, 0, 0, 0, 5.2998553125713235, 1, 0, 0, 0, 0, 1, 0, -8, 4, -12, 1)'},
 444   {at: 0, is: 'matrix(1, 0, 1.5574077246549023, 1, 0, 0)'},
 445   {at: 0.25, is: 'matrix3d(1, 0, 0, 0, 0.621795827675797, 1, 0, 0, 0, 0, 1, 0, 2, -1, 3, 1)'},
 446   {at: 0.75, is: 'matrix3d(1, 0, 0, 0, -1.2494279662824135, 1, 0, 0, 0, 0, 1, 0, 6, -3, 9, 1)'},
 447   {at: 1, is: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 1, 0, 0, 0, 0, 1, 0, 8, -4, 12, 1)'},
 448   {at: 2, is: 'matrix3d(1, 0, 0, 0, -5.9274874511779405, 1, 0, 0, 0, 0, 1, 0, 16, -8, 24, 1)'},
 449 ]);
 450 assertInterpolation({
 451   property: '-webkit-transform',
 452   from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
 453   to: 'scaleY(2) skewX(2rad) perspective(500px)'
 454 }, [
 455   {at: -1, is: 'matrix3d(1, 0, 0, 0, 0, 0, 0, 0, -0.03876288659793814, 0.01938144329896907, 0.94, -0.0029653608247422686, 16, -8, 24, 0.986144329896907)'},
 456   {at: 0, is: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, -0.02, 0.01, 0.97, -0.0025, 8, -4, 12, 1)'},
 457   {at: 0.25, is: 'matrix3d(1, 0, 0, 0, 1.1186572632293585, 1.25, 0, 0, -0.0151159793814433, 0.00755798969072165, 0.9775, -0.002378247422680413, 6, -3, 9, 1.0012989690721648)'},
 458   {at: 0.75, is: 'matrix3d(1, 0, 0, 0, -0.7525665307288518, 1.75, 0, 0, -0.005115979381443298, 0.002557989690721649, 0.9924999999999999, -0.002128247422680412, 2, -1, 3, 1.001298969072165)'},
 459   {at: 1, is: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'},
 460   {at: 2, is: 'matrix3d(1, 0, 0, 0, -11.227342763749263, 3, 0, 0, 0.021237113402061854, -0.010618556701030927, 1.03, -0.0014653608247422677, -8, 4, -12, 0.9861443298969074)'},
 461 ]);
 462 assertInterpolation({
 463   property: '-webkit-transform',
 464   from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
 465   to: 'translate3d(4px, -12px, 8px) scaleY(2) perspective(500px)'
 466 }, [
 467   {at: -1, is: 'matrix3d(1, 0, 0, 0, 0, 0, 0, 0, -0.03165032268879389, -0.0036057329645461413, 0.956, -0.002984745620652083, 12, 4, 16, 0.9956416059005948)'},
 468   {at: 0, is: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, -0.02, 0.01, 0.97, -0.0025, 8, -4, 12, 1)'},
 469   {at: 0.25, is: 'matrix3d(1, 0, 0, 0, 1.4600697418639708, 1.25, 0, 0, -0.017032782247925572, 0.013463037465426202, 0.9735, -0.0023764300980638675, 7, -6, 11, 1.0004085994468193)'},
 470   {at: 0.75, is: 'matrix3d(1, 0, 0, 0, 0.68136587953652, 1.75, 0, 0, -0.011032782247925572, 0.0204630374654262, 0.9804999999999999, -0.0021264300980638673, 5, -10, 9, 1.0004085994468193)'},
 471   {at: 1, is: 'matrix3d(1, 0, 0, 0, 0, 2, 0, 0, -0.008, 0.024, 0.984, -0.002, 4, -12, 8, 1)'},
 472   {at: 2, is: 'matrix3d(1, 0, 0, 0, -4.672223173964706, 3, 0, 0, 0.0043496773112061, 0.038394267035453865, 0.998, -0.0014847456206520829, 0, -20, 4, 0.9956416059005954)'},
 473 ]);
 474 assertInterpolation({
 475   property: '-webkit-transform',
 476   from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)',
 477   to: 'translate3d(4px, -12px, 8px) skewX(2rad) scaleY(2)'
 478 }, [
 479   {at: -1, is: 'matrix3d(1, 0, 0, 0, 0, 0, 0, 0, -0.03876288659793814, 0.01938144329896907, 0.94, -0.004845360824742268, 12, 4, 16, 0.9793814432989688)'},
 480   {at: 0, is: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, -0.02, 0.01, 0.97, -0.0025, 8, -4, 12, 1)'},
 481   {at: 0.25, is: 'matrix3d(1, 0, 0, 0, 0.7772447845947462, 1.25, 0, 0, -0.0151159793814433, 0.00755798969072165, 0.9775, -0.0018894974226804128, 7, -6, 11, 1.0019329896907216)'},
 482   {at: 0.75, is: 'matrix3d(1, 0, 0, 0, -2.1864989409942237, 1.75, 0, 0, -0.005115979381443298, 0.002557989690721649, 0.9924999999999999, -0.0006394974226804124, 5, -10, 9, 1.0019329896907216)'},
 483   {at: 1, is: 'matrix3d(1, 0, 0, 0, -4.370079726523038, 2, 0, 0, 0, 0, 1, 0, 4, -12, 8, 1)'},
 484   {at: 2, is: 'matrix3d(1, 0, 0, 0, -17.782462353533823, 3, 0, 0, 0.021237113402061854, -0.010618556701030927, 1.03, 0.0026546391752577322, 0, -20, 4, 0.9793814432989691)'},
 485 ]);
 486
 487 // Matrix
 488 assertInterpolation({
 489   property: '-webkit-transform',
 490   from: 'matrix(5, 6, 10, 7, 21, 23)',
 491   to: 'matrix(8, 4, 9, 11, 24, 22)'
 492 }, [
 493   {at: -1, is: 'matrix(-21.971399357258385, -10.985699678629187, -50.57889827616046, -38.946928317003575, 18, 24)'},
 494   {at: 0, is: 'matrix(5, 6, 10, 7, 21, 23)'},
 495   {at: 0.25, is: 'matrix(1.5045862850823934, 2.1375701058706307, 1.9887759643453702, 1.2132035030840276, 21.75, 22.75)'},
 496   {at: 0.75, is: 'matrix(3.1847985591364396, 1.2803008685850275, 4.4228208119507615, 5.537010031441669, 23.25, 22.25)'},
 497   {at: 1, is: 'matrix(8, 4, 9, 11, 24, 22)'},
 498   {at: 2, is: 'matrix(-16.45196668627737, -19.74236002353284, -18.81066272622538, 0.5900238929654478, 27, 21)'},
 499 ]);
 500 assertInterpolation({
 501   property: '-webkit-transform',
 502   from: 'matrix(43.30127018922194, 30, -17.5, 36.373066958946424, 31, 33)',
 503   to: 'matrix(36, 31.17691453623979, -76.2102355330306, 22, 34, 32)'
 504 }, [
 505   {at: -1, is: 'matrix(50.7191465922708, 27.5802296277601, 4.91128504689649, 17.7046464595868, 28, 34)'},
 506   {at: 0, is: 'matrix(43.30127018922194, 30, -17.5, 36.373066958946424, 31, 33)'},
 507   {at: 0.25, is: 'matrix(41.4579172764046, 30.4088866283282, -29.1438768223581, 36.3267603016693, 31.75, 32.75)'},
 508   {at: 0.75, is: 'matrix(37.8045038027911, 30.9964317800692, -58.6633288853787, 29.3063176731403, 33.25, 32.25)'},
 509   {at: 1, is: 'matrix(36, 31.17691453623979, -76.2102355330306, 22, 34, 32)'},
 510   {at: 2, is: 'matrix(28.9928082708843, 31.1691829526532, -160.742351276266, -35.9984985114527, 37, 31)'},
 511 ]);
 512 assertInterpolation({
 513   property: '-webkit-transform',
 514   from: 'none',
 515   to: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'
 516 }, [
 517   {at: -1, is: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'},
 518   {at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
 519   {at: 0.25, is: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'},
 520   {at: 0.75, is: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'},
 521   {at: 1, is: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'},
 522   {at: 2, is: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'},
 523 ]);
 524 assertInterpolation({
 525   property: '-webkit-transform',
 526   from: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)',
 527   to: 'none'
 528 }, [
 529   {at: -1, is: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'},
 530   {at: 0, is: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'},
 531   {at: 0.25, is: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'},
 532   {at: 0.75, is: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'},
 533   {at: 1, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
 534   {at: 2, is: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'},
 535 ]);
 536 assertInterpolation({
 537   property: '-webkit-transform',
 538   from: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)',
 539   to: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'
 540 }, [
 541   {at: -1, is: 'matrix3d(1.9877532948000005, 0.0, 0.0, 0.0, 0.0, 2.7492749567000003, 0.0, 0.0, 0.0, 0.0, 2.5165290423999997, 0.0, 20.2343946258, 21.1087405532, 21.371164870599998, 1.0)'},
 542   {at: 0, is: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)'},
 543   {at: 0.25, is: 'matrix3d(2.441256919175, 0.0, 0.0, 0.0, 0.0, 2.571299218825, 0.0, 0.0, 0.0, 0.0, 2.6947530634, 0.0, 20.35889062555, 20.561444082325, 20.800684839349998, 1.0)'},
 544   {at: 0.75, is: 'matrix3d(2.622658368925, 0.0, 0.0, 0.0, 0.0, 2.500108923675, 0.0, 0.0, 0.0, 0.0, 2.7660426718, 0.0, 20.408689025450002, 20.342525493975, 20.572492826850002, 1.0)'},
 545   {at: 1, is: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'},
 546   {at: 2, is: 'matrix3d(3.0761619932999995, 0.0, 0.0, 0.0, 0.0, 2.3221331858, 0.0, 0.0, 0.0, 0.0, 2.9442666928000003, 0.0, 20.5331850252, 19.7952290231, 20.002012795600002, 1.0)'},
 547 ]);
 548 assertInterpolation({
 549   property: '-webkit-transform',
 550   from: 'none',
 551   to: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'
 552 }, [
 553   {at: -1, is: 'matrix3d(-0.0000000000000002377810622383943, -1.0671050586638147, -0.08972656766237302, 1.3740432449326199, 0.98484601036295, -2.653201092395309, 0.6753819540610847, 3.6127240080250744, -2.7988839807429846, -1.2090004194153336, -0.5183744226115445, -0.7936088631686278, 1.1875, 0.0625, -1.3125, 5.340768914473683)'},
 554   {at: 0, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
 555   {at: 0.25, is: 'matrix3d(0.9041890962319094, 0.3522701519297133, -0.15240204298176957, -0.1428256720529315, -0.7579798772527586, 0.6803606288839232, -0.05133336076757235, 0.37904689530895724, -0.1957679784745485, 0.38554138029509327, 0.8226186974340638, 0.3370288143441876, -0.296875, -0.015625, 0.328125, 0.5930529142680923)'},
 556   {at: 0.75, is: 'matrix3d(0.35007413226026135, 0.7254385504141292, -0.4977009150941454, 0.09582061929004702, -1.1027525038949482, -0.5884810398827429, 0.4516829688651701, 0.5447944343861767, -0.68717798815684, 0.2657772247405681, 0.5465690479810023, 1.0836207863885503, -0.890625, -0.046875, 0.984375, 0.5930529142680927)'},
 557   {at: 1, is: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'},
 558   {at: 2, is: 'matrix3d(-0.5844534449366048, -0.42278005999296053, -0.4650580659922564, -0.6817595809063256, 0.9156938760088464, 0.3851647027225889, 0.9244443507516923, 0.7218225020358241, -0.0803568793574344, 0.1719974850210706, -0.49676609633513097, -0.25968177786904373, -2.375, -0.125, 2.625, 5.340768914473685)'},
 559 ]);
 560 assertInterpolation({
 561   property: '-webkit-transform',
 562   from: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)',
 563   to: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'
 564 }, [
 565   {at: -1, is: 'matrix3d(-0.6299594065765657, -0.10825090106268696, -0.20133311671001855, 5.485724217214554, 6.358051978686152, 0.16496896269344588, 1.5760051143537075, -54.21568355620423, 0.7106057459805782, -1.1596356050622005, -0.11495342545397585, -4.913752963990824, -1.03125, -1.125, 3.5625, -5.901513951904114)'},
 566   {at: 0, is: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'},
 567   {at: 0.25, is: 'matrix3d(0.33652832679595723, 0.55254445148386, -0.7544724447833296, 0.22700224951774267, -0.69720168363685, -0.036373245768780864, 0.28149188169180933, -0.2845156818045006, -0.24737156018941048, 0.31207160370190334, 0.4564821058052897, 0.9220853089096839, -1.2265625, 0.203125, 0.75, 1.647016932991011)'},
 568   {at: 0.75, is: 'matrix3d(0.6861191524977764, -0.18025672746204927, -0.8710297237546482, 0.6072134247444672, 0.2819931018922366, 0.27778974607679663, -0.6540128246146626, 0.5063632314069845, 0.5509562084361049, -0.3215202993119732, 0.5459062603735321, 2.8697154005492105, -1.3046875, 0.734375, -0.375, 1.6470169329910096)'},
 569   {at: 1, is: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'},
 570   {at: 2, is: 'matrix3d(-1.1789992641434441, -0.7109729379601547, -0.4455746537954199, -21.703089533128907, -0.11137581475421703, -0.08822983871000473, -0.05695380894007451, -2.22667264132605, -3.1443917136741506, 1.8952588096345078, 2.426615889772007, -21.697523130750138, -1.5, 2.0625, -3.1875, -5.901513951904121)'},
 571 ]);
 572 assertInterpolation({
 573   property: '-webkit-transform',
 574   from: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)',
 575   to: 'none'
 576 }, [
 577   {at: -1, is: 'matrix3d(-0.6413028394192518, -1.0702420910513302, -0.5807595966791961, -18.02447171345163, 0.8211815704840004, 1.0980679097347057, 0.9399408862655454, 22.460730852026064, 0.28421009261178104, -0.5408346238741739, 0.5194791363698213, 3.075163035391172, -2.6875, 2, -1.875, -14.881239394516232)'},
 578   {at: 0, is: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'},
 579   {at: 0.25, is: 'matrix3d(0.7912976716694541, -0.4517927901159618, -0.6868745974719376, 1.2522201536338506, 0.7952183069582651, 0.06340410955800829, -0.7956629784232128, 2.2561737435012983, 0.345639443327071, -0.8934490945546473, 0.830131443385676, 1.2606901484983566, -1.0078125, 0.75, -0.703125, 2.4888661932358946)'},
 580   {at: 0.75, is: 'matrix3d(1.0093457700315165, -0.12746048375025829, -0.24746788943106088, 1.3202120308857304, 0.6128364656690982, 0.7600694601651116, -0.22233359857303325, 1.4081483224940277, 0.21669805381113447, -0.3786082265932788, 0.908354523914928, 0.6747509193960347, -0.3359375, 0.25, -0.234375, 2.4888661932358964)'},
 581   {at: 1, is: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'},
 582   {at: 2, is: 'matrix3d(0.39048513570444376, 0.14780794797065988, 0.6963068100217401, -4.857907861239344, -2.967682789284791, 0.6004978769584385, -3.5472376016872444, 26.675324787979896, -2.5953724498995308, 1.6280843851961373, 0.8163834310586356, 9.001735256585825, 1.34375, -1, 0.9375, -14.881239394516227)'},
 583 ]);
 584
 585 // Mismatched interpolation with an empty list should not use decomposition.
 586 assertInterpolation({
 587   property: '-webkit-transform',
 588   from: 'none',
 589   to: 'rotate(180deg)'
 590 }, [
 591   {at: -1, is: 'rotate(-180deg)'},
 592   {at: 0, is: 'rotate(0deg)'},
 593   {at: 0.25, is: 'rotate(45deg)'},
 594   {at: 0.75, is: 'rotate(135deg)'},
 595   {at: 1, is: 'rotate(180deg)'},
 596   {at: 2, is: 'rotate(360deg)'},
 597 ]);
 598 assertInterpolation({
 599   property: '-webkit-transform',
 600   from: 'rotate(180deg)',
 601   to: 'none'
 602 }, [
 603   {at: -1, is: 'rotate(360deg)'},
 604   {at: 0, is: 'rotate(180deg)'},
 605   {at: 0.25, is: 'rotate(135deg)'},
 606   {at: 0.75, is: 'rotate(45deg)'},
 607   {at: 1, is: 'rotate(0deg)'},
 608   {at: 2, is: 'rotate(-180deg)'},
 609 ]);
 610 assertInterpolation({
 611   property: '-webkit-transform',
 612   from: 'none',
 613   to: 'rotate(360deg)'
 614 }, [
 615   {at: -1, is: 'rotate(-360deg)'},
 616   {at: 0, is: 'rotate(0deg)'},
 617   {at: 0.25, is: 'rotate(90deg)'},
 618   {at: 0.75, is: 'rotate(270deg)'},
 619   {at: 1, is: 'rotate(360deg)'},
 620   {at: 2, is: 'rotate(720deg)'},
 621 ]);
 622 </script>
 623 </body>