third_party/WebKit/ManualTests/animation/compositor-transform-with-scale.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 div {
   7   position: absolute;
   8   backface-visibility: visible;
   9   height: 25px;
  10   width: 25px;
  11 }
  12
  13 #div1 {
  14   left: 100px;
  15   top: 200px;
  16   background-color: blue;
  17 }
  18
  19 #div2 {
  20   left: 200px;
  21   top: 200px;
  22   background-color: red;
  23 }
  24 #div3 {
  25   left: 300px;
  26   top: 200px;
  27   background-color: purple;
  28 }
  29
  30 </style>
  31 </head>
  32 <body>
  33 <p>
  34 Tests that composited animation happens when only transform or only scale is present.
  35 <p>
  36 The 3 squares should equivalently scale. They need not be perfectly in time.
  37 <p>
  38 Blue - Only Transform, Red - Only Scale, Purple - Transform + Scale
  39
  40 <div id="div1"></div>
  41 <div id="div2"></div>
  42 <div id="div3"></div>
  43
  44 <script>
  45 var div1 = document.getElementById('div1');
  46 var div2 = document.getElementById('div2');
  47 var div3 = document.getElementById('div3');
  48
  49 function startAnimations() {
  50   div1.animate([
  51       {transform: 'scale(1, 1)'},
  52       {transform: 'scale(4, 4)'}
  53   ], {
  54       duration: 5000,
  55       delay: 1000,
  56       fill: 'forwards'
  57   });
  58
  59   div2.animate([
  60       {scale: '1 1'},
  61       {scale: '4 4'}
  62   ], {
  63       duration: 5000,
  64       delay: 1000,
  65       fill: 'forwards'
  66   });
  67
  68   div3.animate([
  69       {transform: 'scale(1, 1)', scale: '1 1'},
  70       {transform: 'scale(2, 2)', scale: '2 2'}
  71   ], {
  72       duration: 5000,
  73       delay: 1000,
  74       fill: 'forwards'
  75   });
  76 }
  77
  78 requestAnimationFrame(startAnimations);
  79
  80 </script>
  81
  82 </body>
  83 </html>