Permalink
Browse files

Merge pull request #2611 from SergioCrisostomo/fix-2545

borderRadius getter, specs and consistency
  • Loading branch information...
ibolmo committed Jul 1, 2014
2 parents 94a64bc + 4bac80f commit 9e4919750a7baff8a94d8e8efdf60f91aaf2da64
Showing with 58 additions and 15 deletions.
  1. +9 −2 Source/Element/Element.Style.js
  2. +49 −13 Specs/Element/Element.Style.js
@@ -32,7 +32,8 @@ var returnsBordersInWrongOrder = el.style.border != border;
el = null;
//</ltIE9>
var hasGetComputedStyle = !!window.getComputedStyle;
var hasGetComputedStyle = !!window.getComputedStyle,
supportBorderRadius = document.body.style.borderRadius != null;
Element.Properties.styles = {set: function(styles){
this.setStyles(styles);
@@ -133,6 +134,11 @@ Element.implement({
getStyle: function(property){
if (property == 'opacity') return getOpacity(this);
property = (property == 'float' ? floatName : property).camelCase();
if (supportBorderRadius && property.indexOf('borderRadius') != -1){
return ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'].map(function(corner){
return this.style[corner] || '0px';
}, this).join(' ');
}
var result = this.style[property];
if (!result || property == 'zIndex'){
if (Element.ShortStyles.hasOwnProperty(property)){
@@ -170,6 +176,7 @@ Element.implement({
return result.replace(/^(.+)\s(.+)\s(.+)$/, '$2 $3 $1');
}
//</ltIE9>
return result;
},
@@ -195,7 +202,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>
@@ -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', '<div style="color:#00ff00"></div>');
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', '<div style="color:rgb(0, 255, 0)"></div>');
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', '<div style="list-style-type:square"></div>');
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', '<div style="padding:20px"></div>');
expect(el.getElement('div').getStyle('padding-left')).toEqual('20px');
});
@@ -76,23 +76,23 @@ 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');
});
});
describe('Element.getStyles', function(){
it('should return multiple styles', function() {
it('should return multiple styles', function(){
var el = new Element('div').set('html', '<div style="color:#00ff00;list-style-type:square"></div>');
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,40 @@ describe('Element.Style', function(){
});
});
describe('Border Radius', function(){
var supportBorderRadius = document.body.style.borderRadius != null ? true : false;
if (navigator.userAgent.match(/PhantomJS\/1./)) supportBorderRadius = false;
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();
});
});

0 comments on commit 9e49197

Please sign in to comment.