• 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-duration: 2s;
10    -webkit-animation-timing-function: linear;
11    -webkit-animation-fill-mode: both;
12    -webkit-animation-iteration-count: 2;
13}
14
15.test0 {
16    -webkit-animation-direction: normal;
17}
18
19.test1 {
20     -webkit-animation-direction: reverse;
21}
22
23.test2 {
24     -webkit-animation-direction: alternate;
25}
26
27.test3 {
28     -webkit-animation-direction: 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        -webkit-transform: translateX(0px);
53    }
54    100% {
55        -webkit-transform: translateX(300px);
56    }
57}
58</style>
59<body>
60<p>
61Each section below has two boxes, the top runs on the main thread, the bottom
62on the compositor. The animations should be identical but start at different
63times.
64</p><p>
65This test is successful if the boxes are mostly in sync (there might be a small
66offset between them).
67</p>
68<hr>
69
70Direction normal
71<br>
72<div class='test0 anim-left'></div>
73<div class='test0 anim-transform'></div>
74
75Direction reverse
76<br>
77<div class='test1 anim-left'></div>
78<div class='test1 anim-transform'></div>
79
80Direction alternate
81<br>
82<div class='test2 anim-left'></div>
83<div class='test2 anim-transform'></div>
84
85Direction alternate-reverse
86<br>
87<div class='test3 anim-left'></div>
88<div class='test3 anim-transform'></div>
89
90</body>
91</html>
92