file_animations_async_tests.html (2274B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test for Bug 1086937</title> 6 <script> 7 var is = opener.is.bind(opener); 8 var ok = opener.ok.bind(opener); 9 var todo = opener.todo.bind(opener); 10 function finish() { 11 var o = opener; 12 self.close(); 13 o.SimpleTest.finish(); 14 } 15 </script> 16 <script type="application/javascript" src="animation_utils.js"></script> 17 <style> 18 /* must use implicit value at one end */ 19 @keyframes slide-left { from { margin-left: -1000px } } 20 </style> 21 <script type="application/javascript"> 22 23 var gDisplay; 24 25 function run() { 26 gDisplay = document.getElementById("display"); 27 opener.SimpleTest.executeSoon(test1); 28 } 29 30 /* 31 * Bug 1086937 - Animations continue correctly across load of 32 * downloadable font. 33 */ 34 function test1() { 35 var animdiv = document.createElement("div"); 36 // Take control of the refresh driver right from the start 37 advance_clock(0); 38 animdiv.style.animation = "slide-left 100s linear"; // 10px per second 39 gDisplay.appendChild(animdiv); 40 var cs = getComputedStyle(animdiv, ""); 41 is(cs.marginLeft, "-1000px", "initial value of animation (force flush)"); 42 advance_clock(1000); 43 is(cs.marginLeft, "-990px", "value of animation before font load"); 44 45 var font = new FontFace("DownloadedAhem", "url(Ahem.ttf)"); 46 document.fonts.add(font); 47 48 var fontdiv = document.createElement("div"); 49 fontdiv.appendChild(document.createTextNode("A")); 50 fontdiv.style.fontFamily = "DownloadedAhem"; 51 gDisplay.appendChild(fontdiv); 52 53 font.load().then(function(loadedFace) { 54 is(cs.marginLeft, "-990px", "value of animation after font load " + 55 "(clock only advances when we say so)"); 56 advance_clock(1000); 57 is(cs.marginLeft, "-980px", 58 "animation should still be advancing after font load"); 59 60 SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); 61 document.fonts.delete(font); 62 animdiv.remove(); 63 fontdiv.remove(); 64 65 finish(); 66 }); 67 } 68 69 </script> 70 </head> 71 <body onload="run()"> 72 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1086937">Mozilla Bug 1086937</a> 73 <div id="display"></div> 74 <pre id="test"> 75 </pre> 76 </body> 77 </html>