Non-min/max media queries are not supported by Respond, and therefore…

… should never apply styles. Fixes some false-positive queries that shouldn't have passed. Fixes scottjehl#81, Fixes scottjehl#37, Fixes scottjehl#89
JohannesBooy · Jan 27, 2012 · 4450e5d · 4450e5d
1 parent a7ef2b1
commit 4450e5d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/respond.src.js b/respond.src.js
@@ -150,6 +150,7 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
 					mediastyles.push( { 
 						media	: thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-zA-Z]+)\s?/ ) && RegExp.$2 || "all",
 						rules	: rules.length - 1,
+						hasquery: thisq.indexOf("(") > -1,
 						minw	: thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ), 
 						maxw	: thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
 					} );
@@ -221,6 +222,8 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
 				var thisstyle = mediastyles[ i ],
 					min = thisstyle.minw,
 					max = thisstyle.maxw,
+					minnull = min === null,
+					maxnull = max === null,
 					em = "em";
 
 				if( !!min ){
@@ -230,9 +233,8 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
 					max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
 				}
 
-				if(!min && !max || 
-					( !min || min && currWidth >= min ) && 
-					( !max || max && currWidth <= max )){						
+				// if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
+				if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
 						if( !styleBlocks[ thisstyle.media ] ){
 							styleBlocks[ thisstyle.media ] = [];
 						}

diff --git a/test/unit/test.css b/test/unit/test.css
@@ -16,6 +16,13 @@
 	display: block;
 }
 
+/* a style like this should never apply in IE. If it does, tests will fail */
+@media screen and (view-mode: minimized) {
+	#testelem {
+		width: 10px !important;
+	}
+}
+
 /*styles for 480px and up - media type purposely left out here to test that in the process */
 @media (min-width: 480px) {
 	#testelem {