Modernizr backgroundPositionXY detection

by allanlei

HTML

<script src="http://modernizr.com/downloads/modernizr-2.5.3.js"></script>
<div id="results"></div>

<ul id="credits" style="margin-top:1em;>
    <li>By <a href="https://github.com/allanlei">Allan Lei</a></li>
    <li>Base test method from <a href="https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js">brandonaaron  / jquery-cssHooks</a></li>
</ul>

JavaScript

// backgroundPositionXY test.
Modernizr.addTest('bgpositionxy', function() {
    return Modernizr.testStyles('#modernizr {background-position: 3px 5px;}', function(elem) {
        var cssStyleDeclaration = window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle;
        var xSupport = (cssStyleDeclaration.backgroundPositionX == '3px') || (cssStyleDeclaration['background-position-x'] == '3px');
        var ySupport = (cssStyleDeclaration.backgroundPositionY == '5px') || (cssStyleDeclaration['background-position-y'] == '5px');
        return xSupport && ySupport;
    });
});

// Output result
document.getElementById("results").innerHTML = Modernizr.bgpositionxy ? "backgroundPositionXY support detected" : "backgroundPositionXY support not detected";
document.getElementById("results").style.color = Modernizr.bgpositionxy ? "green" : "red";