third_party/WebKit/ManualTests/animation/compositor-animation-direction.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-duration: 2s;
  10     -webkit-animation-timing-function: linear;
  11     -webkit-animation-fill-mode: both;
  12     -webkit-animation-iteration-count: 2;
  13 }
  14
  15 .normal {
  16     -webkit-animation-direction: normal;
  17 }
  18
  19 .reverse {
  20      -webkit-animation-direction: reverse;
  21 }
  22
  23 .alternate {
  24      -webkit-animation-direction: alternate;
  25 }
  26
  27 .alternate-reverse {
  28      -webkit-animation-direction: alternate-reverse;
  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 each pair of boxes are mostly in sync (there
  66 might be a small offset between them).
  67 </p>
  68 <hr>
  69
  70 Direction normal - forwards twice
  71 <br>
  72 <div class='normal anim-left'></div>
  73 <div class='normal anim-transform'></div>
  74
  75 Direction reverse - backwards twice
  76 <br>
  77 <div class='reverse anim-left'></div>
  78 <div class='reverse anim-transform'></div>
  79
  80 Direction alternate - forwards then backwards
  81 <br>
  82 <div class='alternate anim-left'></div>
  83 <div class='alternate anim-transform'></div>
  84
  85 Direction alternate-reverse - backwards then forwards
  86 <br>
  87 <div class='alternate-reverse anim-left'></div>
  88 <div class='alternate-reverse anim-transform'></div>
  89
  90 </body>
  91 </html>