src/third_party/WebKit/ManualTests/animation/compositor-animation-delay.html

   1 <html>
   2 <style>
   3 div {
   4     position: relative;
   5     height: 100px;
   6     width: 100px;
   7     background: blue;
   8     transform: translateZ(0);
   9     -webkit-animation-direction: alternate;
  10     -webkit-animation-duration: 2s;
  11     -webkit-animation-timing-function: linear;
  12     -webkit-animation-iteration-count: 6;
  13 }
  14
  15 .test0 {
  16     -webkit-animation-delay: -30s;
  17 }
  18
  19 .test1 {
  20     -webkit-animation-delay: -3s;
  21 }
  22
  23 .test2 {
  24     -webkit-animation-delay: 0s;
  25 }
  26
  27 .test3 {
  28     -webkit-animation-delay: 3s;
  29 }
  30
  31 .anim-left {
  32     -webkit-animation-name: anim-left;
  33     z-index: 100;
  34 }
  35
  36 .anim-transform {
  37     -webkit-animation-name: anim-transform;
  38     z-index: 200;
  39 }
  40
  41 @-webkit-keyframes anim-left {
  42     0% {
  43         left: 0px;
  44     }
  45     100% {
  46         left: 300px;
  47     }
  48 }
  49
  50 @-webkit-keyframes anim-transform {
  51     0% {
  52         transform: translateX(0px);
  53     }
  54     100% {
  55         transform: translateX(300px);
  56     }
  57 }
  58 </style>
  59 <body>
  60 <p>
  61 Each section below has two boxes, the top runs on the main thread, the bottom
  62 on the compositor. The animations should be identical but start at different
  63 times.
  64 </p><p>
  65 This test is successful if the boxes are mostly in sync (there might be a small
  66 offset between them).
  67 </p>
  68 <hr>
  69
  70 Start delay -30s (starts 30 seconds into animation by which the animation has finished, hence no animation)
  71 <br>
  72 <div class='test0 anim-left'></div>
  73 <div class='test0 anim-transform'></div>
  74
  75 Start delay -3s (starts 3 seconds into the animation, should finish first.)
  76 <br>
  77 <div class='test1 anim-left'></div>
  78 <div class='test1 anim-transform'></div>
  79
  80 Start delay 0s (no start delay, should finish second.)
  81 <br>
  82 <div class='test2 anim-left'></div>
  83 <div class='test2 anim-transform'></div>
  84
  85 Start delay 3s (starts 3 seconds after page load, should finish last.)
  86 <br>
  87 <div class='test3 anim-left'></div>
  88 <div class='test3 anim-transform'></div>
  89 </body>
  90 </html>