No effect when setting css `left` position as percentage using jQuery `css()`

[nickvoegeli]

I'm running into an issue that seems oddly specific. I'm using zombie for headless feature testing with Mocha. My tests and code use jquery, and everything is generally behaving itself - of my dozen or so tests so far, all are passing but one. It's a test that verifies the position of an element after a method runs. The method repositions the element using $('div.my-class').css('left', '-100%');

The test is consistently failing, even though manually performing the same actions in Chrome results in the expected behavior. Running console.log($('div.my-class').css('left')); immediately before and after the position is set in the method under test shows no change. There are no animations or transition effects on this element.

I was able to boil the issue down to the following. Given a page containing <div id="mine"></div>, if I do this:

console.log('Before: ' + $('div#mine').css('left'));
$('div#mine').css('left', '-15%');
console.log('After: ' + $('div#mine').css('left'));

I see this in my test output:

Before: 
After: 0px

If I replace % with px in the code above, it works:

Before: 
After: -15px

If I replace left with right in the code above, it works:

Before: 
After: -15%

Any ideas?

[mdlavin]

You are right, very odd behavior. I wrote a testcase for your scenario and it looks like left and right both can be update with percentage values using jquery < 1.8. After that release updating left (and only left) with a percentage stopped working. Will look more to see if there is a obvious change after 1.8 that causes the behavior.

[mdlavin]

jquery >= 1.8 seems to be working to avoid returning percentage values depending on how window.getComputedStyle() behaves. The implementation of jsdom's getComputedStyle() behaves in a way that triggers jquery to start adding special behavior for 'left' and 'top' css lookups. Perhaps there is a way to fix the getComputedStyle() to make jquery in zombie behave more like a real browser.