Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-color/animation/opacity-animation-ending-correctly-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<html class="reftest-wait">
<title>CSS Test (Color): ending of opacity animation</title>
<link rel="match" href="opacity-animation-ending-correctly-001-ref.html">
<style>
#test {
position: sticky;
top: 0;
height: 50px;
background: blue;
transition: opacity 50ms step-start;
}
#test.fade {
opacity: 0.2;
}
.tall {
height: 5000px;
}
</style>
<div id="test">
</div>
<div class="tall">
</div>
<script>
function flushStyleLayoutAndPrePaint() {
document.elementFromPoint(10, 10);
}
document.getElementById("test").addEventListener("transitionend", function(e) {
document.documentElement.classList.remove("reftest-wait");
});
requestAnimationFrame(function() {
flushStyleLayoutAndPrePaint();
requestAnimationFrame(function() {
document.getElementById("test").classList.add("fade");
flushStyleLayoutAndPrePaint();
});
});
</script>