picturefill-rails 0.1.0 → 0.2.1

data/vendor/assets/javascripts/jquery-picture.min.js

@@ -0,0 +1,18 @@
+/**
+ * jQuery Picture
+ * http://jquerypicture.com
+ * http://github.com/Abban/jQuery-Picture
+ * 
+ * May 2012
+ * 
+ * @version 0.9
+ * @author Abban Dunne http://abandon.ie
+ * @license MIT
+ * 
+ * jQuery Picture is a plugin to add support for responsive images to your layouts.
+ * It supports both figure elements with some custom data attributes and the new
+ * proposed picture format. This plugin will be made redundant when the format is
+ * approved and implemented by browsers. Lets hope that happens soon. In the meantime
+ * this plugin will be kept up to date with latest developments.
+ * 
+ */(function(e){e.fn.picture=function(t){var n={container:null},r=e.extend({},n,t);this.each(function(){function a(o){if(o)if(s.get(0).tagName.toLowerCase()=="figure"){var a=s.data();e.each(a,function(e){var n;n=e.replace(/[^\d.]/g,"");n&&t.push(n)})}else s.find("source").each(function(){var n,r;n=e(this).attr("media");if(n){r=n.replace(/[^\d.]/g,"");t.push(r)}});var c=0;r.container==null?n=e(window).width()*u:n=e(r.container).width()*u;e.each(t,function(e,t){parseInt(n)>=parseInt(t)&&parseInt(c)<=parseInt(t)&&(c=t)});if(i!==c){i=c;s.get(0).tagName.toLowerCase()=="figure"?l():f()}}function f(){var t=new Object;s.find("source").each(function(){var n,r,i;n=e(this).attr("media");r=e(this).attr("src");n?i=n.replace(/[^\d.]/g,""):i=0;t[i]=r});if(s.find("img").length==0){var n='<img src="'+t[i]+'" style="'+s.attr("style")+'" alt="'+s.attr("alt")+'">';s.find("a").length==0?s.append(n):s.find("a").append(n)}else s.find("img").attr("src",t[i])}function l(){var t=new Object,n=s.data();e.each(n,function(e,n){var r;r=e.replace(/[^\d.]/g,"");r||(r=0);t[r]=n});if(s.find("img").length==0){var r='<img src="'+t[i]+'" alt="'+s.attr("title")+'">';s.find("a").length==0?s.prepend(r):s.find("a").prepend(r)}else s.find("img").attr("src",t[i])}var t=new Array,n,i,s,o,u=1;window.devicePixelRatio!==undefined&&(u=window.devicePixelRatio);s=e(this);a(!0);o=!1;e(window).resize(function(){o!==!1&&clearTimeout(o);o=setTimeout(a,200)})})}})(jQuery);

data/vendor/assets/javascripts/picturefill.js

@@ -0,0 +1,60 @@
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
+
+(function( w ){
+	
+	// Enable strict mode
+	"use strict";
+
+	w.picturefill = function() {
+		var ps = w.document.getElementsByTagName( "div" );
+		
+		// Loop the pictures
+		for( var i = 0, il = ps.length; i < il; i++ ){
+			if( ps[ i ].getAttribute( "data-picture" ) !== null ){
+
+				var sources = ps[ i ].getElementsByTagName( "div" ),
+					matches = [];
+			
+				// See if which sources match
+				for( var j = 0, jl = sources.length; j < jl; j++ ){
+					var media = sources[ j ].getAttribute( "data-media" );
+					// if there's no media specified, OR w.matchMedia is supported 
+					if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
+						matches.push( sources[ j ] );
+					}
+				}
+
+			// Find any existing img element in the picture element
+			var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+			if( matches.length ){			
+				if( !picImg ){
+					picImg = w.document.createElement( "img" );
+					picImg.alt = ps[ i ].getAttribute( "data-alt" );
+					ps[ i ].appendChild( picImg );
+				}
+				
+				picImg.src =  matches.pop().getAttribute( "data-src" );
+			}
+			else if( picImg ){
+				ps[ i ].removeChild( picImg );
+			}
+		}
+		}
+	};
+	
+	// Run on resize and domready (w.load as a fallback)
+	if( w.addEventListener ){
+		w.addEventListener( "resize", w.picturefill, false );
+		w.addEventListener( "DOMContentLoaded", function(){
+			w.picturefill();
+			// Run once only
+			w.removeEventListener( "load", w.picturefill, false );
+		}, false );
+		w.addEventListener( "load", w.picturefill, false );
+	}
+	else if( w.attachEvent ){
+		w.attachEvent( "onload", w.picturefill );
+	}
+	
+}( this ));

