LibWeb: Don't play initially-paused animations
Some checks are pending
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, Clang (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run

This commit is contained in:
Gingeh 2025-06-16 12:26:42 +10:00 committed by Jelle Raaijmakers
commit e96338dd63
Notes: github-actions[bot] 2025-06-18 15:18:49 +00:00
11 changed files with 143 additions and 37 deletions

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<style>
div {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
animation: moveRight 0.1s linear;
animation-play-state: paused;
}
@keyframes moveRight {
0% {
left: 0;
}
100% {
left: 100px;
}
}
</style>
<body>
<script src="../include.js"></script>
<div></div>
<script>
test(() => {
let animation = document.querySelector("div").getAnimations()[0];
println(animation.playState);
animation.play();
println(animation.playState);
});
</script>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<style>
#paused, #running, #pseudo::before, #pseudo::after {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
animation: moveRight 1s linear;
animation-iteration-count: infinite;
}
#paused {
animation-play-state: paused;
}
#running {
animation-play-state: running;
}
#pseudo::before {
content: 'running';
animation-play-state: running;
}
#pseudo::after {
content: 'paused';
animation-play-state: paused;
}
@keyframes moveRight {
0% {
left: 0;
}
100% {
left: 100px;
}
}
</style>
<body>
<script src="../include.js"></script>
<div id="outer" style="display: none;">
<div id="paused"></div>
<div id="running"></div>
<div id="pseudo"></div>
</div>
<script>
asyncTest((done) => {
setTimeout(() => {
document.getElementById("outer").style.display = "block";
println(document.getElementById("paused").getAnimations()[0].playState);
println(document.getElementById("running").getAnimations()[0].playState);
println(document.getElementById("pseudo").getAnimations()[0].playState);
println(document.getElementById("pseudo").getAnimations()[1].playState);
done();
}, 100);
});
</script>