Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
fix(jqLite): css should convert dash-separated properties to camelCase
Browse files Browse the repository at this point in the history
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 #569
  • Loading branch information
IgorMinar committed Sep 28, 2011
1 parent 084b83f commit ca1e45b
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 2 deletions.
21 changes: 19 additions & 2 deletions src/jqLite.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,16 @@ function getStyle(element) {
return current;
}


/**
* Converts dash-separated names to camelCase. Useful for dealing with css properties.
*/
function camelCase(name) {
return name.replace(/\-(\w)/g, function(all, letter, offset){
return (offset == 0 && letter == 'w') ? 'w' : letter.toUpperCase();

This comment has been minimized.

Copy link
@mhevery

mhevery Sep 28, 2011

Contributor

that is nuts, but I guess it is right. :-)

});
}

/////////////////////////////////////////////
function jqLiteWrap(element) {
if (isString(element) && element.charAt(0) != '<') {
Expand Down Expand Up @@ -247,20 +257,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;
}
},

Expand Down
42 changes: 42 additions & 0 deletions test/jqLiteSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});


Expand Down Expand Up @@ -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');
})
});
});

0 comments on commit ca1e45b

Please sign in to comment.