Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-animations/animation-iteration-count-010.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Animation Test: paused animation with various animation-iteration-count</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<meta name="assert" content="
The animation has a duration of 1s and a delay of -2s, meaning that it has already
completed 2 iterations.
Therefore, if the animation-iteration-count is 2 or less, the animation is finished,
so the background should be transparent.
If it's more than 2, then the animation is at the very beginning of the 3rd iteration,
and thus the background should be green.
">
<style>
@keyframes keyframes {
from { background: green }
to { background: red }
}
div {
animation: 1s -2s infinite paused keyframes;
width: 100px;
height: 100px;
border: solid;
margin: 1em;
float: left;
}
</style>
<div style="animation-iteration-count: 1" data-expected="rgba(0, 0, 0, 0)"></div>
<div style="animation-iteration-count: 2" data-expected="rgba(0, 0, 0, 0)"></div>
<div style="animation-iteration-count: 2.1" data-expected="rgb(0, 128, 0)"></div>
<div style="animation-iteration-count: 3" data-expected="rgb(0, 128, 0)"></div>
<div style="animation-iteration-count: 4" data-expected="rgb(0, 128, 0)"></div>
<div style="animation-iteration-count: infinite" data-expected="rgb(0, 128, 0)"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
for (let element of document.querySelectorAll("div")) {
test(function() {
assert_equals(
getComputedStyle(element).backgroundColor,
element.dataset.expected,
"background-color",
);
}, element.style.cssText);
}
</script>