<!DOCTYPE html>
<html>
<!--
 | A special case that the only part of image is visible. In this case, the
 | background positioning area is smaller than the actual image size.
-->
<head>
  <style>
    div {
      background-position: 0 75%;
      background-repeat: no-repeat;
      background-size: 110%;
      height: 5em;
      width: 5em;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    var image = new Image();
    var image_name = 'legend-sprite.png';

    image.onload = function() {
      var cobalt = document.getElementById('image');
      cobalt.style.backgroundImage = 'url(' + image_name + ')';

      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }

    image.src = image_name;
  </script>
</head>
<body>
  <div id='image'></div>
</body>
</html>