webfontloader 1.0.5

data/src-test/core/fontmoduleloadertest.js

@@ -0,0 +1,30 @@
+var FontModuleLoaderTest = TestCase('FontModuleLoaderTest');
+
+FontModuleLoaderTest.prototype.testGetProperModuleList = function() {
+  var fontModuleLoader = new webfont.FontModuleLoader();
+
+  fontModuleLoader.addModuleFactory('booh', function() { return { scary: true }; });
+  fontModuleLoader.addModuleFactory('haha', function() { return { funny: true }; });
+  fontModuleLoader.addModuleFactory('moo', function() { return { cowy: true }; });
+  var modules = fontModuleLoader.getModules({ booh: {}, moo: {}, nothing: {} });
+
+  assertNotNull(modules);
+  assertEquals(2, modules.length);
+  var module1 = modules[0];
+
+  assertNotNull(module1);
+  assertTrue(module1.scary || module1.cowy);
+  var module2 = modules[1];
+
+  assertNotNull(module2);
+  assertTrue(module2.scary || module2.cowy);
+};
+
+FontModuleLoaderTest.prototype.testNotModuleShouldHaveEmptyModuleList =
+    function() {
+  var fontModuleLoader = new webfont.FontModuleLoader();
+  var modules = fontModuleLoader.getModules();
+
+  assertNotNull(modules);
+  assertEquals(0, modules.length);
+};

data/src-test/core/fonttest.js

@@ -0,0 +1,92 @@
+var FontTest = TestCase('FontTest');
+
+FontTest.prototype.setUp = function() {
+  this.fakeHtmlElement_ = { className: '' };
+  this.fakeDomHelper_ = {
+    appendClassName: function() {},
+    createElement: function(name) {
+      return document.createElement(name);
+    },
+    insertInto: function() {},
+    removeElement: function() {}
+  };
+  this.fontModuleLoader_ = new webfont.FontModuleLoader();
+};
+
+FontTest.prototype.testFontLoad = function() {
+  var userAgent = new webfont.UserAgent('Firefox', '3.6', 'Gecko', '1.9.2',
+      'Macintosh', '10.6', true);
+  var font = new webfont.WebFont(this.fakeDomHelper_, this.fontModuleLoader_,
+      this.fakeHtmlElement_, function(func, timeout) { func(); }, userAgent);
+  var self = this;
+  var testModule = null;
+
+  font.addModule('test', function(conf) {
+    testModule = new function() {
+      this.conf = conf;
+      this.loadCalled = false;
+      this.supportUserAgentCalled = false;
+   };
+   testModule.load = function(onReady) {
+     this.loadCalled = true;
+     onReady([]);
+    };
+   testModule.supportUserAgent = function(ua, support) {
+     this.supportUserAgentCalled = true;
+     support(true);
+   };
+   return testModule;
+  });
+  var loadingEventCalled = false;
+
+  assertEquals(0, font.moduleFailedLoading_);
+  assertEquals(0, font.moduleLoading_);
+
+  font.load({
+      test: {
+        somedata: 'in french a cow says meuh'
+      },
+      loading: function() {
+        loadingEventCalled = true;
+      }
+  });
+
+  assertEquals(1, font.moduleFailedLoading_);
+  assertEquals(0, font.moduleLoading_);
+  assertNotNull(testModule);
+  assertNotUndefined(testModule.conf);
+  assertNotNull(testModule.conf);
+  assertEquals('in french a cow says meuh', testModule.conf.somedata);
+  assertTrue(testModule.loadCalled);
+  assertTrue(testModule.supportUserAgentCalled);
+  assertTrue(loadingEventCalled);
+};
+
+FontTest.prototype.testFontInactive = function() {
+  var userAgent = new webfont.UserAgent('Firefox', '3.0', false);
+  var font = new webfont.WebFont(this.fakeDomHelper_, this.fontModuleLoader_,
+      this.fakeHtmlElement_, function(func, timeout) { func(); }, userAgent);
+  var self = this;
+  var testModule;
+
+  font.addModule('test', function(conf) {
+    testModule = new function() {
+      this.conf = conf;
+      this.loadCalled = false;
+   };
+   testModule.load = function(onReady) { };
+   return testModule;
+  });
+  var onInactiveCalled = false;
+
+  font.load({
+      test: {
+        somedata: 'in french a cow says meuh'
+      },
+      inactive: function() {
+        onInactiveCalled = true;
+      }
+  });
+  assertUndefined(testModule);
+  assertTrue(onInactiveCalled);
+};

