<!DOCTYPE html>
<html>

<style>
  img { width: 258px }
</style>

<script>
  function preload_decode_append_img(title, url, parentNodeId) {
      const img = new Image();
      img.title = title;
      img.src = url;
      img.decode().then(() => {
          var parentNode = document.getElementById(parentNodeId);
          parentNode.appendChild(img);
          if (++images == expectedNumberImages && window.testRunner) {
              setTimeout(function() { testRunner.notifyDone() }, 0);
          }
      }).catch(() => {
          var error = document.createElement('p');
          error.innerText = 'Error loading image'
          document.body.appendChild(error);
      });
  }

  var images = 0;
  var expectedNumberImages = 3;
  preload_decode_append_img('png image',
                            '../resources/blue-wheel-srgb-color-profile.png',
                            'png-image');
  preload_decode_append_img('jpeg image',
                            '../resources/blue-wheel-srgb-color-profile.jpg',
                            'jpeg-image');
  preload_decode_append_img('webp image',
                            '../resources/blue-wheel-srgb-color-profile.webp',
                            'webp-image');

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


<body style="overflow: hidden">
  <!-- The blue sector of the images should be at 12 o'clock. -->
  <span id="png-image"></span>
  <span id="jpeg-image"></span>
  <span id="webp-image"></span>
  <br>
</body>

</html>