<!DOCTYPE html>
<html>
<body>
<p>Trying to load and render in canvas sequentially the same image from different origins (no cors mode).</p>
<div id="console"></div>
<div>
    <iframe id="iframe1"></iframe>
    <iframe id="iframe2"></iframe>
</div>
<script>
if (window.testRunner) {
   testRunner.dumpAsText();
   testRunner.waitUntilDone();
}

window.addEventListener("message", function(event) {
    document.getElementById('console').innerHTML += event.data + "<br/>";
    loadNextFrame();
});

var iframeURL8000 = "http://127.0.0.1:8000/security/resources/cross-origin-cached-image-canvas-iframe.html";
var iframeURL8080 = "http://127.0.0.1:8080/security/resources/cross-origin-cached-image-canvas-iframe.html";

var allowAllImage = "http://127.0.0.1:8000/security/resources/abe-allow-star.php?allowCache";

var counter = 0;
function loadNextFrame()
{
    counter++;
    if (counter == 1)
        document.getElementById('iframe1').src = iframeURL8000 + "#" +
            encodeURIComponent(JSON.stringify({node: "img", url: allowAllImage, shouldPass:true, id: 1}));
    else if (counter == 2)
        document.getElementById('iframe2').src = iframeURL8080 + "#" +
            encodeURIComponent(JSON.stringify({node: "img", url: allowAllImage, shouldPass:false, id: 2}));
    else if (window.testRunner)
        testRunner.notifyDone();
}

loadNextFrame();
</script>
</body>
</html>