103 lines
2.7 KiB
HTML
103 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<style>
|
||
|
.box {
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
margin: 3px;
|
||
|
display: inline-block;
|
||
|
background-color: silver;
|
||
|
}
|
||
|
|
||
|
body.changed .box::before {
|
||
|
content: '';
|
||
|
display: block;
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
animation: fade 0.1s;
|
||
|
}
|
||
|
|
||
|
@keyframes fade {
|
||
|
from { background-color: red; }
|
||
|
to { background-color: green; }
|
||
|
}
|
||
|
</style>
|
||
|
<script src="../resources/js-test-pre.js"></script>
|
||
|
<script>
|
||
|
window.jsTestIsAsync = true;
|
||
|
|
||
|
const numElements = 10;
|
||
|
let animationsStartedThisFrame = 0;
|
||
|
|
||
|
function makeElement(container)
|
||
|
{
|
||
|
let div = document.createElement('div');
|
||
|
div.className = 'box';
|
||
|
container.appendChild(div);
|
||
|
|
||
|
div.addEventListener('animationstart', (e) => {
|
||
|
++animationsStartedThisFrame;
|
||
|
}, false);
|
||
|
|
||
|
div.addEventListener('animationend', (e) => {
|
||
|
startNextIterationSoon();
|
||
|
}, false);
|
||
|
}
|
||
|
|
||
|
function checkStartedAnimationsCount()
|
||
|
{
|
||
|
shouldBe('animationsStartedThisFrame', 'numElements');
|
||
|
}
|
||
|
|
||
|
let nextIterationStarted = false;
|
||
|
function startAnimationSet()
|
||
|
{
|
||
|
nextIterationStarted = false;
|
||
|
animationsStartedThisFrame = 0;
|
||
|
|
||
|
document.body.classList.add('changed');
|
||
|
requestAnimationFrame(checkStartedAnimationsCount);
|
||
|
}
|
||
|
|
||
|
const numTrials = 10;
|
||
|
let trialCount = 0;
|
||
|
|
||
|
function startNextIterationSoon()
|
||
|
{
|
||
|
if (nextIterationStarted)
|
||
|
return;
|
||
|
|
||
|
nextIterationStarted = true;
|
||
|
|
||
|
if (trialCount++ == numTrials) {
|
||
|
finishJSTest();
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
document.body.classList.remove('changed');
|
||
|
document.body.offsetWidth; // Hack.
|
||
|
requestAnimationFrame(startAnimationSet);
|
||
|
}
|
||
|
|
||
|
function doTest()
|
||
|
{
|
||
|
description('Tests that animations on pseudo-elements do not eventually stop working.');
|
||
|
|
||
|
let container = document.getElementById('container');
|
||
|
for (let i = 0; i < numElements; ++i)
|
||
|
makeElement(container);
|
||
|
|
||
|
requestAnimationFrame(startNextIterationSoon);
|
||
|
}
|
||
|
|
||
|
window.addEventListener('load', doTest, false);
|
||
|
var successfullyParsed = true;
|
||
|
</script>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div id="container"></div>
|
||
|
<script src="../resources/js-test-post.js"></script>
|
||
|
</body>
|
||
|
</html>
|