webfontloader 1.4.0 → 1.4.1

data/CHANGELOG

@@ -1,3 +1,7 @@
+v1.4.1 (April 8, 2013)
+* Internal rewrite of font and variations
+* Fix for the configurable timeout on the Google module
+
 v1.4.0 (March 28, 2013)
 * Stop exporting the `addModule` API to dynamically add modules (it didn't work anyway.)
 * Stop checking the height when monitoring for font load. This turned out to be inconsistent across platforms.

data/lib/webfontloader.rb

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

data/spec/ascender/ascenderscript_spec.js

@@ -1,5 +1,6 @@
 describe('AscenderScript', function () {
-  var AscenderScript = webfont.AscenderScript;
+  var AscenderScript = webfont.AscenderScript,
+      Font = webfont.Font;
 
   var configuration = {
     key: 'ec2de397-11ae-4c10-937f-bf94283a70c1',
@@ -29,6 +30,14 @@ describe('AscenderScript', function () {
       expect(fakeDomHelper.insertInto.calls[0].args[0]).toEqual('head');
     });
 
+    it('should pass the fonts correctly', function () {
+      expect(fakeOnReady).toHaveBeenCalledWith([
+        new Font('AndyBold', 'n4'),
+        new Font('Arial', 'n7'),
+        new Font('Arial', 'n4')
+      ]);
+    });
+
     it('should parse variations correctly', function () {
       expect(ascenderScript.parseVariations('regular')).toEqual(['n4']);
       expect(ascenderScript.parseVariations('bold')).toEqual(['n7']);
@@ -39,5 +48,19 @@ describe('AscenderScript', function () {
       expect(ascenderScript.parseVariations('regular,,bold')).toEqual(['n4', 'n7']);
       expect(ascenderScript.parseVariations('n4,n7')).toEqual(['n4', 'n7']);
     });
+
+    it('should parse font families correctly', function () {
+      expect(ascenderScript.parseFamilyAndVariations('Arial')).toEqual([new Font('Arial')]);
+      expect(ascenderScript.parseFamilyAndVariations('Arial:bold,regular')).toEqual([new Font('Arial', 'n7'), new Font('Arial', 'n4')]);
+      expect(ascenderScript.parseFamilyAndVariations('Arial:n4,n7')).toEqual([new Font('Arial', 'n4'), new Font('Arial', 'n7')]);
+    });
+
+    it('should parse multiple font families correctly', function () {
+      expect(ascenderScript.parseFamiliesAndVariations(['Arial', 'Sans:n4,n7'])).toEqual([
+        new Font('Arial', 'n4'),
+        new Font('Sans', 'n4'),
+        new Font('Sans', 'n7')
+      ]);
+    });
   })
 });

data/spec/core/eventdispatcher_spec.js

@@ -1,10 +1,12 @@
 describe('EventDispatcher', function () {
   var EventDispatcher = webfont.EventDispatcher,
       DomHelper = webfont.DomHelper,
+      Font = webfont.Font,
       domHelper = new DomHelper(window),
       element = null
       eventDispatcher = null,
       namespace = 'ns',
+      font = null,
       nullFn = function () {},
       callbacks = {
         loading: nullFn,
@@ -19,6 +21,8 @@ describe('EventDispatcher', function () {
     element = domHelper.createElement();
     eventDispatcher = new EventDispatcher(domHelper, element, callbacks, namespace);
 
+    font = new Font('My Family', 'n4');
+
     spyOn(callbacks, 'loading');
     spyOn(callbacks, 'active');
     spyOn(callbacks, 'inactive');
@@ -43,7 +47,7 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontLoading', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontLoading('My Family', 'n4');
+      eventDispatcher.dispatchFontLoading(font);
     });
 
     it('should call the correct callback', function () {
@@ -57,7 +61,7 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontInactive', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontInactive('My Family', 'n4');
+      eventDispatcher.dispatchFontInactive(font);
     });
 
     it('should call the correct callback', function () {
@@ -71,8 +75,8 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontInactive - with loading class', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontLoading('My Family', 'n4');
-      eventDispatcher.dispatchFontInactive('My Family', 'n4');
+      eventDispatcher.dispatchFontLoading(font);
+      eventDispatcher.dispatchFontInactive(font);
     });
 
     it('should set the correct class name', function () {
@@ -82,8 +86,8 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontInactive - with active class', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontActive('My Family', 'n4');
-      eventDispatcher.dispatchFontInactive('My Family', 'n4');
+      eventDispatcher.dispatchFontActive(font);
+      eventDispatcher.dispatchFontInactive(font);
     });
 
     it('should not append the inactive class name', function () {
@@ -97,7 +101,7 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontActive', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontActive('My Family', 'n4');
+      eventDispatcher.dispatchFontActive(font);
     });
 
     it('should call the correct callback', function () {
@@ -111,8 +115,8 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontActive - with loading class', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontLoading('My Family', 'n4');
-      eventDispatcher.dispatchFontActive('My Family', 'n4');
+      eventDispatcher.dispatchFontLoading(font);
+      eventDispatcher.dispatchFontActive(font);
     });
 
     it('should set the correct class name', function () {
@@ -122,8 +126,8 @@ describe('EventDispatcher', function () {
 
   describe('#dispatchFontActive - with inactive class', function () {
     beforeEach(function () {
-      eventDispatcher.dispatchFontInactive('My Family', 'n4');
-      eventDispatcher.dispatchFontActive('My Family', 'n4');
+      eventDispatcher.dispatchFontInactive(font);
+      eventDispatcher.dispatchFontActive(font);
     });
 
     it('should set the correct class', function () {

data/spec/core/font_spec.js

@@ -1,223 +1,114 @@
-describe('WebFont', function () {
-  var WebFont = webfont.WebFont,
-      UserAgent = webfont.UserAgent,
-      BrowserInfo = webfont.BrowserInfo,
-      FontModuleLoader = webfont.FontModuleLoader,
-      fontModuleLoader = null,
-      userAgent = null;
-
-  beforeEach(function () {
-    userAgent = new UserAgent('Firefox', '3.6', 'Gecko', '1.9.2', 'Macintosh', '10.6', undefined, new BrowserInfo(true, false, false));
-    fontModuleLoader = new FontModuleLoader();
-  });
+describe('Font', function () {
+  var Font = webfont.Font;
 
-  describe('font load', function () {
-    var font = null,
-        testModule = null;
+  describe('#quote', function () {
+    var quote = function (font) {
+      return new Font(font).getCssName();
+    };
 
-    beforeEach(function () {
-      font = new WebFont(window, fontModuleLoader, userAgent);
-      font.addModule('test', function (conf, domHelper) {
-        testModule = new function () {
-          this.conf = conf;
-          this.domHelper = domHelper;
-          this.loadCalled = true;
-          this.supportUserAgentCalled = false;
-        };
+    it('should quote names with spaces', function () {
+      expect(quote('My Family')).toEqual("'My Family'");
+    });
 
-        testModule.load = function (onReady) {
-          this.loadCalled = true;
-          onReady([]);
-        };
+    it('should quote names with spaces and double quotes', function () {
+      expect(quote('"My Family"')).toEqual("'My Family'");
+    });
 
-        testModule.supportUserAgent = function (ua, support) {
-          this.supportUserAgentCalled = true;
-          support(true);
-        };
+    it('should quote names with spaces and single quotes', function () {
+      expect(quote("'My Family'")).toEqual("'My Family'");
+    });
 
-        return testModule;
-      });
+    it('should quote multiple single quoted names separated with a comma', function () {
+      expect(quote("'family 1','family 2'")).toEqual("'family 1','family 2'");
     });
 
-    it('should not start loading', function () {
-      expect(font.moduleFailedLoading_).toEqual(0);
-      expect(font.moduleLoading_).toEqual(0);
+    it('should quote multiple single quoted names separated with a comma and space', function () {
+      expect(quote("'family 1', 'family 2'")).toEqual("'family 1','family 2'");
     });
 
-    it('should fail to load a module', function () {
-      var loading = jasmine.createSpy('loading');
+    it('should not quote when there is no space', function () {
+      expect(quote('MyFamily')).toEqual('MyFamily');
+    });
 
-      font.load({
-        test: {
-          somedata: 'in french a cow says meuh'
-        },
-        loading: loading
-      });
+    it('should remove quotes when they are unnecesssary', function () {
+      expect(quote('"MyFamily"')).toEqual('MyFamily');
+    });
 
-      expect(font.moduleFailedLoading_).toEqual(1);
-      expect(font.moduleLoading_).toEqual(0);
-      expect(testModule).not.toBeNull();
+    it('should not quote multiple names when there is no space', function () {
+      expect(quote("'family-1', 'family-2'")).toEqual('family-1,family-2');
+    });
+  });
 
-      expect(testModule.conf).not.toBeUndefined();
-      expect(testModule.conf).not.toBeNull();
+  describe('#getCssVariation', function () {
+    function toCss(fvd) {
+      return new Font('My Family', fvd).getCssVariation();
+    }
 
-      expect(testModule.domHelper).not.toBeNull();
-      expect(testModule.domHelper).not.toBeUndefined();
+    it('should expand font-style', function () {
+      expect(toCss('n4')).toEqual('font-style:normal;font-weight:400;');
+      expect(toCss('i4')).toEqual('font-style:italic;font-weight:400;');
+      expect(toCss('o4')).toEqual('font-style:oblique;font-weight:400;');
+    });
 
-      expect(testModule.domHelper.getMainWindow()).toEqual(window);
-      expect(testModule.domHelper.getLoadWindow()).toEqual(window);
+    it('should expand weights correctly', function () {
+      for (var i = 1; i < 10; i += 1) {
+        expect(toCss('n' + i)).toEqual('font-style:normal;font-weight:' + (i * 100) + ';');
+      }
+    });
 
-      expect(testModule.conf.somedata).toEqual('in french a cow says meuh');
-      expect(testModule.loadCalled).toBe(true);
-      expect(testModule.supportUserAgentCalled).toBe(true);
-      expect(loading).toHaveBeenCalled();
+    it('should not expand incorrect input', function () {
+      expect(toCss('')).toEqual('font-style:normal;font-weight:400;');
+      expect(toCss('n')).toEqual('font-style:normal;font-weight:400;');
+      expect(toCss('1')).toEqual('font-style:normal;font-weight:400;');
+      expect(toCss('n1x')).toEqual('font-style:normal;font-weight:400;');
     });
   });
 
-  describe('font load with context', function () {
-    var font = null,
-        testModule = null,
-        fakeMainWindow = {};
+  describe('parseCssVariation', function () {
+    function toFvd(css) {
+      return Font.parseCssVariation(css);
+    }
 
-    beforeEach(function () {
-      font = new WebFont(fakeMainWindow, fontModuleLoader, userAgent);
-      font.addModule('test', function (conf, domHelper) {
-        testModule = new function () {
-          this.domHelper = domHelper;
-        };
-        testModule.load = function () {};
-        testModule.supportUserAgent = function (ua, support) {
-          support(true);
-        };
+    it('should default to n4 when there is no description', function () {
+      expect(toFvd('')).toEqual('n4');
+      expect(toFvd(null)).toEqual('n4');
+      expect(toFvd(undefined)).toEqual('n4');
+    });
 
-        return testModule;
-      });
+    it('should compact font style', function () {
+      expect(toFvd('font-style: normal;')).toEqual('n4');
+      expect(toFvd('font-style: italic;')).toEqual('i4');
+      expect(toFvd('font-style: oblique;')).toEqual('o4');
     });
 
-    it('should load with the correct context', function () {
-      font.load({
-        test: {
-          somedata: 'in french a cow says meuh'
-        },
-        context: window
-      });
+    it('should return the default value when font-style is incorrect', function () {
+      expect(toFvd('font-style: other;')).toEqual('n4');
+    });
 
-      expect(testModule.domHelper).not.toBeNull();
-      expect(testModule.domHelper).not.toBeUndefined();
+    it('should compact font weight', function () {
+      expect(toFvd('font-weight: normal;')).toEqual('n4');
+      expect(toFvd('font-weight: bold;')).toEqual('n7');
+      for (var i = 1; i < 10; i += 1) {
+        expect(toFvd('font-weight: ' + (i * 100) + ';')).toEqual('n' + i);
+      }
+    });
 
-      expect(testModule.domHelper.getMainWindow()).toEqual(fakeMainWindow);
-      expect(testModule.domHelper.getLoadWindow()).toEqual(window);
+    it('should return the default value when font-weight is incorrect', function () {
+      expect(toFvd('font-weight: 140;')).toEqual('n4');
+      expect(toFvd('font-weight: other;')).toEqual('n4');
     });
-  });
 
-  describe('module failed to provide families and descriptions because it did not initialize properly', function () {
-    var font = null,
-        testModule = null,
-        inactive = jasmine.createSpy('inactive'),
-        active = jasmine.createSpy('active');
-
-    beforeEach(function () {
-      jasmine.Clock.useMock();
-      font = new WebFont(window, fontModuleLoader, new UserAgent('Firefox', '3.6', 'Gecko', '1.9.2', 'Macintosh', '10.6', undefined, new BrowserInfo(true, false)));
-      font.addModule('test', function (conf, domHelper) {
-        testModule = new function () {
-          this.conf = conf;
-          this.families = [];
-          this.descriptions = {};
-        };
-
-        testModule.getFontWatchRunnerCtor = function () {
-          function FakeFontWatchRunner(activeCallback, inactiveCallback) {
-            this.inactive = inactiveCallback;
-            this.active = activeCallback;
-          };
-
-          FakeFontWatchRunner.prototype.start = function () {
-            if (conf.id) {
-              this.active('Font1', 'n4');
-            } else {
-              this.inactive('Font1', 'n4');
-            }
-          };
-
-          return FakeFontWatchRunner;
-        };
-
-        testModule.supportUserAgent = function (userAgent, support) {
-          if (conf.id) {
-            // The monotype module only initializes font
-            // and description if there is a kit id.
-            this.families = ['Font1'];
-            this.description = { 'Font1': ['n4'] };
-          }
-          support(true);
-        };
-        testModule.load = function (onReady) {
-          onReady(this.families, this.description);
-        };
-
-        return testModule;
-      });
-    });
-
-    it('should load with a project id', function () {
-      font.load({
-        test: {
-          id: 'hello world'
-        },
-        inactive: inactive,
-        active: active
-      });
-
-      jasmine.Clock.tick(1);
-
-      expect(testModule).not.toBeNull();
-      expect(active).toHaveBeenCalled();
-    });
-
-    it('should not load without a project id', function () {
-      font.load({
-        test: {
-        },
-        inactive: inactive,
-        active: active
-      });
-
-      jasmine.Clock.tick(1);
-
-      expect(testModule).not.toBeNull();
-      expect(inactive).toHaveBeenCalled();
+    it('should compact multiple properties', function () {
+      expect(toFvd('font-weight: bold; font-style: italic;')).toEqual('i7');
+      expect(toFvd('; font-weight: bold; font-style: italic;')).toEqual('i7');
+      expect(toFvd('font-style:italic;font-weight:bold;')).toEqual('i7');
+      expect(toFvd('   font-style:   italic    ;\n\nfont-weight:   bold;  ')).toEqual('i7');
     });
-  });
 
-  describe('font inactive', function () {
-    var font = null,
-        testModule = null;
-
-    beforeEach(function () {
-      font = new WebFont(window, fontModuleLoader, new UserAgent('Firefox', '3.6', 'Gecko', '1.9.2', 'Macintosh', '10.6', undefined, new BrowserInfo(false, false, false)));
-      font.addModule('test', function (conf, domHelper) {
-        testModule = new function () {
-          this.conf = conf;
-          this.loadCalled = false;
-        };
-        testModule.load = function () {};
-        return testModule;
-      });
-    });
-
-    it('should load with the correct context', function () {
-      var inactive = jasmine.createSpy('inactive');
-
-      font.load({
-        test: {
-          somedata: 'in french a cow says meuh'
-        },
-        inactive: inactive
-      });
-
-      expect(testModule).toBeNull()
-      expect(inactive).toHaveBeenCalled();
+    it('should return default values for incorrect individual properties', function () {
+      expect(toFvd('src: url(/font.otf)')).toEqual('n4');
+      expect(toFvd('font-weight: 900; src: url(/font.otf);')).toEqual('n9');
+      expect(toFvd('font-weight: 800; font-stretch:condensed;')).toEqual('n8');
     });
   });
 });