tests/html/longcat.html


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

<html>
<head>
<style type="text/css">
  p { margin: 0px; fonts-size: 0px }
</style>
</head>
<body>
<p><img src="longcattop.png"/></p>
<p><img src="longcatmid.png"/></p>
<p><img src="longcatbot.png"/></p>
<script>
var longcats = window.document.getElementsByTagName("img");
var longcat_top = longcats[0];
var longcat_mid = longcats[1];
var longcat_bot = longcats[2];

function wait_for_img_load(f) {
    if (longcat_top.width != 0 && longcat_mid.width != 0 && longcat_bot.width != 0) {
        f();
    } else {
        window.setTimeout(function() { wait_for_img_load(f) }, 1);
    }
}

wait_for_img_load(function() {
    var count = 0;
    function elongate() {
        var height = Math.round((Math.cos(count + Math.PI) + 1) * 100 + 20);
        count += 0.2;
        longcat_mid.height = height;
        longcat_mid.width = 600;
        window.setTimeout(function() { elongate() }, 50);
    }
    elongate();
});
</script>
</body>
</html>