webfontloader 1.5.2 → 1.5.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9f2d29daa39ef38194d69ef325ccd687a3b906fa
+  data.tar.gz: 7dd1853c96e114304e74a2305c3585e03693cc20
+SHA512:
+  metadata.gz: cd13cb3191c2608c60d65e8872f6945599161335ca299ca842f377298a8b53cdd2b8f8af8d5ba2f592fc50a01ad2bdbdce492adc05e7f6452ac8b029b3ccc8df
+  data.tar.gz: cc7e4b91fe6b7c53e76de4c0baa39b09ec17f54d793d03b96ba185edd638c081376a9e7e470d8249f354be0df84bf7a83b9e91b1114ccac7be79ba45aea0e44c

data/CHANGELOG

@@ -1,3 +1,7 @@
+v1.5.3 (April 8, 2014)
+* Prevent a potential FOUT when setting the font event classes.
+* Add "display:block" to test rulers so "* { display: none; }" doesn't override it
+
 v1.5.2 (January 3, 2014)
 * Add Copyright, License and Version to the compiled output file(s)
 * Fix small bug in Google Font module that rejected font variations with dashes

data/README.md

@@ -24,34 +24,38 @@ Web Font Loader gives you added control when using linked fonts via `@font-face`
 
 To use the Web Font Loader library, just include it in your page and tell it which fonts to load. For example, you could load fonts from [Google Fonts](http://www.google.com/fonts/) using the Web Font Loader hosted on [Google Hosted Libraries](https://developers.google.com/speed/libraries/) using the following code.
 
-    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
-    <script>
-      WebFont.load({
-        google: {
-          families: ['Droid Sans', 'Droid Serif']
-        }
-      });
-    </script>
+```html
+<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
+<script>
+  WebFont.load({
+    google: {
+      families: ['Droid Sans', 'Droid Serif']
+    }
+  });
+</script>
+```
 
 Alternatively, you can link to the latest `1.x` version of the Web Font Loader by using `//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js` as the `script` source. Note that the version in this url is less specific. It will always load the latest `1.x` version, but it also has a shorter cache time to ensure that your page gets updates in a timely manner. For performance reasons, we recommend using an explicit version number (such as `1.4.7`) in urls when using the Web Font Loader in production. You can manually update the Web Font Loader version number in the url when you want to adopt a new version.
 
 It is also possible to use the Web Font Loader asynchronously. For example, to load [Typekit](http://www.typekit.com) fonts asynchronously, you could use the following code.
 
-    <script>
-      WebFontConfig = {
-        typekit: { id: 'xxxxxx' }
-      };
-
-      (function() {
-        var wf = document.createElement('script');
-        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-            '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
-        wf.type = 'text/javascript';
-        wf.async = 'true';
-        var s = document.getElementsByTagName('script')[0];
-        s.parentNode.insertBefore(wf, s);
-      })();
-    </script>
+```html
+<script>
+  WebFontConfig = {
+    typekit: { id: 'xxxxxx' }
+  };
+
+  (function() {
+    var wf = document.createElement('script');
+    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+              '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
+    wf.type = 'text/javascript';
+    wf.async = 'true';
+    var s = document.getElementsByTagName('script')[0];
+    s.parentNode.insertBefore(wf, s);
+  })();
+</script>
+```
 
 Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a [Flash of Unstyled Text (FOUT)](http://help.typekit.com/customer/portal/articles/6852).
 
@@ -74,20 +78,24 @@ Web Font Loader provides an event system that developers can hook into. It gives
 
 CSS events are implemented as classes on the `html` element. The following classes are set on the `html` element:
 
-    .wf-loading
-    .wf-active
-    .wf-inactive
-    .wf-<familyname>-<fvd>-loading
-    .wf-<familyname>-<fvd>-active
-    .wf-<familyname>-<fvd>-inactive
+```css
+.wf-loading
+.wf-active
+.wf-inactive
+.wf-<familyname>-<fvd>-loading
+.wf-<familyname>-<fvd>-active
+.wf-<familyname>-<fvd>-inactive
+```
 
 The `<familyname>` placeholder will be replaced by a sanitized version of the name of each font family. Spaces and underscores are removed from the name, and all characters are converted to lower case. For example, `Droid Sans` becomes `droidsans`. The `<fvd>` placeholder is a [Font Variation Description](https://github.com/typekit/fvd). Put simply, it's a shorthand for describing the style and weight of a particular font. Here are a few examples:
 
-    /* n4 */
-    @font-face { font-style: normal; font-weight: normal; }
+```css
+/* n4 */
+@font-face { font-style: normal; font-weight: normal; }
 
-    /* i7 */
-    @font-face { font-style: italic; font-weight: bold; }
+/* i7 */
+@font-face { font-style: italic; font-weight: bold; }
+```
 
 Keep in mind that `font-weight: normal` maps to `font-weight: 400` and `font-weight: bold` maps to `font-weight: 700`. If no style/weight is specified, the default `n4` (`font-style: normal; font-weight: normal;`) will be used.
 
@@ -95,29 +103,33 @@ If fonts are loaded multiple times on a single page, the CSS classes continue to
 
 JavaScript events are implemented as callback functions on the `WebFontConfig` configuration object.
 
-    WebFontConfig = {
-      loading: function() {},
-      active: function() {},
-      inactive: function() {},
-      fontloading: function(familyName, fvd) {},
-      fontactive: function(familyName, fvd) {},
-      fontinactive: function(familyName, fvd) {}
-    };
+```javascript
+WebFontConfig = {
+  loading: function() {},
+  active: function() {},
+  inactive: function() {},
+  fontloading: function(familyName, fvd) {},
+  fontactive: function(familyName, fvd) {},
+  fontinactive: function(familyName, fvd) {}
+};
+```
 
 The `fontloading`, `fontactive` and `fontinactive` callbacks are passed the family name and font variation description of the font that concerns the event.
 
 ### Timeouts
 
-Since the Internet is not 100% reliable, it's possible that a font will fail to load. The `fontinactive` event will be triggered after 5 seconds if the font fails to render. If *at least* one font succesfully renders, the `active` event will be triggered, else the `inactive` even will be triggered.
+Since the Internet is not 100% reliable, it's possible that a font will fail to load. The `fontinactive` event will be triggered after 5 seconds if the font fails to render. If *at least* one font succesfully renders, the `active` event will be triggered, else the `inactive` event will be triggered.
 
 You can change the default timeout by using the `timeout` option on the `WebFontConfig` object.
 
-    WebFontConfig = {
-      google: {
-        families: ['Droid Sans']
-      },
-      timeout: 2000 // Set the timeout to two seconds
-    };
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Droid Sans']
+  },
+  timeout: 2000 // Set the timeout to two seconds
+};
+```
 
 The timeout value should be in milliseconds, and defaults to 5000 milliseconds (5 seconds) if not supplied.
 
@@ -125,12 +137,14 @@ The timeout value should be in milliseconds, and defaults to 5000 milliseconds (
 
 Usually, it's easiest to include a copy of Web Font Loader in every window where fonts are needed, so that each window manages its own fonts. However, if you need to have a single window manage fonts for multiple same-origin child windows or iframes that are built up using JavaScript, Web Font Loader supports that as well. Just use the optional `context` configuration option and give it a reference to the target window for loading:
 
-    WebFontConfig = {
-      google: {
-        families: ['Droid Sans']
-      },
-      context: frames['my-child']
-    };
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Droid Sans']
+  },
+  context: frames['my-child']
+};
+```
 
 This is an advanced configuration option that isn't needed for most use cases.
 
@@ -148,68 +162,74 @@ 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](https://github.com/typekit/fvd).
 
-    WebFontConfig = {
-      custom: {
-        families: ['My Font', 'My Other Font:n4,i4,n7'],
-        urls: ['/fonts.css']
-      }
-    };
+```javascript
+WebFontConfig = {
+  custom: {
+    families: ['My Font', 'My Other Font:n4,i4,n7'],
+    urls: ['/fonts.css']
+  }
+};
+```
 
 In this example, the `fonts.css` file might look something like this:
 
-    @font-face {
-      font-family: 'My Font';
-      src: ...;
-    }
-    @font-face {
-      font-family: 'My Other Font';
-      font-style: normal;
-      font-weight: normal; /* or 400 */
-      src: ...;
-    }
-    @font-face {
-      font-family: 'My Other Font';
-      font-style: italic;
-      font-weight: normal; /* or 400 */
-      src: ...;
-    }
-    @font-face {
-      font-family: 'My Other Font';
-      font-style: normal;
-      font-weight: bold; /* or 700 */
-      src: ...;
-    }
+```css
+@font-face {
+  font-family: 'My Font';
+  src: ...;
+}
+@font-face {
+  font-family: 'My Other Font';
+  font-style: normal;
+  font-weight: normal; /* or 400 */
+  src: ...;
+}
+@font-face {
+  font-family: 'My Other Font';
+  font-style: italic;
+  font-weight: normal; /* or 400 */
+  src: ...;
+}
+@font-face {
+  font-family: 'My Other Font';
+  font-style: normal;
+  font-weight: bold; /* or 700 */
+  src: ...;
+}
+```
 
 Alternatively, you can load your fonts from a stylesheet not specified in WebFontConfig. As long as the names match those that are declared in the `families` array, the proper loading classes will be applied to the html element.
 
-```
+```html
 <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
 <script>
-   WebFont.load({
-      custom: {
-         families: ['My Font']
-      }
-   });
+  WebFont.load({
+    custom: {
+      families: ['My Font']
+    }
+  });
 </script>
 
 <style type="text/css">
-   @font-face {
-      font-family:"My Font";
-      src:url("assets/fonts/my_font.woff") format("woff");
-   }
+  @font-face {
+    font-family:"My Font";
+    src:url("assets/fonts/my_font.woff") format("woff");
+  }
 </style>
 ```
 
 The custom module also supports customizing the test strings that are used to determine whether or not a font has loaded. This can be used to load fonts with custom subsets or glyphs in the private use unicode area.
 
-    WebFontConfig = {
-      custom: {
-        families: ['My Font'],
-        testStrings: {
-          'My Font': '\uE003\uE005'
-        }
-      }
-    };
+```javascript
+WebFontConfig = {
+  custom: {
+    families: ['My Font'],
+    testStrings: {
+      'My Font': '\uE003\uE005'
+    }
+  }
+};
+```
 
 Tests strings should be specified on a per font basis and contain at least one character. If not specified the default test string (`BESbswy`) is used.
 
@@ -217,22 +237,26 @@ Tests strings should be specified on a per font basis and contain at least one c
 
 To use the [Fontdeck](http://fontdeck.com/) module, specify the ID of your website. You can find this ID on the website page within your account settings.
 
-    WebFontConfig = {
-      fontdeck: {
-        id: 'xxxxx'
-      }
-    };
+```javascript
+WebFontConfig = {
+  fontdeck: {
+    id: 'xxxxx'
+  }
+};
+```
 
 ### Fonts.com
 
 When using [Fonts.com web fonts](http://webfonts.fonts.com/) specify your Project ID.
 
-    WebFontConfig = {
-      monotype: {
-        projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
-        version: 12345 // (optional, flushes the CDN cache)
-      }
-    };
+```javascript
+WebFontConfig = {
+  monotype: {
+    projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+    version: 12345 // (optional, flushes the CDN cache)
+  }
+};
+```
 
 The Fonts.com module has an optional `version` option which acts as a cache-buster.
 
@@ -240,20 +264,24 @@ The Fonts.com module has an optional `version` option which acts as a cache-bust
 
 Using [Google's Font API](https://code.google.com/apis/webfonts/docs/getting_started.html), name the font families you'd like to load. You can use the same [syntax](https://developers.google.com/fonts/docs/getting_started#Syntax) as in the Font API to specify styles:
 
-    WebFontConfig = {
-      google: {
-        families: ['Droid Sans', 'Droid Serif:bold']
-      }
-    };
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Droid Sans', 'Droid Serif:bold']
+  }
+};
+```
 
 You can also supply the `text` parameter to perform character subsetting:
 
-    WebFontConfig = {
-      google: {
-        families: ['Droid Sans', 'Droid Serif'],
-        text: 'abcdedfghijklmopqrstuvwxyz!'
-      }
-    };
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Droid Sans', 'Droid Serif'],
+    text: 'abcdedfghijklmopqrstuvwxyz!'
+  }
+};
+```
 
 The `text` subsetting functionality is only available for the Google module.
 
@@ -261,11 +289,13 @@ The `text` subsetting functionality is only available for the Google module.
 
 When using [Typekit](http://www.typekit.com), specify the Kit to retrieve by its ID. You can find the Kit ID within Typekit's Kit Editor interface.
 
-    WebFontConfig = {
-      typekit: {
-        id: 'xxxxxx'
-      }
-    };
+```javascript
+WebFontConfig = {
+  typekit: {
+    id: 'xxxxxx'
+  }
+};
+```
 
 **FYI:** Typekit's own JavaScript is built using the Web Font Loader library and already provides all of the same font event functionality. If you're using Typekit, you should use their embed codes directly unless you also need to load web fonts from other providers on the same page.
 
@@ -281,10 +311,12 @@ For fonts loaded from supported providers, the `fontactive` event will be trigge
 
 For example:
 
-    WebFontConfig = {
-      providerA: 'Family1',
-      providerB: 'Family2'
-    };
+```javascript
+WebFontConfig = {
+  providerA: 'Family1',
+  providerB: 'Family2'
+};
+```
 
 If `providerA` can serve fonts to a browser, but `providerB` cannot, The `fontinactive` event will be triggered for `Family2`. The `fontactive` event will be triggered for `Family1` once it loads, as will the `active` event.
 

data/lib/webfontloader.rb

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

data/spec/core/domhelper_spec.js

@@ -99,6 +99,106 @@ describe('DomHelper', function () {
     });
   });
 
+  describe('#updateClassName', function () {
+    it('should handle optional arguments correctly', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo');
+
+      domHelper.updateClassName(div);
+      expect(div.className).toEqual('moo');
+
+      domHelper.updateClassName(div, [], []);
+      expect(div.className).toEqual('moo');
+
+      domHelper.updateClassName(div, null, null);
+      expect(div.className).toEqual('moo');
+    });
+
+    it('should have added a class name', function () {
+      var div = domHelper.createElement('div');
+      domHelper.updateClassName(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.updateClassName(div, ['moo']);
+
+      expect(div.className).toEqual('moo');
+    });
+
+    it('should add multiple class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.updateClassName(div, ['moo', 'meu', 'moo']);
+      expect(div.className).toEqual('moo meu');
+    });
+
+    it('should normalize spaces and tabs', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.updateClassName(div, ['meu', '      foo']);
+      expect(div.className).toEqual('meu foo');
+    });
+
+    it('should remove class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'meu moo');
+      expect(div.className).toEqual('meu moo');
+
+      domHelper.updateClassName(div, null, ['meu']);
+      expect(div.className).toEqual('moo');
+    });
+
+    it('should remove multiple class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'meu');
+      domHelper.appendClassName(div, 'moo');
+      expect(div.className).toEqual('meu moo');
+
+      domHelper.updateClassName(div, null, ['meu', 'moo']);
+      expect(div.className).toEqual('');
+    });
+
+    it('should not remove non-existing classes', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo');
+      expect(div.className).toEqual('moo');
+
+      domHelper.updateClassName(div, null, 'boo');
+      expect(div.className).toEqual('moo');
+    });
+
+    it('should add and remove class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo');
+      domHelper.appendClassName(div, 'meh');
+      expect(div.className).toEqual('moo meh');
+
+      domHelper.updateClassName(div, ['meu'], ['moo', 'meh']);
+      expect(div.className).toEqual('meu');
+    });
+
+    it('should update one of many class names', function () {
+      var div = domHelper.createElement('div');
+
+      domHelper.appendClassName(div, 'moo');
+      domHelper.appendClassName(div, 'meh');
+      expect(div.className).toEqual('moo meh');
+
+      domHelper.updateClassName(div, ['meu'], ['moo']);
+      expect(div.className).toEqual('meh meu');
+    });
+  });
+
   describe('#hasClassName', function () {
     var div = null;
 

data/src/core/domhelper.js

@@ -104,36 +104,74 @@ goog.scope(function () {
   };
 
   /**
+   * @deprecated Use updateClassName().
+   *
    * Appends a name to an element's class attribute.
    * @param {Element} e The element.
    * @param {string} name The class name to add.
    */
   DomHelper.prototype.appendClassName = function(e, name) {
-    var classes = e.className.split(/\s+/);
-    for (var i = 0, len = classes.length; i < len; i++) {
-      if (classes[i] == name) {
-        return;
-      }
-    }
-    classes.push(name);
-    e.className = classes.join(' ')
-                    .replace(/\s+/g, ' ')
-                    .replace(/^\s+|\s+$/, '');
+    this.updateClassName(e, [name]);
   };
 
   /**
+   * @deprecated Use updateClassName().
+   *
    * Removes a name to an element's class attribute.
    * @param {Element} e The element.
    * @param {string} name The class name to remove.
    */
   DomHelper.prototype.removeClassName = function(e, name) {
+    this.updateClassName(e, null, [name]);
+  };
+
+  /**
+   * Updates an element's class attribute in a single change. This
+   * allows multiple updates in a single class name change so there
+   * is no chance for a browser to relayout in between changes.
+   *
+   * @param {Element} e The element.
+   * @param {Array.<string>=} opt_add List of class names to add.
+   * @param {Array.<string>=} opt_remove List of class names to remove.
+   */
+  DomHelper.prototype.updateClassName = function (e, opt_add, opt_remove) {
+    var add = opt_add || [],
+        remove = opt_remove || [];
+
     var classes = e.className.split(/\s+/);
+
+    for (var i = 0; i < add.length; i += 1) {
+      var found = false;
+
+      for (var j = 0; j < classes.length; j += 1) {
+        if (add[i] === classes[j]) {
+          found = true;
+          break;
+        }
+      }
+
+      if (!found) {
+        classes.push(add[i]);
+      }
+    }
+
     var remainingClasses = [];
-    for (var i = 0, len = classes.length; i < len; i++) {
-      if (classes[i] != name) {
+
+    for (var i = 0; i < classes.length; i += 1) {
+      var found = false;
+
+      for (var j = 0; j < remove.length; j += 1) {
+        if (classes[i] === remove[j]) {
+          found = true;
+          break;
+        }
+      }
+
+      if (!found) {
         remainingClasses.push(classes[i]);
       }
     }
+
     e.className = remainingClasses.join(' ')
                     .replace(/\s+/g, ' ')
                     .replace(/^\s+|\s+$/, '');

data/src/core/eventdispatcher.js

@@ -60,9 +60,12 @@ goog.scope(function () {
    * Dispatch the loading event and append the loading class name.
    */
   EventDispatcher.prototype.dispatchLoading = function() {
-    this.domHelper_.appendClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.LOADING));
+    this.domHelper_.updateClassName(this.htmlElement_,
+      [
+        this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.LOADING)
+      ]
+    );
+
     this.dispatch_(webfont.EventDispatcher.LOADING);
   };
 
@@ -71,9 +74,12 @@ goog.scope(function () {
    * @param {webfont.Font} font
    */
   EventDispatcher.prototype.dispatchFontLoading = function(font) {
-    this.domHelper_.appendClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.LOADING));
+    this.domHelper_.updateClassName(this.htmlElement_,
+      [
+        this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.LOADING)
+      ]
+    );
+
     this.dispatch_(
         webfont.EventDispatcher.FONT + webfont.EventDispatcher.LOADING, font);
   };
@@ -84,17 +90,18 @@ goog.scope(function () {
    * @param {webfont.Font} font
    */
   EventDispatcher.prototype.dispatchFontActive = function(font) {
-    this.domHelper_.removeClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.LOADING));
-    this.domHelper_.removeClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.INACTIVE));
-    this.domHelper_.appendClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.ACTIVE));
-    this.dispatch_(
-        webfont.EventDispatcher.FONT + webfont.EventDispatcher.ACTIVE, font);
+    this.domHelper_.updateClassName(
+      this.htmlElement_,
+      [
+        this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.ACTIVE)
+      ],
+      [
+        this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.LOADING),
+        this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.INACTIVE)
+      ]
+    );
+
+    this.dispatch_(webfont.EventDispatcher.FONT + webfont.EventDispatcher.ACTIVE, font);
   };
 
   /**
@@ -104,19 +111,21 @@ goog.scope(function () {
    * @param {webfont.Font} font
    */
   EventDispatcher.prototype.dispatchFontInactive = function(font) {
-    this.domHelper_.removeClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.LOADING));
     var hasFontActive = this.domHelper_.hasClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.ACTIVE));
+          this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.ACTIVE)
+        ),
+        add = [],
+        remove = [
+          this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.LOADING)
+        ];
+
     if (!hasFontActive) {
-      this.domHelper_.appendClassName(this.htmlElement_,
-          this.cssClassName_.build(
-              this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.INACTIVE));
+      add.push(this.cssClassName_.build(this.namespace_, font.getName(), font.getVariation().toString(), webfont.EventDispatcher.INACTIVE));
     }
-    this.dispatch_(
-        webfont.EventDispatcher.FONT + webfont.EventDispatcher.INACTIVE, font);
+
+    this.domHelper_.updateClassName(this.htmlElement_, add, remove);
+
+    this.dispatch_(webfont.EventDispatcher.FONT + webfont.EventDispatcher.INACTIVE, font);
   };
 
   /**
@@ -124,17 +133,20 @@ goog.scope(function () {
    * inactive class name (unless the active class name is already present).
    */
   EventDispatcher.prototype.dispatchInactive = function() {
-    this.domHelper_.removeClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.LOADING));
     var hasActive = this.domHelper_.hasClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.ACTIVE));
+          this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.ACTIVE)
+        ),
+        add = [],
+        remove = [
+          this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.LOADING)
+        ];
+
     if (!hasActive) {
-      this.domHelper_.appendClassName(this.htmlElement_,
-          this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.INACTIVE));
+      add.push(this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.INACTIVE));
     }
+
+    this.domHelper_.updateClassName(this.htmlElement_, add, remove);
+
     this.dispatch_(webfont.EventDispatcher.INACTIVE);
   };
 
@@ -143,15 +155,16 @@ goog.scope(function () {
    * class name, and append the active class name.
    */
   EventDispatcher.prototype.dispatchActive = function() {
-    this.domHelper_.removeClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.LOADING));
-    this.domHelper_.removeClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.INACTIVE));
-    this.domHelper_.appendClassName(this.htmlElement_,
-        this.cssClassName_.build(
-            this.namespace_, webfont.EventDispatcher.ACTIVE));
+    this.domHelper_.updateClassName(this.htmlElement_,
+      [
+        this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.ACTIVE)
+      ],
+      [
+        this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.LOADING),
+        this.cssClassName_.build(this.namespace_, webfont.EventDispatcher.INACTIVE)
+      ]
+    );
+
     this.dispatch_(webfont.EventDispatcher.ACTIVE);
   };
 

data/src/core/fontruler.js

@@ -38,7 +38,7 @@ goog.scope(function () {
    * @return {string}
    */
   FontRuler.prototype.computeStyleString_ = function(font) {
-    return "position:absolute;top:-999px;left:-999px;" +
+    return "display:block;position:absolute;top:-999px;left:-999px;" +
            "font-size:300px;width:auto;height:auto;line-height:normal;margin:0;" +
            "padding:0;font-variant:normal;white-space:nowrap;font-family:" +
            font.getCssName() + ";" + font.getCssVariation();

data/webfontloader.gemspec

@@ -13,8 +13,8 @@ Gem::Specification.new do |s|
   ## If your rubyforge_project name is different, then edit it and comment out
   ## the sub! line in the Rakefile
   s.name              = 'webfontloader'
-  s.version           = '1.5.2'
-  s.date              = '2014-01-03'
+  s.version           = '1.5.3'
+  s.date              = '2014-04-08'
 
   ## Make sure your summary is short. The description may be as long
   ## as you like.

metadata

@@ -1,99 +1,83 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: webfontloader
-version: !ruby/object:Gem::Version 
-  hash: 7
-  prerelease: 
-  segments: 
-  - 1
-  - 5
-  - 2
-  version: 1.5.2
+version: !ruby/object:Gem::Version
+  version: 1.5.3
 platform: ruby
-authors: 
+authors:
 - Ryan Carver
 - Jeremie Lenfant-engelmann
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2014-01-03 00:00:00 Z
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2014-04-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: rake
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
   type: :development
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: rack
   prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
     - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 1
-        segments: 
-        - 1
-        - 5
-        - 1
+      - !ruby/object:Gem::Version
         version: 1.5.1
   type: :development
-  version_requirements: *id002
-- !ruby/object:Gem::Dependency 
-  name: sinatra
   prerelease: false
-  requirement: &id003 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.5.1
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
     - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 19
-        segments: 
-        - 1
-        - 3
-        - 4
+      - !ruby/object:Gem::Version
         version: 1.3.4
   type: :development
-  version_requirements: *id003
-- !ruby/object:Gem::Dependency 
-  name: vegas
   prerelease: false
-  requirement: &id004 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.3.4
+- !ruby/object:Gem::Dependency
+  name: vegas
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
     - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 13
-        segments: 
-        - 0
-        - 1
-        - 11
+      - !ruby/object:Gem::Version
         version: 0.1.11
   type: :development
-  version_requirements: *id004
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.1.11
 description: |
   WebFont Loader gives you added control when using linked fonts via
   `@font-face`. It provides a common interface to loading fonts regardless of
   the source, then adds a standard set of events you may use to control the
   loading experience.
-
 email: ryan@typekit.com
 executables: []
-
 extensions: []
-
-extra_rdoc_files: 
+extra_rdoc_files:
 - README.md
-files: 
+files:
 - AUTHORS
 - CHANGELOG
 - CONTRIBUTING.md
@@ -204,37 +188,28 @@ files:
 - tools/jasmine/jasmine.js
 - webfontloader.gemspec
 homepage: http://github.com/typekit/webfontloader
-licenses: 
+licenses:
 - Apache 2.0
+metadata: {}
 post_install_message: 
-rdoc_options: 
+rdoc_options:
 - --charset=UTF-8
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
-  none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
-      - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
-  none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
-      - 0
-      version: "0"
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.8.15
+rubygems_version: 2.0.3
 signing_key: 
 specification_version: 2
 summary: WebFont Loader gives you added control when using linked fonts via @font-face.
 test_files: []
-