mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 09:45:06 +02:00
4b4d960cba
"none" value should be interpreted as "no animation" to trigger the path that cancels previous animation if it exists.
40 lines
1009 B
HTML
40 lines
1009 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<div id="box"></div>
|
|
<style>
|
|
#box {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #000;
|
|
margin: 200px;
|
|
}
|
|
@keyframes enlarge {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
transform: scale(5);
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
asyncTest(done => {
|
|
const box = document.getElementById("box");
|
|
|
|
box.addEventListener("animationcancel", () => {
|
|
println("Animation cancelled");
|
|
done();
|
|
});
|
|
|
|
box.addEventListener("animationstart", () => {
|
|
requestAnimationFrame(() => (box.style.animation = "none"));
|
|
});
|
|
|
|
box.style.animation = "enlarge 2s forwards";
|
|
});
|
|
</script>
|
|
</html>
|