<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<div id="target"></div>

<script>
function testImageVar(property, value) {
  test(() => {
    target.style.setProperty('--test', value);
    target.style[property] = 'var(--test)';
    var actual = getComputedStyle(target)[property];

    target.style[property] = value;
    assert_not_equals(target.style[property], '', value + ' must be valid for ' + property);
    var expected = getComputedStyle(target)[property];

    assert_equals(actual, expected);
  }, property + ' should resolve ' + value + ' the same whether via var() or not.');
}

testImageVar('background-image', 'url("image.png")');
testImageVar('background-image', '-webkit-image-set(url("image.png") 1x)');
testImageVar('background', 'url("image.png")');
testImageVar('background', '-webkit-image-set(url("image.png") 1x)');
</script>