webfontloader 1.0.22 → 1.0.24

data/CHANGELOG

@@ -1,3 +1,13 @@
+v1.0.24 (January 9, 2012)
+* Updated the standard test string from "BESs" to "BESbswy" for more width variability.
+* Improved Google's custom FontWatchRunner implementation for Webkit to work around an issue where the browser reports the 400 weight's width when it is already loaded.
+
+v1.0.23 (November 29, 2011)
+* Made the FontWatchRunner implementation configurable on a module-by-module basis.
+* Added a new .start() method to FontWatchRunner to actually kick off font loading detection.
+* Added a different FontWatchRunner implementation that Google's module uses to work around a Webkit browser bug. This implementation won't trigger active early, but may trigger active much later, so it's not the default for all modules.
+* Updated the implementation of Fontdeck's module to defer loading responsibility to their JS.
+
 v1.0.22 (July 1, 2011)
 * Fixed a bug in Webkit-based browsers with font detection where active would trigger without the font actually being active yet.
 * Increased the frequency of checking the widths of the font watcher spans.

data/lib/webfontloader/demo/public/fontdeck.html

@@ -17,7 +17,7 @@
     }
     WebFont.load({
       fontdeck: {
-        id: '2282'
+        id: 2282
       },
       loading: function() {
         progress('loading');

data/lib/webfontloader.rb

@@ -3,7 +3,7 @@ require 'yaml'
 require 'webfontloader/modules'
 
 module WebFontLoader
-  VERSION = '1.0.22'
+  VERSION = '1.0.24'
 
   ProjectRoot = File.expand_path(File.dirname(__FILE__) + "/..")
 

data/src/core/domhelper.js

@@ -25,9 +25,9 @@ webfont.DomHelper.prototype.createElement = function(elem, opt_attr,
     for (var attr in opt_attr) {
       // protect against native prototype augmentations
       if (opt_attr.hasOwnProperty(attr)) {
-        if (attr == "style" && this.userAgent_.getName() == "MSIE") {
-          domElement.style.cssText = opt_attr[attr];
-        } else {
+        if (attr == "style") {
+          this.setStyle(domElement, opt_attr[attr]);
+	} else {
           domElement.setAttribute(attr, opt_attr[attr]);
         }
       }
@@ -164,3 +164,16 @@ webfont.DomHelper.prototype.hasClassName = function(e, name) {
   }
   return false;
 };
+
+/**
+ * Sets the style attribute on an element.
+ * @param {Element} e The element.
+ * @param {string} styleString The style string.
+ */
+webfont.DomHelper.prototype.setStyle = function(e, styleString) {
+  if (this.userAgent_.getName() == "MSIE") {
+    e.style.cssText = styleString;
+  } else {
+    e.setAttribute("style", styleString);
+  }
+};

data/src/core/font.js

@@ -29,6 +29,8 @@ webfont.WebFont.prototype.load = function(configuration) {
 
 webfont.WebFont.prototype.isModuleSupportingUserAgent_ = function(module, eventDispatcher,
     fontWatcher, support) {
+  var fontWatchRunnerCtor = module.getFontWatchRunnerCtor ?
+      module.getFontWatchRunnerCtor() : webfont.FontWatchRunner;
   if (!support) {
     var allModulesLoaded = --this.moduleLoading_ == 0;
 
@@ -40,26 +42,27 @@ webfont.WebFont.prototype.isModuleSupportingUserAgent_ = function(module, eventD
         eventDispatcher.dispatchLoading();
       }
     }
-    fontWatcher.watch([], {}, {}, allModulesLoaded);
+    fontWatcher.watch([], {}, {}, fontWatchRunnerCtor, allModulesLoaded);
     return;
   }
   module.load(webfont.bind(this, this.onModuleReady_, eventDispatcher,
-      fontWatcher));
+      fontWatcher, fontWatchRunnerCtor));
 };
 
 webfont.WebFont.prototype.onModuleReady_ = function(eventDispatcher, fontWatcher,
-    fontFamilies, opt_fontDescriptions, opt_fontTestStrings) {
+    fontWatchRunnerCtor, fontFamilies, opt_fontDescriptions, opt_fontTestStrings) {
   var allModulesLoaded = --this.moduleLoading_ == 0;
 
   if (allModulesLoaded) {
     eventDispatcher.dispatchLoading();
   }
   this.asyncCall_(webfont.bind(this, function(_fontWatcher, _fontFamilies,
-    _fontDescriptions, _fontTestStrings, _allModulesLoaded) {
-    _fontWatcher.watch(_fontFamilies, _fontDescriptions || {},
-    _fontTestStrings || {}, _allModulesLoaded);
-  }, fontWatcher, fontFamilies, opt_fontDescriptions, opt_fontTestStrings,
-      allModulesLoaded));
+      _fontDescriptions, _fontTestStrings, _fontWatchRunnerCtor,
+      _allModulesLoaded) {
+        _fontWatcher.watch(_fontFamilies, _fontDescriptions || {},
+          _fontTestStrings || {}, _fontWatchRunnerCtor, _allModulesLoaded);
+      }, fontWatcher, fontFamilies, opt_fontDescriptions, opt_fontTestStrings,
+      fontWatchRunnerCtor, allModulesLoaded));
 };
 
 webfont.WebFont.prototype.load_ = function(eventDispatcher, configuration) {

data/src/core/fontwatcher.js

@@ -34,7 +34,7 @@ webfont.FontWatcher.DEFAULT_VARIATION = 'n4';
  * @param {boolean} last True if this is the last set of families to watch.
  */
 webfont.FontWatcher.prototype.watch = function(fontFamilies, fontDescriptions,
-    fontTestStrings, last) {
+    fontTestStrings, fontWatchRunnerCtor, last) {
   var length = fontFamilies.length;
 
   for (var i = 0; i < length; i++) {
@@ -61,9 +61,11 @@ webfont.FontWatcher.prototype.watch = function(fontFamilies, fontDescriptions,
 
       var activeCallback = webfont.bind(this, this.fontActive_);
       var inactiveCallback = webfont.bind(this, this.fontInactive_)
-      new webfont.FontWatchRunner(activeCallback, inactiveCallback,
-          this.domHelper_, this.fontSizer_, this.asyncCall_, this.getTime_,
-          fontFamily, fontDescription, fontTestString);
+      var fontWatchRunner = new fontWatchRunnerCtor(activeCallback,
+          inactiveCallback, this.domHelper_, this.fontSizer_, this.asyncCall_,
+          this.getTime_, fontFamily, fontDescription, fontTestString);
+
+      fontWatchRunner.start();
     }
   }
 };

data/src/core/fontwatchrunner.js

@@ -33,8 +33,6 @@ webfont.FontWatchRunner = function(activeCallback, inactiveCallback, domHelper,
       webfont.FontWatchRunner.DEFAULT_FONTS_A);
   this.requestedFontB_ = this.createHiddenElementWithFont_(
       webfont.FontWatchRunner.DEFAULT_FONTS_B);
-  this.started_ = getTime();
-  this.check_();
 };
 
 /**
@@ -68,7 +66,12 @@ webfont.FontWatchRunner.DEFAULT_FONTS_B = "Georgia,'Century Schoolbook L',serif"
  * @type {string}
  * @const
  */
