Modernizr · stucox · Aug 1, 2013 · Jun 20, 2013 · Jun 20, 2013 · Jul 18, 2013
diff --git a/feature-detects/css/animations.js b/feature-detects/css/animations.js
@@ -13,5 +13,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('cssanimations', testAllProps('animationName'));
+  Modernizr.addTest('cssanimations', testAllProps('animationName', 'a', true));
 });
diff --git a/feature-detects/css/backgroundposition-xy.js b/feature-detects/css/backgroundposition-xy.js
@@ -13,13 +13,8 @@
   }]
 }
 !*/
-define(['Modernizr', 'testStyles'], function( Modernizr, testStyles ) {
-  Modernizr.addTest('bgpositionxy', function() {
-    return testStyles('#modernizr {background-position: 3px 5px;}', function( elem ) {
-      var cssStyleDeclaration = window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle;
-      var xSupport = (cssStyleDeclaration.backgroundPositionX == '3px') || (cssStyleDeclaration['background-position-x'] == '3px');
-      var ySupport = (cssStyleDeclaration.backgroundPositionY == '5px') || (cssStyleDeclaration['background-position-y'] == '5px');
-      return xSupport && ySupport;
-    });
+define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+  Modernizr.addTest('bgpositionxy', function () {
+    return testAllProps('backgroundPositionX', '3px', true) && testAllProps('backgroundPositionY', '5px', true);
   });
 });
diff --git a/feature-detects/css/backgroundrepeat.js b/feature-detects/css/backgroundrepeat.js
@@ -16,20 +16,8 @@
   }]
 }
 !*/
-define(['Modernizr', 'testStyles'], function( Modernizr, testStyles ) {
-
-  function getBgRepeatValue( elem ) {
-    return (window.getComputedStyle ?
-            getComputedStyle(elem, null).getPropertyValue('background') :
-            elem.currentStyle['background']);
-  }
-
-  testStyles(' #modernizr { background-repeat: round; } ', function( elem, rule ) {
-    Modernizr.addTest('bgrepeatround', getBgRepeatValue(elem) == 'round');
-  });
-
-  testStyles(' #modernizr { background-repeat: space; } ', function( elem, rule ) {
-    Modernizr.addTest('bgrepeatspace', getBgRepeatValue(elem) == 'space');
-  });
-
+define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+  // Must value-test these
+  Modernizr.addTest('bgrepeatround', testAllProps('backgroundRepeat', 'round'));
+  Modernizr.addTest('bgrepeatspace', testAllProps('backgroundRepeat', 'space'));
 });
diff --git a/feature-detects/css/backgroundsize.js b/feature-detects/css/backgroundsize.js
@@ -11,5 +11,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('backgroundsize', testAllProps('backgroundSize'));
+  Modernizr.addTest('backgroundsize', testAllProps('backgroundSize', '100%', true));
 });
diff --git a/feature-detects/css/backgroundsizecover.js b/feature-detects/css/backgroundsizecover.js
@@ -9,14 +9,7 @@
   }]
 }
 !*/
-define(['Modernizr', 'testStyles'], function( Modernizr, testStyles ) {
-
-  testStyles('#modernizr{background-size:cover}', function( elem ) {
-    var style = window.getComputedStyle ?
-      window.getComputedStyle(elem, null)
-      : elem.currentStyle;
-
-    Modernizr.addTest('bgsizecover', style.backgroundSize == 'cover' );
-  });
-
+define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+  // Must test value, as this specifically tests the `cover` value
+  Modernizr.addTest('bgsizecover', testAllProps('backgroundSize', 'cover'));
 });
diff --git a/feature-detects/css/borderimage.js b/feature-detects/css/borderimage.js
@@ -8,5 +8,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('borderimage', testAllProps('borderImage'));
+    Modernizr.addTest('borderimage', testAllProps('borderImage', 'url() 1', true));
 });
