layout/style/test/file_animations_async_tests.html

   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>