-webfont.FontWatchRunner.DEFAULT_TEST_STRING = 'BESs';
+webfont.FontWatchRunner.DEFAULT_TEST_STRING = 'BESbswy';
+
+webfont.FontWatchRunner.prototype.start = function() {
+  this.started_ = this.getTime_();
+  this.check_();
+};
 
 /**
  * Checks the size of the two spans against their original sizes during each
@@ -141,15 +144,23 @@ webfont.FontWatchRunner.prototype.getDefaultFontSize_ = function(defaultFonts) {
  */
 webfont.FontWatchRunner.prototype.createHiddenElementWithFont_ = function(
     defaultFonts, opt_withoutFontFamily) {
-  var variationCss = this.fvd_.expand(this.fontDescription_);
-  var styleString = "position:absolute;top:-999px;left:-999px;" +
-    "font-size:300px;width:auto;height:auto;line-height:normal;margin:0;" +
-    "padding:0;font-variant:normal;font-family:" + (opt_withoutFontFamily ? "" :
-        this.nameHelper_.quote(this.fontFamily_) + ",") +
-      defaultFonts + ";" + variationCss;
+  var styleString = this.computeStyleString_(defaultFonts,
+      this.fontDescription_, opt_withoutFontFamily);
   var span = this.domHelper_.createElement('span', { 'style': styleString },
       this.fontTestString_);
 
   this.domHelper_.insertInto('body', span);
   return span;
 };
+
+webfont.FontWatchRunner.prototype.computeStyleString_ = function(defaultFonts,
+    fontDescription, opt_withoutFontFamily) {
+  var variationCss = this.fvd_.expand(fontDescription);
+  var styleString = "position:absolute;top:-999px;left:-999px;" +
+      "font-size:300px;width:auto;height:auto;line-height:normal;margin:0;" +
+      "padding:0;font-variant:normal;font-family:"
+      + (opt_withoutFontFamily ? "" :
+        this.nameHelper_.quote(this.fontFamily_) + ",")
+      + defaultFonts + ";" + variationCss;
+  return styleString;
+};

data/src/core/namespace.js

@@ -14,3 +14,17 @@ webfont.bind = function(context, func, opt_args) {
     return func.apply(context, args);
   };
 };
+
+webfont.extendsClass = function(baseClass, subClass) {
+
+  // Avoid polluting the baseClass prototype object with methods from the
+  // subClass
+  /** @constructor */
+  function baseExtendClass() {};
+  baseExtendClass.prototype = baseClass.prototype;
+  subClass.prototype = new baseExtendClass();
+
+  subClass.prototype.constructor = subClass;
+  subClass.superCtor_ = baseClass;
+  subClass.super_ = baseClass.prototype;
+};

data/src/fontdeck/fontdeck_script.js

