<!DOCTYPE html>
<html>
<style>
  .border {
    border: 5px solid transparent; /* So the <img> under test can not be a directly composited. */
    border-radius: 220px;
    height: 240px;
  }
</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);
          img.classList.add('border');
          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 = 6;
  preload_decode_append_img('png image',
                            '../resources/red-at-12-oclock-with-color-profile.png',
                            'first-png-image');
  preload_decode_append_img('jpeg image',
                            '../resources/red-at-12-oclock-with-color-profile.jpg',
                            'first-jpeg-image');
  preload_decode_append_img('webp image',
                            '../resources/webp-color-profile-lossy.webp',
                            'first-webp-image');

  preload_decode_append_img('png image',
                            '../resources/red-at-12-oclock-with-color-profile.png',
                            'second-png-image');
  preload_decode_append_img('jpeg image',
                            '../resources/red-at-12-oclock-with-color-profile.jpg',
                            'second-jpeg-image');
  preload_decode_append_img('webp image',
                            '../resources/webp-color-profile-lossy.webp',
                            'second-webp-image');

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


<body>
  <!-- The red sector of the images should be at 12 o'clock. The images should be
     contained within their CSS border radius circle: they should not look square.-->
  <span id="first-png-image"></span>
  <span id="first-jpeg-image"></span>
  <span id="first-webp-image"></span>
  <br>
  <!-- The red sector of the images should be at 12 o'clock. The images should be
       contained within their CSS border radius circle: they should not look square.-->
  <span id="second-png-image"></span>
  <span id="second-jpeg-image"></span>
  <span id="second-webp-image"></span>
  <br>
</body>

</html>