Step 2: Treating css syntax as camelCase

The difference in behaviour between CSS syntax and camelCase is revealed in tests 3 through 9. By adding the following code to jQuery's core.js:

859: // Convert background-position CSS syntax as camelCase
860: if ( /background\-?position/.test( name ) ) {
861:   name = name.replace(/-([a-z])/ig, function(all, letter) {
862:     return letter.toUpperCase();
863:   });
864: }

rebuilding and running the tests we see the following improvements:

3. jQuery('#bp').css('background-position', '10px 5%')
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5%
Assert set value for backgroundPosition is 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5%
Assert set value value for background-position-x is 10px "" "" "" 10px 10px 10px ""
Assert set value value for backgroundPositionX is 10px "" "" "" 10px 10px 10px ""
Assert set value value for background-position-y is 5% "" "" "" 5% 5% 5% ""
Assert set value value for backgroundPositionY is 5% "" "" "" 5% 5% 5% ""
4. jQuery('#bp').css('backgroundPosition', '10px 5%')
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5%
Assert set value for backgroundPosition is 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5%
Assert set value value for background-position-x is 10px "" "" "" 10px 10px 10px ""
Assert set value value for backgroundPositionX is 10px "" "" "" 10px 10px 10px ""
Assert set value value for background-position-y is 5% "" "" "" 5% 5% 5% ""
Assert set value value for backgroundPositionY is 5% "" "" "" 5% 5% 5% ""
5. jQuery('#bp').css({backgroundPosition: '10px 5%'})
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5%
Assert set value for backgroundPosition is 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5% 10px 5%
Assert set value value for background-position-x is 10px "" "" "" 10px 10px 10px ""
Assert set value value for backgroundPositionX is 10px "" "" "" 10px 10px 10px ""
Assert set value value for background-position-y is 5% "" "" "" 5% 5% 5% ""
Assert set value value for backgroundPositionY is 5% "" "" "" 5% 5% 5% ""
6. jQuery('#bp').css('background-position-x', '10px')
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 10px 0% "" "" 0% 0% 10px_ 10px_ 10px 0px 0px
Assert set value for backgroundPosition is 10px 0% "" "" 0% 0% 10px_ 10px_ 10px 0px 0px
Assert set value value for background-position-x is 10px 10px 10px 10px 10px 10px 10px 10px
Assert set value value for backgroundPositionX is 10px 10px 10px 10px 10px 10px 10px 10px
7. jQuery('#bp').css('background-position-y', '10px')
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 0% 10px "" "" 0% 0% _10px _10px 10px 0px 0px
Assert set value for backgroundPosition is 0% 10px "" "" 0% 0% _10px _10px 10px 0px 0px
Assert set value value for background-position-y is 10px 10px 10px 10px 10px 10px 10px 10px
Assert set value value for backgroundPositionY is 10px 10px 10px 10px 10px 10px 10px 10px
8. jQuery('#bp').css({backgroundPositionX: '10px', backgroundPositionY: '5%'})
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 10px 5% "" "" 0% 0% 10px 5% 10px 5% 10px 5% 0px 0px
Assert set value for backgroundPosition is 10px 5% "" "" 0% 0% 10px 5% 10px 5% 10px 5% 0px 0px
Assert set value value for background-position-x is 10px 10px 10px 10px 10px 10px 10px 10px
Assert set value value for backgroundPositionX is 10px 10px 10px 10px 10px 10px 10px 10px
Assert set value value for background-position-y is 5% 5% 5% 5% 5% 5% 5% 5%
Assert set value value for backgroundPositionY is 5% 5% 5% 5% 5% 5% 5% 5%
9. jQuery('#bp').css({backgroundPositionX: 'right', backgroundPositionY: 'bottom'})
Assertion Firefox Internet Explorer Safari Opera
1.5.0.12 2.0.0.18 3.0.4 6.0 7.0 3.2 9.62
Assert set value for background-position is 100% 100% "" "" 0% 0% right bottom right bottom 100% 100% 0px 0px
Assert set value for backgroundPosition is 100% 100% "" "" 0% 0% right bottom right bottom 100% 100% 0px 0px
Assert set value value for background-position-x is 100% right right right right right 100% right
Assert set value value for backgroundPositionX is 100% right right right right right 100% right
Assert set value value for background-position-y is 100% bottom bottom bottom bottom bottom 100% bottom
Assert set value value for backgroundPositionY is 100% bottom bottom bottom bottom bottom 100% bottom

Interpreting the results

We now have a much clearer view of the situation from the tests and a simpler problem set to deal with from here on.

Step 3: Replacing keywords with percentages