data/src-test/core/fontvariationdescriptiontest.js

@@ -0,0 +1,76 @@
+var FontVariationDescriptionTest = TestCase('FontVariationDescription');
+
+FontVariationDescriptionTest.prototype.setUp = function() {
+  this.fvd_ = new webfont.FontVariationDescription();
+};
+
+FontVariationDescriptionTest.prototype.testCompactEmptyString = function() {
+  assertEquals('n4', this.fvd_.compact(''));
+};
+
+FontVariationDescriptionTest.prototype.testCompactFontStyle = function() {
+  assertEquals('n4', this.fvd_.compact('font-style: normal;'));
+  assertEquals('i4', this.fvd_.compact('font-style: italic;'));
+  assertEquals('o4', this.fvd_.compact('font-style: oblique;'));
+};
+
+FontVariationDescriptionTest.prototype.testCompactInvalidFontStyle = function() {
+  assertEquals('n4', this.fvd_.compact('font-style: other;'));
+};
+
+FontVariationDescriptionTest.prototype.testCompactFontWeight = function() {
+  assertEquals('n4', this.fvd_.compact('font-weight: normal;'));
+  assertEquals('n7', this.fvd_.compact('font-weight: bold;'));
+  assertEquals('n1', this.fvd_.compact('font-weight: 100;'));
+  assertEquals('n2', this.fvd_.compact('font-weight: 200;'));
+  assertEquals('n3', this.fvd_.compact('font-weight: 300;'));
+  assertEquals('n4', this.fvd_.compact('font-weight: 400;'));
+  assertEquals('n5', this.fvd_.compact('font-weight: 500;'));
+  assertEquals('n6', this.fvd_.compact('font-weight: 600;'));
+  assertEquals('n7', this.fvd_.compact('font-weight: 700;'));
+  assertEquals('n8', this.fvd_.compact('font-weight: 800;'));
+  assertEquals('n9', this.fvd_.compact('font-weight: 900;'));
+};
+
+FontVariationDescriptionTest.prototype.testCompactInvalidFontWeight = function() {
+  assertEquals('n4', this.fvd_.compact('font-weight: 140;'));
+  assertEquals('n4', this.fvd_.compact('font-weight: other;'));
+};
+
+FontVariationDescriptionTest.prototype.testCompactAllProperties = function() {
+  assertEquals('i7', this.fvd_.compact('font-style: italic; font-weight: bold;'));
+  assertEquals('i7', this.fvd_.compact('; font-style: italic; font-weight: bold'));
+  assertEquals('i7', this.fvd_.compact('font-style:italic;font-weight:bold;'));
+  assertEquals('i7', this.fvd_.compact('  font-style:   italic   ;\n\nfont-weight   : bold;  '));
+};
+
+FontVariationDescriptionTest.prototype.testInvalidProperties = function() {
+  assertEquals('n4', this.fvd_.compact('src: url(/font.otf);'));
+  assertEquals('n9', this.fvd_.compact('font-weight: 900; src: url(/font.otf);'));
+  assertEquals('n8', this.fvd_.compact('font-weight: 800; font-stretch:condensed'));
+};
+
+FontVariationDescriptionTest.prototype.testExpandFontStyle = function() {
+  assertEquals('font-style:normal;font-weight:400;', this.fvd_.expand('n4'));
+  assertEquals('font-style:italic;font-weight:400;', this.fvd_.expand('i4'));
+  assertEquals('font-style:oblique;font-weight:400;', this.fvd_.expand('o4'));
+};
+
+FontVariationDescriptionTest.prototype.testExpandFontWeight = function() {
+  assertEquals('font-style:normal;font-weight:100;', this.fvd_.expand('n1'));
+  assertEquals('font-style:normal;font-weight:200;', this.fvd_.expand('n2'));
+  assertEquals('font-style:normal;font-weight:300;', this.fvd_.expand('n3'));
+  assertEquals('font-style:normal;font-weight:400;', this.fvd_.expand('n4'));
+  assertEquals('font-style:normal;font-weight:500;', this.fvd_.expand('n5'));
+  assertEquals('font-style:normal;font-weight:600;', this.fvd_.expand('n6'));
+  assertEquals('font-style:normal;font-weight:700;', this.fvd_.expand('n7'));
+  assertEquals('font-style:normal;font-weight:800;', this.fvd_.expand('n8'));
+  assertEquals('font-style:normal;font-weight:900;', this.fvd_.expand('n9'));
+};
+
+FontVariationDescriptionTest.prototype.testExpandInvalid = function() {
+  assertEquals(null, this.fvd_.expand(''));
+  assertEquals(null, this.fvd_.expand('n'));
+  assertEquals(null, this.fvd_.expand('1'));
+  assertEquals(null, this.fvd_.expand('n1x'));
+};