diff --git a/feature-detects/css/borderradius.js b/feature-detects/css/borderradius.js
@@ -12,5 +12,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('borderradius', testAllProps('borderRadius'));
+  Modernizr.addTest('borderradius', testAllProps('borderRadius', '0px', true));
 });
diff --git a/feature-detects/css/boxshadow.js b/feature-detects/css/boxshadow.js
@@ -8,5 +8,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('boxshadow', testAllProps('boxShadow'));
+  Modernizr.addTest('boxshadow', testAllProps('boxShadow', '1px 1px', true));
 });
diff --git a/feature-detects/css/boxsizing.js b/feature-detects/css/boxsizing.js
@@ -15,5 +15,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('boxsizing', testAllProps('boxSizing') && (document.documentMode === undefined || document.documentMode > 7));
+  Modernizr.addTest('boxsizing', testAllProps('boxSizing', 'border-box', true) && (document.documentMode === undefined || document.documentMode > 7));
 });
diff --git a/feature-detects/css/columns.js b/feature-detects/css/columns.js
@@ -8,5 +8,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('csscolumns', testAllProps('columnCount'));
+  Modernizr.addTest('csscolumns', testAllProps('columnCount', '1', true));
 });
diff --git a/feature-detects/css/displayrunin.js b/feature-detects/css/displayrunin.js
@@ -13,12 +13,7 @@
   }]
 }
 !*/
-define(['Modernizr', 'testStyles'], function( Modernizr, testStyles ) {
-  testStyles(' #modernizr { display: run-in; } ', function( elem, rule ) {
-    var ret = (window.getComputedStyle ?
-               getComputedStyle(elem, null).getPropertyValue('display') :
-               elem.currentStyle['display']);
-
-    Modernizr.addTest('displayrunin', ret == 'run-in', { aliases: ['display-runin'] });
-  });
+define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+  Modernizr.addTest('displayrunin', testAllProps('display', 'run-in'),
+    { aliases: ['display-runin'] });
 });
diff --git a/feature-detects/css/hyphens.js b/feature-detects/css/hyphens.js
@@ -193,7 +193,7 @@ define(['Modernizr', 'prefixes', 'createElement', 'testAllProps', 'addTest'], fu
 
       addTest("csshyphens", function() {
 
-        if (!testAllProps('hyphens')) return false;
+        if (!testAllProps('hyphens', 'auto', true)) return false;
 
         /* Chrome lies about its hyphens support so we need a more robust test
            crbug.com/107111

diff --git a/feature-detects/css/mask.js b/feature-detects/css/mask.js
@@ -26,5 +26,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('cssmask', testAllProps('maskRepeat'));
+  Modernizr.addTest('cssmask', testAllProps('maskRepeat', 'repeat-x', true));
 });
diff --git a/feature-detects/css/overflow-scrolling.js b/feature-detects/css/overflow-scrolling.js
@@ -11,5 +11,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('overflowscrolling', testAllProps('overflowScrolling'));
+  Modernizr.addTest('overflowscrolling', testAllProps('overflowScrolling', 'touch', true));
 });
diff --git a/feature-detects/css/reflections.js b/feature-detects/css/reflections.js
@@ -7,5 +7,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('cssreflections', testAllProps('boxReflect'));
+  Modernizr.addTest('cssreflections', testAllProps('boxReflect', 'above', true));
 });
diff --git a/feature-detects/css/resize.js b/feature-detects/css/resize.js
@@ -13,6 +13,11 @@
   }]
 }
 !*/
+/* DOC
+
+Test for CSS 3 UI "resize" property
+
+*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('cssresize', testAllProps('resize'));
+  Modernizr.addTest('cssresize', testAllProps('resize', 'both', true));
 });
diff --git a/feature-detects/css/shapes.js b/feature-detects/css/shapes.js
@@ -4,11 +4,14 @@
   "property": "shapes",
   "tags": ["css"],
   "notes": [{
-    "name": "Exclusions Spec",
-    "href": "http://www.w3.org/TR/css3-exclusions#shapes"
+    "name": "CSS Shapes W3C specification",
+    "href": "http://www.w3.org/TR/css-shapes"
   },{
-    "name": "Example from Adobe",
-    "href": "http://html.adobe.com/webstandards/cssexclusions"
+    "name": "Examples from Adobe",
+    "href": "http://html.adobe.com/webplatform/layout/shapes"
+  }, {
+    "name": "Samples showcasing uses of Shapes",
+    "href": "http://codepen.io/collection/qFesk"
   }]
 }
 !*/
@@ -22,10 +25,10 @@ define(['Modernizr', 'createElement', 'docElement', 'prefixed', 'testStyles'], f
 
         var shapeInsideProperty = prefixedProperty.replace(/([A-Z])/g, function (str, m1) { return '-' + m1.toLowerCase(); }).replace(/^ms-/, '-ms-');
 
-        return testStyles('#modernizr { ' + shapeInsideProperty + ':rectangle(0,0,0,0) }', function (elem) {
+        return testStyles('#modernizr { ' + shapeInsideProperty + ':rectangle(0,0,0,0,0,0) }', function (elem) {
             // Check against computed value
             var styleObj = window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle;
-            return styleObj[prefixed('shapeInside', docElement.style, false)] == 'rectangle(0px, 0px, 0px, 0px)';
+            return styleObj[prefixed('shapeInside', docElement.style, false)] == 'rectangle(0px, 0px, 0px, 0px, 0px, 0px)';
         });
     });
 });
diff --git a/feature-detects/css/transforms.js b/feature-detects/css/transforms.js
@@ -7,5 +7,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('csstransforms', !!testAllProps('transform'));
+  Modernizr.addTest('csstransforms', testAllProps('transform', 'scale(1)', true));
 });
