cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #6199 from ghybs/testGridLayerGraphicalBrowsers

Browse Source 
test(GridLayer): fix zoom-in/-out for graphical browsers
This commit is contained in:
Andrew Cherniavskii 2018-06-25 09:44:32 +02:00 committed by GitHub
commit 079be526f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 117 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
spec/suites/layer/tile/GridLayerSpec.js
View File

@ -599,46 +599,84 @@ describe('GridLayer', function () {
// browsers due to CSS animations! // browsers due to CSS animations!
it.skipInPhantom("Loads 32, unloads 16 tiles zooming in 10-11", function (done) { it.skipInPhantom("Loads 32, unloads 16 tiles zooming in 10-11", function (done) {
// grid.on('tileload tileunload tileloadstart load', logTiles); // Advance the time to !== 0 otherwise `tile.loaded` timestamp will appear to be falsy.
clock.tick(1);
// Date.now() is 1.
grid.on('load', function () { // grid.on('tileload tileunload tileloadstart load loading', logTiles);
expect(counts.tileloadstart).to.be(16);
// Use "once" to automatically detach the listener,
// and avoid removing the above logTiles
// (which would happen when calling "grid.off('load')").
grid.once('load', function () {
expect(counts.tileload).to.be(16); expect(counts.tileload).to.be(16);
expect(counts.tileunload).to.be(0); expect(counts.tileunload).to.be(0);
grid.off('load');
// grid.on('load', logTiles);
grid.on('load', function () {
// We're one frame into the zoom animation, there are
// 16 tiles for z10 plus 16 tiles for z11 covering the
// bounds at the *end* of the zoom-*in* anim
expect(counts.tileloadstart).to.be(32);
expect(counts.tileload).to.be(32);
expect(counts.tileunload).to.be(0);
// Wait for a frame to let _updateOpacity starting.
L.Util.requestAnimFrame(function () {
// Wait > 250msec for the tile fade-in animation to complete, // Wait > 250msec for the tile fade-in animation to complete,
// which triggers the tile pruning // which triggers the tile pruning
clock.tick(300); clock.tick(300);
// At 251ms, the pruneTile from the end of the z10 tiles fade-in animation executes.
// Date.now() is 301.
// After the zoom-in, the 'outside' 12 tiles (not the 4 grid.once('load', function () {
// at the center, still in bounds) have been unloaded.
expect(counts.tileunload).to.be(12);
L.Util.requestAnimFrame(function () {
expect(counts.tileloadstart).to.be(32);
expect(counts.tileload).to.be(32); expect(counts.tileload).to.be(32);
expect(counts.tileunload).to.be(16);
done();
});
});
map.setZoom(11, {animate: true}); // We're one frame into the zoom animation,
clock.tick(250); // so GridLayer._setView with noPrune === undefined is not called yet
// No tile should be unloaded yet.
expect(counts.tileunload).to.be(0);
// Wait > 250msec for the zoom animation to complete,
// which triggers the tile pruning
// Animated zoom takes 1 frame + 250ms before firing "zoom" event
// => GridLayer._resetView => GridLayer._setView => _pruneTiles
// However, this "load" event callback executes synchronously,
// i.e. _tileReady still did not have a chance to prepare the
// setTimeout(250) for pruning after the end of the fade-in animation.
clock.tick(300);
// At 301 + 250 = 551ms, the pruneTile from the end of the zoom animation executes.
// It unloads the 'outside' 12 tiles from z10, but not the 4 tiles in the center,
// since _updateOpacity did not have a chance yet to flag the 16 new z11 tiles as "active".
expect(counts.tileunload).to.be(12);
// Date.now() is 601.
// Wait for a frame to let _updateOpacity starting
// + _tileReady to be able to prepare its setTimeout(250)
// for pruning after the end of the fade-in animation.
// Since we are already > 200ms since the 'load' event fired,
// _updateOpacity should directly set the current tiles as "active",
// so the remaining 4 tiles from z10 can then be pruned.
// However we have skipped any pruning from _updateOpacity,
// so we will have to rely on the setTimeout from _tileReady.
L.Util.requestAnimFrame(function () {
// Wait > 250msec for the tile fade-in animation to complete,
// which triggers the tile pruning
clock.tick(300);
// At 851ms, the pruneTile from the end of the z11 tiles fade-in animation executes.
// It unloads the remaining 4 tiles from z10.
expect(counts.tileunload).to.be(16);
// Date.now() is 901.
done();
});
});
map.setZoom(11, {animate: true});
// Animation (and new tiles loading) starts after 1 frame.
L.Util.requestAnimFrame(function () {
// 16 extra tiles from z11 being loaded. Total 16 + 16 = 32.
expect(counts.tileloadstart).to.be(32);
});
});
}); });
map.addLayer(grid).setView([0, 0], 10); map.addLayer(grid).setView([0, 0], 10);
clock.tick(250); // The first setView does not animated, therefore it starts loading tiles immediately.
// 16 tiles from z10 being loaded.
expect(counts.tileloadstart).to.be(16);
// At 1ms, first pruneTile (map fires "viewreset" event => GridLayer._resetView => GridLayer._setView => _pruneTiles).
}); });
it("Loads 32, unloads 16 tiles zooming in 10-18", function (done) { it("Loads 32, unloads 16 tiles zooming in 10-18", function (done) {
@ -672,51 +710,76 @@ describe('GridLayer', function () {
// browsers due to CSS animations! // browsers due to CSS animations!
it.skipInPhantom("Loads 32, unloads 16 tiles zooming out 11-10", function (done) { it.skipInPhantom("Loads 32, unloads 16 tiles zooming out 11-10", function (done) {
// Advance the time to !== 0 otherwise `tile.loaded` timestamp will appear to be falsy.
clock.tick(1);
// Date.now() is 1.
// grid.on('tileload tileunload load', logTiles); // grid.on('tileload tileunload load', logTiles);
grid.on('load', function () { grid.once('load', function () {
expect(counts.tileloadstart).to.be(16);
expect(counts.tileload).to.be(16); expect(counts.tileload).to.be(16);
expect(counts.tileunload).to.be(0); expect(counts.tileunload).to.be(0);
grid.off('load');
// grid.on('load', logTiles);
grid.on('load', function () {
grid.off('load');
// grid.on('load', logTiles);
// We're one frame into the zoom animation, there are
// 16 tiles for z11 plus 4 tiles for z10 covering the
// bounds at the *beginning* of the zoom-*out* anim
expect(counts.tileloadstart).to.be(20);
expect(counts.tileload).to.be(20);
expect(counts.tileunload).to.be(0);
// Wait for a frame to let _updateOpacity starting.
L.Util.requestAnimFrame(function () {
// Wait > 250msec for the tile fade-in animation to complete, // Wait > 250msec for the tile fade-in animation to complete,
// which triggers the tile pruning // which triggers the tile pruning
clock.tick(300); clock.tick(300);
L.Util.requestAnimFrame(function () { // At 251ms, the pruneTile from the end of the z11 tiles fade-in animation executes.
expect(counts.tileunload).to.be(16); // Date.now() is 301.
// The next 'load' event happens when the zoom anim is grid.once('load', function () {
// complete, and triggers loading of all the z10 tiles. expect(counts.tileload).to.be(20);
grid.on('load', function () { // No tile should be unloaded yet.
expect(counts.tileloadstart).to.be(32); expect(counts.tileunload).to.be(0);
// Wait > 250msec for the zoom animation to complete,
// which triggers the tile pruning, but there are no
// tiles to prune yet (z11 tiles are all in bounds).
clock.tick(300);
// Date.now() is 601.
// At the end of the animation, all 16 tiles from z10
// are loading.
expect(counts.tileloadstart).to.be(32);
expect(counts.tileload).to.be(20);
// Now that the zoom animation is complete,
// the grid is ready to fire a new "load" event
// on next frame, so prepare its listener now.
// During that frame, _updateOpacity will flag the 4
// central tiles from z10 as "active", since we are now
// > 200ms after the first "load" event fired.
grid.once('load', function () {
expect(counts.tileload).to.be(32); expect(counts.tileload).to.be(32);
done(); // No tile should be unloaded yet.
}); expect(counts.tileunload).to.be(0);
// Wait for a frame for next _updateOpacity to prune
// all 16 tiles from z11 which are now covered by the
// 4 central active tiles of z10.
L.Util.requestAnimFrame(function () {
expect(counts.tileunload).to.be(16);
done();
});
});
}); });
}); });
map.setZoom(10, {animate: true}); map.setZoom(10, {animate: true});
clock.tick(250); // Animation (and new tiles loading) starts after 1 frame.
L.Util.requestAnimFrame(function () {
// We're one frame into the zoom animation, there are
// 16 tiles for z11 plus 4 tiles for z10 covering the
// bounds at the *beginning* of the zoom-*out* anim
expect(counts.tileloadstart).to.be(20);
});
}); });
map.addLayer(grid).setView([0, 0], 11); map.addLayer(grid).setView([0, 0], 11);
clock.tick(250); // The first setView does not animated, therefore it starts loading tiles immediately.
// 16 tiles from z10 being loaded.
expect(counts.tileloadstart).to.be(16);
}); });
it("Loads 32, unloads 16 tiles zooming out 18-10", function (done) { it("Loads 32, unloads 16 tiles zooming out 18-10", function (done) {