<!DOCTYPE html>
<!--
 | Try to load the same image over http: and https:. Set a policy to only allow
 | https: scheme for img-src. We should see only a single image occupy the
 | bottom half of the screen.
 -->
<html>
<head>
<meta http-equiv="content-security-policy" content="img-src https:">
<style>
div {
  height:180px;
  background-repeat:no-repeat;
}
</style>

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

    var images = [new Image(), new Image()];
    var image_base = "www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
    var div_ids = ["insecure", "secure"];

    var urls = ["http://" + image_base, "https://" + image_base];
    var num_errors = 0;
    for (var i = 0; i < 2; i++) {
      var divname = div_ids[i];
      var url = urls[i];
      images[i].onload = function() {
        var item = document.getElementById(divname);
        item.style.backgroundImage = "url(" + url + ")";
        // We only expect one image to load, so notify once that happens.
        if (window.testRunner) {
          window.testRunner.notifyDone();
        }
      }
      images[i].onerror = function() {
        ++num_errors;
        console.log('Error loading: ' + this.src);
        if (num_errors >= 2) {
          console.log('More errors than expected!');
          window.testRunner.notifyDone();
        }
      }
      images[i].src = urls[i];
    }
</script>
</head>
<body>
<div id=insecure></div>
<div id=secure></div>
</body>
</html>