fix(jqLite): css should convert dash-separated properties to camelCase

this fix is needed for Firefox or other browsers that strictly follow
dom/css spec which states that element.style should make properties
available in camelCased form.

Closes angular#569

Author: IgorMinar

src/jqLite.js

@@ -88,6 +88,30 @@ function getStyle(element) {
   return current;
 }
 
+
+/**
+ * Converts dash-separated names to camelCase. Useful for dealing with css properties.
+ */
+function camelCase(name) {
+  var parts = name.split('-');
+
+  name = parts.shift();
+
+  if (name == '' && parts.length) {
+    // browser specific property starting with "-"
+    name = parts.shift();
+
+    if (name == 'moz') name = 'Moz';
+  }
+
+  forEach(parts, function(part) {
+    name += part.charAt(0).toUpperCase();
+    name += part.substr(1);
+  });
+
+  return name;
+}
+
 /////////////////////////////////////////////
 function jqLiteWrap(element) {
   if (isString(element) && element.charAt(0) != '<') {
@@ -247,20 +271,27 @@ forEach({
   hasClass: JQLiteHasClass,
 
   css: function(element, name, value) {
+    name = camelCase(name);
+
     if (isDefined(value)) {
       element.style[name] = value;
     } else {
       var val;
 
-      if (msie <=8) {
+      if (msie <= 8) {
         // this is some IE specific weirdness that jQuery 1.6.4 does not sure why
         val = element.currentStyle && element.currentStyle[name];
         if (val === '') val = 'auto';
       }
 
       val = val || element.style[name];
 
-      return  (val === '') ? undefined : val;
+      if (msie <= 8) {
+        // jquery weirdness :-/
+        val = (val === '') ? undefined : val;
+      }
+
+      return  val;
     }
   },
 

test/jqLiteSpec.js

@@ -366,6 +366,25 @@ describe('jqLite', function(){
       expect(jqLite(a).css('padding')).toBe('2px');
       expect(jqLite(a).css('border')).toBeFalsy();
     });
+
+
+    it('should correctly handle dash-separated and camelCased properties', function() {
+      var jqA = jqLite(a);
+
+      expect(jqA.css('z-index')).toBeOneOf('', 'auto');
+      expect(jqA.css('zIndex')).toBeOneOf('', 'auto');
+
+
+      jqA.css({'zIndex':5});
+
+      expect(jqA.css('z-index')).toBeOneOf('5', 5);
+      expect(jqA.css('zIndex')).toBeOneOf('5', 5);
+
+      jqA.css({'z-index':7});
+
+      expect(jqA.css('z-index')).toBeOneOf('7', 7);
+      expect(jqA.css('zIndex')).toBeOneOf('7', 7);
+    });
   });
 
 
@@ -747,4 +766,27 @@ describe('jqLite', function(){
       expect(element.find('span').eq(20).length).toBe(0);
     });
   });
+
+
+  describe('camelCase', function() {
+
+   it('should leave non-dashed strings alone', function() {
+     expect(camelCase('foo')).toBe('foo');
+     expect(camelCase('')).toBe('');
+     expect(camelCase('fooBar')).toBe('fooBar');
+   });
+
+
+   it('should covert dash-separated strings to camelCase', function() {
+     expect(camelCase('foo-bar')).toBe('fooBar');
+     expect(camelCase('foo-bar-baz')).toBe('fooBarBaz');
+   });
+
+
+   it('should covert browser specific css properties', function() {
+     expect(camelCase('-moz-foo-bar')).toBe('MozFooBar');
+     expect(camelCase('-webkit-foo-bar')).toBe('webkitFooBar');
+     expect(camelCase('-webkit-foo-bar')).toBe('webkitFooBar');
+   })
+  });
 });