From bc8a38cf1698b1575c2fc2ec06fc80784e0ae227 Mon Sep 17 00:00:00 2001 From: tschaub Date: Mon, 2 Jan 2012 17:48:43 -0700 Subject: [PATCH 01/12] Util methods for animation loops. --- lib/OpenLayers/Util.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index a907e03023..71a64c06b3 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1697,3 +1697,40 @@ OpenLayers.Util.getFormattedLonLat = function(coordinate, axis, dmsOption) { return str; }; +OpenLayers.Util.requestAnimationFrame = (function() { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback, element) { + window.setTimeout(callback, 16); + }; +})(); + +(function() { + + var counter = 0; + var loops = {}; + var request = OpenLayers.Util.requestAnimationFrame; + + OpenLayers.Util.loopAnimation = function(duration, callback, element) { + var id = ++counter; + var start = +new Date; + loops[id] = function() { + if (loops[id] && +new Date - start <= duration) { + callback(); + request(loops[id], element); + } else { + delete loops[id]; + } + } + request(loops[id], element); + return id; + } + + OpenLayers.Util.stopAnimation = function(id) { + delete loops[id]; + } + +})(); From 709bb7af1b820e74d0444497f626c46680f35cf7 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 20:37:23 -0700 Subject: [PATCH 02/12] panDuration not used in this example --- examples/kinetic.js | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/kinetic.js b/examples/kinetic.js index b61faa2513..2daca1688b 100644 --- a/examples/kinetic.js +++ b/examples/kinetic.js @@ -1,7 +1,6 @@ var map = new OpenLayers.Map({ div: "map", resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125], - panDuration: 100, controls: [ new OpenLayers.Control.Navigation( {dragPanOptions: {enableKinetic: true}} From a86151c9e329c0dd25ca3eded91b759f70860eb5 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 20:39:38 -0700 Subject: [PATCH 03/12] Allow callback to cancel animation. --- lib/OpenLayers/Util.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index 71a64c06b3..fe9f49ac84 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1720,7 +1720,9 @@ OpenLayers.Util.requestAnimationFrame = (function() { loops[id] = function() { if (loops[id] && +new Date - start <= duration) { callback(); - request(loops[id], element); + if (loops[id]) { + request(loops[id], element); + } } else { delete loops[id]; } From c7c11757ae4b4380143b781817b8bda86947abb3 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 20:39:52 -0700 Subject: [PATCH 04/12] Allow for infinite animation loop. --- lib/OpenLayers/Util.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index fe9f49ac84..fc61a34828 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1714,7 +1714,8 @@ OpenLayers.Util.requestAnimationFrame = (function() { var loops = {}; var request = OpenLayers.Util.requestAnimationFrame; - OpenLayers.Util.loopAnimation = function(duration, callback, element) { + OpenLayers.Util.loopAnimation = function(callback, duration, element) { + duration = duration > 0 ? duration : Number.POSITIVE_INFINITY; var id = ++counter; var start = +new Date; loops[id] = function() { From 5c2af142b6d470628d073462ef5bfd9b2877d3e2 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 20:40:29 -0700 Subject: [PATCH 05/12] Use requestAnimationFrame where available. For kinetic panning, let the device determine the animation frame rate. --- lib/OpenLayers/Kinetic.js | 22 ++++++---------------- tests/Kinetic.html | 8 +++++--- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/lib/OpenLayers/Kinetic.js b/lib/OpenLayers/Kinetic.js index 7b6a3e7474..3789a83495 100644 --- a/lib/OpenLayers/Kinetic.js +++ b/lib/OpenLayers/Kinetic.js @@ -12,13 +12,6 @@ OpenLayers.Kinetic = OpenLayers.Class({ */ threshold: 0, - /** - * Property: interval - * {Integer} Interval in milliseconds between 2 steps in the "kinetic - * dragging". Defaults to 10 milliseconds. - */ - interval: 10, - /** * Property: deceleration * {Float} the deseleration in px/ms², default to 0.0035. @@ -66,7 +59,7 @@ OpenLayers.Kinetic = OpenLayers.Class({ * Begins the dragging. */ begin: function() { - clearInterval(this.timerId); + OpenLayers.Util.stopAnimation(this.timerId); this.timerId = undefined; this.points = []; }, @@ -138,7 +131,6 @@ OpenLayers.Kinetic = OpenLayers.Class({ var fx = Math.cos(info.theta); var fy = -Math.sin(info.theta); - var time = 0; var initialTime = new Date().getTime(); var lastX = 0; @@ -149,9 +141,7 @@ OpenLayers.Kinetic = OpenLayers.Class({ return; } - time += this.interval; - var realTime = new Date().getTime() - initialTime; - var t = (time + realTime) / 2.0; + var t = new Date().getTime() - initialTime; var p = (-this.deceleration * Math.pow(t, 2)) / 2.0 + v0 * t; var x = p * fx; @@ -162,7 +152,7 @@ OpenLayers.Kinetic = OpenLayers.Class({ var v = -this.deceleration * t + v0; if (v <= 0) { - clearInterval(this.timerId); + OpenLayers.Util.stopAnimation(this.timerId); this.timerId = null; args.end = true; } @@ -174,9 +164,9 @@ OpenLayers.Kinetic = OpenLayers.Class({ callback(args.x, args.y, args.end); }; - this.timerId = window.setInterval( - OpenLayers.Function.bind(timerCallback, this), - this.interval); + this.timerId = OpenLayers.Util.loopAnimation( + OpenLayers.Function.bind(timerCallback, this) + ); }, CLASS_NAME: "OpenLayers.Kinetic" diff --git a/tests/Kinetic.html b/tests/Kinetic.html index 6ef01ceea3..8d5ef9e528 100644 --- a/tests/Kinetic.html +++ b/tests/Kinetic.html @@ -16,9 +16,11 @@ var originalGetTime = Date.prototype.getTime; Date.prototype.getTime = function() { return 0 }; + + var interval = 10; // arbitrary value for tests - var originalSetInterval = window.setInterval; - window.setInterval = function(callback, interval) { + var originalLoopAnimation = OpenLayers.Util.loopAnimation; + OpenLayers.Util.loopAnimation = function(callback) { while (!finish) { var time = new Date().getTime(); Date.prototype.getTime = function() { return time+interval }; @@ -49,7 +51,7 @@ }); Date.prototype.getTime = originalGetTime; - window.setInterval = originalSetInterval; + OpenLayers.Util.loopAnimation = originalLoopAnimation; } function test_Angle (t) { From c151b04257280d2a3d524ee8eac4cb94f4cb7388 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 20:52:46 -0700 Subject: [PATCH 06/12] Use requestAnimationFrame for tweening. Instead of using an arbitrary interval for tweening, we let the device decide the best animation frame rate. Where requestAnimationFrame is not available, this will default to 60 fps. --- lib/OpenLayers/Tween.js | 27 ++++++++++----------------- tests/Tween.html | 10 +++++----- 2 files changed, 15 insertions(+), 22 deletions(-) diff --git a/lib/OpenLayers/Tween.js b/lib/OpenLayers/Tween.js index 299cc27535..4b22fc6ec4 100644 --- a/lib/OpenLayers/Tween.js +++ b/lib/OpenLayers/Tween.js @@ -12,12 +12,6 @@ */ OpenLayers.Tween = OpenLayers.Class({ - /** - * Constant: INTERVAL - * {int} Interval in milliseconds between 2 steps - */ - INTERVAL: 10, - /** * APIProperty: easing * {(Function)} Easing equation used for the animation @@ -58,10 +52,10 @@ OpenLayers.Tween = OpenLayers.Class({ time: null, /** - * Property: interval - * {int} Interval id returned by window.setInterval + * Property: animationId + * {int} Loop id returned by OpenLayers.Util.loopAnimation */ - interval: null, + animationId: null, /** * Property: playing @@ -97,15 +91,14 @@ OpenLayers.Tween = OpenLayers.Class({ this.duration = duration; this.callbacks = options.callbacks; this.time = 0; - if (this.interval) { - window.clearInterval(this.interval); - this.interval = null; - } + OpenLayers.Util.stopAnimation(this.animationId); + this.animationId = null; if (this.callbacks && this.callbacks.start) { this.callbacks.start.call(this, this.begin); } - this.interval = window.setInterval( - OpenLayers.Function.bind(this.play, this), this.INTERVAL); + this.animationId = OpenLayers.Util.loopAnimation( + OpenLayers.Function.bind(this.play, this) + ); }, /** @@ -121,8 +114,8 @@ OpenLayers.Tween = OpenLayers.Class({ if (this.callbacks && this.callbacks.done) { this.callbacks.done.call(this, this.finish); } - window.clearInterval(this.interval); - this.interval = null; + OpenLayers.Util.stopAnimation(this.animationId); + this.animationId = null; this.playing = false; }, diff --git a/tests/Tween.html b/tests/Tween.html index f185bee97f..4cd1970710 100644 --- a/tests/Tween.html +++ b/tests/Tween.html @@ -36,7 +36,7 @@ } } tween.start(start, finish, 10, {callbacks: callbacks}); - t.ok(tween.interval != null, "interval correctly set"); + 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"); @@ -49,15 +49,15 @@ t.plan(2); var tween = new OpenLayers.Tween(); - tween.interval = window.setInterval(function() {}, 10); + tween.animationId = OpenLayers.Util.loopAnimation(function() {}); tween.playing = true; tween.stop(); - t.eq(tween.interval, null, "tween correctly stopped"); + t.eq(tween.animationId, null, "tween correctly stopped"); - tween.interval = window.setInterval(function() {}, 10); + tween.animationId = OpenLayers.Util.loopAnimation(function() {}); tween.playing = false; tween.stop(); - t.ok(tween.interval != null, "stop method doesn't do anything if tween isn't running"); + t.ok(tween.animationId != null, "stop method doesn't do anything if tween isn't running"); } From e363bdb782a3574474969fa60bdd105b12a04a7b Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 21:52:31 -0700 Subject: [PATCH 07/12] Rename to startAnimation for symmetry. --- lib/OpenLayers/Kinetic.js | 2 +- lib/OpenLayers/Tween.js | 4 ++-- lib/OpenLayers/Util.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/OpenLayers/Kinetic.js b/lib/OpenLayers/Kinetic.js index 3789a83495..76126f2a95 100644 --- a/lib/OpenLayers/Kinetic.js +++ b/lib/OpenLayers/Kinetic.js @@ -164,7 +164,7 @@ OpenLayers.Kinetic = OpenLayers.Class({ callback(args.x, args.y, args.end); }; - this.timerId = OpenLayers.Util.loopAnimation( + this.timerId = OpenLayers.Util.startAnimation( OpenLayers.Function.bind(timerCallback, this) ); }, diff --git a/lib/OpenLayers/Tween.js b/lib/OpenLayers/Tween.js index 4b22fc6ec4..57730c5c8b 100644 --- a/lib/OpenLayers/Tween.js +++ b/lib/OpenLayers/Tween.js @@ -53,7 +53,7 @@ OpenLayers.Tween = OpenLayers.Class({ /** * Property: animationId - * {int} Loop id returned by OpenLayers.Util.loopAnimation + * {int} Loop id returned by OpenLayers.Util.startAnimation */ animationId: null, @@ -96,7 +96,7 @@ OpenLayers.Tween = OpenLayers.Class({ if (this.callbacks && this.callbacks.start) { this.callbacks.start.call(this, this.begin); } - this.animationId = OpenLayers.Util.loopAnimation( + this.animationId = OpenLayers.Util.startAnimation( OpenLayers.Function.bind(this.play, this) ); }, diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index fc61a34828..dcdd95cabd 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1714,7 +1714,7 @@ OpenLayers.Util.requestAnimationFrame = (function() { var loops = {}; var request = OpenLayers.Util.requestAnimationFrame; - OpenLayers.Util.loopAnimation = function(callback, duration, element) { + OpenLayers.Util.startAnimation = function(callback, duration, element) { duration = duration > 0 ? duration : Number.POSITIVE_INFINITY; var id = ++counter; var start = +new Date; From 92472ca6047d74eb04651205d1f59ea75fb90bc5 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 21:53:21 -0700 Subject: [PATCH 08/12] Avoid illegal invocation of native method. --- lib/OpenLayers/Util.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index dcdd95cabd..661c00d320 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1699,6 +1699,8 @@ OpenLayers.Util.getFormattedLonLat = function(coordinate, axis, dmsOption) { OpenLayers.Util.requestAnimationFrame = (function() { return window.requestAnimationFrame || +OpenLayers.Util.requestAnimationFrame = (function(window) { + var request = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || @@ -1706,7 +1708,11 @@ OpenLayers.Util.requestAnimationFrame = (function() { function(callback, element) { window.setTimeout(callback, 16); }; -})(); + // bind to window to avoid illegal invocation of native function + return function(callback, element) { + request.apply(window, [callback, element]); + }; +})(window); (function() { From bd4278de4adf4dd675268437396d87e9e2d2d5b3 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 21:54:08 -0700 Subject: [PATCH 09/12] Docs and tests for animation methods. --- lib/OpenLayers/Util.js | 34 +++++++++++++++++++++-- tests/Kinetic.html | 6 ++-- tests/Tween.html | 4 +-- tests/Util.html | 63 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 100 insertions(+), 7 deletions(-) diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index 661c00d320..43a8399268 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1697,8 +1697,16 @@ OpenLayers.Util.getFormattedLonLat = function(coordinate, axis, dmsOption) { return str; }; -OpenLayers.Util.requestAnimationFrame = (function() { - return window.requestAnimationFrame || +/** + * Function: requestAnimationFrame + * Schedule a function to be called at the next available animation frame. + * Uses the native method where available. Where requestAnimationFrame is + * not available, setTimeout will be called with a 16ms delay. + * + * Parameters: + * callback - {Function} The function to be called at the next animation frame. + * element - {DOMElement} Optional element that visually bounds the animation. + */ OpenLayers.Util.requestAnimationFrame = (function(window) { var request = window.requestAnimationFrame || window.webkitRequestAnimationFrame || @@ -1720,6 +1728,21 @@ OpenLayers.Util.requestAnimationFrame = (function(window) { var loops = {}; var request = OpenLayers.Util.requestAnimationFrame; + /** + * Function: startAnimation + * Executes a method with in series for some + * duration. + * + * Parameters: + * callback - {Function} The function to be called at the next animation frame. + * duration - {Number} Optional duration for the loop. If not provided, the + * animation loop will execute indefinitely. + * element - {DOMElement} Optional element that visually bounds the animation. + * + * Returns: + * {Number} Identifier for the animation loop. Used to stop animations with + * . + */ OpenLayers.Util.startAnimation = function(callback, duration, element) { duration = duration > 0 ? duration : Number.POSITIVE_INFINITY; var id = ++counter; @@ -1738,6 +1761,13 @@ OpenLayers.Util.requestAnimationFrame = (function(window) { return id; } + /** + * Function: stopAnimation + * Terminates an animation loop started with . + * + * Parameters: + * {Number} Identifier returned from . + */ OpenLayers.Util.stopAnimation = function(id) { delete loops[id]; } diff --git a/tests/Kinetic.html b/tests/Kinetic.html index 8d5ef9e528..92107b98da 100644 --- a/tests/Kinetic.html +++ b/tests/Kinetic.html @@ -19,8 +19,8 @@ var interval = 10; // arbitrary value for tests - var originalLoopAnimation = OpenLayers.Util.loopAnimation; - OpenLayers.Util.loopAnimation = function(callback) { + var originalLoopAnimation = OpenLayers.Util.startAnimation; + OpenLayers.Util.startAnimation = function(callback) { while (!finish) { var time = new Date().getTime(); Date.prototype.getTime = function() { return time+interval }; @@ -51,7 +51,7 @@ }); Date.prototype.getTime = originalGetTime; - OpenLayers.Util.loopAnimation = originalLoopAnimation; + OpenLayers.Util.startAnimation = originalLoopAnimation; } function test_Angle (t) { diff --git a/tests/Tween.html b/tests/Tween.html index 4cd1970710..fe8f114517 100644 --- a/tests/Tween.html +++ b/tests/Tween.html @@ -49,12 +49,12 @@ t.plan(2); var tween = new OpenLayers.Tween(); - tween.animationId = OpenLayers.Util.loopAnimation(function() {}); + tween.animationId = OpenLayers.Util.startAnimation(function() {}); tween.playing = true; tween.stop(); t.eq(tween.animationId, null, "tween correctly stopped"); - tween.animationId = OpenLayers.Util.loopAnimation(function() {}); + tween.animationId = OpenLayers.Util.startAnimation(function() {}); tween.playing = false; tween.stop(); t.ok(tween.animationId != null, "stop method doesn't do anything if tween isn't running"); diff --git a/tests/Util.html b/tests/Util.html index 51eabd244a..984b3d9ec4 100644 --- a/tests/Util.html +++ b/tests/Util.html @@ -1120,6 +1120,69 @@ t.eq(OpenLayers.Util.getFormattedLonLat(-181, "lon"), "179°00'00\"E", "crossing dateline from the west results in correct east coordinate"); t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate"); } + + function test_requestAnimationFrame(t) { + t.plan(2); + + t.eq(typeof OpenLayers.Util.requestAnimationFrame, "function", "requestAnimationFrame is a function"); + + var calls = 0; + OpenLayers.Util.requestAnimationFrame(function() { + ++calls; + }); + t.delay_call(0.1, function() { + t.ok(calls > 0, "callback called: " + calls); + }); + } + + function test_startAnimation(t) { + t.plan(1); + + var calls = 0; + var id = OpenLayers.Util.startAnimation(function() { + ++calls; + }); + t.delay_call(0.1, function() { + t.ok(calls > 1, "looped: " + calls); + OpenLayers.Util.stopAnimation(id); + }); + } + + function test_startAnimation_duration(t) { + t.plan(2); + + var calls = 0; + var id = OpenLayers.Util.startAnimation(function() { + ++calls; + }, 100); + var first; + t.delay_call(0.2, function() { + first = calls; + t.ok(calls > 1, "looped: " + calls); + }); + t.delay_call(0.3, function() { + t.eq(calls, first, "not being called any more"); + }); + } + + function test_stopAnimation(t) { + t.plan(2); + + var calls = 0; + var id = OpenLayers.Util.startAnimation(function() { + ++calls; + }); + var first; + t.delay_call(0.2, function() { + first = calls; + t.ok(calls > 1, "looped: " + calls); + OpenLayers.Util.stopAnimation(id); + }); + t.delay_call(0.3, function() { + t.eq(calls, first, "not being called any more"); + }); + } + From 3f6e0141a4bed3e07eca52dea578e41b2b394c73 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 2 Jan 2012 22:29:23 -0700 Subject: [PATCH 10/12] No animation frames on hidden windows. As an optimization, Firefox does not execute functions passed to requestAnimationFrame when the window is hidden. This is the case for the panTo tests here that use a map in a hidden iframe. Since other browsers may follow suit, we just test the fallback setTimeout method of animating on these tests. --- tests/Map.html | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/tests/Map.html b/tests/Map.html index faad0b30c7..54898b9ea9 100644 --- a/tests/Map.html +++ b/tests/Map.html @@ -1,7 +1,22 @@ - - + + + + + \ No newline at end of file diff --git a/tests/Kinetic.html b/tests/Kinetic.html index 92107b98da..ba50b5370a 100644 --- a/tests/Kinetic.html +++ b/tests/Kinetic.html @@ -19,8 +19,8 @@ var interval = 10; // arbitrary value for tests - var originalLoopAnimation = OpenLayers.Util.startAnimation; - OpenLayers.Util.startAnimation = function(callback) { + var originalLoopAnimation = OpenLayers.Animation.start; + OpenLayers.Animation.start = function(callback) { while (!finish) { var time = new Date().getTime(); Date.prototype.getTime = function() { return time+interval }; @@ -51,7 +51,7 @@ }); Date.prototype.getTime = originalGetTime; - OpenLayers.Util.startAnimation = originalLoopAnimation; + OpenLayers.Animation.start = originalLoopAnimation; } function test_Angle (t) { diff --git a/tests/Tween.html b/tests/Tween.html index fe8f114517..c16b4725a4 100644 --- a/tests/Tween.html +++ b/tests/Tween.html @@ -49,12 +49,12 @@ t.plan(2); var tween = new OpenLayers.Tween(); - tween.animationId = OpenLayers.Util.startAnimation(function() {}); + tween.animationId = OpenLayers.Animation.start(function() {}); tween.playing = true; tween.stop(); t.eq(tween.animationId, null, "tween correctly stopped"); - tween.animationId = OpenLayers.Util.startAnimation(function() {}); + 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"); diff --git a/tests/Util.html b/tests/Util.html index 984b3d9ec4..43db83c06d 100644 --- a/tests/Util.html +++ b/tests/Util.html @@ -1121,68 +1121,6 @@ t.eq(OpenLayers.Util.getFormattedLonLat(181, "lon"), "179°00'00\"W", "crossing dateline from the east results in correct west coordinate"); } - function test_requestAnimationFrame(t) { - t.plan(2); - - t.eq(typeof OpenLayers.Util.requestAnimationFrame, "function", "requestAnimationFrame is a function"); - - var calls = 0; - OpenLayers.Util.requestAnimationFrame(function() { - ++calls; - }); - t.delay_call(0.1, function() { - t.ok(calls > 0, "callback called: " + calls); - }); - } - - function test_startAnimation(t) { - t.plan(1); - - var calls = 0; - var id = OpenLayers.Util.startAnimation(function() { - ++calls; - }); - t.delay_call(0.1, function() { - t.ok(calls > 1, "looped: " + calls); - OpenLayers.Util.stopAnimation(id); - }); - } - - function test_startAnimation_duration(t) { - t.plan(2); - - var calls = 0; - var id = OpenLayers.Util.startAnimation(function() { - ++calls; - }, 100); - var first; - t.delay_call(0.2, function() { - first = calls; - t.ok(calls > 1, "looped: " + calls); - }); - t.delay_call(0.3, function() { - t.eq(calls, first, "not being called any more"); - }); - } - - function test_stopAnimation(t) { - t.plan(2); - - var calls = 0; - var id = OpenLayers.Util.startAnimation(function() { - ++calls; - }); - var first; - t.delay_call(0.2, function() { - first = calls; - t.ok(calls > 1, "looped: " + calls); - OpenLayers.Util.stopAnimation(id); - }); - t.delay_call(0.3, function() { - t.eq(calls, first, "not being called any more"); - }); - } - diff --git a/tests/list-tests.html b/tests/list-tests.html index a3a3023463..8bbf45ca59 100644 --- a/tests/list-tests.html +++ b/tests/list-tests.html @@ -1,4 +1,5 @@
    +
  • Animation.html
  • BaseTypes.html
  • BaseTypes/Bounds.html
  • BaseTypes/Class.html
    • From 483fe267b0bd32fba6a5d2a5395b1d8d0b6421aa Mon Sep 17 00:00:00 2001 From: tschaub Date: Mon, 16 Jan 2012 17:44:55 -0700 Subject: [PATCH 12/12] Update animation tests to run in a popup. As an optimization, certain browsers (e.g. Firefox) may not execute functions sent to `requestAnimationFrame` while the window is not visible. Because our tests run in an iframe, the tests fail unless we open a popup to run the animation methods. --- tests/Animation.html | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/tests/Animation.html b/tests/Animation.html index 75ea4e8331..7215284ae7 100644 --- a/tests/Animation.html +++ b/tests/Animation.html @@ -13,9 +13,18 @@