 <HEAD>
 <style>
    html,body { height: 100% }
    #blue {
      height: 50%;
      width: 128px;
      background-size: cover;
      background-color: blue;
      display: inline-block;
      margin-left: 25%;
    }
    #green {
      height: 50%;
      width: 128px;
      background-size: cover;
      background-color: green;
      display: inline-block;
      margin-right: 25%;
    }
    /* Note that the width and height values below were carefully chosen to have
       a smaller dependency on platform specific texture minification filters.
       An example of this is on directfb platform (used for testing), where
       bilinear filtering is not available (when blending is turned on).
     */
    #shot {
      height: 50%;
      width: 50%;
    }
  </style>
</HEAD>
<BODY>
  <div id="blue">
  </div>
  <div id="green">
  </div>
  <div id="shot">
  </div>
<script>
  if (window.testRunner) {
    window.testRunner.waitUntilDone();
  }
  window.addEventListener('load', (event) => {
    window.screenshot().then( screen_shot_data => {
      shot = document.getElementById("shot");
      var image_blob = new Blob([screen_shot_data.buffer]);
      var image_url = URL.createObjectURL(image_blob);
      var image = new Image();
      // By waiting for the onload event, we can safely ensure that the
      // screenshot image is decoded, and render to be rendered.
      image.onload = () => {
        var shot = document.getElementById('shot');
        // Put a solid red border around the image to make it easier to
        // spot manually.
        shot.style.borderStyle = 'solid';
        shot.style.borderColor = 'red';
        // Shrink-to-fit the image onto the div.
        shot.style.backgroundSize = '100% 100%';
        shot.style.backgroundImage = 'url(' + image_url + ')';
        if (window.testRunner) {
          window.testRunner.notifyDone();
        }
      }
      image.src = image_url;
    }).catch( () => {
      console.log('window.screenshot() error occured.');
      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    });
  });
</script>
</BODY>