<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title><!-- TODO: insert title here --></title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> <style> #anim { width: 100px; height: 100px; background: red; position: relative; animation: mymove 1s 1; animation-iteration-count: infinite; } @keyframes mymove { from {left: 0px;} to {left: 200px;} } </style> <script> SimpleTest.waitForExplicitFinish(); var animCount = 0; var didRunXHR = false; async function start() { await SpecialPowers.pushPrefEnv({"set": [["layout.skip_ticks_while_page_suspended", true]]}); window.addEventListener("animationiteration", function l() { ++animCount; info(animCount); if (didRunXHR) { window.removeEventListener("animationiteration", l); document.getElementById("anim").id = ""; SimpleTest.finish(); } }); let startCount = animCount; let xhr = new XMLHttpRequest(); xhr.open("GET", "slow.sjs", false); xhr.send(null); didRunXHR = true; is(animCount, startCount, "Shouldn't have triggered animation events during the sync XHRs"); } </script> </head> <body onload="start()"> <div id="anim"></div> <p id="display"></p> <div id="content" style="display: none"></div> <pre id="test"></pre> </body> </html>