mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-21 17:00:24 +00:00
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 #569
This commit is contained in:
parent
084b83ffa9
commit
ca1e45beaf
2 changed files with 61 additions and 2 deletions
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////
|
||||
function jqLiteWrap(element) {
|
||||
if (isString(element) && element.charAt(0) != '<') {
|
||||
|
|
@ -247,12 +257,14 @@ 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';
|
||||
|
|
@ -260,7 +272,12 @@ forEach({
|
|||
|
||||
val = val || element.style[name];
|
||||
|
||||
return (val === '') ? undefined : val;
|
||||
if (msie <= 8) {
|
||||
// jquery weirdness :-/
|
||||
val = (val === '') ? undefined : val;
|
||||
}
|
||||
|
||||
return val;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue