webfontloader 1.2.0 → 1.2.1

data/spec/google/lastresortwebkitfontwatchrunner_spec.js

@@ -0,0 +1,145 @@
+describe('LastResortWebKitFontWatchRunner', function () {
+  var LastResortWebKitFontWatchRunner = webfont.LastResortWebKitFontWatchRunner,
+      Size = webfont.Size,
+      DomHelper = webfont.DomHelper,
+      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 = LastResortWebKitFontWatchRunner.prototype.start;
+
+    LastResortWebKitFontWatchRunner.prototype.start = function () {
+      setupFinished = true;
+      fakeGetSizeCount = 0;
+      originalStartMethod.apply(this);
+    };
+  });
+
+  afterEach(function () {
+    LastResortWebKitFontWatchRunner.prototype.start = originalStartMethod;
+  });
+
+  it('should ignore fallback size and call active', function () {
+    actualSizes = [
+      LAST_RESORT_SIZE, LAST_RESORT_SIZE,
+      TARGET_SIZE, TARGET_SIZE
+    ];
+
+    var fontWatchRunner = new LastResortWebKitFontWatchRunner(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 LastResortWebKitFontWatchRunner(activeCallback, inactiveCallback,
+        domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, 'Arimo', fontDescription, true);
+
+    fontWatchRunner.start();
+
+    expect(asyncCount).toEqual(1);
+    expect(activeCallback).toHaveBeenCalledWith('Arimo', '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 LastResortWebKitFontWatchRunner(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 LastResortWebKitFontWatchRunner(activeCallback, inactiveCallback,
+        domHelper, fakeFontSizer, fakeAsyncCall, fakeGetTime, fontFamily, fontDescription, true);
+
+    fontWatchRunner.start();
+    expect(asyncCount).toEqual(1);
+    expect(inactiveCallback).toHaveBeenCalledWith('My Family', 'n4');
+  });
+});

data/spec/index.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Webfontloader tests</title>
+    <link rel="stylesheet" href="../tools/jasmine/jasmine.css">
+
+    <link rel="stylesheet" href="fonts/nullfont.css">
+    <link rel="stylesheet" href="fonts/nullfont1.css">
+    <link rel="stylesheet" href="fonts/nullfont2.css">
+    <link rel="stylesheet" href="fonts/nullfont3.css">
+    <link rel="stylesheet" href="fonts/sourcesansa.css">
+ </head>
+  <body>
+    <script src="../tools/jasmine/jasmine.js"></script>
+    <script src="../tools/jasmine/jasmine-html.js"></script>
+    <script src="../tools/jasmine-phantomjs/terminal-reporter.js"></script>
+
+    <script src="../src/core/namespace.js"></script>
+    <script src="../src/core/domhelper.js"></script>
+    <script src="../src/core/cssclassname.js"></script>
+    <script src="../src/core/cssfontfamilyname.js"></script>
+    <script src="../src/core/fontvariationdescription.js"></script>
+    <script src="../src/core/browserinfo.js"></script>
+    <script src="../src/core/useragent.js"></script>
+    <script src="../src/core/useragentparser.js"></script>
+    <script src="../src/core/fontmoduleloader.js"></script>
+    <script src="../src/core/eventdispatcher.js"></script>
+    <script src="../src/core/size.js"></script>
+    <script src="../src/core/fontruler.js"></script>
+    <script src="../src/core/fontwatchrunner.js"></script>
+    <script src="../src/core/fontwatcher.js"></script>
+    <script src="../src/core/font.js"></script>
+    <script src="../src/core/initialize.js"></script>
+    <script src="../src/google/fontapiparser.js"></script>
+    <script src="../src/google/fontapiurlbuilder.js"></script>
+    <script src="../src/google/googlefontapi.js"></script>
+    <script src="../src/google/lastresortwebkitfontwatchrunner.js"></script>
+    <script src="../src/custom/customcss.js"></script>
+    <script src="../src/ascender/ascender_script.js"></script>
+    <script src="../src/fontdeck/fontdeck_script.js"></script>
+    <script src="../src/monotype/monotype_script.js"></script>
+    <script src="../src/typekit/typekit_script.js"></script>
+
+    <script src="../spec/core/domhelper_spec.js"></script>
+    <script src="../spec/core/cssclassname_spec.js"></script>
+    <script src="../spec/core/cssfontfamilyname_spec.js"></script>
+    <script src="../spec/core/fontvariationdescription_spec.js"></script>
+    <script src="../spec/core/useragentparser_spec.js"></script>
+    <script src="../spec/core/fontmoduleloader_spec.js"></script>
+    <script src="../spec/core/eventdispatcher_spec.js"></script>
+    <script src="../spec/core/size_spec.js"></script>
+    <script src="../spec/core/fontruler_spec.js"></script>
+    <script src="../spec/core/fontwatchrunner_spec.js"></script>
+    <script src="../spec/core/fontwatcher_spec.js"></script>
+    <script src="../spec/core/font_spec.js"></script>
+    <script src="../spec/google/fontapiparser_spec.js"></script>
+    <script src="../spec/google/fontapiurlbuilder_spec.js"></script>
+    <script src="../spec/google/googlefontapi_spec.js"></script>
+    <script src="../spec/google/lastresortwebkitfontwatchrunner_spec.js"></script>
+    <script src="../spec/custom/customcss_spec.js"></script>
+    <script src="../spec/ascender/ascenderscript_spec.js"></script>
+    <script src="../spec/fontdeck/fontdeckscript_spec.js"></script>
+    <script src="../spec/monotype/monotypescript_spec.js"></script>
+    <script src="../spec/typekit/typekitscript_spec.js"></script>
+
+    <script>
+      (function () {
+        var env = jasmine.getEnv();
+
+        env.updateInterval = 1000;
+
+        var htmlReporter = new jasmine.HtmlReporter(),
+            terminalReporter = new jasmine.TerminalReporter({
+              verbosity: 3,
+              color: true
+            });
+
+        env.addReporter(terminalReporter);
+        env.addReporter(htmlReporter);
+        env.specFilter = function (spec) {
+          return htmlReporter.specFilter(spec);
+        };
+
+        var currentOnload = window.onload;
+
+        window.onload = function () {
+          if (currentOnload) {
+            currentOnload();
+          }
+          env.execute();
+        };
+      }());
+    </script>
+  </body>
+</html>

