summaryrefslogtreecommitdiff
path: root/misc/openlayers/tests/Tween.html
blob: 1fbfa3cf1cab38717968bf7119541242c21432f8 (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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html> 
<head> 
    <script>
    /**
    * Because browsers that implement requestAnimationFrame may not execute
    * animation functions while a window is not displayed (e.g. in a hidden
    * iframe as in these tests), we mask the native implementations here.  The
    * native requestAnimationFrame functionality is tested in Util.html and
    * in PanZoom.html (where a popup is opened before panning).  The panTo tests
    * here will test the fallback setTimeout implementation for animation.
    */
    window.requestAnimationFrame = 
        window.webkitRequestAnimationFrame =
        window.mozRequestAnimationFrame =
        window.oRequestAnimationFrame =
        window.msRequestAnimationFrame = null;
    </script>
    <script src="OLLoader.js"></script> 
    <script type="text/javascript">

    function test_Tween_constructor(t) { 
        t.plan(3);
        
        var tween = new OpenLayers.Tween();
        t.ok(tween instanceof OpenLayers.Tween, 
             "new OpenLayers.Tween returns object" );
        t.eq(typeof tween.easing, "function", 
            "constructor sets easing correctly"); 
        t.eq(typeof tween.start, "function", "tween has a start function"); 
    }
    
    function test_Tween_start(t) {
        t.plan(5);
        
        var tween = new OpenLayers.Tween();

        var start = {foo: 0, bar: 10};
        var finish = {foo: 10, bar: 0};
        var _start = false;
        var _done = false;
        var _eachStep = false;
        var callbacks = {
            start: function() {
                _start = true;
            },
            done: function() {
                _done = true;
            },
            eachStep: function() {
                _eachStep = true;
            }
        }
        tween.start(start, finish, 10, {callbacks: callbacks});
        t.ok(tween.animationId != null, "animationId correctly set");
        t.delay_call(0.8, function() {
            t.eq(_start, true, "start callback called");
            t.eq(_done, true, "finish callback called");
            t.eq(_eachStep, true, "eachStep callback called");
            t.eq(tween.time, 11, "Number of steps reached is correct");
        });
    }

    function test_Tween_stop(t) {
        t.plan(2);
        
        var tween = new OpenLayers.Tween();
        tween.animationId = OpenLayers.Animation.start(function() {});
        tween.playing = true;
        tween.stop();
        t.eq(tween.animationId, null, "tween correctly stopped");
        
        tween.animationId = OpenLayers.Animation.start(function() {});
        tween.playing = false;
        tween.stop();
        t.ok(tween.animationId != null, "stop method doesn't do anything if tween isn't running");
    }
    
    function test_Tween_skip(t) {
        t.plan(2);
        
        var tween = new OpenLayers.Tween();
        var log = 0;
        tween.start({count: 0}, {count: 10}, 10, {
            callbacks: {
                eachStep: function() {
                    log++;
                }
            },
            minFrameRate: 10000
        });
        
        t.delay_call(0.8, function() {
            t.eq(log, 0, 'all frames skipped at a frame rate of 10000');
            
            log = 0;
            tween.start({count: 0}, {count: 10}, 10, {
                callbacks: {
                    eachStep: function() {
                        log++;
                    }
                },
                minFrameRate: 1
            });
        });
        
        t.delay_call(1.6, function() {
            t.eq(log, 11, 'no frames skipped at a frame rate of 1');            
        });
    }

    </script> 
</head> 
<body> 
  <div id="map" style="width:500px;height:500px"></div>
</body> 
</html>