webfontloader 1.1.2 → 1.2.0

data/src-test/core/fontwatchrunnertest.js

@@ -26,14 +26,14 @@ FontWatchRunnerTest.prototype.setUp = function() {
   this.fakeDomHelper_ = {
     createElement: function(name, attrs, innerHtml) {
       self.createElementCalled_++;
+      var element = document.createElement(name);
       self.createdElements_.push({
         'name': name,
         'attrs': attrs,
-        'innerHtml': innerHtml
+        'innerHtml': innerHtml,
+        'element': element
       });
 
-      var element = document.createElement(name);
-
       for (var attr in attrs) {
         element.setAttribute(attr, attrs[attr]);
       }
@@ -45,26 +45,155 @@ FontWatchRunnerTest.prototype.setUp = function() {
     },
     removeElement: function(el) {
       self.removeElementCalled_++;
+    },
+    setStyle: function(el, style) {
+      el.setAttribute('style', style);
+      for (var i = 0; i < self.createdElements_.length; i += 1) {
+        if (self.createdElements_[i].element === el) {
+          if (!self.createdElements_[i].attrs) {
+            self.createdElements_[i].attrs = {};
+          }
+          self.createdElements_[i].attrs.style = style;
+          break;
+        }
+      }
     }
   };
 
-  this.timesToCheckWidthsBeforeChange_ = 0;
-  this.timesToReportChangedWidth_ = 2;
+  this.timesToCheckSizesBeforeChange_ = 0;
   this.fakeFontSizer_ = {
-    getWidth: function(el) {
+    getSize: 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 && self.timesToReportChangedWidth_ > 0) {
+        if (self.timesToCheckSizesBeforeChange_ <= 0) {
           // Decrement by 0.5 because we're checking two separate font stacks each iteration
-          self.timesToReportChangedWidth_ -= 0.5;
-          return 2;
+          self.timesToCheckSizesBeforeChange_ -= 0.5;
+          return new webfont.Size(2, 2);
         } else {
           // Decrement by 0.5 because we're checking two separate font stacks each iteration
-          self.timesToCheckWidthsBeforeChange_ -= 0.5;
-          return 1;
+          self.timesToCheckSizesBeforeChange_ -= 0.5;
+          return new webfont.Size(1, 1);
+        }
+      } else {
+        return new webfont.Size(1, 1);
+      }
+    }
+  };
+
+  this.fakeFontSizerWithDifferentHeight_ = {
+    getSize: function(el) {
+      if (el.style.fontFamily.indexOf(self.fontFamily_) != -1) {
+        if (self.timesToCheckSizesBeforeChange_ <= 0) {
+          self.timesToCheckSizesBeforeChange_ -= 0.5;
+          return new webfont.Size(1, 2);
+        } else {
+          self.timesToCheckSizesBeforeChange_ -= 0.5;
+          return new webfont.Size(1, 1);
+        }
+      } else {
+        return new webfont.Size(1, 1);
+      }
+    }
+  };
+
+  /**
+   * This accurately models the way webkit used to handle
+   * fallback fonts while loading web fonts. Even though
+   * this Webkit bug is now patched, we still have a large
+   * portion of our users using old webkit builds.
+   *
+   * See: https://bugs.webkit.org/show_bug.cgi?id=76684
+   */
+  this.timesToDelayChangedSizeWebkit_ = 1;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+  this.fakeWebkitFontSizer_ = {
+    getSize: function(el) {
+      if (el.style.fontFamily.indexOf(self.fontFamily_) !== -1) {
+        if (self.timesToDelayChangedSizeWebkit_ > 0) {
+          self.timesToDelayChangedSizeWebkit_ -= 0.5;
+          // Return the incorrect width for a certain number of cycles.
+          // The actual number depends on how fast or how slow the font
+          // is parsed and applied.
+          return new webfont.Size(2, 2);
+        } else {
+          // Return the correct width
+          return new webfont.Size(3, 3);
+        }
+      } else {
+        if (self.firstCallToRetrieveSizeWebkit_) {
+          self.firstCallToRetrieveSizeWebkit_ = false;
+          return new webfont.Size(2, 2);
+        } else {
+          // Return the default width
+          return new webfont.Size(1, 1);
+        }
+      }
+    }
+  };
+
+  this.fakeWebkitFontSizerFailedLoad_ = {
+    getSize: function(el) {
+      if (el.style.fontFamily.indexOf(self.fontFamily_) !== -1) {
+        if (self.timesToDelayChangedSizeWebkit_ > 0) {
+          self.timesToDelayChangedSizeWebkit_ -= 0.5;
+          return new webfont.Size(2, 2);
+        } else {
+          // Return the original width, indicating the font
+          // failed to load. This should incorrectly trigger `inactive`.
+          return new webfont.Size(1, 1);
+        }
+      } else {
+        if (self.firstCallToRetrieveSizeWebkit_) {
+          self.firstCallToRetrieveSizeWebkit_ = false;
+          return new webfont.Size(2, 2);
+        } else {
+          return new webfont.Size(1, 1);
+        }
+      }
+    }
+  };
+
+  this.fakeWebkitFontSizerWithEqualMetrics_ = {
+    getSize: function(el) {
+      if (el.style.fontFamily.indexOf(self.fontFamily_) !== -1) {
+        if (self.timesToDelayChangedSizeWebkit_ > 0) {
+          self.timesToDelayChangedSizeWebkit_ -= 0.5;
+          return new webfont.Size(2, 2);
+        } else {
+          // This time the fallback font picked by Webkit has the
+          // same metrics as the font being loaded. This is a rare
+          // case but we should be able to handle it.
+          return new webfont.Size(2, 2);
         }
       } else {
-        return 1;
+        if (self.firstCallToRetrieveSizeWebkit_) {
+          self.firstCallToRetrieveSizeWebkit_ = false;
+          return new webfont.Size(2, 2);
+        } else {
+          return new webfont.Size(1, 1);
+        }
+      }
+    }
+  };
+
+  this.fakeWebkitFontSizeWithDifferentMetrics_ = {
+    getSize: function(el) {
+      if (el.style.fontFamily.indexOf(self.fontFamily_) !== -1) {
+        if (self.timesToDelayChangedSizeWebkit_ > 0) {
+          self.timesToDelayChangedSizeWebkit_ -= 0.5;
+          return new webfont.Size(2, 2);
+        } else {
+          // Even though the width is the same, the height
+          // is different, so this should trigger the active event.
+          return new webfont.Size(2, 3);
+        }
+      } else {
+        if (self.firstCallToRetrieveSizeWebkit_) {
+          self.firstCallToRetrieveSizeWebkit_ = false;
+          return new webfont.Size(2, 2);
+        } else {
+          return new webfont.Size(1, 1);
+        }
       }
     }
   };
@@ -88,18 +217,17 @@ FontWatchRunnerTest.prototype.setUp = function() {
 };
 
 FontWatchRunnerTest.prototype.testWatchFontAlreadyLoaded = function() {
-  this.timesToCheckWidthsBeforeChange_ = 0;
-  this.timesToReportChangedWidth_ = 2;
+  this.timesToCheckSizesBeforeChange_ = 0;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
       this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
       this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
-      this.fontDescription_);
+      this.fontDescription_, false);
 
   fontWatchRunner.start();
 
