Merge pull request #1323 from patrickkettner/fix-kebab-check

convert kebab-case to camelCase in testProps for browsers that don't have @supports support

src/testAllProps.js

@@ -8,7 +8,8 @@ define(['ModernizrProto', 'testPropsAll'], function( ModernizrProto, testPropsAl
    * parameter to skip the value check when native detection isn't available,
    * to improve performance when simply testing for support of a property.
    *
-   * @param prop - String naming the property to test
+   * @param prop - String naming the property to test (either camelCase or
+   *               kebab-case)
    * @param value - [optional] String of the value to test
    * @param skipValueTest - [optional] Whether to skip testing that the value
    *                        is supported when using non-native detection

src/testProp.js

@@ -1,6 +1,6 @@
 define(['ModernizrProto', 'testProps'], function( ModernizrProto, testProps ) {
   // Modernizr.testProp() investigates whether a given style property is recognized
-  // Note that the property names must be provided in the camelCase variant.
+  // Property names can be provided in either camelCase or kebab-case.
   // Modernizr.testProp('pointerEvents')
   // Also accepts optional 2nd arg, of a value to use for native feature detection, e.g.:
   // Modernizr.testProp('pointerEvents', 'none')

src/testProps.js

@@ -1,4 +1,4 @@
-define(['contains', 'mStyle', 'createElement', 'nativeTestProps', 'is'], function( contains, mStyle, createElement, nativeTestProps, is ) {
+define(['contains', 'mStyle', 'createElement', 'nativeTestProps', 'is', 'cssToDOM'], function( contains, mStyle, createElement, nativeTestProps, is, cssToDOM) {
   // testProps is a generic CSS / DOM property test.
 
   // In testing support for a given CSS property, it's legit to test:
@@ -10,12 +10,7 @@ define(['contains', 'mStyle', 'createElement', 'nativeTestProps', 'is'], functio
   // on our modernizr element, but instead just testing undefined vs
   // empty string.
 
-  // Because the testing of the CSS property names (with "-", as
-  // opposed to the camelCase DOM properties) is non-portable and
-  // non-standard but works in WebKit and IE (but not Gecko or Opera),
-  // we explicitly reject properties with dashes so that authors
-  // developing in WebKit or IE first don't end up with
-  // browser-specific content by accident.
+  // Property names can be provided in either camelCase or kebab-case.
 
   function testProps( props, prefixed, value, skipValueTest ) {
     skipValueTest = is(skipValueTest, 'undefined') ? false : skipValueTest;
@@ -53,7 +48,11 @@ define(['contains', 'mStyle', 'createElement', 'nativeTestProps', 'is'], functio
       prop = props[i];
       before = mStyle.style[prop];
 
-      if ( !contains(prop, '-') && mStyle.style[prop] !== undefined ) {
+      if (contains(prop, '-')) {
+        prop = cssToDOM(prop);
+      }
+
+      if ( mStyle.style[prop] !== undefined ) {
 
         // If value to test has been passed in, do a set-and-check test.
         // 0 (integer) is a valid property value, so check that `value` isn't

test/js/unit.js

@@ -410,7 +410,7 @@ test('Modernizr.testProp()',function(){
 
   equal(false, Modernizr.testProp('happiness'), 'Nobody supports the happiness style. :(');
   equal(true, Modernizr.testProp('fontSize'), 'Everyone supports fontSize');
-  equal(false, Modernizr.testProp('font-size'), 'Nobody supports font-size');
+  equal(true, Modernizr.testProp('font-size'), 'kebab-case should work too');
 
   equal('pointerEvents' in  document.createElement('div').style,
          Modernizr.testProp('pointerEvents'),
@@ -437,7 +437,7 @@ test('Modernizr.testAllProps()',function(){
 
   equal(false, Modernizr.testAllProps('happiness'), 'Nobody supports the happiness style. :(');
   equal(true, Modernizr.testAllProps('fontSize'), 'Everyone supports fontSize');
-  equal(false, Modernizr.testAllProps('font-size'), 'Nobody supports font-size');
+  equal(true, Modernizr.testAllProps('font-size'), 'kebab-case should work too');
 
   equal(Modernizr.csstransitions, Modernizr.testAllProps('transition'), 'Modernizr result matches API result: csstransitions');