blob: 0393eca828c7c2dc68db98432fb97e6f8305f47d [file] [log] [blame]
<html>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background: blue;
transform: translateZ(0);
animation-direction: alternate;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: both;
}
.test0 {
animation-iteration-count: 0;
}
.test1 {
animation-iteration-count: 0.5;
}
.test2 {
animation-iteration-count: 1;
}
.test3 {
animation-iteration-count: 1.5;
}
.test4 {
animation-iteration-count: 2;
}
.test5 {
animation-iteration-count: 2.5;
}
.anim-left {
animation-name: anim-left;
z-index: 100;
}
.anim-transform {
animation-name: anim-transform;
z-index: 200;
}
@keyframes anim-left {
0% {
left: 0px;
}
100% {
left: 300px;
}
}
@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 boxes are mostly in sync (there might be a small
offset between them).
</p>
<hr>
Iteration count 0 (should not animate)
<br>
<div class='test0 anim-left'></div>
<div class='test0 anim-transform'></div>
Iteration count 0.5 (should finish first in the middle)
<br>
<div class='test1 anim-left'></div>
<div class='test1 anim-transform'></div>
Iteration count 1 (should finish second at the end)
<br>
<div class='test2 anim-left'></div>
<div class='test2 anim-transform'></div>
Iteration count 1.5 (should finish third in the middle)
<br>
<div class='test3 anim-left'></div>
<div class='test3 anim-transform'></div>
Iteration count 2 (should finish fourth at the start)
<br>
<div class='test4 anim-left'></div>
<div class='test4 anim-transform'></div>
Iteration count 2.5 (should finish last in the middle)
<br>
<div class='test5 anim-left'></div>
<div class='test5 anim-transform'></div>
</body>
</html>