From d02a541e6c312321e8516683796f21355d6a117c Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Tue, 22 Jul 2014 17:39:18 +0200 Subject: [PATCH] Added tests, fixed some bugs --- Gruntfile.js | 17 +++- bower.json | 2 +- dist/picturePolyfill.min.js | 4 +- src/picturePolyfill.js | 56 ++++++---- test/picturePolyfill.qunit.js | 186 +++++++++++++++++++--------------- 5 files changed, 161 insertions(+), 104 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 4fee459..3b217b3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ module.exports = function(grunt) { grunt.initConfig({ // Metadata. meta: { - version: '4.1.0' + version: '4.1.1' }, banner: '/*! picturePolyfill - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + @@ -24,6 +24,17 @@ module.exports = function(grunt) { }, jshint: { options: { + es3: true, + devel: false, + node: false, + smarttabs: true, + multistr: true, + nonew: true, + bitwise: true, + passfail: true, + evil: true, + forin: true, + onevar: false, curly: true, eqeqeq: true, immed: true, @@ -36,6 +47,10 @@ module.exports = function(grunt) { boss: true, eqnull: true, browser: true, + laxbreak: false, + noempty: true, + nonstandard: true, + trailing: false, globals: { jQuery: true } diff --git a/bower.json b/bower.json index 14c0cc8..2776b60 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "picturePolyfill", - "version": "4.1.0", + "version": "4.1.1", "main": "picturePolyfill.js", "ignore": [ ".idea", diff --git a/dist/picturePolyfill.min.js b/dist/picturePolyfill.min.js index cd64c3d..93c075c 100644 --- a/dist/picturePolyfill.min.js +++ b/dist/picturePolyfill.min.js @@ -1,4 +1,4 @@ -/*! picturePolyfill - v4.1.0 - 2014-07-22 +/*! picturePolyfill - v4.1.1 - 2014-07-22 * https://github.com/verlok/picturePolyfill/ * Copyright (c) 2014 Andrea "verlok" Verlicchi; Licensed MIT */ -var picturePolyfill=function(a){"use strict";var b,c,d,e=100,f=!1;return{_getAttrs:function(a,b){for(var c,d,e={},f=0,g=b.length;g>f;f+=1)c=b[f],d=a.getAttribute(c),d&&(e[c]=d);return e},_getAttrsList:function(a){for(var b=[],c=0,d=a.attributes,e=d.length;e>c;c++)b.push(d.item(c).nodeName);return b},_getSrcsetArray:function(a){for(var b,c,d,e=[],f=a.split(","),g=0,h=f.length;h>g;g+=1)b=f[g].trim().split(" "),d=1===b.length?1:parseFloat(b[b.length-1],10),c=b[0],e.push({pxr:d,src:c});return e.sort(function(a,b){var c=a.pxr,d=b.pxr;return d>c?-1:c>d?1:0})},_getSrcFromArray:function(a,b){var c=0,d=a.length,e=-1;if(!d)return null;do(a[c].pxr>=b||c===d-1)&&(e=c),c+=1;while(!(e>-1||c>=d));return a[e].src},_getSrcsetFromData:function(b){for(var c,d,e,f=0,g=b.length;g>f;f+=1)if(c=b[f],d=c.media,e=c.srcset,!d||a.matchMedia(d).matches)return e?e:[{pxr:1,src:c.src}];return null},_setImgAttributes:function(a,b){function c(a,b,c){a.getAttribute(b)!==c&&a.setAttribute(b,c)}var d,e,f,g,h,i,j,k=a.getElementsByTagName("img");return 0===k.length?!1:(d=k[0],e=d.getAttribute("data-original-src"),f=d.getAttribute("data-original-srcset"),g=b.src,h=b.src,e||(c(d,"data-original-src",d.getAttribute("src")),c(d,"data-original-srcset",d.getAttribute("srcset"))),g||h?(i=g,j=h):(i=e,j=f),c(d,"src",i),void c(d,"srcset",j))},_getSourcesData:function(a){for(var b,c,d=[],e=a.getElementsByTagName("source"),f=0,g=e.length;g>f;f+=1)b=e[f],c=this._getAttrs(b,this._getAttrsList(b)),c.srcset&&(c.srcset=this._getSrcsetArray(c.srcset)),d.push(c);return d},_addListeners:function(){function b(){picturePolyfill.parse(document)}function c(){clearTimeout(d),d=setTimeout(b,e)}return!this.isUseful||f?!1:(a.addEventListener?(a.addEventListener("resize",c),a.addEventListener("DOMContentLoaded",function(){b(),a.removeEventListener("load",b)}),a.addEventListener("load",b)):a.attachEvent&&(a.attachEvent("onload",b),a.attachEvent("onresize",c)),void(f=!0))},initialize:function(){this._pxRatio=a.devicePixelRatio||1,this._mqSupport=!!a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,this.isUseful=!a.HTMLPictureElement,b=[],c=0,this._addListeners()},parse:function(a,d){var e,f,g,h,i,j,k;if(!this.isUseful)return 0;"undefined"==typeof d&&(d=!0),g=(a||document).getElementsByTagName("picture"),j=this._mqSupport;for(var l=0,m=g.length;m>l;l+=1)e=null,f=g[l],d&&(k=f.getAttribute("data-cache-index"),null!==k&&(e=b[k])),e||(e=this._getSourcesData(f),b[c]=e,f.setAttribute("data-cache-index",c),c+=1),0!==e.length&&j?(i=this._getSrcsetFromData(e),h=this._getSrcFromArray(i,this._pxRatio)):(h=f.getAttribute("data-default-src"),i=f.getAttribute("data-default-srcset")),this._setImgAttributes(f,{src:h,srcset:i,alt:f.getAttribute("data-alt")});return l}}}(window);picturePolyfill.initialize(),picturePolyfill.parse(); \ No newline at end of file +var picturePolyfill=function(a){"use strict";var b,c,d,e=100,f=!1;return{_getAttrs:function(a,b){for(var c,d,e={},f=0,g=b.length;g>f;f+=1)c=b[f],d=a.getAttribute(c),d&&(e[c]=d);return e},_getAttrsList:function(a){for(var b=[],c=0,d=a.attributes,e=d.length;e>c;c++)b.push(d.item(c).nodeName);return b},_getSrcsetArray:function(a){var b,c,d,e,f=[];if(null===a||""===a||"undefined"==typeof a)return f;e=a.split(",");for(var g=0,h=e.length;h>g;g+=1)b=e[g].trim().split(" "),d=1===b.length?1:parseFloat(b[b.length-1],10),c=b[0],f.push({pxr:d,src:c});return f.sort(function(a,b){var c=a.pxr,d=b.pxr;return d>c?-1:c>d?1:0})},_getSrcFromSrcset:function(a,b){var c,d,e=0,f=-1;if(null===a||""===a||"undefined"==typeof a)return null;c=this._getSrcsetArray(a),d=c.length;do(c[e].pxr>=b||e===d-1)&&(f=e),e+=1;while(!(f>-1||e>=d));return c[f].src},_getSrcsetFromData:function(b){for(var c,d,e,f,g=0,h=b.length;h>g;g+=1)if(c=b[g],d=c.media,f=c.srcset,e=c.src,!d||a.matchMedia(d).matches)return f?f:e?e:"";return""},_setImgAttributes:function(a,b){function c(a,b,c){a.getAttribute(b)!==c&&a.setAttribute(b,c)}var d,e,f,g,h,i,j,k=a.getElementsByTagName("img");return 0===k.length?!1:(d=k[0],e=d.getAttribute("data-original-src"),f=d.getAttribute("data-original-srcset"),g=b.src,h=b.srcset,e||(c(d,"data-original-src",d.getAttribute("src")),c(d,"data-original-srcset",d.getAttribute("srcset"))),g||h?(i=g,j=h):(i=e,j=f),c(d,"src",i),void c(d,"srcset",j))},_getSourcesData:function(a){for(var b,c,d=[],e=a.getElementsByTagName("source"),f=0,g=e.length;g>f;f+=1)b=e[f],c=this._getAttrs(b,this._getAttrsList(b)),d.push(c);return d},_addListeners:function(){function b(){picturePolyfill.parse(document)}function c(){clearTimeout(d),d=setTimeout(b,e)}return!this.isUseful||f?!1:(a.addEventListener?(a.addEventListener("resize",c),a.addEventListener("DOMContentLoaded",function(){b(),a.removeEventListener("load",b)}),a.addEventListener("load",b)):a.attachEvent&&(a.attachEvent("onload",b),a.attachEvent("onresize",c)),void(f=!0))},initialize:function(){this._pxRatio=a.devicePixelRatio||1,this._mqSupport=!!a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,this.isUseful=!a.HTMLPictureElement,b=[],c=0,this._addListeners()},parse:function(a,d){var e,f,g,h,i,j,k;if(!this.isUseful)return 0;"undefined"==typeof d&&(d=!0),g=(a||document).getElementsByTagName("picture"),j=this._mqSupport;for(var l=0,m=g.length;m>l;l+=1)e=null,f=g[l],d&&(k=f.getAttribute("data-cache-index"),null!==k&&(e=b[k])),e||(e=this._getSourcesData(f),b[c]=e,f.setAttribute("data-cache-index",c),c+=1),0!==e.length&&j?(i=this._getSrcsetFromData(e),h=this._getSrcFromSrcset(i,this._pxRatio)):(h=f.getAttribute("data-default-src"),i=f.getAttribute("data-default-srcset")),this._setImgAttributes(f,{src:h,srcset:i,alt:f.getAttribute("data-alt")});return l}}}(window);picturePolyfill.initialize(),picturePolyfill.parse(); \ No newline at end of file diff --git a/src/picturePolyfill.js b/src/picturePolyfill.js index 59427a6..1584463 100644 --- a/src/picturePolyfill.js +++ b/src/picturePolyfill.js @@ -1,10 +1,10 @@ /* - PicturePolyfill - Responsive Images that work today (and mimic the proposed Picture element with span elements) - Author: Andrea Verlicchi - License: MIT/GPLv2 - Please "/dist/picturePolyfill.min.js" for production purposes -*/ + PicturePolyfill + Responsive Images that work today (and mimic the proposed Picture element with span elements) + Author: Andrea Verlicchi + License: MIT/GPLv2 + Please "/dist/picturePolyfill.min.js" for production purposes + */ var picturePolyfill = (function (w) { @@ -63,7 +63,13 @@ var picturePolyfill = (function (w) { source, density, ret = [], - srcSetElements = srcset.split(','); + srcSetElements; + + if (srcset === null || srcset === '' || typeof srcset === 'undefined') { + return ret; + } + + srcSetElements = srcset.split(','); for (var i = 0, len = srcSetElements.length; i < len; i += 1) { srcSetElement = srcSetElements[i].trim().split(' '); @@ -90,26 +96,33 @@ var picturePolyfill = (function (w) { }, /** - * Returns the proper src from the srcset array obtained by _getSrcsetArray + * Returns the proper src from the given srcset * Get the first valid element from passed position to the left - * @param array + * @param srcset * @param pixelRatio * @returns string || null * @private */ - _getSrcFromArray: function (array, pixelRatio) { + _getSrcFromSrcset: function (srcset, pixelRatio) { var i = 0, - len = array.length, + array, + len, breakPoint = -1; - if (!len) { + + if (srcset === null || srcset === '' || typeof srcset === 'undefined') { return null; } + + array = this._getSrcsetArray(srcset); + len = array.length; + do { if (array[i].pxr >= pixelRatio || i === len - 1) { breakPoint = i; } i += 1; } while (!(breakPoint > -1 || i >= len)); + return array[breakPoint].src; }, @@ -123,17 +136,25 @@ var picturePolyfill = (function (w) { _getSrcsetFromData: function (sourcesData) { var sourceData, media, + src, srcset; for (var i = 0, len = sourcesData.length; i < len; i += 1) { sourceData = sourcesData[i]; media = sourceData.media; srcset = sourceData.srcset; + src = sourceData.src; if (!media || w.matchMedia(media).matches) { - return (srcset) ? srcset : [{pxr: 1, src: sourceData.src}]; + if (!!srcset) { + return srcset; + } + if (!!src) { + return src; + } + return ""; } } - return null; + return ""; }, /** @@ -163,7 +184,7 @@ var picturePolyfill = (function (w) { originalImgSrc = imgEl.getAttribute('data-original-src'); originalImgSrcset = imgEl.getAttribute('data-original-srcset'); givenSrcAttribute = attributes.src; - givenSrcsetAttribute = attributes.src; + givenSrcsetAttribute = attributes.srcset; // Set original img tag's src and srcset in a data attribute if (!originalImgSrc) { @@ -200,9 +221,6 @@ var picturePolyfill = (function (w) { for (var i = 0, len = foundSources.length; i < len; i += 1) { sourceElement = foundSources[i]; sourceData = this._getAttrs(sourceElement, this._getAttrsList(sourceElement)); - if (sourceData.srcset) { - sourceData.srcset = this._getSrcsetArray(sourceData.srcset); - } sourcesData.push(sourceData); } return sourcesData; @@ -340,7 +358,7 @@ var picturePolyfill = (function (w) { } else { srcsetAttribute = this._getSrcsetFromData(sourcesData); - srcAttribute = this._getSrcFromArray(srcsetAttribute, this._pxRatio); + srcAttribute = this._getSrcFromSrcset(srcsetAttribute, this._pxRatio); } // Set the img source this._setImgAttributes(pictureElement, { diff --git a/test/picturePolyfill.qunit.js b/test/picturePolyfill.qunit.js index e85eed5..03523d2 100644 --- a/test/picturePolyfill.qunit.js +++ b/test/picturePolyfill.qunit.js @@ -1,7 +1,9 @@ /* -* TODO: Add test on readFromCache parameter of parse() -* * TODO: Test cases with and sources matching or not matching +* +* TODO: Run tests on IE8 too (scary!) +* +* TODO: Also read the srcset property on the img tag, in every test! * */ module("picturePolyfill", { @@ -30,67 +32,55 @@ test("main object is declared and exposed", function () { strictEqual(typeof window.picturePolyfill.initialize, 'function', "picturePolyfill.initialize() should be a function"); }); -test("_getSrcFromArray correct behaviour, correct data, correct calls", function () { - var srcsetArray; - // Get 1, 2 or 3 from 1x, 2x, 3x hash - srcsetArray = [ - {"pxr": 0.25, "src": "http://placehold.it/1x1"}, - {"pxr": 0.5, "src": "http://placehold.it/2x2"}, - {"pxr": 1, "src": "http://placehold.it/4x4"}, - {"pxr": 1.5, "src": "http://placehold.it/6x6"}, - {"pxr": 2, "src": "http://placehold.it/8x8"}, - {"pxr": 2.5, "src": "http://placehold.it/10x10"}, - {"pxr": 3, "src": "http://placehold.it/12x12"} - ]; +test("_getSrcFromSrcset correct behaviour, correct data, correct calls", function () { + var srcset = "http://placehold.it/1x1 0.25x, http://placehold.it/2x2 0.5x, http://placehold.it/4x4, " + + "http://placehold.it/6x6 1.5x, http://placehold.it/8x8 2x, http://placehold.it/10x10 2.5x, " + + "http://placehold.it/12x12 3x"; // Correct calls - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 1), 'http://placehold.it/4x4', "Single density element doesn't match"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 1.5), 'http://placehold.it/6x6', "1.5 density element doesn't match"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 2), 'http://placehold.it/8x8', "Double density element doesn't match"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 3), 'http://placehold.it/12x12', "Triple density element doesn't match"); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1), 'http://placehold.it/4x4', "Single density element doesn't match"); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1.5), 'http://placehold.it/6x6', "1.5 density element doesn't match"); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 2), 'http://placehold.it/8x8', "Double density element doesn't match"); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 3), 'http://placehold.it/12x12', "Triple density element doesn't match"); }); -test("_getSrcFromArray correct behaviour, correct data, out of bound calls", function () { - var srcsetArray; - // Get 1, 2 or 3 from 1x, 3x hash - srcsetArray = [ - {"pxr": 1, "src": "http://placehold.it/4x4"}, - {"pxr": 2, "src": "http://placehold.it/8x8"}, - {"pxr": 3, "src": "http://placehold.it/12x12"} - ]; +test("_getSrcFromSrcset correct behaviour, correct data, out of bounds and infra-bounds calls", function () { + var errMsg, srcset = "http://placehold.it/4x4, http://placehold.it/8x8 2x, http://placehold.it/12x12 3x"; + // Extra bounds calls - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 3.5), 'http://placehold.it/12x12', "Out of upper bound call should return upper in-bound value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 4), 'http://placehold.it/12x12', "Out of upper bound call should return upper in-bound value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, .11), 'http://placehold.it/4x4', "Out of lower bound call should return lower in-bound value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, -1), 'http://placehold.it/4x4', "Out or lower bound call should return lower in-bound value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 0), 'http://placehold.it/4x4', "Out or lower bound call should return lower in-bound value"); -}); + errMsg = "Out of upper bound call should return upper in-bound value"; + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 3.5), 'http://placehold.it/12x12', errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 4), 'http://placehold.it/12x12', errMsg); + + errMsg = "Out of lower bound call should return lower in-bound value"; + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, .11), 'http://placehold.it/4x4', errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, -1), 'http://placehold.it/4x4', errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 0), 'http://placehold.it/4x4', errMsg); -test("_getSrcFromArray correct behaviour, correct data, infra-bound calls", function () { - var srcsetArray; - // Get 1, 2 or 3 from 1x, 3x hash - srcsetArray = [ - {"pxr": 1, "src": "http://placehold.it/4x4"}, - {"pxr": 2, "src": "http://placehold.it/8x8"}, - {"pxr": 3, "src": "http://placehold.it/12x12"} - ]; // Infra-bound calls - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 1.5), 'http://placehold.it/8x8', "Infra-bound call should return immediate upper value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 1.75), 'http://placehold.it/8x8', "Infra-bound call should return immediate upper value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 2.5), 'http://placehold.it/12x12', "Infra-bound call should return immediate upper value"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 2.25), 'http://placehold.it/12x12', "Infra-bound call should return immediate upper value"); + errMsg = "Infra-bound call should return immediate upper value"; + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1.5), 'http://placehold.it/8x8', errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1.75), 'http://placehold.it/8x8', errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 2.5), 'http://placehold.it/12x12', errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 2.25), 'http://placehold.it/12x12', errMsg); }); -test("_getSrcFromArray correct behaviour, empty array", function () { - var srcsetArray; - // Get 1, 2 or 3 from 1x, 3x hash - srcsetArray = []; - // Correct calls - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, -1), null, "If array is empty, null value must be returned"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 0), null, "If array is empty, null value must be returned"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 1), null, "If array is empty, null value must be returned"); - strictEqual(picturePolyfill._getSrcFromArray(srcsetArray, 2), null, "If array is empty, null value must be returned"); +test("_getSrcFromSrcset correct behaviour, empty srcset", function () { + var errMsg, srcset; + + srcset = ""; + errMsg = "If srcset is empty, empty value must be returned"; + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, -1), null, errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 0), null, errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1), null, errMsg); + + srcset = null; + errMsg = "If srcset is null, null value must be returned"; + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, -1), null, errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 0), null, errMsg); + strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1), null, errMsg); }); + test("_getSrcsetArray correct behaviour, correct srcset format", function () { if (!picturePolyfill._mqSupport) { ok(true); @@ -204,6 +194,24 @@ test("_getSrcsetArray correct behaviour, messy srcset format", function () { } }); +test("_getSrcsetArray correct behaviour, empty srcset value", function () { + if (!picturePolyfill._mqSupport) { + ok(true); + } + else { + var srcset, expected; + + // Empty srcset + srcset = ""; + deepEqual(picturePolyfill._getSrcsetArray(srcset), []); + + // Null srcset + srcset = null; + deepEqual(picturePolyfill._getSrcsetArray(srcset), []); + } +}); + + test("_getSrcsetFromData behaves correctly", function () { if (!picturePolyfill._mqSupport) { ok(true); @@ -321,22 +329,10 @@ test("_getSourcesData correctly parses sources", function () { // Set expectations expected1 = [ - {"srcset": [ - {"pxr": 1, "src": "http://placehold.it/9x9"}, - {"pxr": 2, "src": "http://placehold.it/18x18"} - ], "media": "(min-width: 1441px)"}, - {"srcset": [ - {"pxr": 1, "src": "http://placehold.it/7x7"}, - {"pxr": 2, "src": "http://placehold.it/14x14"} - ], "media": "(min-width: 1025px)"}, - {"srcset": [ - {"pxr": 1, "src": "http://placehold.it/5x5"}, - {"pxr": 2, "src": "http://placehold.it/10x10"} - ], "media": "(min-width: 481px)"}, - {"srcset": [ - {"pxr": 1, "src": "http://placehold.it/4x4"}, - {"pxr": 2, "src": "http://placehold.it/8x8"} - ]} + {"srcset": "http://placehold.it/9x9, http://placehold.it/18x18 2x", "media": "(min-width: 1441px)"}, + {"srcset": "http://placehold.it/7x7, http://placehold.it/14x14 2x", "media": "(min-width: 1025px)"}, + {"srcset": "http://placehold.it/5x5, http://placehold.it/10x10 2x", "media": "(min-width: 481px)"}, + {"srcset": "http://placehold.it/4x4, http://placehold.it/8x8 2x"} ]; expected2 = [ {"src": "http://placehold.it/9x9", "media": "(min-width: 1441px)"}, @@ -609,7 +605,7 @@ test("parse() after a DOM injection (without MQ support)", function () { test("parse() with readFromCache true, then false", function () { - var images, img1src, img2src; + var images, img1src, img2src, img1srcset, img2srcset; $('body').append('
\
\ @@ -633,31 +629,60 @@ test("parse() with readFromCache true, then false", function () { var initial_areMediaQueriesSupported = picturePolyfill._mqSupport, initial_pixelRatio = picturePolyfill._pxRatio; - picturePolyfill._pxRatio = null; - picturePolyfill._mqSupport = false; + picturePolyfill._pxRatio = 2; + picturePolyfill._mqSupport = true; // Parse with readFromCache true (default value) picturePolyfill.parse(document); images = document.getElementsByTagName('img'); + img1src = images[0].getAttribute('src'); img2src = images[1].getAttribute('src'); + img1srcset = images[0].getAttribute('srcset'); + img2srcset = images[1].getAttribute('srcset'); - strictEqual(img1src, 'http://placehold.it/1x1'); - strictEqual(img2src, 'http://placehold.it/2x2'); + strictEqual(img1src, 'http://placehold.it/8x8'); + strictEqual(img2src, 'http://placehold.it/4x4'); + strictEqual(img1srcset, 'http://placehold.it/4x4, http://placehold.it/8x8 2x'); + strictEqual(img2srcset, 'http://placehold.it/4x4'); - // Parse with readFromCache false + // CHANGING THE DOM - picturePolyfill.parse(document, false); + var $sources = $('picture').find('source'); + $sources.eq(0).attr('srcset', 'http://placehold.it/333x333, http://placehold.it/666x666 2x'); + $sources.eq(1).attr('src', 'http://placehold.it/222x222'); + + // Parsing again with readFromCache true should present the same results of before + + picturePolyfill.parse(document); - images = document.getElementsByTagName('img'); img1src = images[0].getAttribute('src'); img2src = images[1].getAttribute('src'); + img1srcset = images[0].getAttribute('srcset'); + img2srcset = images[1].getAttribute('srcset'); - strictEqual(img1src, 'http://placehold.it/1x1'); - strictEqual(img2src, 'http://placehold.it/2x2'); + var errMsg = "Parsing again with readFromCache true should present the same img src and srcset of before"; + strictEqual(img1src, 'http://placehold.it/8x8', errMsg); + strictEqual(img2src, 'http://placehold.it/4x4', errMsg); + strictEqual(img1srcset, 'http://placehold.it/4x4, http://placehold.it/8x8 2x', errMsg); + strictEqual(img2srcset, 'http://placehold.it/4x4'); + + // Parse with readFromCache false should change the value of the images src attribute + + picturePolyfill.parse(document, false); + img1src = images[0].getAttribute('src'); + img2src = images[1].getAttribute('src'); + img1srcset = images[0].getAttribute('srcset'); + img2srcset = images[1].getAttribute('srcset'); + + errMsg = "Parsing again with readFromCache false should refresh the resulting img src and srcset"; + strictEqual(img1src, 'http://placehold.it/666x666', errMsg); + strictEqual(img2src, 'http://placehold.it/222x222', errMsg); + strictEqual(img1srcset, 'http://placehold.it/333x333, http://placehold.it/666x666 2x', errMsg); + strictEqual(img2srcset, 'http://placehold.it/222x222'); // Restoring initial values picturePolyfill._mqSupport = initial_areMediaQueriesSupported; @@ -677,5 +702,4 @@ test("call parse won't give errors when polyfill isn't required", function () { strictEqual(picturePolyfill.parse.getCall(0).returnValue, 0); picturePolyfill.isUseful = initial_isNecessary; -}); - +}); \ No newline at end of file