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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 div {
   7   position: absolute;
   8   backface-visibility: visible;
   9   height: 100px;
  10   width: 100px;
  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 rotate is present.
  35 <p>
  36 The 3 squares should equivalently rotate. They need not be perfectly in time.
  37 <p>
  38 Blue - Only Transform, Red - Only Rotate, Purple - Transform + Rotate
  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: 'rotate3d(1, 1, 0, 0deg)'},
  52       {transform: 'rotate3d(1, 1, 0, 720deg)'}
  53   ], {
  54       duration: 5000,
  55       delay: 1000,
  56       fill: 'forwards'
  57   });
  58
  59   div2.animate([
  60       {rotate: '0deg 1 1 0'},
  61       {rotate: '720deg 1 1 0'}
  62   ], {
  63       duration: 5000,
  64       delay: 1000,
  65       fill: 'forwards'
  66   });
  67
  68   div3.animate([
  69       {transform: 'rotate3d(1, 1, 0, 0deg)',
  70        rotate: '0deg 1 1 0'},
  71       {transform: 'rotate3d(1, 1, 0, 360deg)',
  72        rotate: '360deg 1 1 0'}
  73   ], {
  74       duration: 5000,
  75       delay: 1000,
  76       fill: 'forwards'
  77   });
  78 }
  79
  80 requestAnimationFrame(startAnimations);
  81
  82 </script>
  83
  84 </body>
  85 </html>