Added body module, altered tests that need it #877

* body module will check for body or create a fakeBody * Changed tests to either use testStyles or inject body module
Modernizr · Apr 1, 2013 · de7fba8 · Nettsentrisk · Jan 15, 2016 · staabm
1 parent 5a1a396
commit de7fba8
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 69 deletions.
diff --git a/feature-detects/elem/details.js b/feature-detects/elem/details.js
@@ -1,23 +1,22 @@
-define(['Modernizr', 'createElement', 'docElement'], function( Modernizr, createElement, docElement ) {
+define(['Modernizr', 'createElement', 'docElement', 'testStyles'], function( Modernizr, createElement, docElement, testStyles ) {
   // By @mathias, based on http://mths.be/axh
   Modernizr.addTest('details', function() {
     var el = createElement('details');
-    var fake;
+    var diff;
+
     if (!('open' in el)) { // return early if possible; thanks @aFarkas!
       return false;
     }
-    var root = document.body || (function() {
-      fake = true;
-      return docElement.insertBefore(createElement('body'), docElement.firstElementChild || docElement.firstChild);
-    }());
-    el.innerHTML = '<summary>a</summary>b';
-    el.style.display = 'block';
-    root.appendChild(el);
-    var diff = el.offsetHeight;
-    el.open = true;
-    diff = diff != el.offsetHeight;
-    root.removeChild(el);
-    fake && root.parentNode.removeChild(root);
+
+    testStyles('#modernizr details{display:block}', function( node ) {
+      node.appendChild(el);
+      el.innerHTML = '<summary>a</summary>b';
+      diff = el.offsetHeight;
+      el.open = true;
+      diff = diff != el.offsetHeight;
+    });
+
+
     return diff;
   });
 });
diff --git a/feature-detects/forms/inputnumber-l10n.js b/feature-detects/forms/inputnumber-l10n.js
@@ -1,18 +1,17 @@
-define(['Modernizr', 'createElement', 'docElement'], function( Modernizr, createElement, docElement ) {
+define(['Modernizr', 'createElement', 'docElement', 'body'], function( Modernizr, createElement, docElement ) {
   // input[type="number"] localized input/output
   // // Detects whether input type="number" is capable of receiving and
   // // displaying localized numbers, e.g. with comma separator
   // // https://bugs.webkit.org/show_bug.cgi?id=42484
   // // Based on http://trac.webkit.org/browser/trunk/LayoutTests/fast/forms/script-tests/input-number-keyoperation.js?rev=80096#L9
   // // By Peter Janes
 
-  Modernizr.addTest('localizedNumber', function() {
+  Modernizr.addTest('localizednumber', function() {
     var el = createElement('div');
-    var fake;
+    var diff;
 
-    var root = document.body || (function() {
-      fake = true;
-      return docElement.insertBefore(createElement('body'), docElement.firstElementChild || docElement.firstChild);
+    var root = (function() {
+      return docElement.insertBefore(body, docElement.firstElementChild || docElement.firstChild);
     }());
     el.innerHTML = '<input type="number" value="1.0" step="0.1"/>';
     var input = el.childNodes[0];
@@ -22,9 +21,9 @@ define(['Modernizr', 'createElement', 'docElement'], function( Modernizr, create
       document.execCommand('InsertText', false, '1,1');
     } catch(e) { // prevent warnings in IE
     }
-    var diff = input.type === 'number' && input.valueAsNumber === 1.1 && input.checkValidity();
+    diff = input.type === 'number' && input.valueAsNumber === 1.1 && input.checkValidity();
     root.removeChild(el);
-    fake && root.parentNode.removeChild(root);
+    body.fake && root.parentNode.removeChild(root);
     return diff;
   });
 

diff --git a/feature-detects/forms/validation.js b/feature-detects/forms/validation.js
@@ -1,4 +1,4 @@
-define(['Modernizr', 'createElement', 'docElement'], function( Modernizr, createElement, docElement ) {
+define(['Modernizr', 'createElement', 'docElement', 'testStyles'], function( Modernizr, createElement, docElement, testStyles ) {
   // This implementation only tests support for interactive form validation.
   // To check validation for a specific type or a specific other constraint,
   // the test can be combined:
@@ -11,9 +11,6 @@ define(['Modernizr', 'createElement', 'docElement'], function( Modernizr, create
       if ( !('checkValidity' in form) || !('addEventListener' in form) ) {
         return false;
       }
-      var body = document.body;
-      var html = docElement;
-      var bodyFaked = false;
       var invaildFired = false;
       var input;
 
@@ -33,40 +30,24 @@ define(['Modernizr', 'createElement', 'docElement'], function( Modernizr, create
       //older opera browsers need a name attribute
       form.innerHTML = '<input name="modTest" required><button></button>';
 
-      // FF4 doesn't trigger "invalid" event if form is not in the DOM tree
-      // Chrome throws error if invalid input is not visible when submitting
-      form.style.position = 'absolute';
-      form.style.top = '-99999em';
+      testStyles('#modernizr form{position:absolute;top:-99999em}', function( node ) {
+        node.appendChild(form);
 
-      // We might in <head> in which case we need to create body manually
-      if ( !body ) {
-        bodyFaked = true;
-        body = createElement('body');
-        //avoid crashing IE8, if background image is used
-        body.style.background = "";
-        html.appendChild(body);
-      }
-
-      body.appendChild(form);
+        input = form.getElementsByTagName('input')[0];
 
-      input = form.getElementsByTagName('input')[0];
-
-      // Record whether "invalid" event is fired
-      input.addEventListener('invalid', function(e) {
-        invaildFired = true;
-        e.preventDefault();
-        e.stopPropagation();
-      }, false);
-
-      //Opera does not fully support the validationMessage property
-      Modernizr.formvalidationmessage = !!input.validationMessage;
+        // Record whether "invalid" event is fired
+        input.addEventListener('invalid', function(e) {
+          invaildFired = true;
+          e.preventDefault();
+          e.stopPropagation();
+        }, false);
 
-      // Submit form by clicking submit button
-      form.getElementsByTagName('button')[0].click();
+        //Opera does not fully support the validationMessage property
+        Modernizr.formvalidationmessage = !!input.validationMessage;
 
-      // Don't forget to clean up
-      body.removeChild(form);
-      bodyFaked && html.removeChild(body);
+        // Submit form by clicking submit button
+        form.getElementsByTagName('button')[0].click();
+      });
 
       return invaildFired;
     });

diff --git a/src/body.js b/src/body.js
@@ -0,0 +1,12 @@
+define(['createElement'], function( createElement ) {
+  // After page load injecting a fake body doesn't work so check if body exists
+  var body = document.body;
+  // Can we use the real body or should we create a fake one.
+  var fakeBody = body || createElement('body');
+
+  if(!body) {
+    fakeBody.fake = true;
+  }
+
+  return fakeBody;
+});
diff --git a/src/injectElementWithStyles.js b/src/injectElementWithStyles.js
@@ -1,4 +1,4 @@
-define(['ModernizrProto', 'docElement', 'createElement'], function( ModernizrProto, docElement, createElement ) {
+define(['ModernizrProto', 'docElement', 'createElement', 'body'], function( ModernizrProto, docElement, createElement, body ) {
   // Inject element with style element and some CSS rules
   function injectElementWithStyles( rule, callback, nodes, testnames ) {
     var mod = 'modernizr';
@@ -7,10 +7,6 @@ define(['ModernizrProto', 'docElement', 'createElement'], function( ModernizrPro
     var node;
     var docOverflow;
     var div = createElement('div');
-    // After page load injecting a fake body doesn't work so check if body exists
-    var body = document.body;
-    // IE6 and 7 won't return offsetWidth or offsetHeight unless it's in the body element, so we fake it.
-    var fakeBody = body || createElement('body');
 
     if ( parseInt(nodes, 10) ) {
       // In order not to give false positives we create a node for each test
@@ -31,22 +27,22 @@ define(['ModernizrProto', 'docElement', 'createElement'], function( ModernizrPro
     div.id = mod;
     // IE6 will false positive on some tests due to the style element inside the test div somehow interfering offsetHeight, so insert it into body or fakebody.
     // Opera will act all quirky when injecting elements in documentElement when page is served as xml, needs fakebody too. #270
-    (body ? div : fakeBody).innerHTML += style;
-    fakeBody.appendChild(div);
-    if ( !body ) {
+    (!body.fake ? div : body).innerHTML += style;
+    body.appendChild(div);
+    if ( body.fake ) {
       //avoid crashing IE8, if background image is used
-      fakeBody.style.background = '';
+      body.style.background = '';
       //Safari 5.13/5.1.4 OSX stops loading if ::-webkit-scrollbar is used and scrollbars are visible
-      fakeBody.style.overflow = 'hidden';
+      body.style.overflow = 'hidden';
       docOverflow = docElement.style.overflow;
       docElement.style.overflow = 'hidden';
-      docElement.appendChild(fakeBody);
+      docElement.appendChild(body);
     }
 
     ret = callback(div, rule);
     // If this is done after page load we don't want to remove the body so check if body exists
-    if ( !body ) {
-      fakeBody.parentNode.removeChild(fakeBody);
+    if ( body.fake ) {
+      body.parentNode.removeChild(body);
       docElement.style.overflow = docOverflow;
     } else {
       div.parentNode.removeChild(div);