premasagar / pablo

Pablo is a lightweight, expressive JavaScript SVG library. Pablo creates interactive drawings with SVG (Scalable Vector Graphics), giving access to all of SVG's granularity and power.
https://pablojs.com
MIT License
413 stars 16 forks source link

Have .cssPrefix() work as a getter as well #26

Closed AaronAcerboni closed 11 years ago

AaronAcerboni commented 11 years ago

I understand the point of the cssPrefix is so a developer can save time but also apply a style rule without specifying any code for a specific browser.

If I need to check for that property exists it would be useful if cssPrefix could also work as a getter.

.cssPrefix(transition)

It would be particularly useful in the cssPrefix as a setter test since I want to see if the rule was applied correctly but without doing the following:


var appliedWithPrefix = !!(subject.css('-webkit-transition')  || 
                           subject.css('-moz-transition')     ||
                           subject.css('-o-transition')       ||
                           subject.css('-ms-transition')      ||
                           subject.css('-khtml-transition'))

expect(appliedWithPrefix).to.eql(true);
AaronAcerboni commented 11 years ago

I get the error:

TypeError: Cannot call method 'split' of undefined at PabloCollection.extend.cssPrefix
Development/tools/pablo/pablo.js:854:46)

Steps to reproduce incoming (chrome):

var subject = Pablo.rect();

subject.cssPrefix('transform', 'opacity 0.5s');

subject.css('-webkit-transform') // returns 'opacity 0.5s' which is correct

but

subject.cssPrefix('transform') // produces error

Get the same error if I use a DOM element already on the page and not in memory.

AaronAcerboni commented 11 years ago

Actually the steps to reproduce are incorrect since subject is only in memory and it doesn't seem to have the styles applied to it as it would if it was on the DOM.

subject.css('-webkit-transform') // actually returns null

but the problem persists when using an example existing on a dom page

var subject = Pablo('#test-subjects');

subject.cssPrefix('transform', 'opacity 0.5s');

subject.css('-webkit-transform')  // returns "opacity 0.5s" which is correct

// but

subject.cssPrefix('transform')
premasagar commented 11 years ago

Oops, sorry. I forgot to change a var name.