/Respond

Permalink
Browse files

Merge branch 'issue-181'

  • Loading branch information...
2 parents 066629c + 6c70758 commit 980fab6ae67629948380fefa6777f49c11c863b9 @zachleat zachleat committed Dec 30, 2013
Unified Split
Showing with 87 additions and 4 deletions.
  1. +13 −4 src/respond.js
  2. +13 −0 test/test.css
  3. +10 −0 test/unit/test-with-dpr.css
  4. +51 −0 test/unit/tests.js
View
17 src/respond.js
@@ -42,22 +42,26 @@
return;
}
req.send( null );
+ },
+ isUnsupportedMediaQuery = function( query ) {
+ return query.replace( respond.regex.minmaxwh, '' ).match( respond.regex.other );
};
//expose for testing
respond.ajax = ajax;
respond.queue = requestQueue;
-
- // expose for testing
+ respond.unsupportedmq = isUnsupportedMediaQuery;
respond.regex = {
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,
comments: /\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
only: /(only\s+)?([a-zA-Z]+)\s?/,
- minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,
- maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/
+ minw: /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
+ maxw: /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
+ minmaxwh: /\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,
+ other: /\([^\)]*\)/g
};
//expose media query support flag for external use
@@ -260,6 +264,11 @@
for( var j = 0; j < eql; j++ ){
thisq = eachq[ j ];
+
+ if( isUnsupportedMediaQuery( thisq ) ) {
+ continue;
+ }
+
mediastyles.push( {
media : thisq.split( "(" )[ 0 ].match( respond.regex.only ) && RegExp.$2 || "all",
rules : rules.length - 1,
View
13 test/test.css
@@ -77,4 +77,17 @@ a {
body {
background: navy;
}
+}
+
+@media only screen and (min-width: 1250px) and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (-moz-min-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (-o-min-device-pixel-ratio: 3/2),
+ only screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (min-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (min-resolution: 1.5dppx),
+ screen and (min-width: 1250px) {
+
+ body {
+ background-color: pink;
+ }
}
View
10 test/unit/test-with-dpr.css
@@ -0,0 +1,10 @@
+@media
+only screen and (max-width: 1004px) and (min--moz-device-pixel-ratio: 1.5),
+only screen and (max-width: 1004px) and (-moz-min-device-pixel-ratio: 1.5),
+only screen and (max-width: 1004px) and (-o-min-device-pixel-ratio: 3/2),
+only screen and (max-width: 1004px) and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (max-width: 1004px) and (min-device-pixel-ratio: 1.5),
+only screen and (max-width: 1004px) and (min-resolution: 1.5dppx) {
+
+
+}
View
51 test/unit/tests.js
@@ -198,10 +198,61 @@ window.onload = function(){
ok( '@media only screen and ( max-width: 1280px ) { }'.match( respond.regex.maxw ).length );
});
+
test( 'Issue #161: spaces around inside min-width/max-width', function() {
ok( '@media only screen and (min-width : 1px) { }'.match( respond.regex.min ) !== null );
ok( '@media only screen and (max-width : 1px ) { }'.match( respond.regex.maxw ) !== null );
});
+
+ test( 'Issue #181: non-min-width and non-max-width queries', function() {
+ var others = ['(min--moz-device-pixel-ratio: 1.5)',
+ '(-moz-min-device-pixel-ratio: 1.5)',
+ '(-o-min-device-pixel-ratio: 1.5)',
+ '(-webkit-min-device-pixel-ratio: 1.5)',
+ '(min-device-pixel-ratio: 1.5)',
+ '(min-resolution: 1.5dppx)'],
+ str,
+ mq;
+
+ for( var j = 0, k = others.length; j<k; j++ ) {
+ str = 'only screen and (max-width: 1319px) and ' + others[ j ] + ' {}';
+ mq = str.match( respond.regex.minmaxwh );
+ equal( mq && mq[ 0 ], '(max-width: 1319px)' );
+ equal( respond.unsupportedmq( str )[ 0 ], others[ j ] );
+
+ equal( ( 'only screen and (max-width: 1319px) and (min-width: 1px) and ' + others[ j ] + ' {}' ).replace( respond.regex.minmaxwh, '' ).match( respond.regex.other )[ 0 ], others[ j ] );
+ equal( ( 'only screen and (max-width: 1319px) and (min-height: 1px) and ' + others[ j ] + ' {}' ).replace( respond.regex.minmaxwh, '' ).match( respond.regex.other )[ 0 ], others[ j ] );
+ }
+ });
+
+ // At this point the media queries are already divided by commas
+ test( 'Issue #181: unsupported MQ tests', function() {
+ // should pass
+ strictEqual( respond.unsupportedmq( '(min-width: 1151px)' ), null );
+ strictEqual( respond.unsupportedmq( 'all and (max-width: 699px) and (min-width: 520px)' ), null );
+ strictEqual( respond.unsupportedmq( 'print' ), null );
+
+ // source: http://www.w3.org/TR/css3-mediaqueries/
+ // should fail: looks for anything in parens that is not min/max-height/width
+ ok( respond.unsupportedmq( 'all and (orientation:portrait)' ) );
+ ok( respond.unsupportedmq( 'screen and (device-aspect-ratio: 16/9)' ) );
+ ok( respond.unsupportedmq( 'all and (color)' ) );
+ ok( respond.unsupportedmq( 'all and (min-color: 1)' ) );
+ ok( respond.unsupportedmq( 'all and (monochrome)' ) );
+ ok( respond.unsupportedmq( 'print and (min-resolution: 300dpi)' ) );
+ ok( respond.unsupportedmq( 'tv and (scan: progressive)' ) );
+ ok( respond.unsupportedmq( 'handheld and (grid) and (device-max-height: 7em)' ) );
+ });
+
+ asyncTest( 'Issue #181: full MQ with DPR', function() {
+ queueRequest( function() {
+ respond.ajax( getNormalizedUrl( 'test-with-dpr.css' ),
+ function( data ) {
+ ok( respond.unsupportedmq( data ) );
+ start();
+ });
+ });
+ });
}
};

0 comments on commit 980fab6

Please sign in to comment.