summaryrefslogtreecommitdiffstats
path: root/layout/generic/test/test_intrinsic_size_on_loading.html
blob: fc148a0f9d525ff91dd2b9913df2951999f756cb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>