webfontloader 1.0.21 → 1.0.22

data/CHANGELOG

@@ -1,6 +1,9 @@
+v1.0.22 (July 1, 2011)
+* Fixed a bug in Webkit-based browsers with font detection where active would trigger without the font actually being active yet.
+* Increased the frequency of checking the widths of the font watcher spans.
+
 v1.0.21 (June 17, 2011)
-* Added a protocol detect for the Typekit module so JS is loaded securely on
-secure pages. Thanks to bee525 for the pull request.
+* Added a protocol detect for the Typekit module so JS is loaded securely on secure pages. Thanks to bee525 for the pull request.
 
 v1.0.20 (March 30, 2011)
 * Changed CSS style for hidden span so it's not affected by inline or floated elements at the end of the body

data/lib/webfontloader.rb

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

data/src/core/fontwatchrunner.js

@@ -27,6 +27,8 @@ webfont.FontWatchRunner = function(activeCallback, inactiveCallback, domHelper,
       webfont.FontWatchRunner.DEFAULT_FONTS_A);
   this.originalSizeB_ = this.getDefaultFontSize_(
       webfont.FontWatchRunner.DEFAULT_FONTS_B);
+  this.lastObservedSizeA_ = this.originalSizeA_;
+  this.lastObservedSizeB_ = this.originalSizeB_;
   this.requestedFontA_ = this.createHiddenElementWithFont_(
       webfont.FontWatchRunner.DEFAULT_FONTS_A);
   this.requestedFontB_ = this.createHiddenElementWithFont_(
@@ -69,18 +71,33 @@ webfont.FontWatchRunner.DEFAULT_FONTS_B = "Georgia,'Century Schoolbook L',serif"
 webfont.FontWatchRunner.DEFAULT_TEST_STRING = 'BESs';
 
 /**
+ * Checks the size of the two spans against their original sizes during each
+ * async loop. If the size of one of the spans is different than the original
+ * size, then we know that the font is rendering and finish with the active
+ * callback. If we wait more than 5 seconds and nothing has changed, we finish
+ * with the inactive callback.
+ *
+ * Because of an odd Webkit quirk, we wait to observe the new width twice
+ * in a row before finishing with the active callback. Sometimes, Webkit will
+ * render the spans with a changed width for one iteration even though the font
+ * is broken. This only happens for one async loop, so waiting for 2 consistent
+ * measurements allows us to work around the quirk.
+ *
  * @private
  */
 webfont.FontWatchRunner.prototype.check_ = function() {
   var sizeA = this.fontSizer_.getWidth(this.requestedFontA_);
   var sizeB = this.fontSizer_.getWidth(this.requestedFontB_);
 
-  if (this.originalSizeA_ != sizeA || this.originalSizeB_ != sizeB) {
+  if ((this.originalSizeA_ != sizeA || this.originalSizeB_ != sizeB) &&
+      this.lastObservedSizeA_ == sizeA && this.lastObservedSizeB_ == sizeB) {
     this.finish_(this.activeCallback_);
-  } else if (this.getTime_() - this.started_ < 5000) {
-    this.asyncCheck_();
-  } else {
+  } else if (this.getTime_() - this.started_ >= 5000) {
     this.finish_(this.inactiveCallback_);
+  } else {
+    this.lastObservedSizeA_ = sizeA;
+    this.lastObservedSizeB_ = sizeB;
+    this.asyncCheck_();
   }
 };
 
@@ -92,7 +109,7 @@ webfont.FontWatchRunner.prototype.asyncCheck_ = function() {
     return function() {
       func.call(context);
     }
-  }(this, this.check_), 50);
+  }(this, this.check_), 25);
 };
 
 /**

data/src-test/core/fontwatchrunnertest.js

@@ -49,14 +49,17 @@ FontWatchRunnerTest.prototype.setUp = function() {
   };
 
   this.timesToCheckWidthsBeforeChange_ = 0;
+  this.timesToReportChangedWidth_ = 2;
   this.fakeFontSizer_ = {
     getWidth: function(el) {
       if (el.style.fontFamily.indexOf(self.fontFamily_) != -1) {
         // This is a font stack with fontFamily included (not just fallbacks)
-        if (self.timesToCheckWidthsBeforeChange_ <= 0) {
+        if (self.timesToCheckWidthsBeforeChange_ <= 0 && self.timesToReportChangedWidth_ > 0) {
+          // Decrement by 0.5 because we're checking two separate font stacks each iteration
+          self.timesToReportChangedWidth_ -= 0.5;
           return 2;
         } else {
-          // Two fallback stacks, so we check width twice each time
+          // Decrement by 0.5 because we're checking two separate font stacks each iteration
           self.timesToCheckWidthsBeforeChange_ -= 0.5;
           return 1;
         }
@@ -76,9 +79,9 @@ FontWatchRunnerTest.prototype.setUp = function() {
     }
   };
 
-  this.asyncCalled_ = false;
+  this.asyncCount_ = 0;
   this.fakeAsyncCall_ = function(func, timeout) {
-    self.asyncCalled_ = true;
+    self.asyncCount_++;
     func();
   };
 
@@ -86,13 +89,14 @@ FontWatchRunnerTest.prototype.setUp = function() {
 
 FontWatchRunnerTest.prototype.testWatchFontAlreadyLoaded = function() {
   this.timesToCheckWidthsBeforeChange_ = 0;
+  this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
       this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
       this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
 
-  assertFalse(this.asyncCalled_);
+  assertEquals(1, this.asyncCount_);
 
   assertEquals(1, this.fontActiveCalled_);
   assertEquals(true, this.fontActive_['fontFamily1 n4']);
@@ -101,13 +105,14 @@ FontWatchRunnerTest.prototype.testWatchFontAlreadyLoaded = function() {
 
 FontWatchRunnerTest.prototype.testWatchFontWaitForLoadActive = function() {
   this.timesToCheckWidthsBeforeChange_ = 3;
+  this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
       this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
       this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
 
-  assertTrue(this.asyncCalled_);
+  assertEquals(4, this.asyncCount_);
 
   assertEquals(1, this.fontActiveCalled_);
   assertEquals(true, this.fontActive_['fontFamily1 n4']);
@@ -116,13 +121,38 @@ FontWatchRunnerTest.prototype.testWatchFontWaitForLoadActive = function() {
 
 FontWatchRunnerTest.prototype.testWatchFontWaitForLoadInactive = function() {
   this.timesToCheckWidthsBeforeChange_ = 10;
-  this.timesToGetTimeBeforeTimeout_ = 3;
+  this.timesToReportChangedWidth_ = 2;
+  this.timesToGetTimeBeforeTimeout_ = 5;
 
   new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
       this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
       this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
 
-  assertTrue(this.asyncCalled_);
+  assertEquals(4, this.asyncCount_);
+
+  assertEquals(0, this.fontActiveCalled_);
+  assertEquals(1, this.fontInactiveCalled_);
+  assertEquals(true, this.fontInactive_['fontFamily1 n4']);
+};
+
+/**
+ * This test ensures that even if the fonts change width for one cycle and
+ * then change back, active won't be fired. This works around an issue in Webkit
+ * browsers, where an inactive webfont will briefly change widths for one cycle
+ * and then change back to fallback widths on the next cycle. This is apparently
+ * due to some quirk in the way that web fonts are rendered.
+ */
+FontWatchRunnerTest.prototype.testWatchFontWithInconsistentWidthIsStillInactive = function() {
+  this.timesToCheckWidthsBeforeChange_ = 3;
+  // Only report a new width for one cycle, then switch back to original fallback width
+  this.timesToReportChangedWidth_ = 1;
+  this.timesToGetTimeBeforeTimeout_ = 10;
+
+  new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
+      this.fakeDomHelper_, this.fakeFontSizer_, this.fakeAsyncCall_,
+      this.fakeGetTime_, this.fontFamily_, this.fontDescription_);
+
+  assertEquals(9, this.asyncCount_);
 
   assertEquals(0, this.fontActiveCalled_);
   assertEquals(1, this.fontInactiveCalled_);