-  assertEquals(1, this.asyncCount_);
+  assertEquals(0, this.asyncCount_);
 
   assertEquals(1, this.fontActiveCalled_);
   assertEquals(true, this.fontActive_['fontFamily1 n4']);
@@ -107,18 +235,35 @@ FontWatchRunnerTest.prototype.testWatchFontAlreadyLoaded = function() {
 };
 
 FontWatchRunnerTest.prototype.testWatchFontWaitForLoadActive = function() {
-  this.timesToCheckWidthsBeforeChange_ = 3;
-  this.timesToReportChangedWidth_ = 2;
+  this.timesToCheckSizesBeforeChange_ = 3;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
       this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
       this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
-      this.fontDescription_);
+      this.fontDescription_, false);
 
   fontWatchRunner.start();
 
-  assertEquals(4, this.asyncCount_);
+  assertEquals(3, this.asyncCount_);
+
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+  assertEquals(0, this.fontInactiveCalled_);
+};
+
+FontWatchRunnerTest.prototype.testWatchFontWaitForLoadActiveWithDifferentHeight = function() {
+  this.timesToCheckSizesBeforeChange_ = 3;
+  this.timesToGetTimeBeforeTimeout_ = 10;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizerWithDifferentHeight_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, false);
+
+  fontWatchRunner.start();
+
+  assertEquals(3, this.asyncCount_);
 
   assertEquals(1, this.fontActiveCalled_);
   assertEquals(true, this.fontActive_['fontFamily1 n4']);
