webfontloader 1.2.0 → 1.2.1

data/spec/core/fontruler_spec.js

@@ -0,0 +1,33 @@
+describe('FontRuler', function () {
+  var FontRuler = webfont.FontRuler,
+      DomHelper = webfont.DomHelper,
+      Size = webfont.Size,
+      domHelper = null,
+      fontSizer = null;
+
+  beforeEach(function () {
+    domHelper = new DomHelper(window);
+
+    fontSizer = {
+      getSize: function (el) {
+        return new Size(el.offsetWidth, el.offsetHeight);
+      }
+    };
+  });
+
+  it('should prevent a long test string from word wrapping', function () {
+    var fontRulerA = new FontRuler(domHelper, fontSizer, 'abc'),
+        fontRulerB = new FontRuler(domHelper, fontSizer, 'Hello World, this should wrap!');
+
+    fontRulerA.insert();
+    fontRulerB.insert();
+
+    fontRulerA.setFont('sans-serif');
+    fontRulerB.setFont('sans-serif');
+
+    var sizeA = fontRulerA.getSize(),
+        sizeB = fontRulerB.getSize();
+
+    expect(sizeA.height).toEqual(sizeB.height);
+  });
+});

data/spec/core/fontvariationdescription_spec.js

@@ -0,0 +1,67 @@
+describe('FontVariationDescription', function () {
+  var FontVariationDescription = webfont.FontVariationDescription,
+      fvd = new FontVariationDescription();
+
+  describe('#compact', function () {
+    it('should default to n4 when there is no description', function () {
+      expect(fvd.compact('')).toEqual('n4');
+    });
+
+    it('should compact font style', function () {
+      expect(fvd.compact('font-style: normal;')).toEqual('n4');
+      expect(fvd.compact('font-style: italic;')).toEqual('i4');
+      expect(fvd.compact('font-style: oblique;')).toEqual('o4');
+    });
+
+    it('should return the default value when font-style is incorrect', function () {
+      expect(fvd.compact('font-style: other;')).toEqual('n4');
+    });
+
+    it('should compact font weight', function () {
+      expect(fvd.compact('font-weight: normal;')).toEqual('n4');
+      expect(fvd.compact('font-weight: bold;')).toEqual('n7');
+      for (var i = 1; i < 10; i += 1) {
+        expect(fvd.compact('font-weight: ' + (i * 100) + ';')).toEqual('n' + i);
+      }
+    });
+
+    it('should return the default value when font-weight is incorrect', function () {
+      expect(fvd.compact('font-weight: 140;')).toEqual('n4');
+      expect(fvd.compact('font-weight: other;')).toEqual('n4');
+    });
+
+    it('should compact multiple properties', function () {
+      expect(fvd.compact('font-weight: bold; font-style: italic;')).toEqual('i7');
+      expect(fvd.compact('; font-weight: bold; font-style: italic;')).toEqual('i7');
+      expect(fvd.compact('font-style:italic;font-weight:bold;')).toEqual('i7');
+      expect(fvd.compact('   font-style:   italic    ;\n\nfont-weight:   bold;  ')).toEqual('i7');
+    });
+
+    it('should return default values for incorrect individual properties', function () {
+      expect(fvd.compact('src: url(/font.otf)')).toEqual('n4');
+      expect(fvd.compact('font-weight: 900; src: url(/font.otf);')).toEqual('n9');
+      expect(fvd.compact('font-weight: 800; font-stretch:condensed;')).toEqual('n8');
+    });
+  });
+
+  describe('#expand', function () {
+    it('should expand font-style', function () {
+      expect(fvd.expand('n4')).toEqual('font-style:normal;font-weight:400;');
+      expect(fvd.expand('i4')).toEqual('font-style:italic;font-weight:400;');
+      expect(fvd.expand('o4')).toEqual('font-style:oblique;font-weight:400;');
+    });
+
+    it('should expand weights correctly', function () {
+      for (var i = 1; i < 10; i += 1) {
+        expect(fvd.expand('n' + i)).toEqual('font-style:normal;font-weight:' + (i * 100) + ';');
+      }
+    });
+
+    it('should not expand incorrect input', function () {
+      expect(fvd.expand('')).toBeNull();
+      expect(fvd.expand('n')).toBeNull();
+      expect(fvd.expand('1')).toBeNull();
+      expect(fvd.expand('n1x')).toBeNull();
+    });
+  });
+});

