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

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