Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Animations Test: animation-iteration-count - non-integer value</title>
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 -->
<meta name="flags" content="animated">
<meta name="assert" content="When animation-iteration-count is set to non-integer,
animation will end partway through its last cycle.">
<style>
#test-iteration-count {
animation-name: sample;
animation-duration: 10s;
animation-iteration-count: 2.1;
background-color: blue;
height: 100px;
width: 100px;
position: relative;
}
#ref-path {
background-color: yellow;
height: 10px;
width: 250px;
position: relative;
}
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
</style>
<body>
<p>
Test passes if there is a filled blue square with 'Filler Text',
which starts moving from right to left along the yellow bar twice,
and for the third time it ends partway and then immediately positions
itself to the left.
</p>
<div id="test-iteration-count">Filler Text</div>
<div id="ref-path"></div>
</body>