third_party/WebKit/ManualTests/animation/compositor-transform-prevented-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: 4;
  15   left: 100px;
  16   top: 200px;
  17   motion-path: path('m 0 0 h 800');
  18 }
  19
  20 #div2 {
  21   z-index: 5;
  22   left: 100px;
  23   top: 300px;
  24   motion-path: path('m 0 0 h 400 z');
  25 }
  26
  27 </style>
  28 </head>
  29 <body>
  30 <p>
  31 Tests that motion path animations prevent a future transform animation from being composited.
  32 <p>
  33 The two squares should make equivalent movements from left to right and back to left. They need not be perfectly in time.
  34
  35 <div id="div1"></div>
  36 <div id="div2"></div>
  37
  38 <script>
  39 var div1 = document.getElementById('div1');
  40 var div2 = document.getElementById('div2');
  41
  42 function startAnimations() {
  43   div1.animate([
  44       {motionOffset: '0%'},
  45       {motionOffset: '100%'}
  46   ], {
  47       duration: 2000,
  48       delay: 1000
  49   });
  50   div1.animate([
  51       {transform: 'translate(0px)'},
  52       {transform: 'translate(-800px)'}
  53   ], {
  54       duration: 1000,
  55       delay: 2000
  56   });
  57
  58   div2.animate([
  59       {motionOffset: '0%'},
  60       {motionOffset: '100%'}
  61   ], {
  62       duration: 2000,
  63       delay: 1000
  64   });
  65 }
  66
  67 requestAnimationFrame(startAnimations);
  68
  69 </script>
  70
  71 </body>
  72 </html>