• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<html>
2<style>
3div {
4    position: relative;
5    height: 100px;
6    width: 100px;
7    background: blue;
8    -webkit-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        -webkit-transform: translateX(0px);
61    }
62    100% {
63        -webkit-transform: translateX(300px);
64    }
65}
66</style>
67<body>
68<p>
69Each section below has two boxes, the top runs on the main thread, the bottom
70on the compositor. The animations should be identical but start at different
71times.
72</p><p>
73This test is successful if the boxes are mostly in sync (there might be a small
74offset between them).
75</p>
76<hr>
77
78Iteration count 0 (should not animate)
79<br>
80<div class='test0 anim-left'></div>
81<div class='test0 anim-transform'></div>
82
83Iteration 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
88Iteration 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
93Iteration 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
98Iteration 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
103Iteration 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>
109