background-image.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
</head>
<body>
<div id='testElement'></div>
<style>
#testElement {
  background-image: url("resources/1x1-green.png");
}
</style>
<script>
var locationPath = location.href.substring(0, location.href.lastIndexOf('/'));
var imagePath = locationPath + '/resources/1x1-green.png';

var computedStyleMap = testElement.computedStyleMap();

function checks() {
  var result = computedStyleMap.get('background-image');
  assert_true(result instanceof CSSImageValue);
  assert_equals(result.toString(), 'url(\"' + imagePath + '\")');
}

var t1 = async_test('Getting a background-image with a relative URL image value returns a CSSImageValue');
function t1Callback() {
  t1.step(checks);
  t1.done();
}

var t2 = async_test('Getting a background-image with a URL image value returns a CSSImageValue');
function t2Callback() {
  testElement.style.backgroundImage = 'url(\"' + imagePath + '\")';
  t2.step(checks);
  t2.done();
}

document.onreadystatechange = function() {
  if(document.readyState == 'complete') {
    t1Callback();
    t2Callback();
  }
};

</script>
</body>
</html>
chromium/third_party/blink/web_tests/typedcssom/computedstyle/background-image.html