@@ -12,16 +12,16 @@ webfont.FontdeckScript = function(global, domHelper, configuration) {
 
 webfont.FontdeckScript.NAME = 'fontdeck';
 webfont.FontdeckScript.HOOK = '__webfontfontdeckmodule__';
-webfont.FontdeckScript.API = 'http://fontdeck.com/api/v1/project-info?'
+webfont.FontdeckScript.API = '//f.fontdeck.com/s/css/js/';
 
 webfont.FontdeckScript.prototype.getScriptSrc = function(projectId) {
+  var protocol = 'https:' == this.global_.location.protocol ? 'https:' : 'http:';
   var api = this.configuration_['api'] || webfont.FontdeckScript.API;
-  return api + 'project=' + projectId + '&domain=' + document.location.hostname + '&callback=window.__webfontfontdeckmodule__[' + projectId + ']';
+  return protocol + api + this.global_.document.location.hostname + '/' + projectId + '.js';
 };
 
 webfont.FontdeckScript.prototype.supportUserAgent = function(userAgent, support) {
   var projectId = this.configuration_['id'];
-  var families = this.configuration_['families'] || null;
   var self = this;
 
   if (projectId) {
@@ -30,20 +30,16 @@ webfont.FontdeckScript.prototype.supportUserAgent = function(userAgent, support)
       this.global_[webfont.FontdeckScript.HOOK] = {};
     }
 
-    // The API will call this function with a link to the CSS
-    // and a list of supported fonts.
-    this.global_[webfont.FontdeckScript.HOOK][projectId] = function(data) {
-      self.domHelper_.insertInto('head', self.domHelper_.createCssLink(data['css']));
-        for (var i = 0, j = data['provides'].length; i < j; ++i) {
-          var font = data['provides'][i];
-          self.fontFamilies_.push(font['name']);
-          self.fontVariations_[font['name']] = [self.fvd_.compact("font-weight:" + font['weight'] + ";font-style:" +  font['style'])];
-        }
-        // If families were passed into load, then use them instead.
-        if (families !== null) {
-          self.fontFamilies_ = families;
-        }
-      support(true);
+    // Fontdeck will call this function to indicate support status
+    // and what fonts are provided.
+    this.global_[webfont.FontdeckScript.HOOK][projectId] = function(fontdeckSupports, data) {
+      for (var i = 0, j = data['fonts'].length; i<j; ++i) {
+        var font = data['fonts'][i];
+        // Add the FVDs
+        self.fontFamilies_.push(font['name']);
+        self.fontVariations_[font['name']] = [self.fvd_.compact("font-weight:" + font['weight'] + ";font-style:" + font['style'])];
+      }
+      support(fontdeckSupports);
     };
 
     // Call the Fontdeck API.

data/src/google/googlefontapi.js

@@ -13,6 +13,13 @@ webfont.GoogleFontApi.prototype.supportUserAgent = function(userAgent, support)
   support(userAgent.isSupportingWebFont());
 };
 
+webfont.GoogleFontApi.prototype.getFontWatchRunnerCtor = function() {
+  if (this.userAgent_.getEngine() == "AppleWebKit") {
+    return webfont.LastResortWebKitFontWatchRunner;
+  }
+  return webfont.FontWatchRunner;
+};
+
 webfont.GoogleFontApi.prototype.load = function(onReady) {
   var domHelper = this.domHelper_;
   var nonBlockingIe = this.userAgent_.getName() == 'MSIE' &&

data/src/google/lastresortwebkitfontwatchrunner.js

@@ -0,0 +1,89 @@
+/**
+ * @constructor
+ */
+webfont.LastResortWebKitFontWatchRunner = function(activeCallback,
+    inactiveCallback, domHelper, fontSizer, asyncCall, getTime, fontFamily,
+    fontDescription, opt_fontTestString) {
+  webfont.LastResortWebKitFontWatchRunner.superCtor_.call(this,
+      activeCallback, inactiveCallback, domHelper, fontSizer, asyncCall,
+      getTime, fontFamily, fontDescription, opt_fontTestString);
+  this.webKitLastResortFontSizes_ = this.setUpWebKitLastResortFontSizes_();
+  this.webKitLastResortSizeChange_ = false;
+};
+webfont.extendsClass(webfont.FontWatchRunner, webfont.LastResortWebKitFontWatchRunner);
+
+webfont.LastResortWebKitFontWatchRunner.METRICS_COMPATIBLE_FONTS = {
+    "Arimo": true,
+    "Cousine": true,
+    "Tinos": true
+};
+
+/**
+ * While loading a web font webkit applies a last resort fallback font to the
+ * element on which the web font is applied.
+ * See file: WebKit/Source/WebCore/css/CSSFontFaceSource.cpp.
+ * Looking at the different implementation for the different platforms,
+ * the last resort fallback font is different. This code uses the default
+ * OS/browsers values.
+ */
+webfont.LastResortWebKitFontWatchRunner.prototype
+    .setUpWebKitLastResortFontSizes_ = function() {
+  var lastResortFonts = ["Times New Roman",
+      "Lucida Sans Unicode", "Courier New", "Tahoma", "Arial",
+      "Microsoft Sans Serif", "Times", "Lucida Console", "Sans", "Serif",
+      "Monospace"];
+  var lastResortFontSizes = lastResortFonts.length;
+  var webKitLastResortFontSizes = {};
+  var element = this.createHiddenElementWithFont_(lastResortFonts[0], true);
+
+  webKitLastResortFontSizes[this.fontSizer_.getWidth(element)] = true;
+  for (var i = 1; i < lastResortFontSizes; i++) {
+    var font = lastResortFonts[i];
+    this.domHelper_.setStyle(element, this.computeStyleString_(font,
+        this.fontDescription_, true));
+    webKitLastResortFontSizes[this.fontSizer_.getWidth(element)] = true;
+
+    // Another WebKit quirk if the normal weight/style is loaded first,
+    // the size of the normal weight is returned when loading another weight.
+    if (this.fontDescription_[1] != '4') {
+      this.domHelper_.setStyle(element, this.computeStyleString_(font,
+        this.fontDescription_[0] + '4', true));
+      webKitLastResortFontSizes[this.fontSizer_.getWidth(element)] = true;
+    }
+  }
+  this.domHelper_.removeElement(element);
+  return webKitLastResortFontSizes;
+};
+
+webfont.LastResortWebKitFontWatchRunner.prototype.check_ = function() {
+  var sizeA = this.fontSizer_.getWidth(this.requestedFontA_);
+  var sizeB = this.fontSizer_.getWidth(this.requestedFontB_);
+
+  if (!this.webKitLastResortSizeChange_ && sizeA == sizeB &&
+      this.webKitLastResortFontSizes_[sizeA]) {
+    this.webKitLastResortFontSizes_ = {};
+    this.webKitLastResortFontSizes_[sizeA] = true;
+    this.webKitLastResortSizeChange_ = true;
+  }
+  if ((this.originalSizeA_ != sizeA || this.originalSizeB_ != sizeB) &&
+      (!this.webKitLastResortFontSizes_[sizeA] &&
+       !this.webKitLastResortFontSizes_[sizeB])) {
+    this.finish_(this.activeCallback_);
+  } else if (this.getTime_() - this.started_ >= 5000) {
+
+    // In order to handle the fact that a font could be the same size as the
+    // default browser font on a webkit browser, mark the font as active
+    // after 5 seconds if the latest 2 sizes are in webKitLastResortFontSizes_
+    // and the font name is known to be metrics compatible.
+    if (this.webKitLastResortFontSizes_[sizeA]
+        && this.webKitLastResortFontSizes_[sizeB] &&
+        webfont.LastResortWebKitFontWatchRunner.METRICS_COMPATIBLE_FONTS[
+          this.fontFamily_]) {
+      this.finish_(this.activeCallback_);
+    } else {
+      this.finish_(this.inactiveCallback_);
+    }
+  } else {
+    this.asyncCheck_();
+  }
+};

data/src/modules.yml

@@ -17,6 +17,7 @@ ascender:
   - ascender/ascender_script.js
 
 google:
+  - google/lastresortwebkitfontwatchrunner.js
   - google/fontapiurlbuilder.js
   - google/fontapiparser.js
   - google/googlefontapi.js

data/src-test/core/fontwatchertest.js

@@ -60,15 +60,19 @@ FontWatcherTest.prototype.setUp = function() {
       self.testStringCount_++;
       self.testStrings_[fontFamily] = opt_fontTestString;
     }
+    this.activeCallback_ = activeCallback;
+    this.inactiveCallback_ = inactiveCallback;
+    this.fontFamily_ = fontFamily;
+    this.fontDescription_ = fontDescription;
+  };
 
-    if (self.fontWatchRunnerActiveFamilies_.indexOf(fontFamily) > -1) {
-      activeCallback(fontFamily, fontDescription);
+  webfont.FontWatchRunner.prototype.start = function() {
+    if (self.fontWatchRunnerActiveFamilies_.indexOf(this.fontFamily_) > -1) {
+      this.activeCallback_(this.fontFamily_, this.fontDescription_);
     } else {
-      inactiveCallback(fontFamily, fontDescription);
+      this.inactiveCallback_(this.fontFamily_, this.fontDescription_);
     }
-
   };
-
 };
 
 FontWatcherTest.prototype.tearDown = function() {
@@ -83,7 +87,7 @@ FontWatcherTest.prototype.testWatchOneFontNotLast = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, {}, false);
+  fontWatcher.watch(fontFamilies, {}, {}, webfont.FontWatchRunner, false);
 
   assertEquals(0, this.fontInactiveEventCalled_);
   assertEquals(0, this.activeEventCalled_);
@@ -97,7 +101,7 @@ FontWatcherTest.prototype.testWatchOneFontActive = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, {}, true);
+  fontWatcher.watch(fontFamilies, {}, {}, webfont.FontWatchRunner, true);
 
   assertEquals(1, this.fontLoadingEventCalled_);
   assertEquals(true, this.fontLoading_['fontFamily1 n4']);
@@ -115,7 +119,7 @@ FontWatcherTest.prototype.testWatchOneFontInactive = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, {}, true);
+  fontWatcher.watch(fontFamilies, {}, {}, webfont.FontWatchRunner, true);
 
   assertEquals(1, this.fontLoadingEventCalled_);
   assertEquals(true, this.fontLoading_['fontFamily1 n4']);
@@ -133,7 +137,7 @@ FontWatcherTest.prototype.testWatchMultipleFontsActive = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, {}, true);
+  fontWatcher.watch(fontFamilies, {}, {}, webfont.FontWatchRunner, true);
 
   assertEquals(3, this.fontLoadingEventCalled_);
   assertEquals(true, this.fontLoading_['fontFamily1 n4']);
@@ -155,7 +159,7 @@ FontWatcherTest.prototype.testWatchMultipleFontsInactive = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, {}, true);
+  fontWatcher.watch(fontFamilies, {}, {}, webfont.FontWatchRunner, true);
 
   assertEquals(3, this.fontLoadingEventCalled_);
   assertEquals(true, this.fontLoading_['fontFamily1 n4']);
@@ -177,7 +181,7 @@ FontWatcherTest.prototype.testWatchMultipleFontsMixed = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, {}, true);
+  fontWatcher.watch(fontFamilies, {}, {}, webfont.FontWatchRunner, true);
 
   assertEquals(3, this.fontLoadingEventCalled_);
   assertEquals(true, this.fontLoading_['fontFamily1 n4']);
@@ -205,7 +209,7 @@ FontWatcherTest.prototype.testWatchMultipleFontsWithDescriptions = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, fontDescriptions, {}, true);
+  fontWatcher.watch(fontFamilies, fontDescriptions, {}, webfont.FontWatchRunner, true);
 
   assertEquals(5, this.fontLoadingEventCalled_);
   assertEquals(true, this.fontLoading_['fontFamily1 i7']);
