From b6c19b211e5ba3aff681ed8b355b0dd84bff4071 Mon Sep 17 00:00:00 2001 From: SergioCrisostomo Date: Wed, 11 Jun 2014 16:49:46 +0200 Subject: [PATCH] borderRadius getter, specs and consistency - fix getter bugby behavior for borderRadius (http://jsfiddle.net/rg4Yp/) - make result consistent cross-browser - add specs --- Source/Element/Element.Style.js | 16 +++++++++- Specs/Element/Element.Style.js | 65 ++++++++++++++++++++++++++++++++--------- 2 files changed, 67 insertions(+), 14 deletions(-) diff --git a/Source/Element/Element.Style.js b/Source/Element/Element.Style.js index 31157137..eadf7a27 100644 --- a/Source/Element/Element.Style.js +++ b/Source/Element/Element.Style.js @@ -34,6 +34,18 @@ el = null; var hasGetComputedStyle = !!window.getComputedStyle; +var supportBorderRadius = false; +['borderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius'].each(function(el){ + if(document.body.style[el] != null) supportBorderRadius = true; +}); +var getBorderRadius = function(el){ + result = []; + ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'].each(function(corner){ + result.push(el.getStyle(corner) || '0px'); + }); + return result.join(' '); +} + Element.Properties.styles = {set: function(styles){ this.setStyles(styles); }}; @@ -133,6 +145,7 @@ Element.implement({ getStyle: function(property){ if (property == 'opacity') return getOpacity(this); property = (property == 'float' ? floatName : property).camelCase(); + if (property.match(/borderRadius/)) return supportBorderRadius ? getBorderRadius(this) : null; var result = this.style[property]; if (!result || property == 'zIndex'){ if (Element.ShortStyles.hasOwnProperty(property)){ @@ -170,6 +183,7 @@ Element.implement({ return result.replace(/^(.+)\s(.+)\s(.+)$/, '$2 $3 $1'); } // + return result; }, @@ -195,7 +209,7 @@ Element.Styles = { fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', clip: 'rect(@px @px @px @px)', margin: '@px @px @px @px', padding: '@px @px @px @px', border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)', borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @', borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)', - zIndex: '@', 'zoom': '@', fontWeight: '@', textIndent: '@px', opacity: '@' + zIndex: '@', 'zoom': '@', fontWeight: '@', textIndent: '@px', opacity: '@', borderRadius: '@px @px @px @px' }; //<1.3compat> diff --git a/Specs/Element/Element.Style.js b/Specs/Element/Element.Style.js index 70356ce5..b88a319f 100644 --- a/Specs/Element/Element.Style.js +++ b/Specs/Element/Element.Style.js @@ -9,7 +9,7 @@ provides: ~ /*<1.2compat>*/ describe('Element.set `opacity`', function(){ - it('should set the opacity of an Element', function() { + it('should set the opacity of an Element', function(){ var el = new Element('div').set('opacity', 0.4); if (document.html.style.opacity != null) expect(el.style.opacity).toEqual('0.4'); @@ -19,7 +19,7 @@ describe('Element.set `opacity`', function(){ expect(el.getStyle('opacity')).toEqual(0.4); }); - it('should return the opacity of an Element', function() { + it('should return the opacity of an Element', function(){ var div = new Element('div').set('opacity', 0.4); expect(div.get('opacity') == 0.4).toBeTruthy(); div.set('opacity', 0); @@ -31,7 +31,7 @@ describe('Element.set `opacity`', function(){ describe('Element.set `opacity`', function(){ - it('should set the opacity of an Element', function() { + it('should set the opacity of an Element', function(){ var el = new Element('div').setStyle('opacity', 0.4); if (document.html.style.opacity != null) expect(el.style.opacity).toEqual('0.4'); @@ -41,7 +41,7 @@ describe('Element.set `opacity`', function(){ expect(el.getStyle('opacity')).toEqual(0.4); }); - it('should return the opacity of an Element', function() { + it('should return the opacity of an Element', function(){ var div = new Element('div').setStyle('opacity', 0.4); expect(div.getStyle('opacity') == 0.4).toBeTruthy(); div.setStyle('opacity', 0); @@ -52,22 +52,22 @@ describe('Element.set `opacity`', function(){ describe('Element.getStyle', function(){ - it('should get a six digit hex code from a three digit hex code', function() { + it('should get a six digit hex code from a three digit hex code', function(){ var el = new Element('div').set('html', '
'); expect(el.getElement('div').getStyle('color')).toEqual('#00ff00'); }); - it('should getStyle a six digit hex code from an RGB value', function() { + it('should getStyle a six digit hex code from an RGB value', function(){ var el = new Element('div').set('html', '
'); expect(el.getElement('div').getStyle('color')).toEqual('#00ff00'); }); - it('should `getStyle` with a dash in it', function() { + it('should `getStyle` with a dash in it', function(){ var el = new Element('div').set('html', '
'); expect(el.getElement('div').getStyle('list-style-type')).toEqual('square'); }); - it('should `getStyle` padding', function() { + it('should `getStyle` padding', function(){ var el = new Element('div').set('html', '
'); expect(el.getElement('div').getStyle('padding-left')).toEqual('20px'); }); @@ -76,15 +76,15 @@ describe('Element.getStyle', function(){ describe('Element.setStyle', function(){ - it('should set the `styles` property on an Element using the Element constructor', function() { + it('should set the `styles` property on an Element using the Element constructor', function(){ expect(new Element('div', {styles:{'color':'#00ff00'}}).getStyle('color')).toEqual('#00ff00'); }); - it('should `setStyle` on an Element', function() { + it('should `setStyle` on an Element', function(){ expect(new Element('div').setStyle('color','#00ff00').getStyle('color')).toEqual('#00ff00'); }); - it('should properly `setStyle` for a property with a dash in it', function() { + it('should properly `setStyle` for a property with a dash in it', function(){ expect(new Element('div').setStyle('list-style-type', 'square').getStyle('list-style-type')).toEqual('square'); }); @@ -92,7 +92,7 @@ describe('Element.setStyle', function(){ describe('Element.getStyles', function(){ - it('should return multiple styles', function() { + it('should return multiple styles', function(){ var el = new Element('div').set('html', '
'); expect(el.getElement('div').getStyles('color', 'list-style-type')).toEqual({color:'#00ff00', 'list-style-type':'square'}); }); @@ -101,7 +101,7 @@ describe('Element.getStyles', function(){ describe('Element.setStyles', function(){ - it('should set multiple styles', function() { + it('should set multiple styles', function(){ expect(new Element('div').setStyles({'list-style-type':'square', 'color':'#00ff00'}).getStyles('list-style-type', 'color')).toEqual({'list-style-type':'square', color:'#00ff00'}); }); @@ -372,4 +372,43 @@ describe('Element.Style', function(){ }); }); + + describe('Border Radius', function(){ + + var supportBorderRadius = false; + ['borderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius'].each(function(el){ + if(document.body.style[el] != null) supportBorderRadius = true; + }); + + var dit = supportBorderRadius ? it : xit; // don't run unless border-radius is supported + var element = new Element('div'); + + dit("should set and read each borderRadius corner", function(){ + + expect(element.getStyle('borderRadius')).toEqual('0px 0px 0px 0px'); + element.setStyle('border-top-left-radius', '15px'); + expect(element.getStyle('border-top-left-radius')).toEqual('15px'); + expect(element.getStyle('borderRadius')).toEqual('15px 0px 0px 0px'); + + element.setStyle('border-radius', '10px'); + expect(element.getStyle('border-top-left-radius')).not.toEqual('15px'); + expect(element.getStyle('border-top-left-radius')).toEqual('10px'); + + element.setStyle('border-radius', '2em'); + element.setStyle('border-bottom-left-radius', '1em'); + expect(element.getStyle('border-bottom-left-radius')).toEqual('1em'); + expect(element.getStyle('border-radius')).toEqual('2em 2em 2em 1em'); + + element.setStyle('border-radius', '2px 2px 0px 0px'); + expect(element.getStyle('border-radius')).toEqual('2px 2px 0px 0px'); + element.setStyle('borderRadius', '10px'); + element.setStyle('border-top-left-radius', '20px'); + element.setStyle('border-bottom-left-radius', '0px'); + expect(element.getStyle('border-top-left-radius')).toEqual('20px'); + expect(element.getStyle('border-radius')).toEqual('20px 10px 10px 0px'); + + }); + element.destroy(); + }); + }); -- 2.11.4.GIT