data/src-test/core/fontwatchertest.js

@@ -0,0 +1,510 @@
+var FontWatcherTest = TestCase('FontWatcherTest');
+
+FontWatcherTest.prototype.setUp = function() {
+  var self = this;
+
+  this.classNames_ = {};
+  this.classNamesCount_ = 0;
+  this.fakeDomHelper_ = {
+    removeElement: function() {},
+    createElement: function(name, attrs) {
+      var element = document.createElement(name);
+
+      for (var attr in attrs) {
+        element.setAttribute(attr, attrs[attr]);
+      }
+      return element;
+    },
+    insertInto: function() {},
+    appendClassName: function(e, name) {
+      self.classNames_[name] = true;
+      self.classNamesCount_++;
+    },
+    removeClassName: function(e, name) {
+      var exists = self.classNames_[name];
+      if (exists) {
+        self.classNames_[name] = false;
+        self.classNamesCount_--;
+      }
+    }
+  };
+  this.fakeHtmlElement_ = { className: '' };
+  this.loadingEventCalled_ = false;
+  this.fontLoadingEventCalled_ = 0;
+  this.fontLoading_ = [];
+  this.fontActiveEventCalled_ = 0;
+  this.fontActive_ = [];
+  this.fontInactvieEventCalled_ = 0;
+  this.fontInactive_ = [];
+  this.activeEventCalled_ = 0;
+
+  var namespace = 'ns';
+
+  this.callbacks_ = {
+      loading: function() {
+        self.loadingEventCalled_ = true;
+      },
+      active: function() {
+        self.activeEventCalled_++;
+      },
+      fontloading: function(fontFamily, fontDescription) {
+        self.fontLoadingEventCalled_++;
+        self.fontLoading_.push(fontFamily + ' ' + fontDescription);
+      },
+      fontactive: function(fontFamily, fontDescription) {
+        self.fontActiveEventCalled_++;
+        self.fontActive_.push(fontFamily + ' ' + fontDescription);
+      },
+      fontinactive: function(fontFamily, fontDescription) {
+        self.fontInactvieEventCalled_++;
+        self.fontInactive_.push(fontFamily + ' ' + fontDescription);
+      }
+  };
+  this.eventDispatcher_ = new webfont.EventDispatcher(this.fakeDomHelper_,
+      this.fakeHtmlElement_, this.callbacks_, namespace);
+};
+
+FontWatcherTest.prototype.testWatchOneFontAlreadyLoaded = function() {
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else {
+            return 2;
+          }
+        }
+  }, function() {}, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertEquals(1, this.fontLoadingEventCalled_);
+  assertEquals(1, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals(1, this.fontActiveEventCalled_);
+  assertEquals(1, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+};
+
+FontWatcherTest.prototype.testWatchMultipleFontsAlreadyLoaded = function() {
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.eventDispatcher_,{
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else {
+            return 2;
+          }
+        }
+  }, function() {}, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertEquals(3, this.fontLoadingEventCalled_);
+  assertEquals(3, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4', this.fontLoading_[2]);
+  assertEquals(3, this.fontActiveEventCalled_);
+  assertEquals(3, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+  assertEquals('fontFamily2 n4', this.fontActive_[1]);
+  assertEquals('fontFamily3 n4', this.fontActive_[2]);
+};
+
+FontWatcherTest.prototype.testWatchOneFontWaitForLoad = function() {
+  var async = false;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        count_: 0,
+
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else if (this.count_ == 0) {
+            this.count_++;
+            return 1;
+          } else if (this.count_ == 1) {
+            return 2;
+	  }
+        }
+  }, function(func, timeout) {
+    async = true;
+    func();
+  }, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertTrue(async);
+  assertEquals(1, this.fontLoadingEventCalled_);
+  assertEquals(1, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals(1, this.fontActiveEventCalled_);
+  assertEquals(1, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+};
+
+FontWatcherTest.prototype.testWatchMultipleFontsWaitForLoad = function() {
+  var async = 0;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        font1Count_: 0,
+        font2Count_: 0,
+        font3Count_: 0,
+
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily1") != -1 &&
+              this.font1Count_ != 2) {
+            this.font1Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily2") != -1 &&
+              this.font2Count_ != 1) {
+            this.font2Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily3") != -1 &&
+              this.font3Count_ != 5) {
+            this.font3Count_++;
+            return 1;
+          } else {
+            return 2;
+	  }
+        }
+  }, function(func, timeout) {
+    async++;
+    func();
+  }, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertEquals(8, async);
+  assertEquals(3, this.fontLoadingEventCalled_);
+  assertEquals(3, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4', this.fontLoading_[2]);
+  assertEquals(3, this.fontActiveEventCalled_);
+  assertEquals(3, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+  assertEquals('fontFamily2 n4', this.fontActive_[1]);
+  assertEquals('fontFamily3 n4', this.fontActive_[2]);
+};
+
+FontWatcherTest.prototype.testWatchMultipleFontsWaitForLoadAndLoaded =
+    function() {
+  var async = 0;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        font1Count_: 0,
+        font3Count_: 0,
+
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily1") != -1 &&
+              this.font1Count_ != 2) {
+            this.font1Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily3") != -1 &&
+              this.font3Count_ != 5) {
+            this.font3Count_++;
+            return 1;
+          } else {
+            return 2;
+	  }
+        }
+  }, function(func, timeout) {
+    async++;
+    func();
+  }, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertEquals(7, async);
+  assertEquals(3, this.fontLoadingEventCalled_);
+  assertEquals(3, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4', this.fontLoading_[2]);
+  assertEquals(3, this.fontActiveEventCalled_);
+  assertEquals(3, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+  assertEquals('fontFamily2 n4', this.fontActive_[1]);
+  assertEquals('fontFamily3 n4', this.fontActive_[2]);
+};
+
+FontWatcherTest.prototype.testWatchOneFontWaitForLoadInactive = function() {
+  var time = 0;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        count_: 0,
+
+        getWidth: function(element) {
+          return 1;
+        }
+  }, function(func, timeout) {
+    func();
+  }, function() {
+    time += 2500;
+    return time;
+  });
+  var fontFamilies = [ 'fontFamily1' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertEquals(1, this.fontLoadingEventCalled_);
+  assertEquals(1, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals(1, this.fontInactvieEventCalled_);
+  assertEquals(1, this.fontInactive_.length);
+  assertEquals('fontFamily1 n4', this.fontInactive_[0]);
+};
+
+FontWatcherTest.prototype.testWatchMultipleFontsWaitForLoadAndInactive =
+    function() {
+  var count = 0;
+  var async = 0;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        font1Count_: 0,
+        font3Count_: 0,
+
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily1") != -1 &&
+              this.font1Count_ != 2) {
+            this.font1Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily2") != -1) {
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily3") != -1 &&
+              this.font3Count_ != 5) {
+            this.font3Count_++;
+            return 1;
+          } else {
+            return 2;
+	  }
+        }
+  }, function(func, timeout) {
+    async++;
+    func();
+  }, function() {
+    if (++count == 5) {
+      return 5001;
+    }
+    return 0;
+  });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {}, false);
+  assertEquals(9, async);
+  assertEquals(3, this.fontLoadingEventCalled_);
+  assertEquals(3, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4', this.fontLoading_[2]);
+  assertEquals(2, this.fontActiveEventCalled_);
+  assertEquals(2, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+  assertEquals('fontFamily3 n4', this.fontActive_[1]);
+  assertEquals(1, this.fontInactvieEventCalled_);
+  assertEquals('fontFamily2 n4', this.fontInactive_[0]);
+};
+
+FontWatcherTest.prototype.testWatchMultipleFontsAlreadyLoadedAndLastBatchOnDone
+    = function() {
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_, this.eventDispatcher_,{
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else {
+            return 2;
+          }
+        }
+  }, function() {}, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {}, true);
+  assertEquals(3, this.fontLoadingEventCalled_);
+  assertEquals(3, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4', this.fontLoading_[2]);
+  assertEquals(3, this.fontActiveEventCalled_);
+  assertEquals(3, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+  assertEquals('fontFamily2 n4', this.fontActive_[1]);
+  assertEquals('fontFamily3 n4', this.fontActive_[2]);
+  assertEquals(1, this.activeEventCalled_);
+  assertEquals(4, this.classNamesCount_);
+  assertEquals(true, this.classNames_['ns-fontfamily1-n4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily2-n4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily3-n4-active']);
+  assertEquals(true, this.classNames_['ns-active']);
+};
+
+FontWatcherTest.prototype.testWatchMultipleFontsWaitForLoadAndLastBatchOnDone =
+    function() {
+  var async = 0;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        font1Count_: 0,
+        font2Count_: 0,
+        font3Count_: 0,
+
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+ 
+          if (size == 6) {
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily1") != -1 &&
+              this.font1Count_ != 2) {
+            this.font1Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily2") != -1 &&
+              this.font2Count_ != 1) {
+            this.font2Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily3") != -1 &&
+              this.font3Count_ != 5) {
+            this.font3Count_++;
+            return 1;
+          } else {
+            return 2;
+	  }
+        }
+  }, function(func, timeout) {
+    async++;
+    func();
+  }, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {}, true);
+  assertEquals(8, async);
+  assertEquals(3, this.fontLoadingEventCalled_);
+  assertEquals(3, this.fontLoading_.length);
+  assertEquals('fontFamily1 n4', this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4', this.fontLoading_[2]);
+  assertEquals(3, this.fontActiveEventCalled_);
+  assertEquals(3, this.fontActive_.length);
+  assertEquals('fontFamily1 n4', this.fontActive_[0]);
+  assertEquals('fontFamily2 n4', this.fontActive_[1]);
+  assertEquals('fontFamily3 n4', this.fontActive_[2]);
+  assertEquals(1, this.activeEventCalled_);
+  assertEquals(true, this.classNames_['ns-fontfamily1-n4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily2-n4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily3-n4-active']);
+  assertEquals(true, this.classNames_['ns-active']);
+  assertEquals(4, this.classNamesCount_);
+};
+
+FontWatcherTest.prototype
+    .testWatchMultipleFontsWaitForLoadAndLastBatchOnDoneWithVariations =
+    function() {
+  var async = 0;
+  var fontWatcher = new webfont.FontWatcher(this.fakeDomHelper_,
+      this.eventDispatcher_, {
+
+        font1Count_: 0,
+        font2Count_: 0,
+        font3Count_: 0,
+
+        getWidth: function(element) {
+          var fontFamily = element.style.fontFamily;
+          var fonts = fontFamily.split(',');
+          var size = fonts.length;
+
+          if (size == 6) {
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily1") != -1 &&
+              this.font1Count_ != 2) {
+            this.font1Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily2") != -1 &&
+              this.font2Count_ != 1) {
+            this.font2Count_++;
+            return 1;
+          } else if (fonts[0].indexOf("fontFamily3") != -1 &&
+              this.font3Count_ != 5) {
+            this.font3Count_++;
+            return 1;
+          } else {
+            return 2;
+	  }
+        }
+  }, function(func, timeout) {
+    async++;
+    func();
+  }, function() { return 0; });
+  var fontFamilies = [ 'fontFamily1', 'fontFamily2', 'fontFamily3' ];
+
+  fontWatcher.watch(fontFamilies, {
+      'fontFamily1': ['i7'],
+      'fontFamily2': null,
+      'fontFamily3': ['n4', 'i4', 'n7'] }, true);
+
+  assertEquals(8, async);
+  assertEquals(5, this.fontLoadingEventCalled_);
+  assertEquals(5, this.fontLoading_.length);
+  assertEquals('fontFamily1 i7',
+      this.fontLoading_[0]);
+  assertEquals('fontFamily2 n4', this.fontLoading_[1]);
+  assertEquals('fontFamily3 n4',
+      this.fontLoading_[2]);
+  assertEquals('fontFamily3 i4', this.fontLoading_[3]);
+  assertEquals('fontFamily3 n7', this.fontLoading_[4]);
+  assertEquals(5, this.fontActiveEventCalled_);
+  assertEquals(5, this.fontActive_.length);
+  assertEquals('fontFamily1 i7',
+      this.fontActive_[0]);
+  assertEquals('fontFamily2 n4', this.fontActive_[1]);
+  assertEquals('fontFamily3 n4',
+      this.fontActive_[2]);
+  assertEquals('fontFamily3 i4', this.fontActive_[3]);
+  assertEquals('fontFamily3 n7', this.fontActive_[4]);
+  assertEquals(1, this.activeEventCalled_);
+  assertEquals(6, this.classNamesCount_);
+  assertEquals(true, this.classNames_['ns-fontfamily1-i7-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily2-n4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily3-n4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily3-i4-active']);
+  assertEquals(true, this.classNames_['ns-fontfamily3-n7-active']);
+  assertEquals(true, this.classNames_['ns-active']);
+};