74 lines
1.8 KiB
HTML
74 lines
1.8 KiB
HTML
<!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>
|