data/spec/monotype/monotypescript_spec.js

@@ -0,0 +1,49 @@
+describe('MonotypeScript', function () {
+  var MonotypeScript = webfont.MonotypeScript,
+      BrowserInfo = webfont.BrowserInfo,
+      UserAgent = webfont.UserAgent;
+
+  var configuration = {
+    projectId: '01e2ff27-25bf-4801-a23e-73d328e6c7cc',
+    api: 'http://fast.fonts.com/jsapidev'
+  };
+
+  var fakeDomHelper = null,
+      global = null,
+      script = {},
+      monotype = null,
+      load =  null,
+      useragent = null,
+      support = null;
+
+  beforeEach(function () {
+    global = {};
+
+    fakeDomHelper = {
+      createElement: jasmine.createSpy('createElement').andReturn(script),
+      insertInto: jasmine.createSpy('insertInto'),
+      getLoadWindow: jasmine.createSpy('getLoadWindow').andReturn(global),
+      getProtocol: jasmine.createSpy('getProtocol').andReturn('http:')
+    };
+    support = jasmine.createSpy('support');
+    load = jasmine.createSpy('load');
+    useragent = new UserAgent('Firefox', '3.6', 'Gecko', '1.9.3', 'Macintosh', '10.6', undefined, new BrowserInfo(true, false));
+
+    monotype = new MonotypeScript(useragent, fakeDomHelper, configuration);
+    monotype.supportUserAgent(useragent, support);
+    monotype.load(load);
+
+    global[MonotypeScript.HOOK + configuration.projectId] = function () {
+      return ['aachen bold', 'kid print regular'];
+    };
+
+    script.onload();
+  });
+
+  it('should create a script element', function () {
+    expect(support).toHaveBeenCalled();
+    expect(fakeDomHelper.createElement).toHaveBeenCalledWith('script');
+    expect(script.src).toEqual('http://fast.fonts.com/jsapidev/01e2ff27-25bf-4801-a23e-73d328e6c7cc.js');
+    expect(load).toHaveBeenCalledWith([undefined, undefined], {});
+  });
+});

data/spec/typekit/typekitscript_spec.js