data/spec/core/fontwatcher_spec.js

@@ -0,0 +1,204 @@
+describe('FontWatcher', function () {
+  var FontWatcher = webfont.FontWatcher,
+      UserAgent = webfont.UserAgent,
+      BrowserInfo = webfont.BrowserInfo,
+      DomHelper = webfont.DomHelper,
+      domHelper = new DomHelper(window),
+      eventDispatcher = {},
+      testStrings = null,
+      userAgent = null,
+      activeFontFamilies = [];
+
+  beforeEach(function () {
+    userAgent = new UserAgent('Firefox', '3.6', 'Gecko', '1.9.3', 'Macintosh', '10.6', undefined, new BrowserInfo(true, false));
+    activeFontFamilies = [];
+    testStrings = jasmine.createSpy('testStrings');
+    eventDispatcher.dispatchLoading = jasmine.createSpy('dispatchLoading');
+    eventDispatcher.dispatchFontLoading = jasmine.createSpy('dispatchFontLoading');
+    eventDispatcher.dispatchFontActive = jasmine.createSpy('dispatchFontActive');
+    eventDispatcher.dispatchFontInactive = jasmine.createSpy('dispatchFontInactive');
+    eventDispatcher.dispatchActive = jasmine.createSpy('dispatchActive');
+    eventDispatcher.dispatchInactive = jasmine.createSpy('dispatchInactive');
+  });
+
+  function FakeFontWatchRunner(activeCallback, inactiveCallback, domHelper, fontSizer, asyncCall, getTime,
+    fontFamily, fontDescription, hasWebKitFallbackBug, opt_metricCompatibleFonts, opt_fontTestString) {
+    this.activeCallback = activeCallback;
+    this.inactiveCallback = inactiveCallback;
+    this.fontFamily = fontFamily;
+    this.fontDescription = fontDescription;
+
+    if (opt_fontTestString) {
+      testStrings(opt_fontTestString);
+    }
+  }
+
+  FakeFontWatchRunner.prototype.start = function () {
+    if (activeFontFamilies.indexOf(this.fontFamily) > -1) {
+      this.activeCallback(this.fontFamily, this.fontDescription);
+    } else {
+      this.inactiveCallback(this.fontFamily, this.fontDescription);
+    }
+  };
+
+  describe('watch zero fonts', function () {
+    it('should call inactive when there are no fonts to load', function () {
+      activeFontFamilies = [];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch([], {}, {}, FakeFontWatchRunner, true);
+      expect(eventDispatcher.dispatchInactive).toHaveBeenCalled();
+    });
+  });
+
+  describe('watch one font not last', function () {
+    it('should not call font inactive, inactive or active', function () {
+      activeFontFamilies = ['fontFamily1'];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1'], {}, {}, FakeFontWatchRunner, false);
+      expect(eventDispatcher.dispatchFontInactive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchActive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchInactive).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('watch one font active', function () {
+    it('should call font active and active', function () {
+      activeFontFamilies = ['fontFamily1'];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1'], {}, {}, FakeFontWatchRunner, true);
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchFontActive).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchFontInactive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchActive).toHaveBeenCalled();
+      expect(eventDispatcher.dispatchInactive).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('watch one font inactive', function () {
+    it('should call inactive', function () {
+      activeFontFamilies = [];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1'], {}, {}, FakeFontWatchRunner, true);
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchFontActive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchFontInactive).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchActive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchInactive).toHaveBeenCalled();
+    });
+  });
+
+  describe('watch multiple fonts active', function () {
+    it('should call font active and active', function () {
+      activeFontFamilies = ['fontFamily1', 'fontFamily2', 'fontFamily3'];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1', 'fontFamily2', 'fontFamily3'], {}, {}, FakeFontWatchRunner, true);
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchFontActive).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchFontInactive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchActive).toHaveBeenCalled();
+      expect(eventDispatcher.dispatchInactive).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('watch multiple fonts inactive', function () {
+    it('should call inactive', function () {
+      activeFontFamilies = [];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1', 'fontFamily2', 'fontFamily3'], {}, {}, FakeFontWatchRunner, true);
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchFontActive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchFontInactive).toHaveBeenCalledWith('fontFamily1', 'n4');
+      expect(eventDispatcher.dispatchActive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchInactive).toHaveBeenCalled();
+    });
+  });
+
+  describe('watch multiple fonts mixed', function () {
+    it('should call the correct callbacks', function () {
+      activeFontFamilies = ['fontFamily1', 'fontFamily3'];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1', 'fontFamily2', 'fontFamily3'], {}, {}, FakeFontWatchRunner, true);
+      expect(eventDispatcher.dispatchFontLoading.callCount).toEqual(3);
+      expect(eventDispatcher.dispatchFontLoading.calls[0].args[0]).toEqual('fontFamily1');
+      expect(eventDispatcher.dispatchFontLoading.calls[1].args[0]).toEqual('fontFamily2');
+      expect(eventDispatcher.dispatchFontLoading.calls[2].args[0]).toEqual('fontFamily3');
+
+      expect(eventDispatcher.dispatchFontActive.callCount).toEqual(2);
+      expect(eventDispatcher.dispatchFontActive.calls[0].args[0]).toEqual('fontFamily1');
+      expect(eventDispatcher.dispatchFontActive.calls[1].args[0]).toEqual('fontFamily3');
+
+      expect(eventDispatcher.dispatchFontInactive.callCount).toEqual(1);
+      expect(eventDispatcher.dispatchFontInactive.calls[0].args[0]).toEqual('fontFamily2');
+
+      expect(eventDispatcher.dispatchActive).toHaveBeenCalled();
+      expect(eventDispatcher.dispatchInactive).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('watch multiple fonts with descriptions', function () {
+    it('should call the correct callbacks', function () {
+      activeFontFamilies = ['fontFamily1', 'fontFamily2'];
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1', 'fontFamily2', 'fontFamily3'], {
+        'fontFamily1': ['i7'],
+        'fontFamily2': null,
+        'fontFamily3': ['n4', 'i4', 'n7']
+      }, {}, FakeFontWatchRunner, true);
+
+      expect(eventDispatcher.dispatchFontLoading.callCount).toEqual(5);
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily1', 'i7');
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily2', 'n4');
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily3', 'n4');
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily3', 'i4');
+      expect(eventDispatcher.dispatchFontLoading).toHaveBeenCalledWith('fontFamily3', 'n7');
+
+      expect(eventDispatcher.dispatchFontActive.callCount).toEqual(2);
+      expect(eventDispatcher.dispatchFontActive).toHaveBeenCalledWith('fontFamily1', 'i7');
+      expect(eventDispatcher.dispatchFontActive).toHaveBeenCalledWith('fontFamily2', 'n4');
+
+      expect(eventDispatcher.dispatchFontInactive.callCount).toEqual(3);
+      expect(eventDispatcher.dispatchFontInactive).toHaveBeenCalledWith('fontFamily3', 'n4');
+      expect(eventDispatcher.dispatchFontInactive).toHaveBeenCalledWith('fontFamily3', 'i4');
+      expect(eventDispatcher.dispatchFontInactive).toHaveBeenCalledWith('fontFamily3', 'n7');
+
+      expect(eventDispatcher.dispatchInactive).not.toHaveBeenCalled();
+      expect(eventDispatcher.dispatchActive).toHaveBeenCalled();
+    });
+  });
+
+  describe('watch multiple fonts with test strings', function () {
+    it('should use the correct tests strings', function () {
+      activeFontFamilies = ['fontFamily1', 'fontFamily2'];
+
+      var fontWatcher = new FontWatcher(userAgent, domHelper, eventDispatcher, jasmine.createSpy('fakeFontSizer'),
+          jasmine.createSpy('fakeAsyncCall'), jasmine.createSpy('fakeGetTime'));
+
+      fontWatcher.watch(['fontFamily1', 'fontFamily2', 'fontFamily3', 'fontFamily4'], {}, {
+        'fontFamily1': 'testString1',
+        'fontFamily2': null,
+        'fontFamily3': 'testString2',
+        'fontFamily4': null
+      }, FakeFontWatchRunner, true);
+
+      expect(testStrings.callCount).toEqual(2);
+      expect(testStrings).toHaveBeenCalledWith('testString1');
+      expect(testStrings).toHaveBeenCalledWith('testString2');
+    });
+  });
+});

data/spec/core/fontwatchrunner_spec.js

@@ -0,0 +1,398 @@
+describe('FontWatchRunner', function () {
+  var FontWatchRunner = webfont.FontWatchRunner,
+      UserAgentParser = webfont.UserAgentParser,
+      Size = webfont.Size,
+      DomHelper = webfont.DomHelper,
+      FontRuler = webfont.FontRuler,
+      domHelper = new DomHelper(window),
+      fontFamily = 'My Family',
+      fontDescription = 'n4';
+
+  var timesToCheckSizeBeforeChange = 0,
+      TARGET_SIZE = new Size(3, 3),
+      FALLBACK_SIZE_A = new Size(1, 1),
+      FALLBACK_SIZE_B = new Size(2, 2),
+      LAST_RESORT_SIZE = new Size(4, 4),
+
+      setupSizes = [FALLBACK_SIZE_A, FALLBACK_SIZE_B, LAST_RESORT_SIZE],
+      actualSizes = [],
+      fakeGetSizeCount = 0,
+      setupFinished = false,
+      fakeFontSizer = {
+        getSize: function (el) {
+          var result = null;
+
+          if (setupFinished) {
+            // If you are getting an exception here your tests does not specify enough
+            // size data to run properly.
+            if (fakeGetSizeCount >= actualSizes.length) {
+              throw 'Invalid test data';
+            }
+            result = actualSizes[fakeGetSizeCount];
+            fakeGetSizeCount += 1;
+          } else {
+            result = setupSizes[Math.min(fakeGetSizeCount, setupSizes.length - 1)];
+            fakeGetSizeCount += 1;
+          }
+          return result;
+        }
+      },
+      timesToGetTimeBeforeTimeout = 10,
+      fakeGetTime = function () {
+        if (timesToGetTimeBeforeTimeout <= 0) {
+          return 6000;
+        } else {
+          timesToGetTimeBeforeTimeout -= 1;
+          return 1;
+        }
+      },
+      asyncCount = 0,
+      fakeAsyncCall = function (func, timeout) {
+        asyncCount += 1;
+        func();
+      },
+      setupFinished = false,
+      originalStartMethod = null,
+      activeCallback = null,
+      inactiveCallback = null;
+
+  beforeEach(function () {
+    actualSizes = [];
+    setupFinished = false;
+    fakeGetSizeCount = 0;
+
+    asyncCount = 0;
+    timesToGetTimeBeforeTimeout = 10;
+    activeCallback = jasmine.createSpy('activeCallback');
+    inactiveCallback = jasmine.createSpy('inactiveCallback');
+
+    originalStartMethod = FontWatchRunner.prototype.start;
+
+    FontWatchRunner.prototype.start = function () {
+      setupFinished = true;
+      fakeGetSizeCount = 0;
+      originalStartMethod.apply(this);
+    };
+  });
+
+  afterEach(function () {
+    FontWatchRunner.prototype.start = originalStartMethod;
+  });
+
+  it('should call active if fonts are already loaded', function () {
+    actualSizes = [
+      TARGET_SIZE, TARGET_SIZE
+    ];
+
+    var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+        domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, false);
+
+    fontWatchRunner.start();
+
+    expect(asyncCount).toEqual(0);
+    expect(activeCallback).toHaveBeenCalledWith('My Family', 'n4');
+  });
+
+  it('should wait for font load and call active', function () {
+    actualSizes = [
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      TARGET_SIZE, TARGET_SIZE
+    ];
+
+    var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+        domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, false);
+
+    fontWatchRunner.start();
+    expect(asyncCount).toEqual(3);
+    expect(activeCallback).toHaveBeenCalledWith('My Family', 'n4');
+  });
+
+  it('should wait for font inactive and call inactive', function () {
+    timesToGetTimeBeforeTimeout = 5;
+
+    actualSizes = [
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B,
+      FALLBACK_SIZE_A, FALLBACK_SIZE_B
+    ];
+
+    var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+        domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, false);
+
+    fontWatchRunner.start();
+
+    expect(asyncCount).toEqual(4);
+    expect(inactiveCallback).toHaveBeenCalledWith('My Family', 'n4');
+  });
+
+  describe('WebKit fallback bug', function () {
+    it('should ignore fallback size and call active', function () {
+      actualSizes = [
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+        TARGET_SIZE, TARGET_SIZE
+      ];
+
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, true);
+
+      fontWatchRunner.start();
+
+      expect(asyncCount).toEqual(1);
+      expect(activeCallback).toHaveBeenCalledWith('My Family', 'n4');
+    });
+
+    it('should consider last resort font as having identical metrics and call active', function () {
+      actualSizes = [
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE
+      ];
+
+      timesToGetTimeBeforeTimeout = 2;
+
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, true);
+
+      fontWatchRunner.start();
+
+      expect(asyncCount).toEqual(1);
+      expect(activeCallback).toHaveBeenCalledWith('My Family', 'n4');
+    });
+
+    it('should fail to load font and call inactive', function () {
+      actualSizes = [
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+        FALLBACK_SIZE_A, FALLBACK_SIZE_B
+      ];
+
+      timesToGetTimeBeforeTimeout = 3;
+
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, true);
+
+      fontWatchRunner.start();
+
+      expect(asyncCount).toEqual(2);
+      expect(inactiveCallback).toHaveBeenCalledWith('My Family', 'n4');
+    });
+
+    it('should call inactive when we are loading a metric incompatible font', function () {
+      actualSizes = [
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE
+      ];
+
+      timesToGetTimeBeforeTimeout = 2;
+
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, true,
+          { 'My Other Family': true });
+
+      fontWatchRunner.start();
+      expect(asyncCount).toEqual(1);
+      expect(inactiveCallback).toHaveBeenCalledWith('My Family', 'n4');
+    });
+
+    it('should call active when we are loading a metric compatible font', function () {
+      actualSizes = [
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+        LAST_RESORT_SIZE, LAST_RESORT_SIZE
+      ];
+
+      timesToGetTimeBeforeTimeout = 2;
+
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, true,
+          { 'My Family': true });
+
+      fontWatchRunner.start();
+      expect(asyncCount).toEqual(1);
+      expect(activeCallback).toHaveBeenCalledWith('My Family', 'n4');
+    });
+  });
+
+  describe('real browser testing', function () {
+    var fontSizer = null,
+        asyncCall = null,
+        getTime = null,
+        userAgent = null;
+
+    beforeEach(function () {
+      var userAgentParser = new UserAgentParser(window.navigator.userAgent, window.document);
+
+      userAgent = userAgentParser.parse();
+
+      fontSizer = {
+        getSize: function (el) {
+          return new Size(el.offsetWidth, el.offsetHeight);
+        }
+      };
+
+      asyncCall = function (func, timeout) {
+        window.setTimeout(func, timeout);
+      };
+
+      getTime = function () {
+        return new Date().getTime();
+      };
+    });
+
+    it('should fail to load a null font', function () {
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fontSizer, asyncCall, getTime, '__webfontloader_test__', '', userAgent.getBrowserInfo().hasWebKitFallbackBug());
+
+      runs(function () {
+        fontWatchRunner.start();
+      });
+
+      waitsFor(function () {
+        return activeCallback.wasCalled || inactiveCallback.wasCalled;
+      });
+
+      runs(function () {
+        expect(inactiveCallback).toHaveBeenCalledWith('__webfontloader_test__', '');
+      });
+    });
+
+    it('should load font succesfully', function () {
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fontSizer, asyncCall, getTime, 'SourceSansA', '', userAgent.getBrowserInfo().hasWebKitFallbackBug()),
+          ruler = new FontRuler(domHelper, fontSizer, 'abcdef'),
+          activeSize = null,
+          originalSize = null,
+          finalCheck = false;
+
+      runs(function () {
+        ruler.insert();
+        ruler.setFont('monospace');
+        originalSize = ruler.getSize();
+        ruler.setFont("'SourceSansA', monospace");
+        fontWatchRunner.start();
+      });
+
+      waitsFor(function () {
+        return activeCallback.wasCalled || inactiveCallback.wasCalled;
+      });
+
+      runs(function () {
+        expect(activeCallback).toHaveBeenCalledWith('SourceSansA', '');
+        activeSize = ruler.getSize();
+        expect(activeSize).not.toEqual(originalSize);
+
+        window.setTimeout(function () {
+          finalCheck = true;
+        }, 200);
+      });
+
+      waitsFor(function () {
+        return finalCheck;
+      });
+
+      runs(function () {
+        expect(ruler.getSize()).not.toEqual(originalSize);
+        expect(ruler.getSize()).toEqual(activeSize);
+      });
+    });
+
+    it('should attempt to load a non-existing font', function () {
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fontSizer, asyncCall, getTime, 'Elena', '', userAgent.getBrowserInfo().hasWebKitFallbackBug());
+
+      runs(function () {
+        fontWatchRunner.start();
+      });
+
+      waitsFor(function () {
+        return activeCallback.wasCalled || inactiveCallback.wasCalled;
+      });
+
+      runs(function () {
+        expect(inactiveCallback).toHaveBeenCalledWith('Elena', '');
+      });
+    });
+
+    it('should load even if @font-face is inserted after watching has started', function () {
+      var fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fontSizer, asyncCall, getTime, 'SourceSansB', '', userAgent.getBrowserInfo().hasWebKitFallbackBug()),
+          ruler = new FontRuler(domHelper, fontSizer, 'abcdef'),
+          activeSize = null,
+          originalSize = null,
+          finalCheck = false;
+
+      runs(function () {
+        ruler.insert();
+        ruler.setFont('monospace');
+        originalSize = ruler.getSize();
+        ruler.setFont("'SourceSansB', monospace");
+        fontWatchRunner.start();
+        var link = document.createElement('link');
+
+        link.rel = "stylesheet";
+        link.href= "fonts/sourcesansb.css";
+
+        document.head.appendChild(link);
+      });
+
+      waitsFor(function () {
+        return activeCallback.wasCalled || inactiveCallback.wasCalled;
+      });
+
+      runs(function () {
+        expect(activeCallback).toHaveBeenCalledWith('SourceSansB', '');
+        activeSize = ruler.getSize();
+        expect(activeSize).not.toEqual(originalSize);
+
+        window.setTimeout(function () {
+          finalCheck = true;
+        }, 200);
+      });
+
+      waitsFor(function () {
+        return finalCheck;
+      });
+
+      runs(function () {
+        expect(ruler.getSize()).not.toEqual(originalSize);
+        expect(ruler.getSize()).toEqual(activeSize);
+      });
+    });
+  });
+
+  describe('test string', function () {
+    var fontWatchRunner = null;
+
+    beforeEach(function () {
+      spyOn(domHelper, 'createElement').andCallThrough();
+    });
+
+    it('should be the default', function () {
+      actualSizes = [
+        TARGET_SIZE, TARGET_SIZE
+      ];
+
+      fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, false);
+
+      fontWatchRunner.start();
+
+      expect(domHelper.createElement.mostRecentCall.args[2]).toEqual('BESbswy');
+    });
+
+    it('should be a custom string', function () {
+      actualSizes = [
+        TARGET_SIZE, TARGET_SIZE
+      ];
+
+      fontWatchRunner = new FontWatchRunner(activeCallback, inactiveCallback,
+          domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, false, {}, 'TestString');
+
+      fontWatchRunner.start();
+
+      expect(domHelper.createElement.mostRecentCall.args[2]).toEqual('TestString');
+    });
+  });
+});