src/third_party/WebKit/LayoutTests/animations/interpolation/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   transform: rotateY(45deg);
  14 }
  15 .replica .transformed {
  16   background: green;
  17 }
  18 .replica {
  19   position: relative;
  20   left: -50px;
  21   opacity: 0.75;
  22 }
  23 </style>
  24 <body>
  25 <template id="target-template">
  26 <div><div class="transformed"></div></div>
  27 </template>
  28 <script src="resources/interpolation-test.js"></script>
  29 <script>
  30 assertInterpolation({
  31   property: 'perspective',
  32   from: '50px',
  33   to: '100px'
  34 }, [
  35   {at: -20, is: 'none'}, // perspective does not accept 0 or negative values
  36   {at: -1, 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>