<!DOCTYPE html>
<meta charset=utf8>
<title>Web Animation does not stop even if target is hidden by c-v</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
<script src="/web-animations/testcommon.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
content-visibility: auto;
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0; }
}
#target {
background: green;
height: 100px;
width: 100px;
}
.animate {
animation: fade 1s linear 2 alternate;
}
.transition {
transition: opacity 1s linear;
}
</style>
<body>
<div id="spacer"></div>
<div id="container"></div>
</body>
<script>
"use strict";
function createElementWithWebAnimation(test) {
const container = document.getElementById('container');
const target = document.createElement('div');
container.appendChild(target);
target.id = 'target';
const keyframes = [
{ opacity: 1 },
{ opacity: 0 },
];
const options = {
duration: 2000,
iterations: 1,
easing: 'linear',
direction: 'alternate',
};
target.animate(keyframes, options);
return target;
}
promise_test(async t => {
// Make sure the target is hidden from the beginning.
document.getElementById("spacer").style.height = "300vh";
const target = createElementWithWebAnimation(t);
const animation = target.getAnimations()[0];
let animationFinishEvent = false;
animation.addEventListener('finish', () => {
animationFinishEvent = true;
});
animation.currentTime = 1999;
await animation.ready;
await waitForAnimationFrames(2);
assert_true(animationFinishEvent,
'Web Animation event should keep going even if target is hidden by c-v');
}, 'Web Animation does not stop even if target is hidden by c-v');
</script>
Codebase Browser
chromium