Permalink
Browse files

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 #81, Fixes #37, Fixes #89
  • Loading branch information...
1 parent a7ef2b1 commit 4450e5d8391dd8a34b7f699fe9927574b12d2c96 scottjehl committed Jan 27, 2012
Showing with 12 additions and 3 deletions.
  1. +5 −3 respond.src.js
  2. +7 −0 test/unit/test.css
View
@@ -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 ] = [];
}
View
@@ -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 {

0 comments on commit 4450e5d

Please sign in to comment.