third_party/WebKit/ManualTests/animation/compositor-animation-same-property.html

   1 <html>
   2 <style>
   3 div {
   4     position: relative;
   5     height: 100px;
   6     width: 100px;
   7     background: yellow;
   8 }
   9 </style>
  10 <body>
  11 <p>
  12 Each section below has two boxes, the top runs on the main thread, the bottom
  13 on the compositor.
  14 </p><p>
  15 This test is successful if the boxes are mostly in sync and all finish at the
  16 same time.
  17 </p>
  18 <hr>
  19
  20 Add second translate animation on timeout (with fill=forwards)
  21 <br>
  22 <div id="test1_blink">BLINK THREAD</div>
  23 <div id="test1_impl">IMPL THREAD</div>
  24 <hr>
  25
  26 Add second translate animation on timeout if first one was paused earlier
  27 <br>
  28 <div id="test2_blink">BLINK THREAD</div>
  29 <div id="test2_impl">IMPL THREAD</div>
  30 <hr>
  31
  32 Add second translate animation on timeout if first one was finished earlier
  33 <br>
  34 <div id="test3_blink">BLINK THREAD</div>
  35 <div id="test3_impl">IMPL THREAD</div>
  36 <hr>
  37
  38 Add second translate animation on timeout if first higher-priority one was paused earlier
  39 <br>
  40 <div id="test4_blink">BLINK THREAD</div>
  41 <div id="test4_impl">IMPL THREAD</div>
  42 <hr>
  43
  44 <script>
  45 var leftKeyframes = [
  46     {left: '100px'},
  47     {left: '600px'}
  48     ];
  49 var translateKeyframes = [
  50     {transform: 'translateX(100px)'},
  51     {transform: 'translateX(600px)'}
  52     ];
  53
  54 var leftKeyframes2 = [
  55     {left: '600px'},
  56     {left: '700px'}
  57     ];
  58 var translateKeyframes2 = [
  59     {transform: 'translateX(600px)'},
  60     {transform: 'translateX(700px)'}
  61     ];
  62
  63 var player1_blink = test1_blink.animate(leftKeyframes, {
  64         duration: 5000,
  65         delay: 100,
  66         fill: 'forwards'
  67     });
  68 var player1_impl = test1_impl.animate(translateKeyframes, {
  69         duration: 5000,
  70         delay: 100,
  71         fill: 'forwards'
  72     });
  73
  74 var player2_blink = test2_blink.animate(leftKeyframes, {
  75         duration: 5000,
  76         delay: 100,
  77     });
  78 var player2_impl = test2_impl.animate(translateKeyframes, {
  79         duration: 5000,
  80         delay: 100,
  81     });
  82
  83 var player3_blink = test3_blink.animate(leftKeyframes, {
  84         duration: 5000,
  85         delay: 100,
  86     });
  87 var player3_impl = test3_impl.animate(translateKeyframes, {
  88         duration: 5000,
  89         delay: 100,
  90     });
  91
  92 // Create detached lower-priority second player with short animation
  93 var player4_blink2 = test4_blink.animate(leftKeyframes2, {
  94         duration: 1000,
  95         delay: 500,
  96     });
  97 player4_blink2.cancel();
  98 var player4_impl2 = test4_impl.animate(translateKeyframes2, {
  99         duration: 1000,
 100         delay: 500,
 101     });
 102 player4_impl2.cancel();
 103
 104 var player4_blink = test4_blink.animate(leftKeyframes, {
 105         duration: 5000,
 106         delay: 100,
 107     });
 108 var player4_impl = test4_impl.animate(translateKeyframes, {
 109         duration: 5000,
 110         delay: 100,
 111     });
 112
 113 setTimeout(function() {
 114     player2_blink.pause();
 115     player2_impl.pause();
 116
 117     player3_blink.finish();
 118     player3_impl.finish();
 119
 120     player4_blink.pause();
 121     player4_impl.pause();
 122 }, 1500);
 123
 124 setTimeout(function() {
 125     var player1_blink2 = test1_blink.animate(leftKeyframes2, {
 126             duration: 1000,
 127             delay: 500,
 128             fill: 'forwards'
 129         });
 130     var player1_impl2 = test1_impl.animate(translateKeyframes2, {
 131             duration: 1000,
 132             delay: 500,
 133             fill: 'forwards'
 134         });
 135
 136     var player2_blink2 = test2_blink.animate(leftKeyframes2, {
 137             duration: 1000,
 138             delay: 500,
 139         });
 140     var player2_impl2 = test2_impl.animate(translateKeyframes2, {
 141             duration: 1000,
 142             delay: 500,
 143         });
 144
 145     var player3_blink2 = test3_blink.animate(leftKeyframes2, {
 146             duration: 1000,
 147             delay: 500,
 148         });
 149     var player3_impl2 = test3_impl.animate(translateKeyframes2, {
 150             duration: 1000,
 151             delay: 500,
 152         });
 153
 154     player4_blink2.play();
 155     player4_impl2.play();
 156 }, 2500);
 157 </script>
 158 </body>
 159 </html>