Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Normalize backgroundPosition and ensure that backgroundPosition[XY] a…

…lways

returns something on browsers that support that extension.
Fixes #2213 and #2295
  • Loading branch information...
commit 1e400ff1fa22aa0fe270226a57f0a9e8f0d25b07 1 parent 34ecf75
@gonchuki authored
View
13 Source/Element/Element.Style.js
@@ -71,7 +71,9 @@ var getOpacity = (hasOpacity ? function(element){
return opacity;
}));
-var floatName = (html.style.cssFloat == null) ? 'styleFloat' : 'cssFloat';
+var floatName = (html.style.cssFloat == null) ? 'styleFloat' : 'cssFloat',
+ namedPositions = {left: '0%', top: '0%', center: '50%', right: '100%', bottom: '100%'},
+ hasBackgroundPositionXY = (html.style.backgroundPositionX != null);
Element.implement({
@@ -120,6 +122,12 @@ Element.implement({
}
result = this.getComputedStyle(property);
}
+ if (hasBackgroundPositionXY && /^backgroundPosition[XY]$/.test(property) || property == 'backgroundPosition' && /(top|right|bottom|left)/.test(result)){
+ return result.replace(/(\w+)/g, function(value) { return value && namedPositions[value] || value || '0px'; }) || '0px';
+ }
+ if (!result && property == 'backgroundPosition') {
+ return '0px 0px';
+ }
if (result){
result = String(result);
var color = result.match(/rgba?\([\d\s,]+\)/);
@@ -224,4 +232,7 @@ Element.ShortStyles = {margin: {}, padding: {}, border: {}, borderWidth: {}, bor
Short.borderColor[bdc] = Short[bd][bdc] = All[bdc] = 'rgb(@, @, @)';
});
+if (hasBackgroundPositionXY) {
+ Object.merge(Element.ShortStyles, {backgroundPosition: {backgroundPositionX: '@', backgroundPositionY: '@'}});
+}
})();
View
47 Specs/1.4client/Element/Element.Style.js
@@ -175,4 +175,51 @@ describe('Element.Style', function(){
});
});
+
+ describe('getStyle background-position', function(){
+ beforeEach(function(){
+ var className = String.uniqueID();
+ var style = this.style = $(document.createElement('style'));
+ style.type = 'text/css';
+ var definition = [
+ '.' + className + '{',
+ 'background: #69a none no-repeat left bottom;',
+ '}'
+ ].join('');
+
+ // fix this, see https://github.com/mootools/mootools-core/issues/2265
+ if (style.styleSheet) style.styleSheet.cssText = definition;
+ else style.set('text', definition);
+
+ document.head.appendChild(style);
+
+ this.element = new Element('div', {
+ 'class': className,
+ text: 'yo'
+ }).inject(document.body);
+ });
+
+ afterEach(function(){
+ this.style.destroy();
+ this.element.destroy();
+ });
+
+ it('should have non-empty background-position shorthand', function(){
+ expect(this.element.getStyle('background-position')).not.toEqual(null);
+ expect(this.element.getStyle('background-position')).toMatch(/\w+/);
+ });
+
+ it('should not return a keyword-based background-position shorthand', function(){
+ expect(this.element.getStyle('background-position')).not.toMatch(/(top|right|bottom|left)/);
+ expect(this.element.getStyle('background-position')).toEqual('0% 100%');
+ });
+
+ it('should have non-empty background-position on an element with no set styles', function(){
+ var element = new Element('div');
+ expect(element.getStyle('background-position')).not.toEqual(null);
+ expect(element.getStyle('background-position')).toMatch(/\w+/);
+ element = null;
+ });
+
+ });
});
Please sign in to comment.
Something went wrong with that request. Please try again.