blob: 20a59ea2642ac464324d7d1d9a4fc3df64befc02 [file] [log] [blame]
<!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>