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   -webkit-transform: rotateY(45deg);
  16   transform: rotateY(45deg);
  17 }
  18 .replica .transformed {
  19   background: green;
  20 }
  21 .replica {
  22   position: relative;
  23   left: -50px;
  24   opacity: 0.75;
  25 }
  26 </style>
  27 <body>
  28 <template id="target-template">
  29 <div><div class="transformed"></div></div>
  30 </template>
  31 <script src="resources/interpolation-test.js"></script>
  32 <script>
  33 assertInterpolation({
  34   property: '-webkit-perspective-origin',
  35   from: '0% 50%',
  36   to: '100% 150%'
  37 }, [
  38   {at: -0.3, is: '-30% 20%'},
  39   {at: 0, is: '0% 50%'},
  40   {at: 0.3, is: '30% 80%'},
  41   {at: 0.6, is: '60% 110%'},
  42   {at: 1, is: '100% 150%'},
  43   {at: 1.5, is: '150% 200%'}
  44 ]);
  45 </script>
  46 </body>