DETECT BACKGROUND-COLOR/IMAGE IS SET ON ELEMENT

by bizamajig

HTML

<div id="backColor" data-expected="true"></div>
<div id="backImage" data-expected="true"></div>
<div id="backBoth" data-expected="true"></div>
<div id="backChange" data-expected="false"></div>
<div id="backNone" data-expected="false"></div>

CSS

div
{
    display: inline-block;
    width: 200px;
    height: 200px;
}
.pass
{
    border: solid 2px green;
}
.fail
{
    border: solid 2px red;
}
#backColor
{
    background: red;
}
#backImage
{
    background: url(http://placekitten.com/200/300);
}
#backBoth
{
    background: black url(http://placekitten.com/200/300);
}
#backChange
{
    background: green url(http://placekitten.com/200/300);
}

JavaScript

$.fn.hasBack = function()
{
    var me = $.fn.hasBack;
    if(!me.cache)
    {
        // get the background color and image transparent/none values
        // create a temporary element
        var $tmpElem = $('<div />').hide().appendTo('body');
        $.fn.hasBack.cache = {
            color: $tmpElem.css('background-color'),
            image: $tmpElem.css('background-image')
        };
        $tmpElem.remove();
    }
    var elem = this.eq(0);
    return !(elem.css('background-color') === me.cache.color && elem.css('background-image') === me.cache.image);
}
    
$('#backChange').css('background', 'none');

$('div').each(function(index, value){
    $val = $(value);
    var back = $val.hasBack();
    console.log(value.id);
    console.log('\thasBack: ' + back);
    console.log('\timage: ' + $val.css('background-image'));
    console.log('\tcolor: ' + $val.css('background-color'));
    if(back === $val.data('expected'))
    {
        $val.addClass('pass');
    }
    else
    {
        $val.addClass('fail');
    }
});