<!DOCTYPE html>
<!-- test case for crbug.com/597127 -->
<html>
<head>
<!-- Use a <meta> viewport, see http://crbug.com/598949 -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<style>
  img {
    border: 2px solid black;
    margin: 5px 5px 0px 5px;
    padding: 2px;
    width: 150px;
    height: 150px;
  }
</style>
</head>

<script>
if (window.testRunner)
  testRunner.waitUntilDone();

var totalTestImages = 4;

window.onload = function() {
  for (var x = 0; x < totalTestImages; ++x)
    loadImage(x);
};

function loadImage(x) {
  var image = new Image();

  document.body.appendChild(image);

  image.onload = function() {
    setTimeout(imageLoaded, 0, x + 1);
  };

  image.src = 'resources/ycbcr-progressive-00' + x + '.jpg';
}

function imageLoaded(x) {
  if (x >= totalTestImages && window.testRunner)
    testRunner.notifyDone();
}
</script>
</html>