Fixed a bug occurring when no source media matched

Releasing v4.1.3 and fixing a bug that occurred then no source media matched
verlok · Jul 25, 2014 · 7ad28a0 · 7ad28a0
1 parent bcca668
commit 7ad28a0
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 37 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -5,7 +5,7 @@ module.exports = function(grunt) {
 	grunt.initConfig({
 		// Metadata.
 		meta: {
-			version: '4.1.2'
+			version: '4.1.3'
 		},
 		banner: '/*! picturePolyfill - v<%= meta.version %> - ' +
 			'<%= grunt.template.today("yyyy-mm-dd") %>\n' +

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "picturePolyfill",
-	"version": "4.1.2",
+	"version": "4.1.3",
 	"main": "picturePolyfill.js",
 	"ignore": [
 		".idea",

diff --git a/dist/picturePolyfill.min.js b/dist/picturePolyfill.min.js
diff --git a/src/picturePolyfill.js b/src/picturePolyfill.js
@@ -110,7 +110,7 @@ var picturePolyfill = (function (w) {
 				breakPoint = -1;
 
 			if (srcset === null || srcset === '' || typeof srcset === 'undefined') {
-				return null;
+				return "";
 			}
 
 			array = this._getSrcsetArray(srcset);
@@ -165,8 +165,7 @@ var picturePolyfill = (function (w) {
 		 */
 		_setImgAttributes: function (pictureElement, attributes) {
 			var imageElements = pictureElement.getElementsByTagName('img'),
-				imgEl, originalImgSrc, originalImgSrcset,
-				givenSrcAttribute, givenSrcsetAttribute,
+				imgEl, givenSrcAttribute, givenSrcsetAttribute,
 				srcToSet, srcsetToSet;
 
 			function _setAttributeIfDifferent(element, attribute, value) {
@@ -179,25 +178,21 @@ var picturePolyfill = (function (w) {
 				return false;
 			}
 
-			// Setting repeated usage variables
-			imgEl = imageElements[0];
-			originalImgSrc = imgEl.getAttribute('data-original-src');
-			originalImgSrcset = imgEl.getAttribute('data-original-srcset');
-			givenSrcAttribute = attributes.src;
-			givenSrcsetAttribute = attributes.srcset;
-
 			// Set original img tag's src and srcset in a data attribute
-			if (!originalImgSrc) {
+			imgEl = imageElements[0];
+			if (!imgEl.getAttribute('data-original-src')) {
 				_setAttributeIfDifferent(imgEl, 'data-original-src', imgEl.getAttribute('src'));
 				_setAttributeIfDifferent(imgEl, 'data-original-srcset', imgEl.getAttribute('srcset'));
 			}
 
 			// Set srcToSet and srcsetToSet depending on the given src/srcset attributes
 			// If none are given, use original ones
-			// If both ore one are given, them (even if one is null)
+			// If both ore one are given, use them (even if one is null)
+			givenSrcAttribute = attributes.src;
+			givenSrcsetAttribute = attributes.srcset;
 			if (!givenSrcAttribute && !givenSrcsetAttribute) {
-				srcToSet = originalImgSrc;
-				srcsetToSet = originalImgSrcset;
+				srcToSet = imgEl.getAttribute('data-original-src');
+				srcsetToSet = imgEl.getAttribute('data-original-srcset');
 			} else {
 				srcToSet = givenSrcAttribute;
 				srcsetToSet = givenSrcsetAttribute;

diff --git a/test/picturePolyfill.qunit.js b/test/picturePolyfill.qunit.js
@@ -1,10 +1,8 @@
 /*
-* TODO: Test cases with <img src="..." srcset="..."> and sources matching or not matching
-*
-* TODO: Also read the srcset property on the img tag, in every test!
-*
-* TODO: Test no double ajax calls: IMG with empty src="" + data-default-src set
-* */
+ * TODO: Also read the srcset property on the img tag, in every test!
+ *
+ * TODO: Test no double ajax calls: IMG with empty src="" + data-default-src set
+ * */
 
 module("picturePolyfill", {
 	setup: function () {
@@ -86,15 +84,15 @@ test("_getSrcFromSrcset correct behaviour, empty srcset", function () {
 	else {
 		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);
+		strictEqual(picturePolyfill._getSrcFromSrcset(srcset, -1), "", errMsg);
+		strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 0), "", errMsg);
+		strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1), "", 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);
+		strictEqual(picturePolyfill._getSrcFromSrcset(srcset, -1), "", errMsg);
+		strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 0), "", errMsg);
+		strictEqual(picturePolyfill._getSrcFromSrcset(srcset, 1), "", errMsg);
 	}
 });
 
@@ -148,33 +146,33 @@ test("_getSrcsetArray correct behaviour, correct srcset format", function () {
 		// Triple with decimals
 		srcset = "http://placehold.it/4x4, http://placehold.it/6x6 1.5x, http://placehold.it/8x8 2x";
 		expected = [
-			{pxr: 1,   src: "http://placehold.it/4x4"},
+			{pxr: 1, src: "http://placehold.it/4x4"},
 			{pxr: 1.5, src: "http://placehold.it/6x6"},
-			{pxr: 2,   src: "http://placehold.it/8x8"}
+			{pxr: 2, src: "http://placehold.it/8x8"}
 		];
 		deepEqual(picturePolyfill._getSrcsetArray(srcset), expected, "Triple with decimals");
 
 		// Double with 1x and 3x
 		srcset = "http://placehold.it/4x4, http://placehold.it/12x12 3x";
 		expected = [
-			{pxr: 1,   src: "http://placehold.it/4x4"},
-			{pxr: 3,   src: "http://placehold.it/12x12"}
+			{pxr: 1, src: "http://placehold.it/4x4"},
+			{pxr: 3, src: "http://placehold.it/12x12"}
 		];
 		deepEqual(picturePolyfill._getSrcsetArray(srcset), expected, "Double with 1x and 3x");
 
 		// Double with .5x and 1x
 		srcset = "http://placehold.it/2x2 .5x, http://placehold.it/4x4";
 		expected = [
 			{pxr: 0.5, src: "http://placehold.it/2x2"},
-			{pxr: 1,   src: "http://placehold.it/4x4"}
+			{pxr: 1, src: "http://placehold.it/4x4"}
 		];
 		deepEqual(picturePolyfill._getSrcsetArray(srcset), expected, "Double with .5x and 1x");
 
 		// Double with 0.5x and 1x, leading 0
 		srcset = "http://placehold.it/2x2 0.5x, http://placehold.it/4x4";
 		expected = [
 			{pxr: 0.5, src: "http://placehold.it/2x2"},
-			{pxr: 1,   src: "http://placehold.it/4x4"}
+			{pxr: 1, src: "http://placehold.it/4x4"}
 		];
 		deepEqual(picturePolyfill._getSrcsetArray(srcset), expected, "Double with 0.5x and 1x, leading 0");
 	}
@@ -532,7 +530,7 @@ test("parse() resulting image sources - without MQ support", function () {
 		</div>\
 	</div>');
 
-	if (!picturePolyfill._mqSupport) { // EXCLUDING OLD IE FROM THIS TESTS
+	if (!picturePolyfill._mqSupport) { // EXCLUDING OLD IE FROM THIS TESTS - but why?!
 		ok(true);
 	}
 	else {
@@ -735,9 +733,68 @@ test("parse() with readFromCache true, then false", function () {
 		picturePolyfill._mqSupport = initial_areMediaQueriesSupported;
 		picturePolyfill._pxRatio = initial_pixelRatio;
 	}
+});
+
+test("parse() with contained img having both src and srcset attributes set", function () {
+
+	var images, img1src, img1srcset, img2src, img2srcset, errMsg;
+
+	$('body').append('<div id="testContainer">\
+		<picture id="first" data-alt="A" data-default-src="http://placehold.it/2x2">\
+			<source media="(min-width:1px)" src="http://placehold.it/4x4" srcset="http://placehold.it/4x4, http://placehold.it/8x8 2x"/>\
+			<img src="http://placehold.it/2x2" srcset="http://placehold.it/2x2, http://placehold.it/4x4 2x" alt="A"/>\
+		</picture>\
+		<picture id="second" data-alt="A" data-default-src="http://placehold.it/2x2">\
+			<source media="(min-width:9999px)" src="http://placehold.it/4x4" srcset="http://placehold.it/4x4, http://placehold.it/8x8 2x"/>\
+			<img src="http://placehold.it/2x2" srcset="http://placehold.it/2x2, http://placehold.it/4x4 2x" alt="A"/>\
+		</picture>\
+	</div>');
+
+	picturePolyfill.initialize();
+
+	var initial_pixelRatio = picturePolyfill._pxRatio;
+
+	picturePolyfill._pxRatio = 2;
+
+	// Matching sources
+	picturePolyfill.parse(document);
+
+	images = document.getElementsByTagName('img');
+
+	img1src = images[0].getAttribute('src');
+	img1srcset = images[0].getAttribute('srcset');
+
+	errMsg = "Img src and srcset should have changed";
+	if (picturePolyfill._mqSupport) {
+		strictEqual(img1src, 'http://placehold.it/8x8', errMsg);
+		strictEqual(img1srcset, 'http://placehold.it/4x4, http://placehold.it/8x8 2x', errMsg);
+	}
+	else {
+		strictEqual(img1src, 'http://placehold.it/2x2', errMsg);
+		strictEqual(img1srcset, null, errMsg);
+	}
+
+	// Not matching sources
+	img2src = images[1].getAttribute('src');
+	img2srcset = images[1].getAttribute('srcset');
+
+	// TODO: FIX - CURRENTLY RETURNS NULL SRC AND SRCSET
+
+	errMsg = "Img src and srcset shouldn't have changed";
+	if (picturePolyfill._mqSupport) {
+		strictEqual(img2src, 'http://placehold.it/2x2', errMsg);
+		strictEqual(img2srcset, 'http://placehold.it/2x2, http://placehold.it/4x4 2x', errMsg);
+	}
+	else {
+		strictEqual(img2src, 'http://placehold.it/2x2', errMsg);
+		strictEqual(img2srcset, null, errMsg);
+	}
+
+	picturePolyfill._pxRatio = initial_pixelRatio;
 
 });
 
+
 test("call parse won't give errors when polyfill isn't required", function () {
 	this.spy(picturePolyfill, "parse");
 	picturePolyfill.initialize();