Fixes #2236. #2276

Closed
wants to merge 1 commit into
from
Jump to file or symbol
Failed to load files and symbols.
+33 −0
Split
@@ -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, ' ');

This comment has been minimized.

Show comment Hide comment
@arian

arian Feb 6, 2012

Owner

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?

@arian

arian Feb 6, 2012

Owner

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?

This comment has been minimized.

Show comment Hide comment
@ibolmo

ibolmo Feb 6, 2012

Owner

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.

@ibolmo

ibolmo Feb 6, 2012

Owner

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.

if (!result || property == 'zIndex'){
result = [];
for (var style in Element.ShortStyles){
@@ -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]);
+
+ })
+
+ });
+
});