src/third_party/WebKit/LayoutTests/animations/interpolation/webkit-perspective-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .target {
   5   display: inline-block;
   6   margin-top: 50px;
   7   margin-bottom: 25px;
   8 }
   9 .transformed {
  10   width: 50px;
  11   height: 50px;
  12   background: black;
  13   -webkit-transform: rotateY(45deg);
  14   transform: rotateY(45deg);
  15 }
  16 .replica .transformed {
  17   background: green;
  18 }
  19 .replica {
  20   position: relative;
  21   left: -50px;
  22   opacity: 0.75;
  23 }
  24 </style>
  25 <body>
  26 <template id="target-template">
  27 <div><div class="transformed"></div></div>
  28 </template>
  29 <script src="resources/interpolation-test.js"></script>
  30 <script>
  31 assertInterpolation({
  32   property: '-webkit-perspective',
  33   from: '50px',
  34   to: '100px'
  35 }, [
  36   {at: -20, is: 'none'}, // perspective does not accept 0 or negative values
  37   {at: -0.3, is: '35px'},
  38   {at: 0, is: '50px'},
  39   {at: 0.3, is: '65px'},
  40   {at: 0.6, is: '80px'},
  41   {at: 1, is: '100px'},
  42   {at: 1.5, is: '125px'}
  43 ]);
  44 </script>
  45 </body>