diff --git a/feature-detects/css/transforms3d.js b/feature-detects/css/transforms3d.js
@@ -11,7 +11,7 @@
 !*/
 define(['Modernizr', 'testAllProps', 'testStyles', 'docElement'], function( Modernizr, testAllProps, testStyles, docElement ) {
   Modernizr.addTest('csstransforms3d', function() {
-    var ret = !!testAllProps('perspective');
+    var ret = !!testAllProps('perspective', '1px', true);
 
     // Webkit's 3D transforms are passed off to the browser's own graphics renderer.
     //   It works fine in Safari on Leopard and Snow Leopard, but not in Chrome in

diff --git a/feature-detects/css/transitions.js b/feature-detects/css/transitions.js
@@ -7,5 +7,5 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('csstransitions', testAllProps('transition'));
+  Modernizr.addTest('csstransitions', testAllProps('transition', 'all', true));
 });
diff --git a/feature-detects/css/userselect.js b/feature-detects/css/userselect.js
@@ -12,5 +12,6 @@
 }
 !*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
-  Modernizr.addTest('userselect', testAllProps('userSelect'));
+  //https://github.com/Modernizr/Modernizr/issues/250
+  Modernizr.addTest('userselect', testAllProps('userSelect', 'none', true));
 });
diff --git a/feature-detects/css/wrapflow.js b/feature-detects/css/wrapflow.js
@@ -3,17 +3,20 @@
   "name": "CSS wrap-flow",
   "property": "wrapflow",
   "tags": ["css"],
