making <html> class logic a tiny bit more robust (+ more tests)

Modernizr · Aug 28, 2011 · 41666bc · 41666bc
1 parent 664064c
commit 41666bc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/modernizr.js b/modernizr.js
@@ -1108,7 +1108,7 @@ window.Modernizr = (function( window, document, undefined ) {
 
 
     // Remove "no-js" class from <html> element, if it exists:
-    docElement.className = docElement.className.replace(/\bno-js\b/, '')
+    docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2')
 
                             // Add the new classes to the <html> element.
                             + (enableClasses ? ' js ' + classes.join(' ') : '');

diff --git a/test/index.html b/test/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js">
+<html class="+no-js no-js- no-js i-has-no-js">
 <head>
   <meta charset="UTF-8">
   <title>Modernizr Test Suite</title>

diff --git a/test/js/unit.js b/test/js/unit.js
@@ -37,12 +37,21 @@ test("document.documentElement is valid and correct",1, function() {
 
 test("no-js class is gone.", function() {
 
-	equals(document.documentElement.className.indexOf('no-js') , -1,
-	       'no-js is gone.'); 
+	ok(!/(?:^|\s)no-js(?:^|\s)/.test(document.documentElement.className),
+	   'no-js class is gone');
 
-	ok(/\bjs /.test(document.documentElement.className),
-	   'html.js class is present')
-
+	ok(/(?:^|\s)js(?:^|\s)/.test(document.documentElement.className),
+	   'html.js class is present');
+
+	ok(/(?:^|\s)\+no-js(?:\s|$)/.test(document.documentElement.className),
+	   'html.+no-js class is still present');
+
+	ok(/(?:^|\s)no-js-(?:\s|$)/.test(document.documentElement.className),
+	   'html.no-js- class is still present');
+
+	ok(/(?:^|\s)i-has-no-js(?:\s|$)/.test(document.documentElement.className),
+	   'html.i-has-no-js class is still present');
+
 	if (document.querySelector){
 	  ok(document.querySelector('html.js') == document.documentElement, 
 	     "document.querySelector('html.js') matches.");
@@ -109,7 +118,8 @@ test('html classes are looking good',function(){
   for (var i = 0, len = classes.length, aclass; i <len; i++){
     aclass = classes[i];
 
-    if (aclass === 'js') continue;
+    // Skip js related classes.
+    if (/^(?:js|\+no-js|no-js-|i-has-no-js)$/.test(aclass)) continue;
 
     if (aclass.indexOf('no-') === 0){
       aclass = aclass.replace('no-','');
@@ -128,9 +138,13 @@ test('html classes are looking good',function(){
     equals(classes[i],classes[i].toLowerCase(),'all classes are lowerCase.');
   }
 
-  equals(/[^\s]no-/.test(document.documentElement.className),false,
-         'whitespace between all classes.');
-
+  // Remove fake no-js classes before test.
+  var docElClass = document.documentElement.className;
+  $.each(['\\+no-js', 'no-js-', 'i-has-no-js'], function(i, fakeClass) {
+    docElClass = docElClass.replace(new RegExp('(^|\\s)' + fakeClass + '(\\s|$)', 'g'), '$1$2');
+  });
+  equals(/[^\s]no-/.test(docElClass), false, 'whitespace between all classes.');
+
 
 })