From 7aacde9466b66aae27e25d9ebf98672a0b9f31b2 Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Fri, 30 Nov 2018 19:43:23 +0200
Subject: [PATCH 1/2] fix images not being aborted when dequeued

---
 src/util/ajax.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/util/ajax.js b/src/util/ajax.js
index 98c4ea6b931..b749a3ef9cf 100644
--- a/src/util/ajax.js
+++ b/src/util/ajax.js
@@ -190,9 +190,14 @@ resetImageRequestQueue();
 export const getImage = function(requestParameters: RequestParameters, callback: Callback<HTMLImageElement>): Cancelable {
     // limit concurrent image loads to help with raster sources performance on big screens
     if (numImageRequests >= config.MAX_PARALLEL_IMAGE_REQUESTS) {
-        const queued = {requestParameters, callback, cancelled: false};
+        const queued = {
+            requestParameters,
+            callback,
+            cancelled: false,
+            cancel() { this.cancelled = true; }
+        };
         imageQueue.push(queued);
-        return { cancel() { queued.cancelled = true; } };
+        return queued;
     }
     numImageRequests++;
 
@@ -203,9 +208,10 @@ export const getImage = function(requestParameters: RequestParameters, callback:
         numImageRequests--;
         assert(numImageRequests >= 0);
         while (imageQueue.length && numImageRequests < config.MAX_PARALLEL_IMAGE_REQUESTS) { // eslint-disable-line
-            const {requestParameters, callback, cancelled} = imageQueue.shift();
+            const request = imageQueue.shift();
+            const {requestParameters, callback, cancelled} = request;
             if (!cancelled) {
-                getImage(requestParameters, callback);
+                request.cancel = getImage(requestParameters, callback).cancel;
             }
         }
     };

From ba86eaa816f7bbca623309812f90a9339c64f3fe Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis@mapbox.com>
Date: Thu, 13 Dec 2018 15:39:43 -0500
Subject: [PATCH 2/2] add unit test for cancelling getImage requests

---
 test/unit/util/ajax.test.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/test/unit/util/ajax.test.js b/test/unit/util/ajax.test.js
index 97c6f1ff2b6..1f4b6acdb1f 100644
--- a/test/unit/util/ajax.test.js
+++ b/test/unit/util/ajax.test.js
@@ -152,5 +152,38 @@ test('ajax', (t) => {
         t.end();
     });
 
+    t.test('getImage requests that were once queued are still abortable', (t) => {
+        resetImageRequestQueue();
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        const requests = [];
+        for (let i = 0; i < maxRequests; i++) {
+            requests.push(getImage({url: ''}, () => {}));
+        }
+
+        // the limit of allowed requests is reached
+        t.equals(window.server.requests.length, maxRequests);
+
+        const queuedURL = 'this-is-the-queued-request';
+        const queued = getImage({ url: queuedURL }, () => t.fail());
+
+        // the new requests is queued because the limit is reached
+        t.equals(window.server.requests.length, maxRequests);
+
+        // cancel the first request to let the queued request start
+        requests[0].cancel();
+        t.equals(window.server.requests.length, maxRequests + 1);
+
+        // abort the previously queued request and confirm that it is aborted
+        const queuedRequest = window.server.requests[window.server.requests.length - 1];
+        t.equals(queuedRequest.url, queuedURL);
+        t.equals(queuedRequest.aborted, undefined);
+        queued.cancel();
+        t.equals(queuedRequest.aborted, true);
+
+        t.end();
+    });
+
     t.end();
 });