-  "notes": [{
-    "name": "W3C Exclusions Spec",
-    "href": "http://www.w3.org/TR/css3-exclusions"
-  },{
-    "name": "Example by Adobe",
-    "href": "http://html.adobe.com/webstandards/cssexclusions"
-  }]
+  "notes": [
+    "This is a separate test from the rest of CSS Exclusions as as IE10 has just implemented this alone.",
+    {
+      "name": "W3C Exclusions spec",
+      "href": "http://www.w3.org/TR/css3-exclusions"
+    },
+    {
+      "name": "Example by Adobe",
+      "href": "http://html.adobe.com/webstandards/cssexclusions"
+    }
+  ]
 }
 !*/
 define(['Modernizr', 'prefixed', 'docElement', 'createElement'], function( Modernizr, prefixed, docElement, createElement ) {
-    // Separate test for `wrap-flow` property as IE10 has just implemented this alone
     Modernizr.addTest('wrapflow', function () {
         var prefixedProperty = prefixed('wrapFlow');
         if (!prefixedProperty)

diff --git a/src/domToHyphenated.js b/src/domToHyphenated.js
@@ -0,0 +1,9 @@
+define(function() {
+    // Helper function for e.g. boxSizing -> box-sizing
+    function domToHyphenated( name ) {
+        return name.replace(/([A-Z])/g, function(str, m1) {
+            return '-' + m1.toLowerCase();
+        }).replace(/^ms-/, '-ms-');
+    }
+    return domToHyphenated;
+});
diff --git a/src/nativeTestProps.js b/src/nativeTestProps.js
@@ -0,0 +1,34 @@
+define(['injectElementWithStyles', 'domToHyphenated'], function ( injectElementWithStyles, domToHyphenated ) {
+    // Function to allow us to use native feature detection functionality if available.
+    // Accepts a list of property names and a single value
+    // Returns `undefined` if native detection not available
+    function nativeTestProps ( props, value ) {
+        var i = props.length;
+        // Start with the JS API: http://www.w3.org/TR/css3-conditional/#the-css-interface
+        if ('CSS' in window && 'supports' in window.CSS) {
+            // Try every prefixed variant of the property
+            while (i--) {
+                if (window.CSS.supports(domToHyphenated(props[i]), value)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        // Otherwise fall back to at-rule (for FF 17 and Opera 12.x)
+        else if ('CSSSupportsRule' in window) {
+            // Build a condition string for every prefixed variant
+            var conditionText = [];
+            while (i--) {
+                conditionText.push('(' + domToHyphenated(props[i]) + ':' + value + ')');
+            }
+            conditionText = conditionText.join(' or ');
+            return injectElementWithStyles('@supports (' + conditionText + ') { #modernizr { position: absolute; } }', function( node ) {
+                return (window.getComputedStyle ?
+                        getComputedStyle(node, null) :
+                        node.currentStyle)['position'] == 'absolute';
+            });
+        }
+        return undefined;
+    }
+    return nativeTestProps;
+});
diff --git a/src/testAllProps.js b/src/testAllProps.js
@@ -1,4 +1,21 @@
 define(['ModernizrProto', 'testPropsAll'], function( ModernizrProto, testPropsAll ) {
-  var testAllProps = ModernizrProto.testAllProps = testPropsAll;
-  return testAllProps;
+  /**
+   * testAllProps determines whether a given CSS property, in some prefixed
+   * form, is supported by the browser. It can optionally be given a value; in
+   * which case testAllProps will only return true if the browser supports that
+   * value for the named property; this latter case will use native detection
+   * (via window.CSS.supports) if available. A boolean can be passed as a 3rd
+   * parameter to
+   *
+   * @param prop - String naming the property to test
+   * @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
+   *                        (default: false)
+   */
+    function testAllProps (prop, value, skipValueTest) {
+        return testPropsAll(prop, undefined, undefined, value, skipValueTest);
+    }
+    ModernizrProto.testAllProps = testAllProps;
+    return testAllProps;
 });
diff --git a/src/testProp.js b/src/testProp.js
@@ -1,9 +1,11 @@
-define(['ModernizrProto', 'testProps'], function( ModernizrProto, testProps ) {
+define(['ModernizrProto', 'testProps', 'is'], function( ModernizrProto, testProps, is ) {
   // 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')
-  var testProp = ModernizrProto.testProp = function( prop ) {
-    return testProps([prop]);
+  // Also accepts optional 2nd arg, of a value to use for native feature detection, e.g.:
+  // Modernizr.testProp('pointerEvents', 'none')
+  var testProp = ModernizrProto.testProp = function( prop, value, useValue ) {
+    return testProps([prop], undefined, value, useValue);
   };
   return testProp;
 });