@@ -238,7 +242,8 @@ FontWatcherTest.prototype.testWatchMultipleFontsWithTestStrings = function() {
   var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.fakeEventDispatcher_,
       this.fakeFontSizer_, this.fakeAsyncCall_, this.fakeGetTime_);
 
-  fontWatcher.watch(fontFamilies, {}, fontTestStrings, true);
+  fontWatcher.watch(fontFamilies, {}, fontTestStrings, webfont.FontWatchRunner,
+      true);
 
   assertEquals(2, this.testStringCount_);
   assertEquals('testString1', this.testStrings_['fontFamily1']);

data/src-test/core/fontwatchrunnertest.js

@@ -92,9 +92,12 @@ FontWatchRunnerTest.prototype.testWatchFontAlreadyLoaded = function() {
   this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
-  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
-      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
-      this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
 
   assertEquals(1, this.asyncCount_);
 
@@ -108,9 +111,12 @@ FontWatchRunnerTest.prototype.testWatchFontWaitForLoadActive = function() {
   this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
-  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
-      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
-      this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
 
   assertEquals(4, this.asyncCount_);
 
@@ -124,9 +130,12 @@ FontWatchRunnerTest.prototype.testWatchFontWaitForLoadInactive = function() {
   this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 5;
 
-  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
-      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
-      this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
 
   assertEquals(4, this.asyncCount_);
 
@@ -148,9 +157,12 @@ FontWatchRunnerTest.prototype.testWatchFontWithInconsistentWidthIsStillInactive
   this.timesToReportChangedWidth_ = 1;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
-  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
-      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
-      this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
 
   assertEquals(9, this.asyncCount_);
 
@@ -164,30 +176,32 @@ FontWatchRunnerTest.prototype.testDomWithDefaultTestString = function() {
   this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
-  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
-      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
-      this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
 
   assertEquals(4, this.createElementCalled_);
   assertEquals('span', this.createdElements_[0]['name']);
   assertEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf('fontFamily1'));
   assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_A));
-  assertEquals('BESs', this.createdElements_[0]['innerHtml']);
+  assertEquals('BESbswy', this.createdElements_[0]['innerHtml']);
   assertEquals('span', this.createdElements_[1]['name']);
   assertEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf('fontFamily1'));
   assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_B));
-  assertEquals('BESs', this.createdElements_[1]['innerHtml']);
+  assertEquals('BESbswy', this.createdElements_[1]['innerHtml']);
   assertEquals('span', this.createdElements_[2]['name']);
   assertNotEquals(-1, this.createdElements_[2]['attrs']['style'].indexOf('fontFamily1'));
   assertNotEquals(-1, this.createdElements_[2]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_A));
-  assertEquals('BESs', this.createdElements_[2]['innerHtml']);
+  assertEquals('BESbswy', this.createdElements_[2]['innerHtml']);
   assertEquals('span', this.createdElements_[3]['name']);
   assertNotEquals(-1, this.createdElements_[3]['attrs']['style'].indexOf('fontFamily1'));
   assertNotEquals(-1, this.createdElements_[3]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_B));
-  assertEquals('BESs', this.createdElements_[3]['innerHtml']);
+  assertEquals('BESbswy', this.createdElements_[3]['innerHtml']);
   assertEquals(4, this.insertIntoCalled_);
   assertEquals(4, this.removeElementCalled_);
-
 };
 
 FontWatchRunnerTest.prototype.testDomWithNotDefaultTestString = function() {
@@ -195,9 +209,12 @@ FontWatchRunnerTest.prototype.testDomWithNotDefaultTestString = function() {
   this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
-  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
-      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
-      this.fakeGetTime_, this.fontFamily_, this.fontDescription_, 'testString');
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, 'testString');
+
+  fontWatchRunner.start();
 
   assertEquals(4, this.createElementCalled_);
   assertEquals('span', this.createdElements_[0]['name']);

data/src-test/fontdeck/fontdeck_script_test.js

