Major. Plugin API changes.. And unit tests for 'em.. Details below:

* Modernizr.event() -> Modernizr.hasEvent()
* Modernizr.styleElem() -> Modernizr.testStyles()

Added unit tests for testStyles(), the _properties, testProp(), testAllProps()

* More inline docs for the API methods
* Also the element added via injectElementWithStyles aka testStyles now has an id of #modernizr, not #test

ref #272

modernizr.js

@@ -95,7 +95,7 @@ window.Modernizr = (function( window, document, undefined ) {
           // This also allows the method to scale for unspecified uses
           while ( nodes-- ) {
               node = document.createElement('div');
-              node.id = testnames ? testnames[nodes] : 'test' + (nodes + 1);
+              node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
               div.appendChild(node);
           }
       }
@@ -1048,6 +1048,7 @@ window.Modernizr = (function( window, document, undefined ) {
     // Assign private properties to the return object with prefix
     Modernizr._version      = version;
 
+    // expose these for the plugin API. Look in the source for how to join() them against your input
     Modernizr._prefixes     = prefixes;
     Modernizr._domPrefixes  = domPrefixes;
 
@@ -1057,37 +1058,56 @@ window.Modernizr = (function( window, document, undefined ) {
     //   * A max-width or orientation query will be evaluated against the current state, which may change later.
     //   * You must specify values. Eg. If you are testing support for the min-width media query use: 
     //       Modernizr.mq('(min-width:0)')
+    // usage:
+    // Modernizr.mq('only screen and (max-width:768)')
+    Modernizr.mq            = testMediaQuery;   
 
-    Modernizr.mq            = testMediaQuery;   // Modernizr.mq('only screen and (max-width:768)')
-
-
-    Modernizr.hasEvent      = isEventSupported; // Modernizr.hasEvent('gesturestart')
-    Modernizr.testAllProps  = testPropsAll;     // Modernizr.testAllProps('box-sizing')
-    Modernizr.testProp      = testProps;        // Modernizr.testProp('pointer-events')
-    Modernizr.styleElem     = injectElementWithStyles; // Modernizr.styleElem('#omg { position:absolute }',callback)
+    // Modernizr.hasEvent() detects support for a given event, with an optional element to test on
+    // Modernizr.hasEvent('gesturestart', elem)
+    Modernizr.hasEvent      = isEventSupported; 
+
+    // Modernizr.testProp() investigates whether a given style property is recognized
+    // Note that the property names must be provided in the camelCase variant.
+    // Modernizr.testProp('pointerEvents')
+    Modernizr.testProp      = function(prop){
+        return testProps([prop]);
+    };        
 
+    // Modernizr.testAllProps() investigates whether a given style property,
+    //   or any of its vendor-prefixed variants, is recognized
+    // Note that the property names must be provided in the camelCase variant.
+    // Modernizr.testAllProps('boxSizing')    
+    Modernizr.testAllProps  = testPropsAll;     
+
+
+
+    // Modernizr.testStyles() allows you to add custom styles to the document and test an element afterwards
+    // Modernizr.testStyles('#modernizr { position:absolute }', function(elem, rule){ ... })
+    Modernizr.testStyles    = injectElementWithStyles; 
 
 
     // Modernizr.prefixed() returns the prefixed or nonprefixed property name variant of your input
     // Modernizr.prefixed('boxSizing') // 'MozBoxSizing'
 
     // Properties must be passed as dom-style camelcase, rather than `box-sizing` hypentated style.
     // Return values will also be the camelCase variant, if you need to translate that to hypenated style use:
+    //
     //     str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
 
     // If you're trying to ascertain which transition end event to bind to, you might do something like...
-    // var transEndEventNames = {
-    //   'WebkitTransition' : 'webkitTransitionEnd',
-    //   'MozTransition'    : 'transitionend',
-    //   'OTransition'      : 'oTransitionEnd',
-    //   'msTransition'     : 'msTransitionEnd', // maybe?
-    //   'transition'       : 'transitionEnd'
-    // },
-    // transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
+    // 
+    //     var transEndEventNames = {
+    //       'WebkitTransition' : 'webkitTransitionEnd',
+    //       'MozTransition'    : 'transitionend',
+    //       'OTransition'      : 'oTransitionEnd',
+    //       'msTransition'     : 'msTransitionEnd', // maybe?
+    //       'transition'       : 'transitionEnd'
+    //     },
+    //     transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
 
     Modernizr.prefixed      = function(prop){
       return testPropsAll(prop, 'pfx');
-    }
+    };
 
 
 

test/js/test-setup.js

@@ -5,7 +5,7 @@ window.TEST = {
   // note some unique members of the Modernizr object
   inputs    : ['input','inputtypes'],
   audvid    : ['video','audio'],
-  API       : ['addTest', 'mq', 'event', 'testProp', 'testAllProps', 'styleElem', '_prefixes', '_domPrefixes', 'prefixed'],
+  API       : ['addTest', 'mq', 'hasEvent', 'testProp', 'testAllProps', 'testStyles', '_prefixes', '_domPrefixes', 'prefixed'],
   extraclass: ['js'],
   privates  : ['_enableHTML5','_version','_fontfaceready'],
   deprecated : [

test/js/unit.js

@@ -334,16 +334,68 @@ test('Modernizr.hasEvent()',function(){
 
   equals(Modernizr.hasEvent('modernizrcustomevent'), false,'random event is definitely not supported');
 
+  /* works fine in webkit but not gecko
   equals(  Modernizr.hasEvent('resize', window),
-          !Modernizr.hasEvent('resize', document.body),
-          'Resize is supported in window but not doc.body, typically...');
+          !Modernizr.hasEvent('resize', document.createElement('div')),
+          'Resize is supported in window but not a div, typically...');
+  */
 
 });
 
 
 
 
 
+test('Modernizr.testStyles()',function(){
+
+  equals(typeof Modernizr.testStyles, 'function','Modernizr.testStyles() is a function');
+
+  var style = '#modernizr{ width: 9px; height: 4px; color: papayawhip;';
+
+  Modernizr.testStyles(style, function(elem, rule){
+      equals(style, rule, 'rule passsed back matches what i gave it.')
+      equals(elem.offsetWidth, 9, 'width was set through the style');
+      equals(elem.offsetHeight, 4, 'height was set through the style');
+      equals(elem.id, 'modernizr', 'element is indeed the modernizr element');
+  });
+
+});
+
+
+test('Modernizr._[properties]',function(){
+
+  equals(7, Modernizr._prefixes.length, 'Modernizr._prefixes has 7 items');
+
+  equals(5, Modernizr._domPrefixes.length, 'Modernizr.domPrefixes has 5 items');
+
+});
+
+test('Modernizr.testProp()',function(){
+
+  equals(true, Modernizr.testProp('margin'), 'Everyone supports margin');
+
+  equals(false, Modernizr.testProp('happiness'), 'Nobody supports the happiness style. :(');
+
+  equals('pointerEvents' in  document.createElement('div').style,
+         Modernizr.testProp('pointerEvents'),
+         'results for `pointer-events` are consistent with a homegrown feature test');
+
+});
+
+
+
+test('Modernizr.testAllProps()',function(){
+
+  equals(true, Modernizr.testAllProps('margin'), 'Everyone supports margin');
+
+  equals(false, Modernizr.testAllProps('happiness'), 'Nobody supports the happiness style. :(');
+
+  equals(Modernizr.csstransitions, Modernizr.testAllProps('transition'), 'Modernizr result matches API result: csstransitions');
+
+  equals(Modernizr.csscolumns, Modernizr.testAllProps('columnCount'), 'Modernizr result matches API result: csscolumns')
+
+});
+