@@ -126,14 +271,13 @@ FontWatchRunnerTest.prototype.testWatchFontWaitForLoadActive = function() {
 };
 
 FontWatchRunnerTest.prototype.testWatchFontWaitForLoadInactive = function() {
-  this.timesToCheckWidthsBeforeChange_ = 10;
-  this.timesToReportChangedWidth_ = 2;
+  this.timesToCheckSizesBeforeChange_ = 10;
   this.timesToGetTimeBeforeTimeout_ = 5;
 
   var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
       this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
       this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
-      this.fontDescription_);
+      this.fontDescription_, false);
 
   fontWatchRunner.start();
 
@@ -144,96 +288,167 @@ FontWatchRunnerTest.prototype.testWatchFontWaitForLoadInactive = function() {
   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;
+FontWatchRunnerTest.prototype.testWatchFontWebkitWithFastFont = function() {
   this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 1;
+  this.firstCallToRetrieveSizeWebkit_ = true;
 
   var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
-      this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizer_,
       this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
-      this.fontDescription_);
+      this.fontDescription_, true);
 
   fontWatchRunner.start();
+  assertEquals(1, this.asyncCount_);
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
+
+FontWatchRunnerTest.prototype.testWatchFontWebkitWithSlowFont = function() {
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 2;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizer_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, true);
+
+  fontWatchRunner.start();
+  assertEquals(2, this.asyncCount_);
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
+
+FontWatchRunnerTest.prototype.testWatchFontWebkitWithEqualMetrics = function() {
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 2;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizerWithEqualMetrics_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, true);
 
+  fontWatchRunner.start();
   assertEquals(9, this.asyncCount_);
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
 
-  assertEquals(0, this.fontActiveCalled_);
+FontWatchRunnerTest.prototype.testWatchFontWebkitWithDifferentMetrics = function() {
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 2;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizeWithDifferentMetrics_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, true);
+
+  fontWatchRunner.start();
+  assertEquals(2, this.asyncCount_);
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
+
+FontWatchRunnerTest.prototype.testWatchFontWebkitFailedLoad = function() {
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 5;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizerFailedLoad_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, true);
+
+  fontWatchRunner.start();
+  assertEquals(9, this.asyncCount_);
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
+
+FontWatchRunnerTest.prototype.testWatchFontWebkitWithEqualMetricsIncompatibleFont = function() {
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 2;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizerWithEqualMetrics_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, true, { 'fontFamily2': true });
+
+  fontWatchRunner.start();
+  assertEquals(9, this.asyncCount_);
   assertEquals(1, this.fontInactiveCalled_);
   assertEquals(true, this.fontInactive_['fontFamily1 n4']);
 };
 
+FontWatchRunnerTest.prototype.testWatchFontWebkitWithEqualMetricsCompatibleFont = function() {
+  this.timesToGetTimeBeforeTimeout_ = 10;
+  this.timesToDelayChangedSizeWebkit_ = 2;
+  this.firstCallToRetrieveSizeWebkit_ = true;
+
+  var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
+      this.inactiveCallback_, this.fakeDomHelper_, this.fakeWebkitFontSizerWithEqualMetrics_,
+      this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
+      this.fontDescription_, true, { 'fontFamily1': true });
+
+  fontWatchRunner.start();
+  assertEquals(9, this.asyncCount_);
+  assertEquals(1, this.fontActiveCalled_);
+  assertEquals(true, this.fontActive_['fontFamily1 n4']);
+};
+
+
 FontWatchRunnerTest.prototype.testDomWithDefaultTestString = function() {
-  this.timesToCheckWidthsBeforeChange_ = 3;
-  this.timesToReportChangedWidth_ = 2;
+  this.timesToCheckSizesBeforeChange_ = 3;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
       this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
       this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
-      this.fontDescription_);
+      this.fontDescription_, false);
 
   fontWatchRunner.start();
-
-  assertEquals(4, this.createElementCalled_);
+  assertEquals(3, this.createElementCalled_);
   assertEquals('span', this.createdElements_[0]['name']);
-  assertEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_A));
+  assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf('fontFamily1'));
+  assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf(webfont.FontWatchRunner.LastResortFonts.SERIF));
   assertEquals('BESbswy', this.createdElements_[0]['innerHtml']);
+
   assertEquals('span', this.createdElements_[1]['name']);
-  assertEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_B));
+  assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf('fontFamily1'));
+  assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf(webfont.FontWatchRunner.LastResortFonts.SANS_SERIF));
   assertEquals('BESbswy', this.createdElements_[1]['innerHtml']);
-  assertEquals('span', this.createdElements_[2]['name']);
-  assertNotEquals(-1, this.createdElements_[2]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[2]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_A));
-  assertEquals('BESbswy', this.createdElements_[2]['innerHtml']);
-  assertEquals('span', this.createdElements_[3]['name']);
-  assertNotEquals(-1, this.createdElements_[3]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[3]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_B));
-  assertEquals('BESbswy', this.createdElements_[3]['innerHtml']);
-  assertEquals(4, this.insertIntoCalled_);
-  assertEquals(4, this.removeElementCalled_);
+
+  assertEquals(3, this.insertIntoCalled_);
+  assertEquals(3, this.removeElementCalled_);
 };
 
 FontWatchRunnerTest.prototype.testDomWithNotDefaultTestString = function() {
-  this.timesToCheckWidthsBeforeChange_ = 3;
-  this.timesToReportChangedWidth_ = 2;
+  this.timesToCheckSizesBeforeChange_ = 3;
   this.timesToGetTimeBeforeTimeout_ = 10;
 
   var fontWatchRunner = new webfont.FontWatchRunner(this.activeCallback_,
       this.inactiveCallback_, this.fakeDomHelper_, this.fakeFontSizer_,
       this.fakeAsyncCall_, this.fakeGetTime_, this.fontFamily_,
-      this.fontDescription_, 'testString');
+      this.fontDescription_, false, null, 'testString');
 
   fontWatchRunner.start();
 
-  assertEquals(4, this.createElementCalled_);
+  assertEquals(3, this.createElementCalled_);
   assertEquals('span', this.createdElements_[0]['name']);
-  assertEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_A));
+  assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf('fontFamily1'));
+  assertNotEquals(-1, this.createdElements_[0]['attrs']['style'].indexOf(webfont.FontWatchRunner.LastResortFonts.SERIF));
   assertEquals('testString', this.createdElements_[0]['innerHtml']);
+
   assertEquals('span', this.createdElements_[1]['name']);
-  assertEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_B));
+  assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf('fontFamily1'));
+  assertNotEquals(-1, this.createdElements_[1]['attrs']['style'].indexOf(webfont.FontWatchRunner.LastResortFonts.SANS_SERIF));
   assertEquals('testString', this.createdElements_[1]['innerHtml']);
-  assertEquals('span', this.createdElements_[2]['name']);
-  assertNotEquals(-1, this.createdElements_[2]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[2]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_A));
-  assertEquals('testString', this.createdElements_[2]['innerHtml']);
-  assertEquals('span', this.createdElements_[3]['name']);
-  assertNotEquals(-1, this.createdElements_[3]['attrs']['style'].indexOf('fontFamily1'));
-  assertNotEquals(-1, this.createdElements_[3]['attrs']['style'].indexOf(webfont.FontWatchRunner.DEFAULT_FONTS_B));
-  assertEquals('testString', this.createdElements_[3]['innerHtml']);
-  assertEquals(4, this.insertIntoCalled_);
-  assertEquals(4, this.removeElementCalled_);
+
+  assertEquals(3, this.insertIntoCalled_);
+  assertEquals(3, this.removeElementCalled_);
 
 };