From 39e8df61579a6f7cd9205bdda60aac01b250c10c Mon Sep 17 00:00:00 2001 From: Andrew Harvey Date: Sun, 19 May 2019 16:32:54 +1000 Subject: [PATCH 1/5] ensure fetch and ajax requests for images pass accept webp when supported --- src/util/ajax.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/util/ajax.js b/src/util/ajax.js index 72e6439837f..f581cfc0c1e 100644 --- a/src/util/ajax.js +++ b/src/util/ajax.js @@ -6,6 +6,7 @@ import {isMapboxHTTPURL, hasCacheDefeatingSku} from './mapbox'; import config from './config'; import assert from 'assert'; import {cacheGet, cachePut} from './tile_request_cache'; +import webpSupported from './webp_supported'; import type {Callback} from '../types/callback'; import type {Cancelable} from '../types/cancelable'; @@ -266,6 +267,13 @@ export const resetImageRequestQueue = () => { resetImageRequestQueue(); export const getImage = function(requestParameters: RequestParameters, callback: Callback): Cancelable { + if (webpSupported.supported) { + if (!requestParameters.headers) { + requestParameters.headers = {}; + } + requestParameters.headers.accept = 'image/webp,*/*'; + } + // limit concurrent image loads to help with raster sources performance on big screens if (numImageRequests >= config.MAX_PARALLEL_IMAGE_REQUESTS) { const queued = { From 68c27e1318981c1254925fae0d3d0c3b42aa6293 Mon Sep 17 00:00:00 2001 From: Andrew Harvey Date: Thu, 17 Oct 2019 12:52:26 +1100 Subject: [PATCH 2/5] add unit test to check accepts header contains image/webp when supported --- test/unit/util/ajax.test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/unit/util/ajax.test.js b/test/unit/util/ajax.test.js index f7e5e5133a2..6920f772bb1 100644 --- a/test/unit/util/ajax.test.js +++ b/test/unit/util/ajax.test.js @@ -8,6 +8,7 @@ import { } from '../../../src/util/ajax'; import window from '../../../src/util/window'; import config from '../../../src/util/config'; +import webpSupported from '../../../src/util/webp_supported'; test('ajax', (t) => { t.beforeEach(callback => { @@ -185,5 +186,20 @@ test('ajax', (t) => { t.end(); }); + t.test('getImage sends accept/webp when supported', (t) => { + resetImageRequestQueue(); + + window.server.respondWith((request) => { + t.ok(request.requestHeaders.accept.includes('image/webp'), 'accepts header contains image/webp') + }); + + // mock webp support + webpSupported.supported = true + + getImage({url: ''}, () => t.fail); + + t.end(); + }); + t.end(); }); From b4bc0028ace900467f62224f91b55fabddec6ca8 Mon Sep 17 00:00:00 2001 From: Andrew Harvey Date: Thu, 17 Oct 2019 12:57:59 +1100 Subject: [PATCH 3/5] fix incorrect webp test --- test/unit/util/ajax.test.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/test/unit/util/ajax.test.js b/test/unit/util/ajax.test.js index 6920f772bb1..b12a06af614 100644 --- a/test/unit/util/ajax.test.js +++ b/test/unit/util/ajax.test.js @@ -190,15 +190,31 @@ test('ajax', (t) => { resetImageRequestQueue(); window.server.respondWith((request) => { - t.ok(request.requestHeaders.accept.includes('image/webp'), 'accepts header contains image/webp') + t.ok(request.requestHeaders.accept.includes('image/webp'), 'accepts header contains image/webp'); + request.respond(200, {'Content-Type': 'image/webp'}, ''); }); // mock webp support webpSupported.supported = true - getImage({url: ''}, () => t.fail); + // jsdom doesn't call image onload; fake it https://github.com/jsdom/jsdom/issues/1816 + const jsdomImage = window.Image; + window.Image = class { + set src(src) { + setTimeout(() => this.onload()); + } + }; - t.end(); + function callback(err) { + if (err) return; + + window.Image = jsdomImage; + t.end(); + } + + getImage({url: ''}, callback); + + window.server.respond(); }); t.end(); From 15c146a149ae0cc06c8769a89c9478987face7b5 Mon Sep 17 00:00:00 2001 From: Andrew Harvey Date: Thu, 17 Oct 2019 13:02:08 +1100 Subject: [PATCH 4/5] simplify test --- test/unit/util/ajax.test.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/test/unit/util/ajax.test.js b/test/unit/util/ajax.test.js index b12a06af614..ad32d83e2c0 100644 --- a/test/unit/util/ajax.test.js +++ b/test/unit/util/ajax.test.js @@ -195,24 +195,16 @@ test('ajax', (t) => { }); // mock webp support - webpSupported.supported = true + webpSupported.supported = true; // jsdom doesn't call image onload; fake it https://github.com/jsdom/jsdom/issues/1816 - const jsdomImage = window.Image; window.Image = class { set src(src) { setTimeout(() => this.onload()); } }; - function callback(err) { - if (err) return; - - window.Image = jsdomImage; - t.end(); - } - - getImage({url: ''}, callback); + getImage({url: ''}, () => { t.end() }); window.server.respond(); }); From b35f8f4cc05543035baa2432facf1cd4f2dea51a Mon Sep 17 00:00:00 2001 From: Andrew Harvey Date: Thu, 17 Oct 2019 13:04:40 +1100 Subject: [PATCH 5/5] fix lint --- test/unit/util/ajax.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/util/ajax.test.js b/test/unit/util/ajax.test.js index ad32d83e2c0..c206088ef22 100644 --- a/test/unit/util/ajax.test.js +++ b/test/unit/util/ajax.test.js @@ -204,7 +204,7 @@ test('ajax', (t) => { } }; - getImage({url: ''}, () => { t.end() }); + getImage({url: ''}, () => { t.end(); }); window.server.respond(); });