mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-19 07:22:21 +00:00
b92a8553c7
We already have logic to play or cancel animations in an element's subtree when the display property changes to or from none. However, this was not sufficient to cover the case when an element starts/stops being nested in display none after insertion.
59 lines
No EOL
1.4 KiB
HTML
59 lines
No EOL
1.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<style>
|
|
.animated-box {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: coral;
|
|
animation: move 2s linear infinite;
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(100px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.hidden-container {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script src="../include.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="visible-container">
|
|
<div class="animated-box" id="animated-box"></div>
|
|
</div>
|
|
|
|
<div id="hidden-container" class="hidden-container">
|
|
</div>
|
|
|
|
<script>
|
|
asyncTest(done => {
|
|
requestAnimationFrame(() => {
|
|
const animatedBox = document.getElementById('animated-box');
|
|
const hiddenContainer = document.getElementById('hidden-container');
|
|
const animationsCountBefore = document.getAnimations().length;
|
|
hiddenContainer.appendChild(animatedBox);
|
|
const animationsCountAfter = document.getAnimations().length;
|
|
println('Animations count before: ' + animationsCountBefore);
|
|
println('Animations count after: ' + animationsCountAfter);
|
|
done();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |