blob: ac3ab7e203c88af57f42986952ee296d1adbff9f [file] [log] [blame]
<html>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background: blue;
transform: translateZ(0);
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: 2;
}
.normal {
-webkit-animation-direction: normal;
}
.reverse {
-webkit-animation-direction: reverse;
}
.alternate {
-webkit-animation-direction: alternate;
}
.alternate-reverse {
-webkit-animation-direction: alternate-reverse;
}
.anim-left {
-webkit-animation-name: anim-left;
z-index: 100;
}
.anim-transform {
-webkit-animation-name: anim-transform;
z-index: 200;
}
@-webkit-keyframes anim-left {
0% {
left: 0px;
}
100% {
left: 300px;
}
}
@-webkit-keyframes anim-transform {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}
</style>
<body>
<p>
Each section below has two boxes, the top runs on the main thread, the bottom
on the compositor. The animations should be identical but start at different
times.
</p><p>
This test is successful if the each pair of boxes are mostly in sync (there
might be a small offset between them).
</p>
<hr>
Direction normal - forwards twice
<br>
<div class='normal anim-left'></div>
<div class='normal anim-transform'></div>
Direction reverse - backwards twice
<br>
<div class='reverse anim-left'></div>
<div class='reverse anim-transform'></div>
Direction alternate - forwards then backwards
<br>
<div class='alternate anim-left'></div>
<div class='alternate anim-transform'></div>
Direction alternate-reverse - backwards then forwards
<br>
<div class='alternate-reverse anim-left'></div>
<div class='alternate-reverse anim-transform'></div>
</body>
</html>