Added detect for flex-wrap (Fixes 1048)

Modernizr · Nov 25, 2013 · 65e31e2 · 65e31e2
1 parent c5fc164
commit 65e31e2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/feature-detects/css/flexbox.js b/feature-detects/css/flexbox.js
@@ -7,9 +7,17 @@
   "notes": [{
     "name": "The _new_ flexbox",
     "href": "http://dev.w3.org/csswg/css3-flexbox"
-  }]
+  }],
+  "warnings": [
+    "A `true` result for this detect does not imply that the `flex-wrap` property is supported; see the `flexwrap` detect."
+  ]
 }
 !*/
+/* DOC
+
+Detects support for the Flexible Box Layout model, a.k.a. Flexbox, which allows easy manipulation of layout order and sizing within a container.
+
+*/
 define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
   Modernizr.addTest('flexbox', testAllProps('flexBasis', '1px', true));
 });
diff --git a/feature-detects/css/flexwrap.js b/feature-detects/css/flexwrap.js
@@ -0,0 +1,33 @@
+/*!
+{
+  "name": "Flex Line Wrapping",
+  "property": "flexwrap",
+  "tags": ["css", "flexbox"],
+  "notes": [{
+    "name": "W3C Flexible Box Layout spec",
+    "href": "http://dev.w3.org/csswg/css3-flexbox"
+  }],
+  "warnings": [
+    "Does not imply a modern implementation – see documentation."
+  ]
+}
+!*/
+/* DOC
+
+Detects support for the `flex-wrap` CSS property, part of Flexbox, which isn’t present in all Flexbox implementations (notably Firefox).
+
+This featured in both the 'tweener' syntax (implemented by IE10) and the 'modern' syntax (implemented by others). This detect will return `true` for either of these implementations, as long as the `flex-wrap` property is supported. So to ensure the modern syntax is supported, use together with `Modernizr.flexbox`:
+
+```javascript
+if (Modernizr.flexbox && Modernizr.flexwrap) {
+  // Modern Flexbox with `flex-wrap` supported
+}
+else {
+  // Either old Flexbox syntax, or `flex-wrap` not supported
+}
+```
+
+*/
+define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+  Modernizr.addTest('flexbox', testAllProps('flexWrap', 'wrap', true));
+});
diff --git a/lib/config-all.json b/lib/config-all.json
@@ -47,6 +47,7 @@
     "test/css/flexbox",
     "test/css/flexboxlegacy",
     "test/css/flexboxtweener",
+    "test/css/flexwrap",
     "test/css/fontface",
     "test/css/generatedcontent",
     "test/css/gradients",