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/crashtests/replace-keyframes-animating-filter-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="test-wait">
<title>CSS Test (Animations): Changing an @keyframes that animates filter</title>
<meta name="assert" content="This should not crash.">
<style>
#el1 {
height: 100px;
width: 100px;
animation: kf1 2s linear;
}
@keyframes kf1 {
from { filter: grayscale(0.9) }
to { filter: grayscale(0.8) }
}
</style>
<div id="el1"></div>
<script>
document.documentElement.addEventListener("TestRendered", step1);
function step1() {
requestAnimationFrame(function() { requestAnimationFrame(step2); });
}
function step2() {
let css = document.styleSheets[0];
css.insertRule("@keyframes kf1 { from { color: blue } to { color: blue } } ", css.rules.length);
requestAnimationFrame(step3);
}
function step3() {
document.documentElement.classList.remove("test-wait");
}
</script>