@@ -5,10 +5,39 @@ FontdeckScriptTest.prototype.testSupportAndLoadLifecycle = function() {
     'id': '2282'
   };
   var apiResponse = {
-    'css':'http://fontdeck.com/s/css/uH5+KWQnibDTJRYggGJ9XZLTAgw/webfontloader/2282.css',
-    'provides':[
-      {'font_size_adjust':null,'weight':'normal','style':'normal','name':'Fertigo Pro Regular'},
-      {'font_size_adjust':'0.5','weight':'bold','style':'italic','name':'Bodoni Display Bold Italic'}
+    "domain" : "localhost",
+    "cssurl" : "http://f.fontdeck.com/s/css/03BmCXiV2AHwX/Rp+OBFTfD2oFs/localhost/2282.css",
+    "project" : 2282,
+    "cssbase" : "http://f.fontdeck.com/s/css/03BmCXiV2AHwX/Rp+OBFTfD2oFs",
+    "fonts" : [
+      {
+        "font_family" : "'Fertigo Pro Regular', Fertigo, Constantia, Palatino, serif",
+        "font_size_adjust" : 0.508,
+        "name" : "Fertigo Pro Regular",
+        "style" : "normal",
+        "weight" : "normal",
+        "font_urls" : {
+          "eot" : "http://f.fontdeck.com/f/1/SUlFR0tid0kAA2vb11Ly/IGWDK+wV8TMAfV0J1Ej1J1GFRT1bssqrn6a.eot",
+          "ttf" : "http://f.fontdeck.com/f/1/SUlFR0tid0kAA2vb11Ly/IGWDK+wV8TMAfV0J1Ej1J1GFRT1bssqrn6a.ttf",
+          "woff" : "http://f.fontdeck.com/f/1/SUlFR0tid0kAA2vb11Ly/IGWDK+wV8TMAfV0J1Ej1J1GFRT1bssqrn6a.woff",
+          "svg" : "http://f.fontdeck.com/f/1/SUlFR0tid0kAA2vb11Ly/IGWDK+wV8TMAfV0J1Ej1J1GFRT1bssqrn6a.svg#104"
+        },
+        "id" : 104
+      },
+      {
+        "font_family" : "'Bodoni Display Bold Italic', Georgia, 'Times New Roman', Times, serif",
+        "font_size_adjust" : 0.45,
+        "name" : "Bodoni Display Bold Italic",
+        "style" : "italic",
+        "weight" : "bold",
+        "font_urls" : {
+          "eot" : "http://f.fontdeck.com/f/1/azJEbTVyc1QAA11+CAE5C93+l/bAQx1ipRo6Maba19w3Yy5ng+qVWlfj.eot",
+          "ttf" : "http://f.fontdeck.com/f/1/azJEbTVyc1QAA11+CAE5C93+l/bAQx1ipRo6Maba19w3Yy5ng+qVWlfj.ttf",
+          "woff" : "http://f.fontdeck.com/f/1/azJEbTVyc1QAA11+CAE5C93+l/bAQx1ipRo6Maba19w3Yy5ng+qVWlfj.woff",
+          "svg" : "http://f.fontdeck.com/f/1/azJEbTVyc1QAA11+CAE5C93+l/bAQx1ipRo6Maba19w3Yy5ng+qVWlfj.svg#2256"
+        },
+        "id" : 2256
+      }
     ]
   };
   var insert = '';
@@ -19,13 +48,18 @@ FontdeckScriptTest.prototype.testSupportAndLoadLifecycle = function() {
     },
     createScriptSrc: function(srcLink) {
       src = srcLink;
+    }
+  };
+  var global = {
+    location: {
+      protocol: 'https:'
     },
-    createCssLink: function(cssLink) {
-      css = cssLink;
-      return '<link href="' + css + '" type="text/css" />';
+    document: {
+      location: {
+        hostname: 'test-host-name'
+      }
     }
   };
-  var global = {};
   var fontdeck = new webfont.FontdeckScript(global, fakeDomHelper, configuration);
 
   // supportUserAgent
@@ -34,16 +68,39 @@ FontdeckScriptTest.prototype.testSupportAndLoadLifecycle = function() {
 
   fontdeck.supportUserAgent(userAgent, function(support) { isSupport = support; });
   assertEquals('head', insert);
-  assertEquals('http://fontdeck.com/api/v1/project-info?project=2282&domain=localhost&callback=window.__webfontfontdeckmodule__[2282]', src);
+  assertEquals('https://f.fontdeck.com/s/css/js/test-host-name/2282.js', src);
   assertEquals(null, isSupport);
 
   assertNotNull(global.__webfontfontdeckmodule__);
   assertNotNull(global.__webfontfontdeckmodule__['2282']);
 
   // Call the callback function passing in dummy API response.
-  global.__webfontfontdeckmodule__['2282'](apiResponse);
+  global.__webfontfontdeckmodule__['2282'](true, apiResponse);
+
+  assertEquals(fontdeck.fontFamilies_, [apiResponse.fonts[0].name, apiResponse.fonts[1].name]);
+  assertEquals(fontdeck.fontVariations_[apiResponse.fonts[0].name], ['n4']);
+  assertEquals(fontdeck.fontVariations_[apiResponse.fonts[1].name], ['i7']);
+  
+  assertEquals(true, isSupport);
+};
+
+FontdeckScriptTest.prototype.testNoProjectId = function() {
+  var configuration = {
+    'id': null
+  };
+  var insert = '';
+  var src = '';
+  var fakeDomHelper = {};
+  var global = {};
+  var fontdeck = new webfont.FontdeckScript(global, fakeDomHelper, configuration);
+
+  // supportUserAgent
+  var userAgent = 'user agent';
+  var isSupport = null;
 
-  assertEquals(fontdeck.fontFamilies_, [apiResponse.provides[0].name, apiResponse.provides[1].name]);
-  assertEquals(fontdeck.fontVariations_[apiResponse.provides[0].name], ['n4']);
-  assertEquals(fontdeck.fontVariations_[apiResponse.provides[1].name], ['i7']);
-};
+  fontdeck.supportUserAgent(userAgent, function(support) { isSupport = support; });
+  
+  assertEquals(fontdeck.fontFamilies_, []);
+  assertEquals(fontdeck.fontVariations_, []);
+  assertEquals(true, isSupport);
+}

