<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=466586
-->
<head>
  <title>Test for Bug 466586</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>

<body onload="loadSmall();">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=89419">Mozilla Bug 466586</a>
<p id="display"></p>
<div id="content" style="display: none">
  <img id="big" src="big.png"/>
</div>
<pre id="test">
<script type="application/javascript">

SimpleTest.waitForExplicitFinish();

var jsBig = new Image();

// We have loaded the large png with id "big". We want to test if it will be
// kicked out of the cache and thus have to be reloaded, but to ensure that, we
// need to get the cache to look at what is there. So we load another image,
// this one small.
function loadSmall()
{
  // Trivial check, for reference.
  is(document.getElementById("big").width, 3000,
     "HTML 'big' image width after page onload()");

  var small = new Image();
  small.onload = smallLoaded;
  small.src = "red.png";
}

function smallLoaded()
{
  jsBig.src = document.getElementById("big").src;
  // Check that it is not needed to wait for onload().
  is(jsBig.width, 3000, "JS 'big' image width before its onload()");
  // Check again after onload(), for reference.
  jsBig.onload = jsBigLoaded;
}

function jsBigLoaded()
{
  is(jsBig.width, 3000, "JS 'big' image width after its onload()");

  SimpleTest.finish();
}
</script>
</pre>
</body>
</html>
