| <!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> |
