Fonts.js: Add isLoadedCallback and add hack known from worker/client.js

diff --git a/fonts.js b/fonts.js
index fbd9a0167420f064e1f3f8ecdc1abc3becbbb7c6..36dbc53d299ce559bc4f4561ed147010ab8e15bf 100644 (file)
--- a/fonts.js
+++ b/fonts.js
@@ -779,9 +779,18 @@ var Font = (function () {
       });
     },
 
-    bindDOM: function font_bindDom(data) {
+    bindDOM: function font_bindDom(data, callback) {
       var fontName = this.name;
 
+      // Just adding the font-face to the DOM doesn't make it load. It
+      // seems it's loaded once Gecko notices it's used. Therefore,
+      // add a div on the page using the loaded font.
+      var div = document.createElement("div");
+      var style = 'font-family:"' + name + 
+        '";position: absolute;top:-99999;left:-99999;z-index:-99999';
+      div.setAttribute("style", style);
+      document.body.appendChild(div);
+
       /** Hack begin */
       // Actually there is not event when a font has finished downloading so
       // the following code are a dirty hack to 'guess' when a font is ready
@@ -801,15 +810,19 @@ var Font = (function () {
 
         // For some reasons the font has not loaded, so mark it loaded for the
         // page to proceed but cry
-        if ((Date.now() - this.start) >= kMaxWaitForFontFace) {
-          window.clearInterval(interval);
-          Fonts[fontName].loading = false;
-          warn("Is " + fontName + " loaded?");
-          this.start = 0;
-        } else if (textWidth != ctx.measureText(testString).width) {
-          window.clearInterval(interval);
-          Fonts[fontName].loading = false;
-          this.start = 0;
+        if (textWidth == ctx.measureText(testString).width) {
+          if ((Date.now() - this.start) < kMaxWaitForFontFace) {
+            return;
+          } else {
+            warn("Is " + fontName + " loaded?");
+          }
+        }
+        
+        window.clearInterval(interval);
+        Fonts[fontName].loading = false;
+        this.start = 0;
+        if (callback) {
+          callback();
         }
       }, 30, this);