webfontloader 1.2.0 → 1.2.1

data/CHANGELOG

@@ -1,3 +1,12 @@
+v1.2.1 (February 26, 2013)
+* Fix the possibility of test strings wrapping to a new line and thereby breaking font watching.
+* Change the FontWatchRunner to not create DOM elements until it is started.
+* Fix the possibility of extraneous whitespace in class names.
+* Add a cache buster parameter to the Monotype/Fonts.com module.
+* Fix the case where there are no fonts to load. Webfontloader will now fire the inactive event correctly.
+* Test suite now uses the active browser to test font watching in addition to the mocked font watching tests.
+* Test suite is now using Jasmine instead of JSTestDriver.
+
 v1.2.0 (January 30, 2013)
 * Improved font watching for browsers with the WebKit web font fallback bug
 * Improved font watching in general by comparing both width and height

data/Gemfile

@@ -1,9 +1,3 @@
-source :gemcutter
+source :rubygems
 
-gem "rake"
-
-group :demos do
-  gem "rack"
-  gem "sinatra"
-  gem "vegas"
-end
+gemspec

data/README.md

@@ -5,7 +5,6 @@ WebFont Loader gives you added control when using linked fonts via
 the source, then adds a standard set of events you may use to control the
 loading experience.
 
-
 ## Get Started
 
 (These samples use WebFont Loader hosted on [Google's AJAX Libraries][gajax].)
@@ -36,7 +35,6 @@ Alternatively, load fonts from Typekit. Just specify your Kit ID.
 Learn more about the
 [modules][mod].
 
-
 ## Do More
 
 WebFont Loader gives you control over how fonts are loaded. If you're
@@ -91,65 +89,67 @@ WebFont Loader aims to provide a common interface for font loading. Today it
 works with Google, Typekit, Ascender, Fontdeck, Fonts.com Web fonts and your own
 CSS. Learn more in [transitions][trn].
 
+## Problems?
 
-## More to see
+Please open [an issue][issues]. Sample pages are greatly appreciated.
 
-A full suite of demo pages is included in this source. Here you can find some
-live examples using the JS and CSS events.
+## Developing
 
-To view the demos, just boot up our demo server and start browsing.
+Is there something else WebFont Loader should do? Did you find a bug and want
+to fix it?
 
-    $ rake demo
+### Installing development requirements
 
-You may need a few rubygems to run the server. Get them with [Bundler](http://gembundler.com/).
+You'll need a few rubygems to run the tests, demo server, and other rake tasks, which should be installed with [Bundler](http://gembundler.com/).
 
     $ gem install bundler
     $ bundle install
 
-Browse the demos [source code][demos].
-
-
-## Problems?
+To run the tests in a headless WebKit you will also need to have [PhantomJS](http://www.phantomjs.org) installed. You can install PhantomJS by downloading a binary of using HomeBrew.
 
-Please open [an issue][issues]. Sample pages are greatly appreciated.
+    $ brew install phantomjs
 
+### Building
 
-## Developing
+To build a JS file from source, just run rake:
 
-Is there something else WebFont Loader should do? Did you find a bug and want
-to fix it?
+    $ rake
 
-### Building
+### Demos
 
-Run rake:
+A full suite of demo pages is included in this source. Here you can find some
+live examples using the JS and CSS events. Run the demo server with:
 
-    rake
+    $ rake demo
 
-### Testing
+You can also run the demos with uncompressed, debuggable code to aid in
+development. Just start the server in dev mode:
 
-You can run uncompressed, debuggable code by starting the demo server in dev mode:
+    $ rake demodev
 
-    rake demodev
+Browse the demos [source code][demos].
 
-WebFont Loader has an extensive test suite that runs via
-[jsTestDriver][jstestdriver]. Please add tests for any changes.
+### Testing
 
-To run tests, first boot the test server. Then open a browser and navigate to
-the test server url listed by `rake test` to start listing for test executions.
-You can register multiple browsers.
+WebFont Loader has an extensive test suite that runs via Jasmine. The test suite
+should be passing before submitting a pull request, and new tests should be added
+for any new functionality.
 
-    rake test:boot
+To run tests, open up `spec/index.html` in a browser and check the results. The
+test suite will run automatically. Again, before submitting a pull request
+please run the test suite in multiple browsers and list them in the pull request.
 
-Then, run the tests.
+To run tests in a headless WebKit using [PhantomJS](http://www.phantomjs.org) run:
 
-    rake test
+    $ rake test
 
 ## Contributing
 
 * Fork webfontloader
 * Create a topic branch - `git checkout -b my_branch`
 * Push to your branch - `git push origin my_branch`
-* Create an [issue][issues] with a link to your branch
+* Make sure all tests are passing
+* Create a pull request for your branch
 * That's it!
 
 
@@ -173,5 +173,4 @@ WebFont Loader is released under the [Apache 2.0][lic] license.
 [demos]: http://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public
 [gfontapi]: https://code.google.com/apis/webfonts/
 [gajax]: http://code.google.com/apis/ajaxlibs/
-[jstestdriver]: http://code.google.com/p/js-test-driver/
 [issues]: https://github.com/typekit/webfontloader/issues

data/Rakefile

@@ -63,11 +63,6 @@ require 'webfontloader'
 CLEAN.include("target")
 CLEAN.include("tmp")
 
-# JsTestDriver
-JsTestPort = "9876"
-JsTestServer = "http://localhost:#{JsTestPort}"
-JsTestJar = "tools/jstestdriver/JsTestDriver-1.2.1.jar"
-
 # JsCompiler
 JsCompilerJar = "tools/compiler/compiler.jar"
 
@@ -85,15 +80,6 @@ SourceJs  = FileList["src/**/*"]
 directory "target"
 directory "tmp"
 
-file "tmp/jsTestDriver.conf" => AllJs + ["tmp"] do |t|
-  require 'yaml'
-  config = {
-    "server" => JsTestServer,
-    "load" => (@modules.all_source_files + @modules.all_test_globs).map { |f| "../#{f}" }
-  }
-  File.open(t.name, "w") { |f| YAML.dump(config, f) }
-end
-
 desc "Compile the JavaScript into target/webfont.js"
 task :compile => "target/webfont.js"
 
@@ -143,26 +129,9 @@ end
 desc "Test everything"
 task :default => [:clean, :gzipbytes, :test]
 
-namespace :test do
-  task :server do
-    system "java -jar #{JsTestJar} --port #{JsTestPort}"
-  end
-  task :capture do
-    system "open #{JsTestServer}/capture?strict"
-  end
-  desc "Execute tests against a running server"
-  task :run => ["tmp/jsTestDriver.conf"] do |t|
-    config = t.prerequisites.first
-    system "java -jar #{JsTestJar} --config #{config} --server #{JsTestServer} --tests all --captureConsole --verbose"
-  end
-  desc "Boot the test server and capture a browser"
-  multitask :boot => ['test:server', 'test:capture']
-end
-
 desc "Run all tests"
-task :test => ["tmp/jsTestDriver.conf"] do |t|
-  config = t.prerequisites.first
-  system "java -jar #{JsTestJar} --port #{JsTestPort} --config #{config} --server #{JsTestServer} --browser open --tests all --captureConsole --verbose"
+task :test do |t|
+  exec "phantomjs tools/jasmine-phantomjs/jasmine-phantomjs.js spec/index.html"
 end
 
 desc "Start the demo server"

data/docs/EVENTS.md

@@ -117,7 +117,16 @@ event will be triggered, else the `Inative` even will be triggered.
 ### Browser Support
 
 Every web browser has varying levels of support for fonts linked via
-@font-face.
+@font-face. Support for web fonts is determined using the browser user agent
+string. The user agent string may claim to support a web font format
+when it in fact does not. This is especially noticable on mobile browsers
+with a "Desktop" mode, which usually identify as Chrome on Linux.
+In this case a web font provider may decide to send WOFF fonts to the
+device because the real desktop Chrome supports it, while the mobile
+browser does not. The WebFont Loader is not designed to handle these
+cases and it chooses to believe the user agent string. Web font providers
+may or may not build on top of the basic WebFont Loader functionality
+to handle these special cases individually.
 
 > If WebFont Loader determines that the current browser does not support
 `@font-face`, the `Inactive` event will be triggered.

data/docs/MODULES.md

@@ -61,7 +61,8 @@ When using [Fonts.com web fonts][mtiwfs]
     <script type="text/javascript">
       WebFont.load({
         monotype: {
-          projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+          projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+          version: 12345 // (optional, flushes the CDN cache)
         }
       });
     </script>
@@ -78,7 +79,7 @@ provides.
 
 You can specify a specific font variation or set of variations to load and watch
 by appending the variations separated by commas to the family name separated by 
-a colon. variations are specified using (FVD notation)[fvd].
+a colon. Variations are specified using [FVD notation][fvd].
 
     WebFont.load({
       custom: {
@@ -92,4 +93,4 @@ a colon. variations are specified using (FVD notation)[fvd].
 [tk]: http://typekit.com/
 [fd]: http://fontdeck.com/
 [mtiwfs]: http://webfonts.fonts.com/
-[fvd]: https://github.com/typekit/fvd
+[fvd]: https://github.com/typekit/fvd

data/lib/webfontloader.rb

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

data/spec/ascender/ascenderscript_spec.js

@@ -0,0 +1,43 @@
+describe('AscenderScript', function () {
+  var AscenderScript = webfont.AscenderScript;
+
+  var configuration = {
+    key: 'ec2de397-11ae-4c10-937f-bf94283a70c1',
+    families: ['AndyBold', 'Arial:bold,regular']
+  };
+
+  describe('load family and variations', function () {
+    var fakeDomHelper = null,
+        fakeOnReady = null,
+        ascenderScript = null;
+
+    beforeEach(function () {
+      fakeDomHelper = {
+        insertInto: jasmine.createSpy('insertInto'),
+        createCssLink: jasmine.createSpy('createCssLink'),
+        getProtocol: jasmine.createSpy('getProtocol').andReturn('http:')
+      };
+
+      fakeOnReady = jasmine.createSpy('onReady');
+
+      ascenderScript = new AscenderScript(fakeDomHelper, configuration);
+      ascenderScript.load(fakeOnReady);
+    });
+
+    it('should create the link correctly', function () {
+      expect(fakeDomHelper.createCssLink).toHaveBeenCalledWith('http://webfonts.fontslive.com/css/ec2de397-11ae-4c10-937f-bf94283a70c1.css');
+      expect(fakeDomHelper.insertInto.calls[0].args[0]).toEqual('head');
+    });
+
+    it('should parse variations correctly', function () {
+      expect(ascenderScript.parseVariations('regular')).toEqual(['n4']);
+      expect(ascenderScript.parseVariations('bold')).toEqual(['n7']);
+      expect(ascenderScript.parseVariations('italic')).toEqual(['i4']);
+      expect(ascenderScript.parseVariations('bolditalic')).toEqual(['i7']);
+      expect(ascenderScript.parseVariations('regular,')).toEqual(['n4']);
+      expect(ascenderScript.parseVariations('regular,bold')).toEqual(['n4', 'n7']);
+      expect(ascenderScript.parseVariations('regular,,bold')).toEqual(['n4', 'n7']);
+      expect(ascenderScript.parseVariations('n4,n7')).toEqual(['n4', 'n7']);
+    });
+  })
+});

data/spec/core/cssclassname_spec.js

@@ -0,0 +1,42 @@
+describe('CssClassName', function () {
+  var CssClassName = webfont.CssClassName,
+      sanitizer = new CssClassName();
+
+  describe('#sanitize', function () {
+    it('should sanitize spaces in names', function () {
+      expect(sanitizer.sanitize(' My Family ')).toEqual('myfamily');
+    });
+
+    it('should sanitize numbers in names', function () {
+      expect(sanitizer.sanitize('99 My Family 99')).toEqual('99myfamily99');;
+    });
+
+    it('should sanitize other characters', function () {
+      expect(sanitizer.sanitize('_My+Family!-')).toEqual('myfamily');
+    });
+  });
+
+  describe('#build', function () {
+    it('should build many parts', function () {
+      expect(sanitizer.build('pre_', 'My Family', '_post')).toEqual('pre-myfamily-post');
+    });
+
+    it('should build some parts', function () {
+      expect(sanitizer.build('pre!', 'My Family')).toEqual('pre-myfamily');
+    });
+  });
+
+  describe('#constructor', function () {
+    it('should use a hyphen as a default separator', function () {
+      var sanitizer = new CssClassName();
+
+      expect(sanitizer.build('pre', 'post')).toEqual('pre-post');
+    });
+
+    it('should use the configured separator', function () {
+      var sanitizer = new CssClassName('_');
+
+      expect(sanitizer.build('pre', 'post')).toEqual('pre_post');
+    });
+  });
+});

data/spec/core/cssfontfamilyname_spec.js

@@ -0,0 +1,38 @@
+describe('CssFontFamilyName', function () {
+  var CssFontFamilyName = webfont.CssFontFamilyName,
+      sanitizer = new CssFontFamilyName();
+
+  describe('#quote', function () {
+    it('should quote names with spaces', function () {
+      expect(sanitizer.quote('My Family')).toEqual("'My Family'");
+    });
+
+    it('should quote names with spaces and double quotes', function () {
+      expect(sanitizer.quote('"My Family"')).toEqual("'My Family'");
+    });
+
+    it('should quote names with spaces and single quotes', function () {
+      expect(sanitizer.quote("'My Family'")).toEqual("'My Family'");
+    });
+
+    it('should quote multiple single quoted names separated with a comma', function () {
+      expect(sanitizer.quote("'family 1','family 2'")).toEqual("'family 1','family 2'");
+    });
+
+    it('should quote multiple single quoted names separated with a comma and space', function () {
+      expect(sanitizer.quote("'family 1', 'family 2'")).toEqual("'family 1','family 2'");
+    });
+
+    it('should not quote when there is no space', function () {
+      expect(sanitizer.quote('MyFamily')).toEqual('MyFamily');
+    });
+
+    it('should remove quotes when they are unnecesssary', function () {
+      expect(sanitizer.quote('"MyFamily"')).toEqual('MyFamily');
+    });
+
+    it('should not quote multiple names when there is no space', function () {
+      expect(sanitizer.quote("'family-1', 'family-2'")).toEqual('family-1,family-2');
+    });
+  });
+});

data/spec/core/domhelper_spec.js

@@ -0,0 +1,158 @@
+describe('DomHelper', function () {
+  var domHelper = new webfont.DomHelper(window);
+
+  describe('#createElement', function () {
+    it('should create an element', function () {
+      var div = domHelper.createElement('div');
+
+      expect(div).not.toBeNull();
+    });
+
+    it('should create an element with inline content', function () {
+      var div = domHelper.createElement('div', {}, 'moo');
+
+      expect(div).not.toBeNull();
+      expect(div.innerHTML).toEqual('moo');
+    });
+
+    it('should create an element with attributes and inline content', function () {
+      var div = domHelper.createElement('div', {
+            style: 'font-size: 42px',
+            id: 'mySpan'
+          }, 'hello');
+
+      expect(div).not.toBeNull();
+      expect(div.innerHTML).toEqual('hello');
+      expect(div.style.fontSize).toEqual('42px');
+      expect(div.id).toEqual('mySpan');
+    });
+
+    it('should work with augmented Object.prototype', function () {
+      Object.prototype.evil = function () {};
+
+      var div = domHelper.createElement('div', { id: 'augmented' });
+      var parentDiv = domHelper.createElement('div', { id: 'parentaugmented' });
+
+      parentDiv.appendChild(div);
+
+      expect(div).not.toBeNull();
+      expect(!!div.getAttribute('evil')).toBe(false);
+      expect(-1, parentDiv.innerHTML.indexOf('evil'));
+
+      delete Object.prototype.evil;
+    });
+  });
+
+  describe('#createCssLink', function () {
+    var link = domHelper.createCssLink('http://moo/somecss.css');
+
+    it('should create a link', function () {
+      expect(link).not.toBeNull();
+    });
+
+    it('should create a link with correct rel and href properties', function () {
+      expect(link.rel).toEqual('stylesheet');
+      expect(link.href).toEqual('http://moo/somecss.css');
+    });
+  });
+
+  describe('#createScriptSrc', function () {
+    var script = domHelper.createScriptSrc('http://moo/somescript.js');
+
+    it('should create a script element', function () {
+      expect(script).not.toBeNull();
+    });
+
+    it('should have a src property', function () {
+      expect(script.src).toEqual('http://moo/somescript.js');
+    });
+  });
+
+  describe('#appendClassName', function () {
+    it('should have added a class name', function () {
+      var div = domHelper.createElement('div');
+      domHelper.appendClassName(div, 'moo');
+
+      expect(div.className).toEqual('moo');
+    });
+
+    it('should not add duplicate class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo');
+      domHelper.appendClassName(div, 'meu');
+      domHelper.appendClassName(div, 'moo');
+
+      expect(div.className).toEqual('moo meu');
+    });
+
+    it('should add multiple class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo meu moo');
+      expect(div.className).toEqual('moo meu moo');
+    });
+
+    it('should normalize spaces and tabs', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'meu');
+      domHelper.appendClassName(div, '      foo ');
+      expect(div.className).toEqual('meu foo');
+    });
+  });
+
+  describe('#removeClassName', function () {
+    it('should remove class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'meu moo');
+      expect(div.className).toEqual('meu moo');
+
+      domHelper.removeClassName(div, 'meu');
+      expect(div.className).toEqual('moo');
+    });
+
+    it('should not remove non-existing classes', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo');
+      expect(div.className).toEqual('moo');
+      domHelper.removeClassName(div, 'boo');
+      expect(div.className).toEqual('moo');
+    });
+  });
+
+  describe('#hasClassName', function () {
+    var div = null;
+
+    beforeEach(function () {
+       div = domHelper.createElement('div');
+       domHelper.appendClassName(div, 'moo moo-meu');
+    });
+
+    it('should return true', function () {
+      expect(domHelper.hasClassName(div, 'moo')).toBe(true);
+      expect(domHelper.hasClassName(div, 'moo-meu')).toBe(true);
+    });
+
+    it('should return false', function () {
+      expect(domHelper.hasClassName(div, 'boo')).toBe(false);
+      expect(domHelper.hasClassName(div, 'meu')).toBe(false);
+    });
+  });
+
+  describe('#setStyle', function () {
+    var div = null;
+
+    beforeEach(function () {
+      div = domHelper.createElement('div');
+    });
+
+    it('should set the style correctly', function () {
+      domHelper.setStyle(div, 'left:3px;top:1px;');
+      expect(div.style.left).toEqual('3px');
+      expect(div.style.top).toEqual('1px');
+    });
+  });
+});