<!DOCTYPE html>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1205027
-->
<head>
<title>Test for images intrinsic size while load is pending</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
body { margin: 0; }
img { display: block; }
</style>
<script>
SimpleTest.waitForExplicitFinish();
var initialOffsetTop;
var finalOffsetTop;
function report() {
finalOffsetTop = marker.offsetTop;
is(initialOffsetTop, 0, "initial offsetTop: " + initialOffsetTop);
is(finalOffsetTop, 8, "final offsetTop: " + finalOffsetTop);
ok(initialOffsetTop < finalOffsetTop, "offsetTop should get larger.");
SimpleTest.finish();
}
function fail() {
ok(false, "image loading should not fail.");
}
</script>
</head>
<body onload="report();">
<!-- Bunch of tiny images: -->
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<img src="file_SlowImage.sjs" onerror="fail();">
<div id="marker">Marker div</div>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1205027">Mozilla Bug 1205027</a>
<script>
initialOffsetTop = marker.offsetTop;
// prompt the sjs "server" to proceed to serve data to our <img> elements
var img = new Image();
img.onerror = fail;
img.src = "file_SlowImage.sjs?continue";
</script>
</body>
</html>