third_party/WebKit/ManualTests/animation/compositor-animation-iteration-count.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-fill-mode: both;
  13 }
  14
  15 .test0 {
  16     -webkit-animation-iteration-count: 0;
  17 }
  18
  19 .test1 {
  20      -webkit-animation-iteration-count: 0.5;
  21 }
  22
  23 .test2 {
  24     -webkit-animation-iteration-count: 1;
  25 }
  26
  27 .test3 {
  28     -webkit-animation-iteration-count: 1.5;
  29 }
  30
  31 .test4 {
  32     -webkit-animation-iteration-count: 2;
  33 }
  34
  35 .test5 {
  36     -webkit-animation-iteration-count: 2.5;
  37 }
  38
  39 .anim-left {
  40     -webkit-animation-name: anim-left;
  41     z-index: 100;
  42 }
  43
  44 .anim-transform {
  45     -webkit-animation-name: anim-transform;
  46     z-index: 200;
  47 }
  48
  49 @-webkit-keyframes anim-left {
  50     0% {
  51         left: 0px;
  52     }
  53     100% {
  54         left: 300px;
  55     }
  56 }
  57
  58 @-webkit-keyframes anim-transform {
  59     0% {
  60         transform: translateX(0px);
  61     }
  62     100% {
  63         transform: translateX(300px);
  64     }
  65 }
  66 </style>
  67 <body>
  68 <p>
  69 Each section below has two boxes, the top runs on the main thread, the bottom
  70 on the compositor. The animations should be identical but start at different
  71 times.
  72 </p><p>
  73 This test is successful if the boxes are mostly in sync (there might be a small
  74 offset between them).
  75 </p>
  76 <hr>
  77
  78 Iteration count 0 (should not animate)
  79 <br>
  80 <div class='test0 anim-left'></div>
  81 <div class='test0 anim-transform'></div>
  82
  83 Iteration count 0.5 (should finish first in the middle)
  84 <br>
  85 <div class='test1 anim-left'></div>
  86 <div class='test1 anim-transform'></div>
  87
  88 Iteration count 1 (should finish second at the end)
  89 <br>
  90 <div class='test2 anim-left'></div>
  91 <div class='test2 anim-transform'></div>
  92
  93 Iteration count 1.5 (should finish third in the middle)
  94 <br>
  95 <div class='test3 anim-left'></div>
  96 <div class='test3 anim-transform'></div>
  97
  98 Iteration count 2 (should finish fourth at the start)
  99 <br>
 100 <div class='test4 anim-left'></div>
 101 <div class='test4 anim-transform'></div>
 102
 103 Iteration count 2.5 (should finish last in the middle)
 104 <br>
 105 <div class='test5 anim-left'></div>
 106 <div class='test5 anim-transform'></div>
 107 </body>
 108 </html>