third_party/WebKit/ManualTests/animation/compositor-transform-halted-by-motion-path.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 div {
   7   position: absolute;
   8   height: 90px;
   9   width: 90px;
  10   background: blue;
  11 }
  12
  13 #div1 {
  14   z-index: 1;
  15   left: 100px;
  16   top: 200px;
  17 }
  18
  19 #div2 {
  20   z-index: 3;
  21   left: 100px;
  22   top: 300px;
  23 }
  24
  25 </style>
  26 </head>
  27 <body>
  28 <p>
  29 Tests that motion path animations stop an existing transform animation from being composited.
  30 <p>
  31 The two squares should make equivalent movements from left to right and back to left. They need not be perfectly in time.
  32
  33 <div id="div1"></div>
  34 <div id="div2"></div>
  35
  36 <script>
  37 var div1 = document.getElementById('div1');
  38 var div2 = document.getElementById('div2');
  39
  40 function startAnimations() {
  41   div1.animate([
  42       {transform: 'translate(0px)'},
  43       {transform: 'translate(400px)'},
  44       {transform: 'translate(0px)'}
  45   ], {
  46       duration: 2000,
  47       delay: 1000
  48   });
  49
  50   div2.animate([
  51       {transform: 'translate(0px)'},
  52       {transform: 'translate(800px)'}
  53   ], {
  54       duration: 2000,
  55       delay: 1000
  56   });
  57   setTimeout(function() {
  58     div2.style.motionPath = 'path("m 0 0 h -800")';
  59     div2.style.motionRotation = '0deg';
  60     div2.animate([
  61         {motionOffset: '0%'},
  62         {motionOffset: '100%'}
  63     ], {
  64         duration: 1000
  65     });
  66   }, 2000);
  67 }
  68
  69 requestAnimationFrame(startAnimations);
  70
  71 </script>
  72
  73 </body>
  74 </html>