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().
ghybs
5 years ago
| 829 | 829 | counts = undefined; |
| 830 | 830 | }); |
| 831 | 831 | |
| 832 | // NOTE: This test has different behaviour in PhantomJS and graphical | |
| 833 | // browsers due to CSS animations! | |
| 832 | 834 | it("Loads map, moves forth by 512 px, keepBuffer = 0", function (done) { |
| 833 | 835 | |
| 834 | grid.on('load', function () { | |
| 836 | // Advance the time to !== 0 otherwise `tile.loaded` timestamp will appear to be falsy. | |
| 837 | clock.tick(1); | |
| 838 | // Date.now() is 1. | |
| 839 | ||
| 840 | grid.once('load', function () { | |
| 835 | 841 | expect(counts.tileloadstart).to.be(16); |
| 836 | 842 | expect(counts.tileload).to.be(16); |
| 837 | 843 | expect(counts.tileunload).to.be(0); |
| 838 | grid.off('load'); | |
| 839 | ||
| 840 | grid.on('load', function () { | |
| 841 | expect(counts.tileloadstart).to.be(28); | |
| 842 | expect(counts.tileload).to.be(28); | |
| 843 | expect(counts.tileunload).to.be(12); | |
| 844 | done(); | |
| 845 | }); | |
| 846 | ||
| 847 | map.panBy([512, 512], {animate: false}); | |
| 848 | clock.tick(250); | |
| 844 | ||
| 845 | // Wait for a frame to let _updateOpacity starting. | |
| 846 | L.Util.requestAnimFrame(function () { | |
| 847 | ||
| 848 | // Wait > 250msec for the tile fade-in animation to complete, | |
| 849 | // which triggers the tile pruning | |
| 850 | clock.tick(300); | |
| 851 | // At 251ms, the pruneTile from the end of the setView tiles fade-in animation executes. | |
| 852 | // Date.now() is 301. | |
| 853 | ||
| 854 | grid.once('load', function () { | |
| 855 | // Since there is no animation requested, | |
| 856 | // We directly jump to the target position. | |
| 857 | // => 12 new tiles, total = 16 + 12 = 28 tiles. | |
| 858 | expect(counts.tileloadstart).to.be(28); | |
| 859 | expect(counts.tileload).to.be(28); | |
| 860 | ||
| 861 | // Wait for a frame to let _updateOpacity starting | |
| 862 | // It will prune the 12 tiles outside the new bounds. | |
| 863 | // PhantomJS has Browser.any3d === false, so it actually | |
| 864 | // does not perform the fade animation and does not need | |
| 865 | // this rAF, but it does not harm either. | |
| 866 | L.Util.requestAnimFrame(function () { | |
| 867 | expect(counts.tileunload).to.be(12); | |
| 868 | done(); | |
| 869 | }); | |
| 870 | }); | |
| 871 | ||
| 872 | // Move up 512px => 2 tile rows => 2*4 = 8 new tiles (V and M). | |
| 873 | // Move right 512px => 2 tile columns => 2*4 = 4 new tiles (H) + 4 new tiles (M) in common with vertical pan. | |
| 874 | // Total = 8 + 8 - 4 = 12 new tiles. | |
| 875 | // ..VVMM | |
| 876 | // ..VVMM | |
| 877 | // OOXXHH // O = Old tile, X = Old tile still visible. | |
| 878 | // OOXXHH | |
| 879 | // OOOO | |
| 880 | // OOOO | |
| 881 | map.panBy([512, 512], {animate: false}); | |
| 882 | // clock.tick(250); | |
| 883 | ||
| 884 | }); | |
| 849 | 885 | }); |
| 850 | 886 | |
| 851 | 887 | grid.options.keepBuffer = 0; |
| 852 | 888 | |
| 889 | // 800px width * 600px height => 4 tiles horizontally * 4 tiles vertically = 16 tiles | |
| 853 | 890 | map.addLayer(grid).setView([0, 0], 10); |
| 854 | clock.tick(250); | |
| 891 | // clock.tick(250); | |
| 855 | 892 | }); |
| 856 | 893 | |
| 857 | 894 | it("Loads map, moves forth and back by 512 px, keepBuffer = 0", function (done) { |