data/vendor/assets/javascripts/picturefill/matchmedia.js

@@ -0,0 +1,2 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);

data/vendor/assets/javascripts/srcset.js

@@ -0,0 +1,755 @@
+/*!
+ * jsUri v1.1.1
+ * https://github.com/derek-watson/jsUri
+ *
+ * Copyright 2011, Derek Watson
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * Includes parseUri regular expressions
+ * http://blog.stevenlevithan.com/archives/parseuri
+ * Copyright 2007, Steven Levithan
+ * Released under the MIT license.
+ *
+ * Date: Mon Nov 14 20:06:34 2011 -0800
+ */
+    
+
+var Query = function (queryString) {
+
+    // query string parsing, parameter manipulation and stringification
+
+    'use strict';
+
+    var // parseQuery(q) parses the uri query string and returns a multi-dimensional array of the components
+        parseQuery = function (q) {
+            var arr = [], i, ps, p, keyval;
+
+            if (typeof (q) === 'undefined' || q === null || q === '') {
+                return arr;
+            }
+
+            if (q.indexOf('?') === 0) {
+                q = q.substring(1);
+            }
+
+            ps = q.toString().split(/[&;]/);
+
+            for (i = 0; i < ps.length; i++) {
+                p = ps[i];
+                keyval = p.split('=');
+                arr.push([keyval[0], keyval[1]]);
+            }
+
+            return arr;
+        },
+
+        params = parseQuery(queryString),
+
+        // toString() returns a string representation of the internal state of the object
+        toString = function () {
+            var s = '', i, param;
+            for (i = 0; i < params.length; i++) {
+                param = params[i];
+                if (s.length > 0) {
+                    s += '&';
+                }
+                s += param.join('=');
+            }
+            return s.length > 0 ? '?' + s : s;
+        },
+
+        decode = function (s) {
+            s = decodeURIComponent(s);
+            s = s.replace('+', ' ');
+            return s;
+        },
+
+        // getParamValues(key) returns the first query param value found for the key 'key'
+        getParamValue = function (key) {
+            var param, i;
+            for (i = 0; i < params.length; i++) {
+                param = params[i];
+                if (decode(key) === decode(param[0])) {
+                    return param[1];
+                }
+            }
+        },
+
+        // getParamValues(key) returns an array of query param values for the key 'key'
+        getParamValues = function (key) {
+            var arr = [], i, param;
+            for (i = 0; i < params.length; i++) {
+                param = params[i];
+                if (decode(key) === decode(param[0])) {
+                    arr.push(param[1]);
+                }
+            }
+            return arr;
+        },
+
+        // deleteParam(key) removes all instances of parameters named (key)
+        // deleteParam(key, val) removes all instances where the value matches (val)
+        deleteParam = function (key, val) {
+
+            var arr = [], i, param, keyMatchesFilter, valMatchesFilter;
+
+            for (i = 0; i < params.length; i++) {
+
+                param = params[i];
+                keyMatchesFilter = decode(param[0]) === decode(key);
+                valMatchesFilter = decode(param[1]) === decode(val);
+
+                if ((arguments.length === 1 && !keyMatchesFilter) || (arguments.length === 2 && !keyMatchesFilter && !valMatchesFilter)) {
+                    arr.push(param);
+                }
+            }
+
+            params = arr;
+
+            return this;
+        },
+
+        // addParam(key, val) Adds an element to the end of the list of query parameters
+        // addParam(key, val, index) adds the param at the specified position (index)
+        addParam = function (key, val, index) {
+
+            if (arguments.length === 3 && index !== -1) {
+                index = Math.min(index, params.length);
+                params.splice(index, 0, [key, val]);
+            } else if (arguments.length > 0) {
+                params.push([key, val]);
+            }
+            return this;
+        },
+
+        // replaceParam(key, newVal) deletes all instances of params named (key) and replaces them with the new single value
+        // replaceParam(key, newVal, oldVal) deletes only instances of params named (key) with the value (val) and replaces them with the new single value
+        // this function attempts to preserve query param ordering
+        replaceParam = function (key, newVal, oldVal) {
+
+            var index = -1, i, param;
+
+            if (arguments.length === 3) {
+                for (i = 0; i < params.length; i++) {
+                    param = params[i];
+                    if (decode(param[0]) === decode(key) && decodeURIComponent(param[1]) === decode(oldVal)) {
+                        index = i;
+                        break;
+                    }
+                }
+                deleteParam(key, oldVal).addParam(key, newVal, index);
+            } else {
+                for (i = 0; i < params.length; i++) {
+                    param = params[i];
+                    if (decode(param[0]) === decode(key)) {
+                        index = i;
+                        break;
+                    }
+                }
+                deleteParam(key);
+                addParam(key, newVal, index);
+            }
+            return this;
+        };
+
+    // public api
+    return {
+        getParamValue: getParamValue,
+        getParamValues: getParamValues,
+        deleteParam: deleteParam,
+        addParam: addParam,
+        replaceParam: replaceParam,
+        
+        toString: toString
+    };
+};
+
+var Uri = function (uriString) {
+
+    // uri string parsing, attribute manipulation and stringification
+
+    'use strict';
+
+    /*global Query: true */
+    /*jslint regexp: false, plusplus: false */
+
+    var strictMode = false,
+
+        // parseUri(str) parses the supplied uri and returns an object containing its components
+        parseUri = function (str) {
+
+            /*jslint unparam: true */
+            var parsers = {
+                    strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
+                    loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
+                },
+                keys = ["source", "protocol", "authority", "userInfo", "user", "password", "host", "port", "relative", "path", "directory", "file", "query", "anchor"],
+                q = {
+                    name: "queryKey",
+                    parser: /(?:^|&)([^&=]*)=?([^&]*)/g
+                },
+                m = parsers[strictMode ? "strict" : "loose"].exec(str),
+                uri = {},
+                i = 14;
+
+            while (i--) {
+                uri[keys[i]] = m[i] || "";
+            }
+
+            uri[q.name] = {};
+            uri[keys[12]].replace(q.parser, function ($0, $1, $2) {
+                if ($1) {
+                    uri[q.name][$1] = $2;
+                }
+            });
+
+            return uri;
+        },
+
+        uriParts = parseUri(uriString || ''),
+
+        queryObj = new Query(uriParts.query),
+
+
+        /*
+            Basic get/set functions for all properties
+        */
+
+        protocol = function (val) {
+            if (typeof val !== 'undefined') {
+                uriParts.protocol = val;
+            }
+            return uriParts.protocol;
+        },
+
+        hasAuthorityPrefixUserPref = null,
+
+        // hasAuthorityPrefix: if there is no protocol, the leading // can be enabled or disabled
+        hasAuthorityPrefix = function (val) {
+
+            if (typeof val !== 'undefined') {
+                hasAuthorityPrefixUserPref = val;
+            }
+
+            if (hasAuthorityPrefixUserPref === null) {
+                return (uriParts.source.indexOf('//') !== -1);
+            } else {
+                return hasAuthorityPrefixUserPref;
+            }
+        },
+
+        userInfo = function (val) {
+            if (typeof val !== 'undefined') {
+                uriParts.userInfo = val;
+            }
+            return uriParts.userInfo;
+        },
+
+        host = function (val) {
+            if (typeof val !== 'undefined') {
+                uriParts.host = val;
+            }
+            return uriParts.host;
+        },
+
+        port = function (val) {
+            if (typeof val !== 'undefined') {
+                uriParts.port = val;
+            }
+            return uriParts.port;
+        },
+
+        path = function (val) {
+            if (typeof val !== 'undefined') {
+                uriParts.path = val;
+            }
+            return uriParts.path;
+        },
+
+        query = function (val) {
+            if (typeof val !== 'undefined') {
+                queryObj = new Query(val);
+            }
+            return queryObj;
+        },
+
+        anchor = function (val) {
+            if (typeof val !== 'undefined') {
+                uriParts.anchor = val;
+            }
+            return uriParts.anchor;
+        },
+
+
+        /*
+            Fluent setters for Uri uri properties
+        */
+
+        setProtocol = function (val) {
+            protocol(val);
+            return this;
+        },
+
+        setHasAuthorityPrefix = function (val) {
+            hasAuthorityPrefix(val);
+            return this;
+        },
+
+        setUserInfo = function (val) {
+            userInfo(val);
+            return this;
+        },
+
+        setHost = function (val) {
+            host(val);
+            return this;
+        },
+
+        setPort = function (val) {
+            port(val);
+            return this;
+        },
+
+        setPath = function (val) {
+            path(val);
+            return this;
+        },
+
+        setQuery = function (val) {
+            query(val);
+            return this;
+        },
+
+        setAnchor = function (val) {
+            anchor(val);
+            return this;
+        },
+
+        /*
+            Query method wrappers
+        */
+        getQueryParamValue = function (key) {
+            return query().getParamValue(key);
+        },
+
+        getQueryParamValues = function (key) {
+            return query().getParamValues(key);
+        },
+
+        deleteQueryParam = function (key, val) {
+            if (arguments.length === 2) {
+                query().deleteParam(key, val);
+            } else {
+                query().deleteParam(key);
+            }
+
+            return this;
+        },
+
+        addQueryParam = function (key, val, index) {
+            if (arguments.length === 3) {
+                query().addParam(key, val, index);
+            } else {
+                query().addParam(key, val);
+            }
+            return this;
+        },
+
+        replaceQueryParam = function (key, newVal, oldVal) {
+            if (arguments.length === 3) {
+                query().replaceParam(key, newVal, oldVal);
+            } else {
+                query().replaceParam(key, newVal);
+            }
+
+            return this;
+        },
+
+        /*
+            Serialization
+        */
+
+        // toString() stringifies the current state of the uri
+        toString = function () {
+
+            var s = '',
+                is = function (s) {
+                    return (s !== null && s !== '');
+                };
+
+            if (is(protocol())) {
+                s += protocol();
+                if (protocol().indexOf(':') !== protocol().length - 1) {
+                    s += ':';
+                }
+                s += '//';
+            } else {
+                if (hasAuthorityPrefix() && is(host())) {
+                    s += '//';
+                }
+            }
+
+            if (is(userInfo()) && is(host())) {
+                s += userInfo();
+                if (userInfo().indexOf('@') !== userInfo().length - 1) {
+                    s += '@';
+                }
+            }
+
+            if (is(host())) {
+                s += host();
+                if (is(port())) {
+                    s += ':' + port();
+                }
+            }
+
+            if (is(path())) {
+                s += path();
+            } else {
+                if (is(host()) && (is(query().toString()) || is(anchor()))) {
+                    s += '/';
+                }
+            }
+            if (is(query().toString())) {
+                if (query().toString().indexOf('?') !== 0) {
+                    s += '?';
+                }
+                s += query().toString();
+            }
+
+            if (is(anchor())) {
+                if (anchor().indexOf('#') !== 0) {
+                    s += '#';
+                }
+                s += anchor();
+            }
+
+            return s;
+        },
+
+        /*
+            Cloning
+        */
+
+        // clone() returns a new, identical Uri instance
+        clone = function () {
+            return new Uri(toString());
+        };
+
+    // public api
+    return {
+
+        protocol: protocol,
+        hasAuthorityPrefix: hasAuthorityPrefix,
+        userInfo: userInfo,
+        host: host,
+        port: port,
+        path: path,
+        query: query,
+        anchor: anchor,
+        
+        setProtocol: setProtocol,
+        setHasAuthorityPrefix: setHasAuthorityPrefix,
+        setUserInfo: setUserInfo,
+        setHost: setHost,
+        setPort: setPort,
+        setPath: setPath,
+        setQuery: setQuery,
+        setAnchor: setAnchor,
+        
+        getQueryParamValue: getQueryParamValue,
+        getQueryParamValues: getQueryParamValues,
+        deleteQueryParam: deleteQueryParam,
+        addQueryParam: addQueryParam,
+        replaceQueryParam: replaceQueryParam,
+        
+        toString: toString,
+        clone: clone
+    };
+};
+
+/* add compatibility for users of jsUri <= 1.1.1 */
+var jsUri = Uri;
+
+(function(exports) {
+
+  // Directly from http://stackoverflow.com/questions/3809401/what-is-a-good-regular-expression-to-match-a-url:
+  var urlRegex = '[-a-zA-Z0-9@:%_+.~#?&//=]*';
+  var imageFragmentRegex = '\\s*(' + urlRegex + ')\\s*([0-9xwh.\\s]*)';
+  var srcsetRegex = '(' + imageFragmentRegex + ',?)+';
+
+  var IMAGE_FRAGMENT_REGEXP = new RegExp(imageFragmentRegex);
+  var SRCSET_REGEXP = new RegExp(srcsetRegex);
+  var INT_REGEXP = /^[0-9]+$/;
+
+  function SrcsetInfo(options) {
+    this.imageCandidates = [];
+    this.srcValue = options.src;
+    this.srcsetValue = options.srcset;
+    this.isValid = true;
+    this.error = '';
+
+    this._parse(this.srcsetValue);
+    if (!this.isValid) {
+      console.error('Error: ' + this.error);
+    }
+  }
+
+  /**
+   * Parses the string that goes srcset="here".
+   *
+   * @returns [{url: _, x: _, w: _, h:_}, ...]
+   */
+  SrcsetInfo.prototype._parse = function() {
+    // Get image candidate fragments from srcset string.
+    var candidateStrings = this.srcsetValue.split(',');
+    // Iterate through the candidates.
+    for (var i = 0; i < candidateStrings.length; i++) {
+      var candidate = candidateStrings[i];
+      // Get all details for the candidate.
+      var match = candidate.match(IMAGE_FRAGMENT_REGEXP);
+      var src = match[1];
+      var desc = this._parseDescriptors(match[2]);
+      var imageInfo = new ImageInfo({
+        src: match[1],
+        x: desc.x,
+        w: desc.w,
+        h: desc.h
+      });
+      this._addCandidate(imageInfo);
+    }
+    // If there's a srcValue, add it to the candidates too.
+    if (this.srcValue) {
+      this._addCandidate(new ImageInfo({src: this.srcValue}));
+    }
+  };
+
+  /**
+   * Add an image candidate, unless it's a dupe of something that exists already.
+   */
+  SrcsetInfo.prototype._addCandidate = function(imageInfo) {
+    for (var j = 0; j < this.imageCandidates.length; j++) {
+      var existingCandidate = this.imageCandidates[j];
+      if (existingCandidate.x == imageInfo.x &&
+          existingCandidate.w == imageInfo.w &&
+          existingCandidate.h == imageInfo.h) {
+        // It's a dupe, so return early without adding the image candidate.
+        return;
+      }
+    }
+    this.imageCandidates.push(imageInfo);
+  };
+
+  SrcsetInfo.prototype._parseDescriptors = function(descString) {
+    var descriptors = descString.split(/\s/);
+    var out = {};
+    for (var i = 0; i < descriptors.length; i++) {
+      var desc = descriptors[i];
+      if (desc.length > 0) {
+        var lastChar = desc[desc.length-1];
+        var value = desc.substring(0, desc.length-1);
+        var intVal = parseInt(value, 10);
+        var floatVal = parseFloat(value);
+        if (value.match(INT_REGEXP) && lastChar === 'w') {
+          out[lastChar] = intVal;
+        } else if (value.match(INT_REGEXP) && lastChar =='h') {
+          out[lastChar] = intVal;
+        } else if (!isNaN(floatVal) && lastChar == 'x') {
+          out[lastChar] = floatVal;
+        } else {
+          this.error = 'Invalid srcset descriptor found in "' + desc + '".';
+          this.isValid = false;
+        }
+      }
+    }
+    return out;
+  };
+
+  function ImageInfo(options) {
+    this.src = options.src;
+    this.w = options.w || Infinity;
+    this.h = options.h || Infinity;
+    this.x = options.x || 1;
+  }
+
+  exports.SrcsetInfo = SrcsetInfo;
+
+})(window);
+
+(function(exports) {
+
+  function ViewportInfo() {
+    this.w = null;
+    this.h = null;
+    this.x = null;
+  }
+
+  /**
+   * Calculate viewport information: viewport width, height and
+   * devicePixelRatio.
+   */
+  ViewportInfo.prototype.compute = function() {
+    this.w = window.innerWidth;
+    this.h = window.innerHeight;
+    this.x = window.devicePixelRatio;
+  };
+
+  /**
+   * Set a fake viewport for testing purposes.
+   */
+  ViewportInfo.prototype.setForTesting = function(options) {
+    this.w = options.w;
+    this.h = options.h;
+    this.x = options.x;
+  };
+
+  /**
+   * Direct implementation of "processing the image candidates":
+   * http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates
+   *
+   * @returns {ImageInfo} The best image of the possible candidates.
+   */
+  ViewportInfo.prototype.getBestImage = function(srcsetInfo) {
+    var images = srcsetInfo.imageCandidates.slice(0);
+    // Get the largest width.
+    var largestWidth = this._getBestCandidateIf(images, function(a, b) { return a.w > b.w; });
+    // Remove all candidates with widths less than client width.
+    this._removeCandidatesIf(images, function(a) { return a.w < this.w; }.bind(this));
+    // If none are left, keep the one with largest width.
+    if (images.length === 0) { images = [largestWidth]; }
+
+    // Get the largest height.
+    var largestHeight = this._getBestCandidateIf(images, function(a, b) { return a.h > b.h; });
+    // Remove all candidates with heights less than client height.
+    this._removeCandidatesIf(images, function(a) { return a.h < this.h; }.bind(this));
+    // If none are left, keep one with largest height.
+    if (images.length === 0) { images = [largestHeight]; }
+
+    // Get the largest pixel density.
+    var largestPxDensity = this._getBestCandidateIf(images, function(a, b) { return a.x > b.x; });
+    // Remove all candidates with pxdensity less than client pxdensity.
+    this._removeCandidatesIf(images, function(a) { return a.x < this.x; }.bind(this));
+    // If none are left, keep one with largest pixel density.
+    if (images.length === 0) { images = [largestPxDensity]; }
+
+
+    // Get the smallest width.
+    var smallestWidth = this._getBestCandidateIf(images, function(a, b) { return a.w < b.w; });
+    // Remove all candidates with width greater than it.
+    this._removeCandidatesIf(images, function(a, b) { return a.w > smallestWidth.w; });
+
+    // Get the smallest height.
+    var smallestHeight = this._getBestCandidateIf(images, function(a, b) { return a.h < b.h; });
+    // Remove all candidates with height greater than it.
+    this._removeCandidatesIf(images, function(a, b) { return a.h > smallestWidth.h; });
+
+    // Get the smallest pixel density.
+    var smallestPxDensity = this._getBestCandidateIf(images, function(a, b) { return a.x < b.x; });
+    // Remove all candidates with pixel density less than smallest px density.
+    this._removeCandidatesIf(images, function(a, b) { return a.x > smallestPxDensity.x; });
+
+    return images[0];
+  };
+
+  ViewportInfo.prototype._getBestCandidateIf = function(images, criteriaFn) {
+    var bestCandidate = images[0];
+    for (var i = 0; i < images.length; i++) {
+      var candidate = images[i];
+      if (criteriaFn(candidate, bestCandidate)) {
+        bestCandidate = candidate;
+      }
+    }
+    return bestCandidate;
+  };
+
+  ViewportInfo.prototype._removeCandidatesIf = function(images, criteriaFn) {
+    for (var i = images.length - 1; i >= 0; i--) {
+      var candidate = images[i];
+      if (criteriaFn(candidate)) {
+        // Remove it.
+        images.splice(i, 1);
+      }
+    }
+    return images;
+  };
+
+  /**
+   * Get the best image from the set of image candidates, based on the viewport
+   * information.
+   *
+   * The best image should fit within the devicePixelRatio (x), and be as close
+   * to fitting the viewport width and height as possible.
+   *
+   * @returns {ImageInfo} The best image of the possible candidates.
+   */
+  ViewportInfo.prototype.getBestImage2 = function(srcsetInfo) {
+    var bestMatch = null;
+    var images = srcsetInfo.imageCandidates;
+    for (var i = 0; i < images.length; i++) {
+      var imageCandidate = images[i];
+      var bestMatchX = bestMatch ? bestMatch.x : 0;
+      // If candidate DPR is at least as large as the best, and less than or
+      // equal to client DPR, evaluate it further.
+      if (bestMatchX <= imageCandidate.x && imageCandidate.x <= this.x) {
+        // If there's no image to compare against, set it to the first one.
+        if (bestMatch === null) {
+          bestMatch = imageCandidate;
+          continue;
+        }
+        // If the width or height bounds are tighter with this candidate, it's
+        // a better match.
+        if (this.w <= imageCandidate.w && imageCandidate.w <= bestMatch.w) {
+          bestMatch = imageCandidate;
+        }
+        // Ignore height for now.
+      }
+    }
+    return bestMatch;
+  };
+
+  exports.ViewportInfo = ViewportInfo;
+
+})(window);
+
+(function(exports) {
+
+  function isSrcsetImplemented() {
+    var img = new Image();
+    return 'srcset' in img;
+  }
+
+  function main() {
+    // If the browser supports @srcset natively, don't do any polyfill.
+    if (isSrcsetImplemented()) {
+      return;
+    }
+
+    // Get the user agent's capabilities (viewport width, viewport height, dPR).
+    var viewportInfo = new ViewportInfo();
+    viewportInfo.compute();
+    // Go through all images on the page.
+    var images = document.querySelectorAll('img');
+    // If they have srcset attributes, apply JS to handle that correctly.
+    for (var i = 0; i < images.length; i++) {
+      var img = images[i];
+      // Parse the srcset from the image element.
+      var srcset = img.attributes.srcset;
+      if (srcset) {
+        var srcsetInfo = new SrcsetInfo({src: img.src,
+                                      srcset: srcset.textContent});
+        // Go through all the candidates, pick the best one that matches.
+        var imageInfo = viewportInfo.getBestImage(srcsetInfo);
+        // TODO: consider using -webkit-image-set instead (if available).
+        // Replace the <img src> with this image.
+        img.src = imageInfo.src;
+        // Scale the image if necessary (ie. x != 1).
+        img.style.webkitTransform = 'scale(' + (1/imageInfo.x) + ')';
+        img.style.webkitTransformOrigin = '0 0';
+      }
+    }
+  }
+
+  window.addEventListener('DOMContentLoaded', main);
+
+})(window);