@@ -131,6 +161,7 @@ FontWatchRunnerTest.prototype.testWatchFontWaitForLoadInactive = function() {
 
 FontWatchRunnerTest.prototype.testDomWithDefaultTestString = function() {
   this.timesToCheckWidthsBeforeChange_ = 3;
+  this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,
@@ -161,6 +192,7 @@ FontWatchRunnerTest.prototype.testDomWithDefaultTestString = function() {
 
 FontWatchRunnerTest.prototype.testDomWithNotDefaultTestString = function() {
   this.timesToCheckWidthsBeforeChange_ = 3;
+  this.timesToReportChangedWidth_ = 2;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   new webfont.FontWatchRunner(this.activeCallback_, this.inactiveCallback_,

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.0.21'
-  s.date              = '2011-06-17'
+  s.version           = '1.0.22'
+  s.date              = '2011-07-01'
 
   ## Make sure your summary is short. The description may be as long
   ## as you like.

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: webfontloader
 version: !ruby/object:Gem::Version 
-  hash: 61
+  hash: 59
   prerelease: 
   segments: 
   - 1
   - 0
-  - 21
-  version: 1.0.21
+  - 22
+  version: 1.0.22
 platform: ruby
 authors: 
 - Ryan Carver
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-06-17 00:00:00 -07:00
+date: 2011-07-01 00:00:00 -07:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency