Repository: bramstein/fontfaceobserver Branch: master Commit: 46553ba71b2a Files: 23 Total size: 107.1 KB Directory structure: gitextract_wegyr1t_/ ├── .gitignore ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── exports.js ├── externs-commonjs.js ├── externs.js ├── fontfaceobserver.js ├── fontfaceobserver.standalone.js ├── package.json ├── src/ │ ├── descriptors.js │ ├── observer.js │ └── ruler.js ├── test/ │ ├── assets/ │ │ ├── index.html │ │ └── late.css │ ├── browser-test.html │ ├── deps.js │ ├── index.html │ ├── observer-test.js │ └── ruler-test.js └── vendor/ └── google/ └── base.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ build node_modules ================================================ FILE: .travis.yml ================================================ sudo: false language: node_js before_install: - npm install -g grunt-cli node_js: - "4" matrix: fast_finish: true cache: directories: - node_modules ================================================ FILE: Gruntfile.js ================================================ module.exports = function (grunt) { require('google-closure-compiler').grunt(grunt, { max_parallel_compilations: require('os').cpus().length }); var compilerOptions = { compilation_level: 'ADVANCED_OPTIMIZATIONS', warning_level: 'VERBOSE', summary_detail_level: 3, language_in: 'ECMASCRIPT5_STRICT', output_wrapper: '(function(){%output%}());', use_types_for_optimization: true, externs: ['externs-commonjs.js'] }; var src = [ 'vendor/google/base.js', 'node_modules/closure-dom/src/dom.js', 'src/descriptors.js', 'src/ruler.js', 'src/observer.js', 'exports.js' ]; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), clean: { options: { force: true }, build: ['build'] }, exec: { test: './node_modules/.bin/mocha-headless-chrome -f test/index.html', deps: 'calcdeps -i src -i exports.js -p src -p ./vendor/google/base.js -p node_modules/closure-dom/src/dom.js -o deps > test/deps.js' }, jshint: { all: ['src/**/*.js'], options: { // ... better written as dot notation '-W069': true, // type definitions '-W030': true, // Don't make functions within loops '-W083': true, // Wrap the /regexp/ literal in parens to disambiguate the slash operator '-W092': true } }, 'closure-compiler': { dist: { files: { 'fontfaceobserver.js': src }, options: compilerOptions }, compile: { files: { 'build/fontfaceobserver.js': src }, options: compilerOptions }, debug: { files: { 'build/fontfaceobserver.debug.js': src }, options: Object.assign({}, compilerOptions, { debug: true, formatting: ['PRETTY_PRINT', 'PRINT_INPUT_DELIMITER'] }) } }, concat: { options: { banner: '/* Font Face Observer v<%= pkg.version %> - © Bram Stein. License: BSD-3-Clause */' }, dist_promises: { src: ['node_modules/promis/promise.js', 'build/fontfaceobserver.js'], dest: 'fontfaceobserver.js' }, dist: { src: ['build/fontfaceobserver.js'], dest: 'fontfaceobserver.standalone.js' } } }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-exec'); grunt.registerTask('compile', ['closure-compiler:compile']); grunt.registerTask('debug', ['closure-compiler:debug']); grunt.registerTask('default', ['compile']); grunt.registerTask('test', ['jshint', 'exec:test']); grunt.registerTask('dist', ['clean', 'closure-compiler:compile', 'concat:dist', 'concat:dist_promises']); }; ================================================ FILE: LICENSE ================================================ Copyright (c) 2014 - Bram Stein Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: README.md ================================================ # Font Face Observer [![Build Status](https://travis-ci.org/bramstein/fontfaceobserver.png?branch=master)](https://travis-ci.org/bramstein/fontfaceobserver) Font Face Observer is a small `@font-face` loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any webfont service. It will monitor when a webfont is loaded and notify you. It does not limit you in any way in where, when, or how you load your webfonts. Unlike the [Web Font Loader](https://github.com/typekit/webfontloader) Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead. ## How to use Include your `@font-face` rules as usual. Fonts can be supplied by either a font service such as [Google Fonts](http://www.google.com/fonts), [Typekit](http://typekit.com), and [Webtype](http://webtype.com) or be self-hosted. You can set up monitoring for a single font family at a time: ```js var font = new FontFaceObserver('My Family', { weight: 400 }); font.load().then(function () { console.log('Font is available'); }, function () { console.log('Font is not available'); }); ``` The `FontFaceObserver` constructor takes two arguments: the font-family name (required) and an object describing the variation (optional). The object can contain `weight`, `style`, and `stretch` properties. If a property is not present it will default to `normal`. To start loading the font, call the `load` method. It'll immediately return a new Promise that resolves when the font is loaded and rejected when the font fails to load. If your font doesn't contain at least the latin "BESbwy" characters you must pass a custom test string to the `load` method. ```js var font = new FontFaceObserver('My Family'); font.load('中国').then(function () { console.log('Font is available'); }, function () { console.log('Font is not available'); }); ``` The default timeout for giving up on font loading is 3 seconds. You can increase or decrease this by passing a number of milliseconds as the second parameter to the `load` method. ```js var font = new FontFaceObserver('My Family'); font.load(null, 5000).then(function () { console.log('Font is available'); }, function () { console.log('Font is not available after waiting 5 seconds'); }); ``` Multiple fonts can be loaded by creating a `FontFaceObserver` instance for each. ```js var fontA = new FontFaceObserver('Family A'); var fontB = new FontFaceObserver('Family B'); fontA.load().then(function () { console.log('Family A is available'); }); fontB.load().then(function () { console.log('Family B is available'); }); ``` You may also load both at the same time, rather than loading each individually. ```js var fontA = new FontFaceObserver('Family A'); var fontB = new FontFaceObserver('Family B'); Promise.all([fontA.load(), fontB.load()]).then(function () { console.log('Family A & B have loaded'); }); ``` If you are working with a large number of fonts, you may decide to create `FontFaceObserver` instances dynamically: ```js // An example collection of font data with additional metadata, // in this case “color.” var exampleFontData = { 'Family A': { weight: 400, color: 'red' }, 'Family B': { weight: 400, color: 'orange' }, 'Family C': { weight: 900, color: 'yellow' }, // Etc. }; var observers = []; // Make one observer for each font, // by iterating over the data we already have Object.keys(exampleFontData).forEach(function(family) { var data = exampleFontData[family]; var obs = new FontFaceObserver(family, data); observers.push(obs.load()); }); Promise.all(observers) .then(function(fonts) { fonts.forEach(function(font) { console.log(font.family + ' ' + font.weight + ' ' + 'loaded'); // Map the result of the Promise back to our existing data, // to get the other properties we need. console.log(exampleFontData[font.family].color); }); }) .catch(function(err) { console.warn('Some critical font are not available:', err); }); ``` The following example emulates FOUT with Font Face Observer for `My Family`. ```js var font = new FontFaceObserver('My Family'); font.load().then(function () { document.documentElement.className += " fonts-loaded"; }); ``` ```css .fonts-loaded { body { font-family: My Family, sans-serif; } } ``` ## Installation If you're using npm you can install Font Face Observer as a dependency: ```shell $ npm install fontfaceobserver ``` You can then require `fontfaceobserver` as a CommonJS (Browserify) module: ```js var FontFaceObserver = require('fontfaceobserver'); var font = new FontFaceObserver('My Family'); font.load().then(function () { console.log('My Family has loaded'); }); ``` If you're not using npm, grab `fontfaceobserver.js` or `fontfaceobserver.standalone.js` (see below) and include it in your project. It'll export a global `FontFaceObserver` that you can use to create new instances. Font Face Observer uses Promises in its API, so for [browsers that do not support promises](http://caniuse.com/#search=promise) you'll need to include a polyfill. If you use your own Promise polyfill you just need to include `fontfaceobserver.standalone.js` in your project. If you do not have an existing Promise polyfill you should use `fontfaceobserver.js` which includes a small Promise polyfill. Using the Promise polyfill adds roughly 1.4KB (500 bytes gzipped) to the file size. ## Browser support FontFaceObserver has been tested and works on the following browsers: * Chrome (desktop & Android) * Firefox * Opera * Safari (desktop & iOS) * IE8+ * Android WebKit ## License Font Face Observer is licensed under the BSD License. Copyright 2014-2017 Bram Stein. All rights reserved. ================================================ FILE: bower.json ================================================ { "name": "fontfaceobserver", "description": "Fast and simple web font loading.", "main": "fontfaceobserver.standalone.js", "authors": [ "Bram Stein (http://www.bramstein.com/)" ], "license": "BSD-3-Clause", "keywords": [ "fontloader", "fonts", "font", "font-face", "web", "font", "font", "load", "font", "events" ], "homepage": "https://github.com/bramstein/fontfaceobserver" } ================================================ FILE: exports.js ================================================ goog.require('fontface.Observer'); if (typeof module === 'object') { module.exports = fontface.Observer; } else { window['FontFaceObserver'] = fontface.Observer; window['FontFaceObserver']['prototype']['load'] = fontface.Observer.prototype.load; } ================================================ FILE: externs-commonjs.js ================================================ /** * @type {Object} */ var module = {}; /** * @type {Object} */ module.exports = {}; ================================================ FILE: externs.js ================================================ /** * @constructor * * @param {string} family * @param {Object} descriptors */ var FontFaceObserver = function (family, descriptors) {}; /** * @param {string=} opt_text * @param {number=} opt_timeout * * @return {Promise.} */ FontFaceObserver.prototype.load = function (opt_text, opt_timeout) {}; ================================================ FILE: fontfaceobserver.js ================================================ /* Font Face Observer v2.3.0 - © Bram Stein. License: BSD-3-Clause */(function(){'use strict';var f,g=[];function l(a){g.push(a);1==g.length&&f()}function m(){for(;g.length;)g[0](),g.shift()}f=function(){setTimeout(m)};function n(a){this.a=p;this.b=void 0;this.f=[];var b=this;try{a(function(a){q(b,a)},function(a){r(b,a)})}catch(c){r(b,c)}}var p=2;function t(a){return new n(function(b,c){c(a)})}function u(a){return new n(function(b){b(a)})}function q(a,b){if(a.a==p){if(b==a)throw new TypeError;var c=!1;try{var d=b&&b.then;if(null!=b&&"object"==typeof b&&"function"==typeof d){d.call(b,function(b){c||q(a,b);c=!0},function(b){c||r(a,b);c=!0});return}}catch(e){c||r(a,e);return}a.a=0;a.b=b;v(a)}} function r(a,b){if(a.a==p){if(b==a)throw new TypeError;a.a=1;a.b=b;v(a)}}function v(a){l(function(){if(a.a!=p)for(;a.f.length;){var b=a.f.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0==a.a?"function"==typeof c?e(c.call(void 0,a.b)):e(a.b):1==a.a&&("function"==typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(h){b(h)}}})}n.prototype.g=function(a){return this.c(void 0,a)};n.prototype.c=function(a,b){var c=this;return new n(function(d,e){c.f.push([a,b,d,e]);v(c)})}; function w(a){return new n(function(b,c){function d(c){return function(d){h[c]=d;e+=1;e==a.length&&b(h)}}var e=0,h=[];0==a.length&&b(h);for(var k=0;kparseInt(a[1],10)):F=!1);return F}function M(a){null===H&&(H=!!a.document.fonts);return H} function N(a,c){var b=a.style,g=a.weight;if(null===G){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(q){}G=""!==e.style.font}return[b,g,G?a.stretch:"","100px",c].join(" ")} D.prototype.load=function(a,c){var b=this,g=a||"BESbswy",e=0,q=c||3E3,J=(new Date).getTime();return new Promise(function(K,L){if(M(b.context)&&!I(b.context)){var O=new Promise(function(r,t){function h(){(new Date).getTime()-J>=q?t(Error(""+q+"ms timeout exceeded")):b.context.document.fonts.load(N(b,'"'+b.family+'"'),g).then(function(n){1<=n.length?r():setTimeout(h,25)},t)}h()}),P=new Promise(function(r,t){e=setTimeout(function(){t(Error(""+q+"ms timeout exceeded"))},q)});Promise.race([P,O]).then(function(){clearTimeout(e); K(b)},L)}else u(function(){function r(){var d;if(d=-1!=k&&-1!=l||-1!=k&&-1!=m||-1!=l&&-1!=m)(d=k!=l&&k!=m&&l!=m)||(null===E&&(d=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),E=!!d&&(536>parseInt(d[1],10)||536===parseInt(d[1],10)&&11>=parseInt(d[2],10))),d=E&&(k==y&&l==y&&m==y||k==z&&l==z&&m==z||k==A&&l==A&&m==A)),d=!d;d&&(null!==f.parentNode&&f.parentNode.removeChild(f),clearTimeout(e),K(b))}function t(){if((new Date).getTime()-J>=q)null!==f.parentNode&&f.parentNode.removeChild(f), L(Error(""+q+"ms timeout exceeded"));else{var d=b.context.document.hidden;if(!0===d||void 0===d)k=h.g.offsetWidth,l=n.g.offsetWidth,m=v.g.offsetWidth,r();e=setTimeout(t,50)}}var h=new w(g),n=new w(g),v=new w(g),k=-1,l=-1,m=-1,y=-1,z=-1,A=-1,f=document.createElement("div");f.dir="ltr";x(h,N(b,"sans-serif"));x(n,N(b,"serif"));x(v,N(b,"monospace"));f.appendChild(h.g);f.appendChild(n.g);f.appendChild(v.g);b.context.document.body.appendChild(f);y=h.g.offsetWidth;z=n.g.offsetWidth;A=v.g.offsetWidth;t(); C(h,function(d){k=d;r()});x(h,N(b,'"'+b.family+'",sans-serif'));C(n,function(d){l=d;r()});x(n,N(b,'"'+b.family+'",serif'));C(v,function(d){m=d;r()});x(v,N(b,'"'+b.family+'",monospace'))})})};"object"===typeof module?module.exports=D:(window.FontFaceObserver=D,window.FontFaceObserver.prototype.load=D.prototype.load);}()); ================================================ FILE: fontfaceobserver.standalone.js ================================================ /* Font Face Observer v2.3.0 - © Bram Stein. License: BSD-3-Clause */(function(){function p(a,c){document.addEventListener?a.addEventListener("scroll",c,!1):a.attachEvent("scroll",c)}function u(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function b(){document.removeEventListener("DOMContentLoaded",b);a()}):document.attachEvent("onreadystatechange",function g(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",g),a()})};function w(a){this.g=document.createElement("div");this.g.setAttribute("aria-hidden","true");this.g.appendChild(document.createTextNode(a));this.h=document.createElement("span");this.i=document.createElement("span");this.m=document.createElement("span");this.j=document.createElement("span");this.l=-1;this.h.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.i.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;"; this.j.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.m.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.h.appendChild(this.m);this.i.appendChild(this.j);this.g.appendChild(this.h);this.g.appendChild(this.i)} function x(a,c){a.g.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+c+";"}function B(a){var c=a.g.offsetWidth,b=c+100;a.j.style.width=b+"px";a.i.scrollLeft=b;a.h.scrollLeft=a.h.scrollWidth+100;return a.l!==c?(a.l=c,!0):!1}function C(a,c){function b(){var e=g;B(e)&&null!==e.g.parentNode&&c(e.l)}var g=a;p(a.h,b);p(a.i,b);B(a)};function D(a,c,b){c=c||{};b=b||window;this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal";this.context=b}var E=null,F=null,G=null,H=null;function I(a){null===F&&(M(a)&&/Apple/.test(window.navigator.vendor)?(a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent),F=!!a&&603>parseInt(a[1],10)):F=!1);return F}function M(a){null===H&&(H=!!a.document.fonts);return H} function N(a,c){var b=a.style,g=a.weight;if(null===G){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(q){}G=""!==e.style.font}return[b,g,G?a.stretch:"","100px",c].join(" ")} D.prototype.load=function(a,c){var b=this,g=a||"BESbswy",e=0,q=c||3E3,J=(new Date).getTime();return new Promise(function(K,L){if(M(b.context)&&!I(b.context)){var O=new Promise(function(r,t){function h(){(new Date).getTime()-J>=q?t(Error(""+q+"ms timeout exceeded")):b.context.document.fonts.load(N(b,'"'+b.family+'"'),g).then(function(n){1<=n.length?r():setTimeout(h,25)},t)}h()}),P=new Promise(function(r,t){e=setTimeout(function(){t(Error(""+q+"ms timeout exceeded"))},q)});Promise.race([P,O]).then(function(){clearTimeout(e); K(b)},L)}else u(function(){function r(){var d;if(d=-1!=k&&-1!=l||-1!=k&&-1!=m||-1!=l&&-1!=m)(d=k!=l&&k!=m&&l!=m)||(null===E&&(d=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),E=!!d&&(536>parseInt(d[1],10)||536===parseInt(d[1],10)&&11>=parseInt(d[2],10))),d=E&&(k==y&&l==y&&m==y||k==z&&l==z&&m==z||k==A&&l==A&&m==A)),d=!d;d&&(null!==f.parentNode&&f.parentNode.removeChild(f),clearTimeout(e),K(b))}function t(){if((new Date).getTime()-J>=q)null!==f.parentNode&&f.parentNode.removeChild(f), L(Error(""+q+"ms timeout exceeded"));else{var d=b.context.document.hidden;if(!0===d||void 0===d)k=h.g.offsetWidth,l=n.g.offsetWidth,m=v.g.offsetWidth,r();e=setTimeout(t,50)}}var h=new w(g),n=new w(g),v=new w(g),k=-1,l=-1,m=-1,y=-1,z=-1,A=-1,f=document.createElement("div");f.dir="ltr";x(h,N(b,"sans-serif"));x(n,N(b,"serif"));x(v,N(b,"monospace"));f.appendChild(h.g);f.appendChild(n.g);f.appendChild(v.g);b.context.document.body.appendChild(f);y=h.g.offsetWidth;z=n.g.offsetWidth;A=v.g.offsetWidth;t(); C(h,function(d){k=d;r()});x(h,N(b,'"'+b.family+'",sans-serif'));C(n,function(d){l=d;r()});x(n,N(b,'"'+b.family+'",serif'));C(v,function(d){m=d;r()});x(v,N(b,'"'+b.family+'",monospace'))})})};"object"===typeof module?module.exports=D:(window.FontFaceObserver=D,window.FontFaceObserver.prototype.load=D.prototype.load);}()); ================================================ FILE: package.json ================================================ { "name": "fontfaceobserver", "version": "2.3.0", "description": "Detect if web fonts are available", "directories": { "test": "test" }, "repository": { "type": "git", "url": "git+https://github.com/bramstein/fontfaceobserver.git" }, "bugs": { "url": "https://github.com/bramstein/fontfaceobserver/issues" }, "homepage": "https://fontfaceobserver.com/", "main": "fontfaceobserver.standalone.js", "keywords": [ "fontloader", "fonts", "font", "font-face", "web font", "font load", "font events" ], "files": [ "fontfaceobserver.js", "fontfaceobserver.standalone.js", "src/*.js", "externs.js" ], "author": "Bram Stein (http://www.bramstein.com/)", "license": "BSD-2-Clause", "devDependencies": { "closure-dom": "=0.2.6", "google-closure-compiler": "=v20220502", "grunt": "^1.0.3", "grunt-contrib-clean": "^2.0.1", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-jshint": "^3.2.0", "grunt-exec": "~1.0.0", "mocha": "^10.0.0", "mocha-headless-chrome": "^4.0.0", "promis": "=1.1.4", "sinon": "^14.0.0", "unexpected": "^13.0.0" }, "scripts": { "preversion": "npm test", "version": "grunt dist && git add fontfaceobserver.js && git add fontfaceobserver.standalone.js", "postversion": "git push && git push --tags && rm -rf build && npm publish", "test": "grunt test" } } ================================================ FILE: src/descriptors.js ================================================ goog.provide('fontface.Descriptors'); /** * @typedef {{ * style: (string|undefined), * weight: (string|undefined), * stretch: (string|undefined) * }} */ fontface.Descriptors; ================================================ FILE: src/observer.js ================================================ goog.provide('fontface.Observer'); goog.require('fontface.Ruler'); goog.require('dom'); goog.scope(function () { var Ruler = fontface.Ruler; /** * @constructor * * @param {string} family * @param {fontface.Descriptors=} opt_descriptors * @param {Window=} opt_context */ fontface.Observer = function (family, opt_descriptors, opt_context) { var descriptors = opt_descriptors || {}; var context = opt_context || window; /** * @type {string} */ this['family'] = family; /** * @type {string} */ this['style'] = descriptors.style || 'normal'; /** * @type {string} */ this['weight'] = descriptors.weight || 'normal'; /** * @type {string} */ this['stretch'] = descriptors.stretch || 'normal'; /** * @type {Window} */ this['context'] = context; }; var Observer = fontface.Observer; /** * @type {null|boolean} */ Observer.HAS_WEBKIT_FALLBACK_BUG = null; /** * @type {null|boolean} */ Observer.HAS_SAFARI_10_BUG = null; /** * @type {null|boolean} */ Observer.SUPPORTS_STRETCH = null; /** * @type {null|boolean} */ Observer.SUPPORTS_NATIVE_FONT_LOADING = null; /** * @type {number} */ Observer.DEFAULT_TIMEOUT = 3000; /** * @return {string} */ Observer.getUserAgent = function () { return window.navigator.userAgent; }; /** * @return {string} */ Observer.getNavigatorVendor = function () { return window.navigator.vendor; }; /** * Returns true if this browser is WebKit and it has the fallback bug * which is present in WebKit 536.11 and earlier. * * @return {boolean} */ Observer.hasWebKitFallbackBug = function () { if (Observer.HAS_WEBKIT_FALLBACK_BUG === null) { var match = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(Observer.getUserAgent()); Observer.HAS_WEBKIT_FALLBACK_BUG = !!match && (parseInt(match[1], 10) < 536 || (parseInt(match[1], 10) === 536 && parseInt(match[2], 10) <= 11)); } return Observer.HAS_WEBKIT_FALLBACK_BUG; }; /** * Returns true if the browser has the Safari 10 bugs. The * native font load API in Safari 10 has two bugs that cause * the document.fonts.load and FontFace.prototype.load methods * to return promises that don't reliably get settled. * * The bugs are described in more detail here: * - https://bugs.webkit.org/show_bug.cgi?id=165037 * - https://bugs.webkit.org/show_bug.cgi?id=164902 * * If the browser is made by Apple, and has native font * loading support, it is potentially affected. But the API * was fixed around AppleWebKit version 603, so any newer * versions that that does not contain the bug. * * @return {boolean} */ Observer.hasSafari10Bug = function (context) { if (Observer.HAS_SAFARI_10_BUG === null) { if (Observer.supportsNativeFontLoading(context) && /Apple/.test(Observer.getNavigatorVendor())) { var match = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(Observer.getUserAgent()); Observer.HAS_SAFARI_10_BUG = !!match && parseInt(match[1], 10) < 603; } else { Observer.HAS_SAFARI_10_BUG = false; } } return Observer.HAS_SAFARI_10_BUG; }; /** * Returns true if the browser supports the native font loading * API. * * @return {boolean} */ Observer.supportsNativeFontLoading = function (context) { if (Observer.SUPPORTS_NATIVE_FONT_LOADING === null) { Observer.SUPPORTS_NATIVE_FONT_LOADING = !!context.document['fonts']; } return Observer.SUPPORTS_NATIVE_FONT_LOADING; }; /** * Returns true if the browser supports font-style in the font * short-hand syntax. * * @return {boolean} */ Observer.supportStretch = function () { if (Observer.SUPPORTS_STRETCH === null) { var div = dom.createElement('div'); try { div.style.font = 'condensed 100px sans-serif'; } catch (e) {} Observer.SUPPORTS_STRETCH = (div.style.font !== ''); } return Observer.SUPPORTS_STRETCH; }; /** * @private * * @param {string} family * @return {string} */ Observer.prototype.getStyle = function (family) { return [this['style'], this['weight'], Observer.supportStretch() ? this['stretch'] : '', '100px', family].join(' '); }; /** * Returns the current time in milliseconds * * @return {number} */ Observer.prototype.getTime = function () { return new Date().getTime(); }; /** * @param {string=} text Optional test string to use for detecting if a font is available. * @param {number=} timeout Optional timeout for giving up on font load detection and rejecting the promise (defaults to 3 seconds). * @return {Promise.} */ Observer.prototype.load = function (text, timeout) { var that = this; var testString = text || 'BESbswy'; var timeoutId = 0; var timeoutValue = timeout || Observer.DEFAULT_TIMEOUT; var start = that.getTime(); return new Promise(function (resolve, reject) { if (Observer.supportsNativeFontLoading(that['context']) && !Observer.hasSafari10Bug(that['context'])) { var loader = new Promise(function (resolve, reject) { var check = function () { var now = that.getTime(); if (now - start >= timeoutValue) { reject(new Error('' + timeoutValue + 'ms timeout exceeded')); } else { that['context'].document.fonts.load(that.getStyle('"' + that['family'] + '"'), testString).then(function (fonts) { if (fonts.length >= 1) { resolve(); } else { setTimeout(check, 25); } }, reject); } }; check(); }); var timer = new Promise(function (resolve, reject) { timeoutId = setTimeout( function() { reject(new Error('' + timeoutValue + 'ms timeout exceeded')); }, timeoutValue ); }); Promise.race([timer, loader]).then(function () { clearTimeout(timeoutId); resolve(that); }, reject); } else { dom.waitForBody(function () { var rulerA = new Ruler(testString); var rulerB = new Ruler(testString); var rulerC = new Ruler(testString); var widthA = -1; var widthB = -1; var widthC = -1; var fallbackWidthA = -1; var fallbackWidthB = -1; var fallbackWidthC = -1; var container = dom.createElement('div'); /** * @private */ function removeContainer() { if (container.parentNode !== null) { dom.remove(container.parentNode, container); } } /** * @private * * If metric compatible fonts are detected, one of the widths will be -1. This is * because a metric compatible font won't trigger a scroll event. We work around * this by considering a font loaded if at least two of the widths are the same. * Because we have three widths, this still prevents false positives. * * Cases: * 1) Font loads: both a, b and c are called and have the same value. * 2) Font fails to load: resize callback is never called and timeout happens. * 3) WebKit bug: both a, b and c are called and have the same value, but the * values are equal to one of the last resort fonts, we ignore this and * continue waiting until we get new values (or a timeout). */ function check() { if ((widthA != -1 && widthB != -1) || (widthA != -1 && widthC != -1) || (widthB != -1 && widthC != -1)) { if (widthA == widthB || widthA == widthC || widthB == widthC) { // All values are the same, so the browser has most likely loaded the web font if (Observer.hasWebKitFallbackBug()) { // Except if the browser has the WebKit fallback bug, in which case we check to see if all // values are set to one of the last resort fonts. if (((widthA == fallbackWidthA && widthB == fallbackWidthA && widthC == fallbackWidthA) || (widthA == fallbackWidthB && widthB == fallbackWidthB && widthC == fallbackWidthB) || (widthA == fallbackWidthC && widthB == fallbackWidthC && widthC == fallbackWidthC))) { // The width we got matches some of the known last resort fonts, so let's assume we're dealing with the last resort font. return; } } removeContainer(); clearTimeout(timeoutId); resolve(that); } } } // This ensures the scroll direction is correct. container.dir = 'ltr'; rulerA.setFont(that.getStyle('sans-serif')); rulerB.setFont(that.getStyle('serif')); rulerC.setFont(that.getStyle('monospace')); dom.append(container, rulerA.getElement()); dom.append(container, rulerB.getElement()); dom.append(container, rulerC.getElement()); dom.append(that['context'].document.body, container); fallbackWidthA = rulerA.getWidth(); fallbackWidthB = rulerB.getWidth(); fallbackWidthC = rulerC.getWidth(); function checkForTimeout() { var now = that.getTime(); if (now - start >= timeoutValue) { removeContainer(); reject(new Error('' + timeoutValue + 'ms timeout exceeded')); } else { var hidden = that['context'].document['hidden']; if (hidden === true || hidden === undefined) { widthA = rulerA.getWidth(); widthB = rulerB.getWidth(); widthC = rulerC.getWidth(); check(); } timeoutId = setTimeout(checkForTimeout, 50); } } checkForTimeout(); rulerA.onResize(function (width) { widthA = width; check(); }); rulerA.setFont(that.getStyle('"' + that['family'] + '",sans-serif')); rulerB.onResize(function (width) { widthB = width; check(); }); rulerB.setFont(that.getStyle('"' + that['family'] + '",serif')); rulerC.onResize(function (width) { widthC = width; check(); }); rulerC.setFont(that.getStyle('"' + that['family'] + '",monospace')); }); } }); }; }); ================================================ FILE: src/ruler.js ================================================ goog.provide('fontface.Ruler'); goog.require('dom'); goog.scope(function () { /** * @constructor * @param {string} text */ fontface.Ruler = function (text) { var style = 'max-width:none;' + 'display:inline-block;' + 'position:absolute;' + 'height:100%;' + 'width:100%;' + 'overflow:scroll;' + 'font-size:16px;'; this.element = dom.createElement('div'); this.element.setAttribute('aria-hidden', 'true'); dom.append(this.element, dom.createText(text)); this.collapsible = dom.createElement('span'); this.expandable = dom.createElement('span'); this.collapsibleInner = dom.createElement('span'); this.expandableInner = dom.createElement('span'); this.lastOffsetWidth = -1; dom.style(this.collapsible, style); dom.style(this.expandable, style); dom.style(this.expandableInner, style); dom.style(this.collapsibleInner, 'display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;'); dom.append(this.collapsible, this.collapsibleInner); dom.append(this.expandable, this.expandableInner); dom.append(this.element, this.collapsible); dom.append(this.element, this.expandable); }; var Ruler = fontface.Ruler; /** * @return {Element} */ Ruler.prototype.getElement = function () { return this.element; }; /** * @param {string} font */ Ruler.prototype.setFont = function (font) { dom.style(this.element, 'max-width:none;' + 'min-width:20px;' + 'min-height:20px;' + 'display:inline-block;' + 'overflow:hidden;' + 'position:absolute;' + 'width:auto;' + 'margin:0;' + 'padding:0;' + 'top:-999px;' + 'white-space:nowrap;' + 'font-synthesis:none;' + 'font:' + font + ';'); }; /** * @return {number} */ Ruler.prototype.getWidth = function () { return this.element.offsetWidth; }; /** * @param {string} width */ Ruler.prototype.setWidth = function (width) { this.element.style.width = width + 'px'; }; /** * @private * * @return {boolean} */ Ruler.prototype.reset = function () { var offsetWidth = this.getWidth(), width = offsetWidth + 100; this.expandableInner.style.width = width + 'px'; this.expandable.scrollLeft = width; this.collapsible.scrollLeft = this.collapsible.scrollWidth + 100; if (this.lastOffsetWidth !== offsetWidth) { this.lastOffsetWidth = offsetWidth; return true; } else { return false; } }; /** * @private * @param {function(number)} callback */ Ruler.prototype.onScroll = function (callback) { if (this.reset() && this.element.parentNode !== null) { callback(this.lastOffsetWidth); } }; /** * @param {function(number)} callback */ Ruler.prototype.onResize = function (callback) { var that = this; function onScroll() { that.onScroll(callback); } dom.addListener(this.collapsible, 'scroll', onScroll); dom.addListener(this.expandable, 'scroll', onScroll); this.reset(); }; }); ================================================ FILE: test/assets/index.html ================================================ hello ================================================ FILE: test/assets/late.css ================================================ @font-face { font-family: observer-test9; src: url(sourcesanspro-regular.woff) format('woff'), url(sourcesanspro-regular.ttf) format('truetype'); } ================================================ FILE: test/browser-test.html ================================================ Browser Test ================================================ FILE: test/deps.js ================================================ // This file was autogenerated by calcdeps.js goog.addDependency('../../node_modules/closure-dom/src/dom.js', ['dom'], []); goog.addDependency('../../src/descriptors.js', ['fontface.Descriptors'], []); goog.addDependency('../../src/observer.js', ['fontface.Observer'], ['fontface.Ruler','dom']); goog.addDependency('../../src/ruler.js', ['fontface.Ruler'], ['dom']); ================================================ FILE: test/index.html ================================================ FontFaceObserver
================================================ FILE: test/observer-test.js ================================================ describe('Observer', function () { var Observer = fontface.Observer, Ruler = fontface.Ruler; describe('#constructor', function () { it('creates a new instance with the correct signature', function () { var observer = new Observer('my family', {}); expect(observer, 'not to be', null); expect(observer.load, 'to be a function'); }); it('parses descriptors', function () { var observer = new Observer('my family', { weight: 'bold' }); expect(observer.family, 'to equal', 'my family'); expect(observer.weight, 'to equal', 'bold'); }); it('defaults descriptors that are not given', function () { var observer = new Observer('my family', { weight: 'bold' }); expect(observer.style, 'to equal', 'normal'); }); it('defaults context to current window', function () { var observer = new Observer('my family', {}); expect(observer.context, 'to equal', window); }); }); describe('#getStyle', function () { it('creates the correct default style', function () { var observer = new Observer('my family', {}); if (Observer.supportStretch()) { expect(observer.getStyle('sans-serif'), 'to equal', 'normal normal normal 100px sans-serif'); } else { expect(observer.getStyle('sans-serif'), 'to equal', 'normal normal 100px sans-serif'); } }); it('passes through all descriptors', function () { var observer = new Observer('my family', { style: 'italic', weight: 'bold', stretch: 'condensed' }); if (Observer.supportStretch()) { expect(observer.getStyle('sans-serif'), 'to equal', 'italic bold condensed 100px sans-serif'); } else { expect(observer.getStyle('sans-serif'), 'to equal', 'italic bold 100px sans-serif'); } }); }); describe('#load', function () { this.timeout(5000); it('finds a font and resolve the promise', function (done) { var observer = new Observer('observer-test1', {}), ruler = new Ruler('hello'); document.body.appendChild(ruler.getElement()); ruler.setFont('monospace', ''); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test1, monospace'); observer.load(null, 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('finds a font and resolve the promise in an iframe (context)', function (done) { var iframe = document.createElement('iframe'); iframe.style.position = 'fixed'; iframe.style.left = '-9999px'; document.body.appendChild(iframe); // Can't just load a local HTML file, because under file:// we wouldn't // be able to interact with it due to same-origin policy var style = iframe.contentWindow.document.createElement('style'); style.textContent = "@font-face {" + " font-family: observer-test1;" + " src: url(assets/sourcesanspro-regular.woff) format('woff')," + " url(assets/sourcesanspro-regular.ttf) format('truetype');" + "}"; iframe.contentWindow.document.head.appendChild(style); var observer = new Observer('observer-test1', {}, iframe.contentWindow), ruler = new Ruler('hello'); iframe.contentWindow.document.body.appendChild(ruler.getElement()); ruler.setFont('monospace', ''); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test1, monospace'); observer.load(null, 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(iframe); done(); }, 0); }, function () { document.body.removeChild(iframe); done(new Error('Timeout')); }); }); it('finds a font and resolves the promise even though the @font-face rule is not in the CSSOM yet', function (done) { var observer = new Observer('observer-test9', {}), ruler = new Ruler('hello'); document.body.appendChild(ruler.getElement()); ruler.setFont('monospace', ''); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test9, monospace'); observer.load(null, 10000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); // We don't use a style element here because IE9/10 have issues with // dynamically inserted @font-face rules. var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'assets/late.css'; document.head.appendChild(link); }); it('finds a font and resolve the promise even when the page is RTL', function (done) { var observer = new Observer('observer-test8', {}), ruler = new Ruler('hello'); document.body.dir = 'rtl'; document.body.appendChild(ruler.getElement()); ruler.setFont('monospace', ''); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test1, monospace'); observer.load(null, 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); document.body.dir = 'ltr'; done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('finds a font with spaces in the name and resolve the promise', function (done) { var observer = new Observer('Trebuchet W01 Regular', {}), ruler = new Ruler('hello'); document.body.appendChild(ruler.getElement()); ruler.setFont('100px monospace'); var beforeWidth = ruler.getWidth(); ruler.setFont('100px "Trebuchet W01 Regular", monospace'); observer.load(null, 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('loads a font with spaces and numbers in the name and resolve the promise', function (done) { var observer = new Observer('Neue Frutiger 1450 W04', {}), ruler = new Ruler('hello'); document.body.appendChild(ruler.getElement()); ruler.setFont('100px monospace'); var beforeWidth = ruler.getWidth(); ruler.setFont('100px "Neue Frutiger 1450 W04", monospace'); observer.load(null, 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('fails to find a font and reject the promise', function (done) { var observer = new Observer('observer-test2', {}); observer.load(null, 50).then(function () { done(new Error('Should not resolve')); }, function (err) { try { done(); } catch(testFailure) { done(testFailure); } }); }); it('finds the font even if it is already loaded', function (done) { var observer = new Observer('observer-test3', {}); observer.load(null, 5000).then(function () { observer.load(null, 5000).then(function () { done(); }, function () { done(new Error('Second call failed')); }); }, function () { done(new Error('Timeout')); }); }); it('finds a font with a custom unicode range within ASCII', function (done) { var observer = new Observer('observer-test4', {}), ruler = new Ruler('\u0021'); ruler.setFont('monospace', ''); document.body.appendChild(ruler.getElement()); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test4,monospace'); observer.load('\u0021', 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('finds a font with a custom unicode range outside ASCII (but within BMP)', function (done) { var observer = new Observer('observer-test5', {}), ruler = new Ruler('\u4e2d\u56fd'); ruler.setFont('100px monospace'); document.body.appendChild(ruler.getElement()); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test5,monospace'); observer.load('\u4e2d\u56fd', 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('finds a font with a custom unicode range outside the BMP', function (done) { var observer = new Observer('observer-test6', {}), ruler = new Ruler('\udbff\udfff'); ruler.setFont('100px monospace'); document.body.appendChild(ruler.getElement()); var beforeWidth = ruler.getWidth(); ruler.setFont('100px observer-test6,monospace'); observer.load('\udbff\udfff', 5000).then(function () { var activeWidth = ruler.getWidth(); expect(activeWidth, 'not to equal', beforeWidth); setTimeout(function () { var afterWidth = ruler.getWidth(); expect(afterWidth, 'to equal', activeWidth); expect(afterWidth, 'not to equal', beforeWidth); document.body.removeChild(ruler.getElement()); done(); }, 0); }, function () { done(new Error('Timeout')); }); }); it('fails to find the font if it is available but does not contain the test string', function (done) { var observer = new Observer('observer-test7', {}); observer.load(null, 50).then(function () { done(new Error('Should not be called')); }, function () { done(); }); }); xit('finds a locally installed font', function (done) { var observer = new Observer('sans-serif', {}); observer.load(null, 50).then(function () { done(); }, function () { done(new Error('Did not detect local font')); }); }); xit('finds a locally installed font with the same metrics as the a fallback font (on OS X)', function (done) { var observer = new Observer('serif', {}); observer.load(null, 50).then(function () { done(); }, function () { done(new Error('Did not detect local font')); }); }); }); describe('hasSafari10Bug', function () { var getUserAgent = null; var getNavigatorVendor = null; var supportsNativeFontLoading = null; beforeEach(function () { Observer.HAS_SAFARI_10_BUG = null; getUserAgent = sinon.stub(Observer, 'getUserAgent'); getNavigatorVendor = sinon.stub(Observer, 'getNavigatorVendor'); supportsNativeFontLoading = sinon.stub(Observer, 'supportsNativeFontLoading'); }); afterEach(function () { getUserAgent.restore(); getNavigatorVendor.restore(); supportsNativeFontLoading.restore(); }); it('returns false when the user agent is not WebKit', function () { getUserAgent.returns('Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/15.0 Firefox/14.0'); getNavigatorVendor.returns('Google'); supportsNativeFontLoading.returns(true); expect(Observer.hasSafari10Bug(), 'to be false'); }); it('returns true if the browser is an affected version of Safari 10', function () { getUserAgent.returns('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14'); getNavigatorVendor.returns('Apple'); supportsNativeFontLoading.returns(true); expect(Observer.hasSafari10Bug(), 'to be true'); }); it('returns true if the browser is an WebView with an affected version of Safari 10', function () { getUserAgent.returns('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/602.2.14 (KHTML, like Gecko) FxiOS/6.1 Safari/602.2.14'); getNavigatorVendor.returns('Apple'); supportsNativeFontLoading.returns(true); expect(Observer.hasSafari10Bug(), 'to be true'); }); it('returns false in older versions of Safari', function () { getUserAgent.returns('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/9.3.2 Safari/537.75.14'); getNavigatorVendor.returns('Apple'); supportsNativeFontLoading.returns(false); expect(Observer.hasSafari10Bug(), 'to be false'); }); it('returns false in newer versions of Safari', function () { getUserAgent.returns('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/603.1.20 (KHTML, like Gecko) Version/10.1 Safari/603.1.20'); getNavigatorVendor.returns('Apple'); supportsNativeFontLoading.returns(true); expect(Observer.hasSafari10Bug(), 'to be false'); }); }); describe('hasWebKitFallbackBug', function () { var getUserAgent = null; beforeEach(function () { Observer.HAS_WEBKIT_FALLBACK_BUG = null; getUserAgent = sinon.stub(Observer, 'getUserAgent'); }); afterEach(function () { getUserAgent.restore(); }); it('returns false when the user agent is not WebKit', function () { getUserAgent.returns('Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/15.0 Firefox/14.0'); expect(Observer.hasWebKitFallbackBug(), 'to be false'); }); it('returns false when the user agent is WebKit but the bug is not present', function () { getUserAgent.returns('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.12 (KHTML, like Gecko) Chrome/20.0.814.2 Safari/536.12'); expect(Observer.hasWebKitFallbackBug(), 'to be false'); }); it('returns true when the user agent is WebKit and the bug is present', function () { getUserAgent.returns('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.814.2 Safari/536.11'); expect(Observer.hasWebKitFallbackBug(), 'to be true'); }); it('returns true when the user agent is WebKit and the bug is present in an old version', function () { getUserAgent.returns('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/20.0.814.2 Safari/535.19'); expect(Observer.hasWebKitFallbackBug(), 'to be true'); }); it('caches the results', function () { getUserAgent.returns('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.814.2 Safari/536.11'); expect(Observer.hasWebKitFallbackBug(), 'to be true'); getUserAgent.returns('Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/15.0 Firefox/14.0'); expect(Observer.hasWebKitFallbackBug(), 'to be true'); }); }); }); ================================================ FILE: test/ruler-test.js ================================================ describe('Ruler', function () { var Ruler = fontface.Ruler, ruler = null; beforeEach(function () { ruler = new Ruler('hello'); ruler.setFont('', ''); ruler.setWidth(100); document.body.appendChild(ruler.getElement()); }); afterEach(function () { document.body.removeChild(ruler.getElement()); ruler = null; }); describe('#constructor', function () { it('creates a new instance with the correct signature', function () { expect(ruler, 'not to be', null); expect(ruler.onResize, 'to be a function'); expect(ruler.setFont, 'to be a function'); }); }); describe('#onResize', function () { it('detects expansion', function (done) { ruler.onResize(function (width) { expect(width, 'to equal', 200); done(); }); ruler.setWidth(200); }); it('detects multiple expansions', function (done) { var first = true; ruler.onResize(function (width) { if (first) { expect(width, 'to equal', 200); ruler.setWidth(300); first = false; } else { expect(width, 'to equal', 300); done(); } }); ruler.setWidth(200); }); it('detects collapse', function (done) { ruler.onResize(function (width) { expect(width, 'to equal', 50); done(); }); ruler.setWidth(50); }); it('detects multiple collapses', function (done) { var first = true; ruler.onResize(function (width) { if (first) { expect(width, 'to equal', 70); ruler.setWidth(50); first = false; } else { expect(width, 'to equal', 50); done(); } }); ruler.setWidth(70); }); it('detects a collapse and an expansion', function (done) { var first = true; ruler.onResize(function (width) { if (first) { expect(width, 'to equal', 70); ruler.setWidth(100); first = false; } else { expect(width, 'to equal', 100); done(); } }); ruler.setWidth(70); }); it('detects an expansion and a collapse', function (done) { var first = true; ruler.onResize(function (width) { if (first) { expect(width, 'to equal', 200); ruler.setWidth(100); first = false; } else { expect(width, 'to equal', 100); done(); } }); ruler.setWidth(200); }); }); }); ================================================ FILE: vendor/google/base.js ================================================ // Copyright 2006 The Closure Library Authors. All Rights Reserved. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS-IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. /** * @fileoverview Bootstrap for the Google JS Library (Closure). * * In uncompiled mode base.js will write out Closure's deps file, unless the * global CLOSURE_NO_DEPS is set to true. This allows projects to * include their own deps file(s) from different locations. * * * @provideGoog */ /** * @define {boolean} Overridden to true by the compiler when --closure_pass * or --mark_as_compiled is specified. */ var COMPILED = false; /** * Base namespace for the Closure library. Checks to see goog is * already defined in the current scope before assigning to prevent * clobbering if base.js is loaded more than once. * * @const */ var goog = goog || {}; // Identifies this file as the Closure base. /** * Reference to the global context. In most cases this will be 'window'. */ goog.global = window; /** * @define {boolean} DEBUG is provided as a convenience so that debugging code * that should not be included in a production js_binary can be easily stripped * by specifying --define goog.DEBUG=false to the JSCompiler. For example, most * toString() methods should be declared inside an "if (goog.DEBUG)" conditional * because they are generally used for debugging purposes and it is difficult * for the JSCompiler to statically determine whether they are used. */ goog.DEBUG = true; /** * @define {string} LOCALE defines the locale being used for compilation. It is * used to select locale specific data to be compiled in js binary. BUILD rule * can specify this value by "--define goog.LOCALE=" as JSCompiler * option. * * Take into account that the locale code format is important. You should use * the canonical Unicode format with hyphen as a delimiter. Language must be * lowercase, Language Script - Capitalized, Region - UPPERCASE. * There are few examples: pt-BR, en, en-US, sr-Latin-BO, zh-Hans-CN. * * See more info about locale codes here: * http://www.unicode.org/reports/tr35/#Unicode_Language_and_Locale_Identifiers * * For language codes you should use values defined by ISO 693-1. See it here * http://www.w3.org/WAI/ER/IG/ert/iso639.htm. There is only one exception from * this rule: the Hebrew language. For legacy reasons the old code (iw) should * be used instead of the new code (he), see http://wiki/Main/IIISynonyms. */ goog.LOCALE = 'en'; // default to en /** * @define {boolean} Whether this code is running on trusted sites. * * On untrusted sites, several native functions can be defined or overridden by * external libraries like Prototype, Datejs, and JQuery and setting this flag * to false forces closure to use its own implementations when possible. * * If your javascript can be loaded by a third party site and you are wary about * relying on non-standard implementations, specify * "--define goog.TRUSTED_SITE=false" to the JSCompiler. */ goog.TRUSTED_SITE = true; /** * Creates object stubs for a namespace. The presence of one or more * goog.provide() calls indicate that the file defines the given * objects/namespaces. Build tools also scan for provide/require statements * to discern dependencies, build dependency files (see deps.js), etc. * @see goog.require * @param {string} name Namespace provided by this file in the form * "goog.package.part". */ goog.provide = function(name) { if (!COMPILED) { // Ensure that the same namespace isn't provided twice. This is intended // to teach new developers that 'goog.provide' is effectively a variable // declaration. And when JSCompiler transforms goog.provide into a real // variable declaration, the compiled JS should work the same as the raw // JS--even when the raw JS uses goog.provide incorrectly. if (goog.isProvided_(name)) { throw Error('Namespace "' + name + '" already declared.'); } delete goog.implicitNamespaces_[name]; var namespace = name; while ((namespace = namespace.substring(0, namespace.lastIndexOf('.')))) { if (goog.getObjectByName(namespace)) { break; } goog.implicitNamespaces_[namespace] = true; } } goog.exportPath_(name); }; /** * Marks that the current file should only be used for testing, and never for * live code in production. * @param {string=} opt_message Optional message to add to the error that's * raised when used in production code. */ goog.setTestOnly = function(opt_message) { if (COMPILED && !goog.DEBUG) { opt_message = opt_message || ''; throw Error('Importing test-only code into non-debug environment' + opt_message ? ': ' + opt_message : '.'); } }; if (!COMPILED) { /** * Check if the given name has been goog.provided. This will return false for * names that are available only as implicit namespaces. * @param {string} name name of the object to look for. * @return {boolean} Whether the name has been provided. * @private */ goog.isProvided_ = function(name) { return !goog.implicitNamespaces_[name] && !!goog.getObjectByName(name); }; /** * Namespaces implicitly defined by goog.provide. For example, * goog.provide('goog.events.Event') implicitly declares * that 'goog' and 'goog.events' must be namespaces. * * @type {Object} * @private */ goog.implicitNamespaces_ = {}; } /** * Builds an object structure for the provided namespace path, * ensuring that names that already exist are not overwritten. For * example: * "a.b.c" -> a = {};a.b={};a.b.c={}; * Used by goog.provide and goog.exportSymbol. * @param {string} name name of the object that this file defines. * @param {*=} opt_object the object to expose at the end of the path. * @param {Object=} opt_objectToExportTo The object to add the path to; default * is |goog.global|. * @private */ goog.exportPath_ = function(name, opt_object, opt_objectToExportTo) { var parts = name.split('.'); var cur = opt_objectToExportTo || goog.global; // Internet Explorer exhibits strange behavior when throwing errors from // methods externed in this manner. See the testExportSymbolExceptions in // base_test.html for an example. if (!(parts[0] in cur) && cur.execScript) { cur.execScript('var ' + parts[0]); } // Certain browsers cannot parse code in the form for((a in b); c;); // This pattern is produced by the JSCompiler when it collapses the // statement above into the conditional loop below. To prevent this from // happening, use a for-loop and reserve the init logic as below. // Parentheses added to eliminate strict JS warning in Firefox. for (var part; parts.length && (part = parts.shift());) { if (!parts.length && goog.isDef(opt_object)) { // last part and we have an object; use it cur[part] = opt_object; } else if (cur[part]) { cur = cur[part]; } else { cur = cur[part] = {}; } } }; /** * Returns an object based on its fully qualified external name. If you are * using a compilation pass that renames property names beware that using this * function will not find renamed properties. * * @param {string} name The fully qualified name. * @param {Object=} opt_obj The object within which to look; default is * |goog.global|. * @return {?} The value (object or primitive) or, if not found, null. */ goog.getObjectByName = function(name, opt_obj) { var parts = name.split('.'); var cur = opt_obj || goog.global; for (var part; part = parts.shift(); ) { if (goog.isDefAndNotNull(cur[part])) { cur = cur[part]; } else { return null; } } return cur; }; /** * Globalizes a whole namespace, such as goog or goog.lang. * * @param {Object} obj The namespace to globalize. * @param {Object=} opt_global The object to add the properties to. * @deprecated Properties may be explicitly exported to the global scope, but * this should no longer be done in bulk. */ goog.globalize = function(obj, opt_global) { var global = opt_global || goog.global; for (var x in obj) { global[x] = obj[x]; } }; /** * Adds a dependency from a file to the files it requires. * @param {string} relPath The path to the js file. * @param {Array} provides An array of strings with the names of the objects * this file provides. * @param {Array} requires An array of strings with the names of the objects * this file requires. */ goog.addDependency = function(relPath, provides, requires) { if (!COMPILED) { var provide, require; var path = relPath.replace(/\\/g, '/'); var deps = goog.dependencies_; for (var i = 0; provide = provides[i]; i++) { deps.nameToPath[provide] = path; if (!(path in deps.pathToNames)) { deps.pathToNames[path] = {}; } deps.pathToNames[path][provide] = true; } for (var j = 0; require = requires[j]; j++) { if (!(path in deps.requires)) { deps.requires[path] = {}; } deps.requires[path][require] = true; } } }; // NOTE(nnaze): The debug DOM loader was included in base.js as an orignal // way to do "debug-mode" development. The dependency system can sometimes // be confusing, as can the debug DOM loader's asyncronous nature. // // With the DOM loader, a call to goog.require() is not blocking -- the // script will not load until some point after the current script. If a // namespace is needed at runtime, it needs to be defined in a previous // script, or loaded via require() with its registered dependencies. // User-defined namespaces may need their own deps file. See http://go/js_deps, // http://go/genjsdeps, or, externally, DepsWriter. // http://code.google.com/closure/library/docs/depswriter.html // // Because of legacy clients, the DOM loader can't be easily removed from // base.js. Work is being done to make it disableable or replaceable for // different environments (DOM-less JavaScript interpreters like Rhino or V8, // for example). See bootstrap/ for more information. /** * @define {boolean} Whether to enable the debug loader. * * If enabled, a call to goog.require() will attempt to load the namespace by * appending a script tag to the DOM (if the namespace has been registered). * * If disabled, goog.require() will simply assert that the namespace has been * provided (and depend on the fact that some outside tool correctly ordered * the script). */ goog.ENABLE_DEBUG_LOADER = true; /** * Implements a system for the dynamic resolution of dependencies * that works in parallel with the BUILD system. Note that all calls * to goog.require will be stripped by the JSCompiler when the * --closure_pass option is used. * @see goog.provide * @param {string} name Namespace to include (as was given in goog.provide()) * in the form "goog.package.part". */ goog.require = function(name) { // if the object already exists we do not need do do anything // TODO(arv): If we start to support require based on file name this has // to change // TODO(arv): If we allow goog.foo.* this has to change // TODO(arv): If we implement dynamic load after page load we should probably // not remove this code for the compiled output if (!COMPILED) { if (goog.isProvided_(name)) { return; } if (goog.ENABLE_DEBUG_LOADER) { var path = goog.getPathFromDeps_(name); if (path) { goog.included_[path] = true; goog.writeScripts_(); return; } } var errorMessage = 'goog.require could not find: ' + name; if (goog.global.console) { goog.global.console['error'](errorMessage); } throw Error(errorMessage); } }; /** * Path for included scripts * @type {string} */ goog.basePath = ''; /** * A hook for overriding the base path. * @type {string|undefined} */ goog.global.CLOSURE_BASE_PATH; /** * Whether to write out Closure's deps file. By default, * the deps are written. * @type {boolean|undefined} */ goog.global.CLOSURE_NO_DEPS; /** * A function to import a single script. This is meant to be overridden when * Closure is being run in non-HTML contexts, such as web workers. It's defined * in the global scope so that it can be set before base.js is loaded, which * allows deps.js to be imported properly. * * The function is passed the script source, which is a relative URI. It should * return true if the script was imported, false otherwise. */ goog.global.CLOSURE_IMPORT_SCRIPT; /** * Null function used for default values of callbacks, etc. * @return {void} Nothing. */ goog.nullFunction = function() {}; /** * The identity function. Returns its first argument. * * @param {*=} opt_returnValue The single value that will be returned. * @param {...*} var_args Optional trailing arguments. These are ignored. * @return {?} The first argument. We can't know the type -- just pass it along * without type. * @deprecated Use goog.functions.identity instead. */ goog.identityFunction = function(opt_returnValue, var_args) { return opt_returnValue; }; /** * When defining a class Foo with an abstract method bar(), you can do: * * Foo.prototype.bar = goog.abstractMethod * * Now if a subclass of Foo fails to override bar(), an error * will be thrown when bar() is invoked. * * Note: This does not take the name of the function to override as * an argument because that would make it more difficult to obfuscate * our JavaScript code. * * @type {!Function} * @throws {Error} when invoked to indicate the method should be * overridden. */ goog.abstractMethod = function() { throw Error('unimplemented abstract method'); }; /** * Adds a {@code getInstance} static method that always return the same instance * object. * @param {!Function} ctor The constructor for the class to add the static * method to. */ goog.addSingletonGetter = function(ctor) { ctor.getInstance = function() { if (ctor.instance_) { return ctor.instance_; } if (goog.DEBUG) { // NOTE: JSCompiler can't optimize away Array#push. goog.instantiatedSingletons_[goog.instantiatedSingletons_.length] = ctor; } return ctor.instance_ = new ctor; }; }; /** * All singleton classes that have been instantiated, for testing. Don't read * it directly, use the {@code goog.testing.singleton} module. The compiler * removes this variable if unused. * @type {!Array.} * @private */ goog.instantiatedSingletons_ = []; if (!COMPILED && goog.ENABLE_DEBUG_LOADER) { /** * Object used to keep track of urls that have already been added. This * record allows the prevention of circular dependencies. * @type {Object} * @private */ goog.included_ = {}; /** * This object is used to keep track of dependencies and other data that is * used for loading scripts * @private * @type {Object} */ goog.dependencies_ = { pathToNames: {}, // 1 to many nameToPath: {}, // 1 to 1 requires: {}, // 1 to many // used when resolving dependencies to prevent us from // visiting the file twice visited: {}, written: {} // used to keep track of script files we have written }; /** * Tries to detect whether is in the context of an HTML document. * @return {boolean} True if it looks like HTML document. * @private */ goog.inHtmlDocument_ = function() { var doc = goog.global.document; return typeof doc != 'undefined' && 'write' in doc; // XULDocument misses write. }; /** * Tries to detect the base path of the base.js script that bootstraps Closure * @private */ goog.findBasePath_ = function() { if (goog.global.CLOSURE_BASE_PATH) { goog.basePath = goog.global.CLOSURE_BASE_PATH; return; } else if (!goog.inHtmlDocument_()) { return; } var doc = goog.global.document; var scripts = doc.getElementsByTagName('script'); // Search backwards since the current script is in almost all cases the one // that has base.js. for (var i = scripts.length - 1; i >= 0; --i) { var src = scripts[i].src; var qmark = src.lastIndexOf('?'); var l = qmark == -1 ? src.length : qmark; if (src.substr(l - 7, 7) == 'base.js') { goog.basePath = src.substr(0, l - 7); return; } } }; /** * Imports a script if, and only if, that script hasn't already been imported. * (Must be called at execution time) * @param {string} src Script source. * @private */ goog.importScript_ = function(src) { var importScript = goog.global.CLOSURE_IMPORT_SCRIPT || goog.writeScriptTag_; if (!goog.dependencies_.written[src] && importScript(src)) { goog.dependencies_.written[src] = true; } }; /** * The default implementation of the import function. Writes a script tag to * import the script. * * @param {string} src The script source. * @return {boolean} True if the script was imported, false otherwise. * @private */ goog.writeScriptTag_ = function(src) { if (goog.inHtmlDocument_()) { var doc = goog.global.document; // If the user tries to require a new symbol after document load, // something has gone terribly wrong. Doing a document.write would // wipe out the page. if (doc.readyState == 'complete') { // Certain test frameworks load base.js multiple times, which tries // to write deps.js each time. If that happens, just fail silently. // These frameworks wipe the page between each load of base.js, so this // is OK. var isDeps = /\bdeps.js$/.test(src); if (isDeps) { return false; } else { throw Error('Cannot write "' + src + '" after document load'); } } doc.write( '