From bed7cd101e95327d32dee80403f2f2baf961237f Mon Sep 17 00:00:00 2001
From: ghybs <ghybs1@gmail.com>
Date: Fri, 22 Jun 2018 15:57:40 +0400
Subject: [PATCH] test(GridLayer): fix pan keepBuffer graph browser

because graphical browsers, even in non-animated pan, will still perform tile fade-in animation, which require some frames before calling _pruneTiles().
---
 spec/suites/layer/tile/GridLayerSpec.js | 59 ++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/spec/suites/layer/tile/GridLayerSpec.js b/spec/suites/layer/tile/GridLayerSpec.js
index c8e8e243..fdbbb987 100644
--- a/spec/suites/layer/tile/GridLayerSpec.js
+++ b/spec/suites/layer/tile/GridLayerSpec.js
@@ -830,29 +830,66 @@ describe('GridLayer', function () {
 			counts = undefined;
 		});
 
+		// NOTE: This test has different behaviour in PhantomJS and graphical
+		// browsers due to CSS animations!
 		it("Loads map, moves forth by 512 px, keepBuffer = 0", function (done) {
 
-			grid.on('load', function () {
+			// Advance the time to !== 0 otherwise `tile.loaded` timestamp will appear to be falsy.
+			clock.tick(1);
+			// Date.now() is 1.
+
+			grid.once('load', function () {
 				expect(counts.tileloadstart).to.be(16);
 				expect(counts.tileload).to.be(16);
 				expect(counts.tileunload).to.be(0);
-				grid.off('load');
 
-				grid.on('load', function () {
-					expect(counts.tileloadstart).to.be(28);
-					expect(counts.tileload).to.be(28);
-					expect(counts.tileunload).to.be(12);
-					done();
+				// Wait for a frame to let _updateOpacity starting.
+				L.Util.requestAnimFrame(function () {
+
+					// Wait > 250msec for the tile fade-in animation to complete,
+					// which triggers the tile pruning
+					clock.tick(300);
+					// At 251ms, the pruneTile from the end of the setView tiles fade-in animation executes.
+					// Date.now() is 301.
+
+					grid.once('load', function () {
+						// Since there is no animation requested,
+						// We directly jump to the target position.
+						// => 12 new tiles, total = 16 + 12 = 28 tiles.
+						expect(counts.tileloadstart).to.be(28);
+						expect(counts.tileload).to.be(28);
+
+						// Wait for a frame to let _updateOpacity starting
+						// It will prune the 12 tiles outside the new bounds.
+						// PhantomJS has Browser.any3d === false, so it actually
+						// does not perform the fade animation and does not need
+						// this rAF, but it does not harm either.
+						L.Util.requestAnimFrame(function () {
+							expect(counts.tileunload).to.be(12);
+							done();
+						});
+					});
+
+					// Move up 512px => 2 tile rows => 2*4 = 8 new tiles (V and M).
+					// Move right 512px => 2 tile columns => 2*4 = 4 new tiles (H) + 4 new tiles (M) in common with vertical pan.
+					// Total = 8 + 8 - 4 = 12 new tiles.
+					// ..VVMM
+					// ..VVMM
+					// OOXXHH // O = Old tile, X = Old tile still visible.
+					// OOXXHH
+					// OOOO
+					// OOOO
+					map.panBy([512, 512], {animate: false});
+					// clock.tick(250);
+
 				});
-
-				map.panBy([512, 512], {animate: false});
-				clock.tick(250);
 			});
 
 			grid.options.keepBuffer = 0;
 
+			// 800px width * 600px height => 4 tiles horizontally * 4 tiles vertically = 16 tiles
 			map.addLayer(grid).setView([0, 0], 10);
-			clock.tick(250);
+			// clock.tick(250);
 		});
 
 		it("Loads map, moves forth and back by 512 px, keepBuffer = 0", function (done) {