data/src-test/google/lastresortwebkitfontwatchrunnertest.js

@@ -0,0 +1,204 @@
+var LastResortWebKitFontWatchRunnerTest =
+    TestCase('LastResortWebKitFontWatchRunnerTest');
+
+LastResortWebKitFontWatchRunnerTest.prototype.setUp = function() {
+  var self = this;
+
+  this.fontFamily_ = 'fontFamily1';
+  this.fontDescription_ = 'n4';
+
+  this.fontActiveCalled_ = 0;
+  this.fontActive_ = {};
+  this.fontInactiveCalled_ = 0;
+  this.fontInactive_ = {};
+  this.activeCallback_ = function(fontFamily, fontDescription) {
+    self.fontActiveCalled_++;
+    self.fontActive_[fontFamily + ' ' + fontDescription] = true;
+  };
+  this.inactiveCallback_ = function(fontFamily, fontDescription) {
+    self.fontInactiveCalled_++;
+    self.fontInactive_[fontFamily + ' ' + fontDescription] = true;
+  };
+
+  this.createElementCalled_ = 0;
+  this.createdElements_ = [];
+  this.insertIntoCalled_ = 0;
+  this.removeElementCalled_ = 0;
+  this.setStyleCalled_ = 0;
+  this.fakeDomHelper_ = {
+    createElement: function(name, attrs, innerHtml) {
+      self.createElementCalled_++;
+      self.createdElements_.push({
+        'name': name,
+        'attrs': attrs,
+        'innerHtml': innerHtml
+      });
+
+      var element = document.createElement(name);
+
+      for (var attr in attrs) {
+        element.setAttribute(attr, attrs[attr]);
+      }
+      element.innerHTML = innerHtml;
+      return element;
+    },
+    insertInto: function(name, el) {
+      self.insertIntoCalled_++;
+    },
+    removeElement: function(el) {
+      self.removeElementCalled_++;
+    },
+    setStyle: function(e, s) {
+      self.setStyleCalled_++;
+    }
+  };
+
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.fakeGetTime_ = function() {
+    if (self.timesToGetTimeBeforeTimeout_ <= 0) {
+      return 6000;
+    } else {
+      self.timesToGetTimeBeforeTimeout_--;
+      return 1;
+    }
+  };
+
+  this.asyncCount_ = 0;
+  this.fakeAsyncCall_ = function(func, timeout) {
+    self.asyncCount_++;
+    func();
+  };
+};
+
+LastResortWebKitFontWatchRunnerTest.prototype.testLastResortFontIgnored =
+    function() {
+  var originalSizeCount = 2;
+  var lastResortFontsCount = 11;
+  var firstSize = 2;
+  var secondSize = 2;
+  var thirdSize = 2;
+
+  var fontWatchRunner = new webfont.LastResortWebKitFontWatchRunner(
+      this.activeCallback_,
+      this.inactiveCallback_,
+      this.fakeDomHelper_, {getWidth: function() {
+        if (originalSizeCount > 0) {
+          originalSizeCount--;
+          return 1;
+        }
+        if (lastResortFontsCount > 0) {
+          lastResortFontsCount--;
+          return 2;
+        }
+        if (firstSize > 0) {
+          firstSize--;
+          return 1;
+        }
+        if (secondSize > 0) {
+          secondSize--;
+          return 2;
+        }
+        if (thirdSize > 0) {
+          thirdSize--;
+          return 3;
+        }
+      }}, this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
+
+  assertEquals(2, this.asyncCount_);
+
+  // When on webkit time out ends up activating the font.
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(0, this.fontInactiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
+
+LastResortWebKitFontWatchRunnerTest.prototype.testLastResortFontActiveWhenSizeMatch
+    = function() {
+  this.timesToGetTimeBeforeTimeout_ = 3;
+  var originalSizeCount = 2;
+  var lastResortFontsCount = 11;
+  var firstSize = 2;
+
+  this.fontFamily_ = "Arimo";
+
+  var fontWatchRunner = new webfont.LastResortWebKitFontWatchRunner(
+      this.activeCallback_,
+      this.inactiveCallback_,
+      this.fakeDomHelper_, {getWidth: function() {
+        if (originalSizeCount > 0) {
+          originalSizeCount--;
+          return 1;
+        }
+        if (lastResortFontsCount > 0) {
+          lastResortFontsCount--;
+          return 2;
+        }
+        if (firstSize > 0) {
+          firstSize--;
+          return 1;
+        }
+        return 2;
+      }}, this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
+
+  assertEquals(2, this.asyncCount_);
+
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(0, this.fontInactiveCalled_);
+  assertEquals(true, this.fontActive_['Arimo n4']);
+};
+
+LastResortWebKitFontWatchRunnerTest.prototype.testLastResortFontInactiveWhenSizeNoMatch
+    = function() {
+  this.timesToGetTimeBeforeTimeout_ = 3;
+  var originalSizeCount = 2;
+  var lastResortFontsCount = 11;
+  var firstSize = 2;
+  var secondSize = 2;
+  var thirdSize = 2;
+
+  var fontWatchRunner = new webfont.LastResortWebKitFontWatchRunner(
+      this.activeCallback_,
+      this.inactiveCallback_,
+      this.fakeDomHelper_, {getWidth: function(elem) {
+        if (originalSizeCount > 0) {
+          originalSizeCount--;
+          return 1;
+        }
+        if (lastResortFontsCount > 0) {
+          lastResortFontsCount--;
+          return 2;
+        }
+        if (firstSize > 0) {
+          firstSize--;
+          return 1;
+        }
+        if (secondSize > 0) {
+          secondSize--;
+          return 2;
+        }
+        if (thirdSize == 2) {
+          thirdSize--;
+          return 2;
+        }
+        if (thirdSize == 1) {
+          thirdSize--;
+          return 4;
+        }
+      }}, this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_);
+
+  fontWatchRunner.start();
+
+  assertEquals(2, this.asyncCount_);
+
+  // When on webkit time out ends up activating the font.
+  assertEquals(0, this.fontActiveCalled_);
+  assertEquals(1, this.fontInactiveCalled_);
+  assertEquals(true, this.fontInactive_['fontFamily1 n4']);
+};

data/webfontloader.gemspec

@@ -13,8 +13,8 @@ Gem::Specification.new do |s|
   ## If your rubyforge_project name is different, then edit it and comment out
   ## the sub! line in the Rakefile
   s.name              = 'webfontloader'
-  s.version           = '1.0.22'
-  s.date              = '2011-07-01'
+  s.version           = '1.0.24'
+  s.date              = '2012-01-09'
 
   ## Make sure your summary is short. The description may be as long
   ## as you like.
@@ -117,6 +117,7 @@ DESC
     src-test/google/fontapiparsertest.js
     src-test/google/fontapiurlbuildertest.js
     src-test/google/googlefontapitest.js
+    src-test/google/lastresortwebkitfontwatchrunnertest.js
     src-test/monotype/monotype_script_test.js
     src-test/typekit/typekit_script_test.js
     src/ascender/ascender_script.js
@@ -140,6 +141,7 @@ DESC
     src/google/fontapiparser.js
     src/google/fontapiurlbuilder.js
     src/google/googlefontapi.js
+    src/google/lastresortwebkitfontwatchrunner.js
     src/modules.yml
     src/monotype/monotype_script.js
     src/typekit/typekit_script.js

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: webfontloader
 version: !ruby/object:Gem::Version 
-  hash: 59
+  hash: 39
   prerelease: 
   segments: 
   - 1
   - 0
-  - 22
-  version: 1.0.22
+  - 24
+  version: 1.0.24
 platform: ruby
 authors: 
 - Ryan Carver
@@ -16,12 +16,11 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-07-01 00:00:00 -07:00
+date: 2012-01-09 00:00:00 -08:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
-  type: :development
-  requirement: &id001 !ruby/object:Gem::Requirement 
+  version_requirements: &id001 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
@@ -32,12 +31,12 @@ dependencies:
         - 2
         - 1
         version: 1.2.1
-  name: rack
   prerelease: false
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
+  requirement: *id001
+  name: rack
   type: :development
-  requirement: &id002 !ruby/object:Gem::Requirement 
+- !ruby/object:Gem::Dependency 
+  version_requirements: &id002 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
@@ -47,12 +46,12 @@ dependencies:
         - 1
         - 0
         version: "1.0"
-  name: sinatra
   prerelease: false
-  version_requirements: *id002
-- !ruby/object:Gem::Dependency 
+  requirement: *id002
+  name: sinatra
   type: :development
-  requirement: &id003 !ruby/object:Gem::Requirement 
+- !ruby/object:Gem::Dependency 
+  version_requirements: &id003 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
@@ -63,9 +62,10 @@ dependencies:
         - 1
         - 6
         version: 0.1.6
-  name: vegas
   prerelease: false
-  version_requirements: *id003
+  requirement: *id003
+  name: vegas
+  type: :development
 description: |
   WebFont Loader gives you added control when using linked fonts via
   `@font-face`. It provides a common interface to loading fonts regardless of
@@ -135,6 +135,7 @@ files:
 - src-test/google/fontapiparsertest.js
 - src-test/google/fontapiurlbuildertest.js
 - src-test/google/googlefontapitest.js
+- src-test/google/lastresortwebkitfontwatchrunnertest.js
 - src-test/monotype/monotype_script_test.js
 - src-test/typekit/typekit_script_test.js
 - src/ascender/ascender_script.js
@@ -158,6 +159,7 @@ files:
 - src/google/fontapiparser.js
 - src/google/fontapiurlbuilder.js
 - src/google/googlefontapi.js
+- src/google/lastresortwebkitfontwatchrunner.js
 - src/modules.yml
 - src/monotype/monotype_script.js
 - src/typekit/typekit_script.js
@@ -194,7 +196,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.6.2
+rubygems_version: 1.5.2
 signing_key: 
 specification_version: 2
 summary: WebFont Loader gives you added control when using linked fonts via @font-face.