Fixes #2236. #2276

Open
wants to merge 1 commit into
from
View
1 Source/Element/Element.Style.js
@@ -89,6 +89,7 @@ Element.implement({
if (property == 'opacity') return getOpacity(this);
property = (property == 'float' ? floatName : property).camelCase();
var result = this.style[property];
+ if (property == 'clip') result = result.replace(/,\s*/g, ' ');
@arian
MooTools member
arian added a line comment Feb 6, 2012

I think we should follow the spec here and return rect(<top>, <right>, <bottom>, <left>), so with the commas. Maybe we can create a Fx.CSS.Parsers which support comma separated values?

@ibolmo
MooTools member
ibolmo added a line comment Feb 6, 2012

Yeah that was problematic.

I tried to go from (a b c d) to (a, b, c, d) but the second spec would fail because the Element.Styles for clip were updated to: rect(@px, @px, @px, @px) and since (a, b, c, d) is split(' ') to ['rect(a', 'b', 'c', 'd'] and set style maps values to Element.Styles .. but the first split is rect(@px, and value is rect(a a string and not a number, it'll just place that value in the result:

rect(a b, c, d) this caused all browsers to fail since they couldn't parse the clip value.

Either we fix again in Fx.CSS.parser or we can just return space separate values. technically the developer has to support both interfaces. aka, consider the developer a user agent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
if (!result || property == 'zIndex'){
result = [];
for (var style in Element.ShortStyles){
View
32 Specs/1.4client/Fx/Fx.Tween.js
@@ -59,4 +59,36 @@ describe('Fx.Tween', function(){
});
+ describe('Element.tween("clip")', function(){
+
+ it('should animate the clip', function(){
+ var element = new Element('div', {
+ text: Array(5).join('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod '),
+ styles: {
+ width: 200,
+ height: 100,
+ position: 'absolute',
+ clip: 'rect(0px, 0px, 200px, 0px)'
+ }
+ });
+ var spy = spyOn(element, 'setStyle').andCallThrough();
+
+ element.tween('clip', 'rect(0px, 100px, 200px, 0px)');
+
+ this.clock.tick(10000);
+
+ expect(spy).toHaveBeenCalledWith('clip', ['rect(0px,', 100, 200, 0]);
+
+ spy.reset();
+
+ element.tween('clip', 'rect(0px 50px 200px 0px)');
+
+ this.clock.tick(10000);
+
+ expect(spy).toHaveBeenCalledWith('clip', ['rect(0px', 50, 200, 0]);
+
+ })
+
+ });
+
});