CSS Background Position: Four Values Syntax

A Modernizer test to check for existence of the background-position: four values syntax

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<div class="box">
Some text
</div>

CSS

.box {
    width: 200px;
    height: 200px; 
    background-image: url('http://placebox.es/50/50/d97f19/f1f1f1/');
    background-repeat: no-repeat;
    background-position: right 10px bottom 10px;     
}    

.bgpositionshorthand .box {
    background-color: green;
}

.no-bgpositionshorthand .box {
    background-color: red;
}

JavaScript

/*!
{
  "name": "Background Position Shorthand",
  "property": "bgpositionshorthand",
  "tags": ["css"],
  "notes": [{
    "name": "MDN Docs",
    "href": "https://developer.mozilla.org/en/CSS/background-position"
  }, {
    "name": "W3 Spec",
    "href": "http://www.w3.org/TR/css3-background/#background-position"
  }, {
    "name": "Demo",
    "href": "http://jsfiddle.net/Blink/bBXvt/"
  }]
}
!*/
/*
Detects if you can use the shorthand method to define multiple parts of an
element's background-position simultaniously.

eg `background-position: right 10px bottom 10px`
*/

var createElement = function() {
  return document.createElement.apply(document, arguments);
};

Modernizr.addTest('bgpositionshorthand', function() {
    var elem = createElement('a');
    var eStyle = elem.style;
    var val = 'right 10px bottom 10px';
    eStyle.cssText = 'background-position: ' + val + ';';
    return (eStyle.backgroundPosition === val);
  });