changed getWidth helper function of ::matchMedia to mirror native matchMedia function

Author: dryan

src/eCSStender.js

@@ -2472,28 +2472,10 @@ License:       MIT License (see homepage)
    * @param str query - the media query to test
    */
   function matchMedia( query ) {
-    if( WINDOW.matchMedia ) {
-      matchMedia  = function( query ) {
-        return WINDOW.matchMedia( query ).matches;
-      }
+    if( defined( WINDOW.matchMedia ) ) {
+      console.log(query, WINDOW.matchMedia(query).matches);
+      return WINDOW.matchMedia( query ).matches;
     } else {
-      var 
-      getWidth,
-      getHeight;
-      if( defined( window.innerWidth ) ) {
-        getWidth = function () { return window.innerWidth };
-      } else if ( defined( document.documentElement ) && defined( document.documentElement.clientWidth ) && document.documentElement.clientWidth ) {
-        getWidth = function() { return document.documentElement.clientWidth };
-      } else {
-        getWidth = function() { return document.getElementsByTagName(BODY)[0].clientWidth; }
-      }
-      if( defined( window.innerHeight ) ) {
-        getHeight = function() { return window.innerHeight; }
-      } else if ( defined( document.documentElement ) && defined( document.documentElement.clientHeight ) && document.documentElement.clientHeight ) {
-        getHeight = function() { return document.documentElement.clientHeight; }
-      } else {
-        getHeight = function() { return document.getElementsByTagName(BODY)[0].clientHeight; }
-      }
       function convertToPixels( val ) {
         var
         number  = parseInt(val.replace(/[^\d]+/g, ''), 10),
@@ -2509,6 +2491,20 @@ License:       MIT License (see homepage)
         }
         return number;
       }
+      var 
+      getWidth,
+      getHeight;
+      getWidth  = function() {
+        var _body = document.getElementsByTagName(BODY)[0];
+        return _body.clientWidth + convertToPixels( getCSSValue( _body, 'margin-left' ) ) + convertToPixels( getCSSValue( _body, 'margin-right' ) );
+      }
+      if( defined( window.innerHeight ) ) {
+        getHeight = function() { return window.innerHeight; }
+      } else if ( defined( document.documentElement ) && defined( document.documentElement.clientHeight ) && document.documentElement.clientHeight ) {
+        getHeight = function() { return document.documentElement.clientHeight; }
+      } else {
+        getHeight = function() { return document.getElementsByTagName(BODY)[0].clientHeight; }
+      }
 
       matchMedia  = function( query ) {
         if(query.indexOf(COMMA) > -1) { // handle OR conditions

tests/js/core.js

@@ -181,30 +181,16 @@ eCSStender.onComplete(function(){
   module('Media Queries');
   test( 'eCSStender::matchMedia', function(){
     ok( typeof(eCSStender.matchMedia) == 'function', 'eCSStender::matchMedia() exists' );
-    var 
-    getWidth,
-    getHeight;
-    if( typeof( window.innerWidth ) != 'undefined' ) {
-      getWidth = function () { return window.innerWidth };
-    } else if ( typeof( document.documentElement ) != 'undefined' && typeof( document.documentElement.clientWidth ) != 'undefined' && document.documentElement.clientWidth ) {
-      getWidth = function() { return document.documentElement.clientWidth };
-    } else {
-      getWidth = function() { return document.getElementsByTagName('body')[0].clientWidth; }
-    }
-    if( typeof( window.innerHeight ) != 'undefined' ) {
-      getHeight = function() { return window.innerHeight; }
-    } else if ( typeof( document.documentElement )  != 'undefined' && typeof( document.documentElement.clientHeight ) != 'undefined' && document.documentElement.clientHeight ) {
-      getHeight = function() { return document.documentElement.clientHeight; }
-    } else {
-      getHeight = function() { return document.getElementsByTagName('body')[0].clientHeight; }
+    if( typeof(window.matchMedia) != 'undefined' && false ) {
+      ok(true, 'window.matchMedia exists, these tests are using the native method');
     }
     var
-    W   = getWidth(),
-    H   = getHeight(),
+    W   = $(window).width(),
+    H   = $(window).height(),
     DW  = screen.width,
     DH  = screen.height,
     O   = W > H ? 'landscape' : 'portrait';
-    
+
     // orientation
     ok( eCSStender.matchMedia('screen and (orientation:portrait)') == (O == 'portrait'), '(orientation:portrait) ' + (O == 'portrait' ? 'matched' : 'does not match') );
     ok( eCSStender.matchMedia('screen and (orientation:landscape)') == (O == 'landscape'), '(orientation:landscape) ' + (O == 'landscape' ? 'matched' : 'does not match') );