@@ -0,0 +1,93 @@
+describe('TypekitScript', function () {
+  var TypekitScript = webfont.TypekitScript;
+
+  var configuration = {
+    id: 'abc'
+  };
+
+  var fakeDomHelper = null,
+      global = {},
+      load = null,
+      support = null;
+
+  beforeEach(function () {
+    global = {};
+
+    support = jasmine.createSpy('support');
+
+    load = jasmine.createSpy('load');
+
+    fakeDomHelper = {
+      insertInto: jasmine.createSpy('insertInto'),
+      createScriptSrc: jasmine.createSpy('createScriptSrc'),
+      getLoadWindow: jasmine.createSpy('getLoadWindow').andReturn(global),
+      getProtocol: jasmine.createSpy('getProtocol').andReturn('http:')
+    };
+  });
+
+  it('support load and life cycle', function () {
+    var typekit = new TypekitScript(fakeDomHelper, configuration);
+
+    typekit.supportUserAgent('useragent', support);
+
+    expect(fakeDomHelper.insertInto.calls[0].args[0]).toEqual('head');
+    expect(fakeDomHelper.createScriptSrc).toHaveBeenCalledWith('http://use.typekit.com/abc.js');
+    expect(support).not.toHaveBeenCalled();
+
+    expect(global.__webfonttypekitmodule__).not.toBeNull();
+    expect(global.__webfonttypekitmodule__['abc']).not.toBeNull();
+
+    global.__webfonttypekitmodule__['abc'](function (ua, config, init) {
+      expect(ua).toEqual('useragent');
+      expect(config).toEqual(configuration);
+      expect(init).not.toBeNull();
+      init(true, ['Font1', 'Font2'], {});
+    });
+
+    expect(support).toHaveBeenCalled();
+
+    typekit.load(load);
+
+    expect(load).toHaveBeenCalledWith(['Font1', 'Font2'], { 'Font1': undefined, 'Font2': undefined });
+  });
+
+  it('should load with variations', function () {
+    var typekit = new TypekitScript(fakeDomHelper, configuration);
+
+    typekit.supportUserAgent('useragent', support);
+
+    global.__webfonttypekitmodule__['abc'](function (ua, config, init) {
+      init(true, ['Font1', 'Font2'], {
+        'Font1': ['n7', 'i7']
+      });
+    });
+
+    expect(support).toHaveBeenCalled();
+
+    typekit.load(load);
+
+    expect(load).toHaveBeenCalledWith(['Font1', 'Font2'], { 'Font1': ['n7', 'i7'], 'Font2': undefined });
+  });
+
+  it('should load through the alternative API', function () {
+    var typekit = new TypekitScript(fakeDomHelper, { id: 'abc', api: '/test' });
+
+    typekit.supportUserAgent('useragent', support);
+    expect(fakeDomHelper.insertInto.calls[0].args[0]).toEqual('head');
+    expect(fakeDomHelper.createScriptSrc).toHaveBeenCalledWith('/test/abc.js');
+  });
+
+  it('should not load without a kit id', function () {
+    var typekit = new TypekitScript(fakeDomHelper, { id: null });
+
+    typekit.supportUserAgent('useragent', support);
+
+    expect(fakeDomHelper.insertInto).not.toHaveBeenCalled();
+    expect(fakeDomHelper.createScriptSrc).not.toHaveBeenCalled();
+    expect(support).toHaveBeenCalled();
+
+    typekit.load(load);
+
+    expect(load).toHaveBeenCalledWith([], {});
+  });
+});

data/src/core/domhelper.js

@@ -136,7 +136,9 @@ webfont.DomHelper.prototype.appendClassName = function(e, name) {
     }
   }
   classes.push(name);
-  e.className = classes.join(' ').replace(/^\s+/, '');
+  e.className = classes.join(' ')
+                  .replace(/\s+/g, ' ')
+                  .replace(/^\s+|\s+$/, '');
 };
 
 /**
@@ -152,8 +154,9 @@ webfont.DomHelper.prototype.removeClassName = function(e, name) {
       remainingClasses.push(classes[i]);
     }
   }
-  e.className = remainingClasses.join(' ').replace(/^\s+/, '')
-      .replace(/\s+$/, '');
+  e.className = remainingClasses.join(' ')
+                  .replace(/\s+/g, ' ')
+                  .replace(/^\s+|\s+$/, '');
 };
 
 /**

data/src/core/fontruler.js

@@ -41,7 +41,7 @@ webfont.FontRuler.prototype.computeStyleString_ = function(fontFamily, opt_fontD
   var variationCss = opt_fontDescription ? this.fvd_.expand(opt_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:" +
+      "padding:0;font-variant:normal;white-space:nowrap;font-family:" +
       this.nameHelper_.quote(fontFamily) + ";" + variationCss;
   return styleString;
 };

data/src/core/fontwatcher.js

@@ -45,6 +45,11 @@ webfont.FontWatcher.prototype.watch = function(fontFamilies, fontDescriptions,
     fontTestStrings, fontWatchRunnerCtor, last) {
   var length = fontFamilies.length;
 
+  if (length === 0) {
+    this.eventDispatcher_.dispatchInactive();
+    return;
+  }
+
   for (var i = 0; i < length; i++) {
     var fontFamily = fontFamilies[i];
     if (!fontDescriptions[fontFamily]) {

data/src/core/fontwatchrunner.js

@@ -28,10 +28,8 @@ webfont.FontWatchRunner = function(activeCallback, inactiveCallback, domHelper,
 
   this.metricCompatibleFonts_ = opt_metricCompatibleFonts || null;
 
-  this.fontRulerA_ = new webfont.FontRuler(this.domHelper_, this.fontSizer_, this.fontTestString_);
-  this.fontRulerA_.insert();
-  this.fontRulerB_ = new webfont.FontRuler(this.domHelper_, this.fontSizer_, this.fontTestString_);
-  this.fontRulerB_.insert();
+  this.fontRulerA_ = null;
+  this.fontRulerB_ = null;
 
   this.setupLastResortSizes_();
 };
@@ -82,6 +80,11 @@ webfont.FontWatchRunner.prototype.setupLastResortSizes_ = function() {
 };
 
 webfont.FontWatchRunner.prototype.start = function() {
+  this.fontRulerA_ = new webfont.FontRuler(this.domHelper_, this.fontSizer_, this.fontTestString_);
+  this.fontRulerA_.insert();
+  this.fontRulerB_ = new webfont.FontRuler(this.domHelper_, this.fontSizer_, this.fontTestString_);
+  this.fontRulerB_.insert();
+
   this.started_ = this.getTime_();
 
   this.fontRulerA_.setFont(this.fontFamily_ + ',' + webfont.FontWatchRunner.LastResortFonts.SERIF, this.fontDescription_);