mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Add some tests for AJAX tile loading

Browse Source
This commit is contained in:
Sean Nichols 2017-05-08 11:14:26 -04:00
parent 11157999eb
commit b909caaf45
4 changed files with 215 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/tiledimage.js
View File

@ -1434,7 +1434,7 @@ function onTileLoad( tiledImage, tile, time, image, errorMsg, tileRequest ) {
var finish = function() {
var cutoff = Math.ceil( Math.log(
tiledImage.source.getTileWidth(tile.level) ) / Math.log( 2 ) );
setTileLoaded(tiledImage, tile, image, cutoff);
setTileLoaded(tiledImage, tile, image, cutoff, tileRequest);
};
// Check if we're mid-update; this can happen on IE8 because image load events for
@ -1455,7 +1455,7 @@ function onTileLoad( tiledImage, tile, time, image, errorMsg, tileRequest ) {
* @param {Image} image
* @param {Number} cutoff
*/
function setTileLoaded(tiledImage, tile, image, cutoff) {
function setTileLoaded(tiledImage, tile, image, cutoff, tileRequest) {
var increment = 0;
function getCompletionCallback() {
@ -1490,6 +1490,7 @@ function setTileLoaded(tiledImage, tile, image, cutoff) {
* @property {Image} image - The image of the tile.
* @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile.
* @property {OpenSeadragon.Tile} tile - The tile which has been loaded.
* @property {XMLHttpRequest} tiledImage - The AJAX request that loaded this tile (if applicable).
* @property {function} getCompletionCallback - A function giving a callback to call
* when the asynchronous processing of the image is done. The image will be
* marked as entirely loaded when the callback has been called once for each
@ -1498,6 +1499,7 @@ function setTileLoaded(tiledImage, tile, image, cutoff) {
tiledImage.viewer.raiseEvent("tile-loaded", {
tile: tile,
tiledImage: tiledImage,
tileRequest: tileRequest,
image: image,
getCompletionCallback: getCompletionCallback
});

7
test/demo/customheaders.html
View File

@ -24,7 +24,7 @@
<script type="text/javascript">
// These values are generated by a script that concatenates all the tile files and records
// their byte ranges in a multi-dimensional array.
const tileManifest = {"tileRanges":[[[[0,3467]]],[[[3467,6954]]],[[[344916,348425]]],[[[348425,351948]]],[[[351948,355576]]],[[[355576,359520]]],[[[359520,364663]]],[[[364663,374196]]],[[[374196,407307]]],[[[407307,435465],[435465,463663]],[[463663,491839],[491839,520078]]],[[[6954,29582],[29582,50315],[50315,71936],[71936,92703]],[[92703,113385],[113385,133265],[133265,154763],[154763,175710]],[[175710,197306],[197306,218807],[218807,242177],[242177,263007]],[[263007,283790],[283790,304822],[304822,325691],[325691,344916]]]],"totalSize":520078}
var tileManifest = {"tileRanges":[[[[0,3467]]],[[[3467,6954]]],[[[344916,348425]]],[[[348425,351948]]],[[[351948,355576]]],[[[355576,359520]]],[[[359520,364663]]],[[[364663,374196]]],[[[374196,407307]]],[[[407307,435465],[435465,463663]],[[463663,491839],[491839,520078]]],[[[6954,29582],[29582,50315],[50315,71936],[71936,92703]],[[92703,113385],[113385,133265],[133265,154763],[154763,175710]],[[175710,197306],[197306,218807],[218807,242177],[242177,263007]],[[263007,283790],[283790,304822],[304822,325691],[325691,344916]]]],"totalSize":520078}
// This tile source demonstrates how you can retrieve individual tiles from a single file
// using the Range header.
@ -44,13 +44,12 @@
// in tileByteRanges.
getTileAjaxHeaders: function(level, x, y) {
return {
Range: "bytes=" + tileManifest.tileRanges[level][x][y].join("-") + "/" + tileManifest.totalSize
}
Range: "bytes " + tileManifest.tileRanges[level][x][y].join("-") + "/" + tileManifest.totalSize
};
},
};
var viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
showNavigator: true,

207
test/modules/ajax-tiles.js Normal file
View File

@ -0,0 +1,207 @@
/* global module, asyncTest, start, $, ok, equal, deepEqual, testLog */
(function() {
var viewer;
// These values are generated by a script that concatenates all the tile files and records
// their byte ranges in a multi-dimensional array.
// eslint-disable-next-line
var tileManifest = {"tileRanges":[[[[0,3467]]],[[[3467,6954]]],[[[344916,348425]]],[[[348425,351948]]],[[[351948,355576]]],[[[355576,359520]]],[[[359520,364663]]],[[[364663,374196]]],[[[374196,407307]]],[[[407307,435465],[435465,463663]],[[463663,491839],[491839,520078]]],[[[6954,29582],[29582,50315],[50315,71936],[71936,92703]],[[92703,113385],[113385,133265],[133265,154763],[154763,175710]],[[175710,197306],[197306,218807],[218807,242177],[242177,263007]],[[263007,283790],[283790,304822],[304822,325691],[325691,344916]]]],"totalSize":520078}
// This tile source demonstrates how you can retrieve individual tiles from a single file
// using the Range header.
var customTileSource = {
width: 1000,
height: 1000,
tileWidth: 254,
tileHeight: 254,
tileOverlap: 1,
maxLevel: 10,
minLevel: 0,
// The tile URL is always the same. Only the Range header changes
getTileUrl: function () {
return '/test/data/testpattern.blob';
},
// This method will send the appropriate range header for this tile based on the data
// in tileByteRanges.
getTileAjaxHeaders: function(level, x, y) {
return {
Range: 'bytes ' + tileManifest.tileRanges[level][x][y].join('-') + '/' + tileManifest.totalSize
};
},
};
module('AJAX-Tiles', {
setup: function() {
$('<div id="example"></div>').appendTo('#qunit-fixture');
testLog.reset();
viewer = OpenSeadragon({
id: 'example',
prefixUrl: '/build/openseadragon/images/',
springStiffness: 100, // Faster animation = faster tests,
loadTilesWithAjax: true,
ajaxHeaders: {
'X-Viewer-Header': 'ViewerHeaderValue'
}
});
},
teardown: function() {
if (viewer && viewer.close) {
viewer.close();
}
viewer = null;
}
});
asyncTest('tile-loaded event includes AJAX request object', function() {
var tileLoaded = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded);
ok(evt.tileRequest, 'Event includes tileRequest property');
equal(evt.tileRequest.readyState, XMLHttpRequest.DONE, 'tileRequest is in completed state');
start();
};
viewer.addHandler('tile-loaded', tileLoaded);
viewer.open(customTileSource);
});
asyncTest('tile-load-failed event includes AJAX request object', function() {
// Create a tile source that points to a broken URL
var brokenTileSource = OpenSeadragon.extend({}, customTileSource, {
getTileUrl: function () {
return '/test/data/testpattern.blob.invalid';
}
});
var tileLoadFailed = function tileLoadFailed(evt) {
viewer.removeHandler('tile-load-failed', tileLoadFailed);
ok(evt.tileRequest, 'Event includes tileRequest property');
equal(evt.tileRequest.readyState, XMLHttpRequest.DONE, 'tileRequest is in completed state');
start();
};
viewer.addHandler('tile-load-failed', tileLoadFailed);
viewer.open(brokenTileSource);
});
asyncTest('Headers are propagated correctly', function() {
// Create a tile source that sets a static header for tiles
var staticHeaderTileSource = OpenSeadragon.extend({}, customTileSource, {
getTileAjaxHeaders: function() {
return {
'X-Tile-Header': 'TileHeaderValue'
};
}
});
var expectedHeaders = {
'X-Viewer-Header': 'ViewerHeaderValue',
'X-TiledImage-Header': 'TiledImageHeaderValue',
'X-Tile-Header': 'TileHeaderValue'
};
var tileLoaded = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded);
var tile = evt.tile;
ok(tile, 'tile property exists on event');
ok(tile.ajaxHeaders, 'Tile has ajaxHeaders property');
deepEqual(
tile.ajaxHeaders, expectedHeaders,
'Tile headers include headers set on Viewer and TiledImage'
);
start();
};
viewer.addHandler('tile-loaded', tileLoaded);
viewer.addTiledImage({
ajaxHeaders: {
'X-TiledImage-Header': 'TiledImageHeaderValue'
},
tileSource: staticHeaderTileSource
});
});
asyncTest('Viewer headers are overwritten by TiledImage', function() {
// Create a tile source that sets a static header for tiles
var staticHeaderTileSource = OpenSeadragon.extend({}, customTileSource, {
getTileAjaxHeaders: function() {
return {
'X-Tile-Header': 'TileHeaderValue'
};
}
});
var expectedHeaders = {
'X-Viewer-Header': 'ViewerHeaderValue-Overwritten',
'X-TiledImage-Header': 'TiledImageHeaderValue',
'X-Tile-Header': 'TileHeaderValue'
};
var tileLoaded = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded);
var tile = evt.tile;
ok(tile, 'tile property exists on event');
ok(tile.ajaxHeaders, 'Tile has ajaxHeaders property');
deepEqual(
tile.ajaxHeaders, expectedHeaders,
'TiledImage header overwrites viewer header'
);
start();
};
viewer.addHandler('tile-loaded', tileLoaded);
viewer.addTiledImage({
ajaxHeaders: {
'X-TiledImage-Header': 'TiledImageHeaderValue',
'X-Viewer-Header': 'ViewerHeaderValue-Overwritten'
},
tileSource: staticHeaderTileSource
});
});
asyncTest('TiledImage headers are overwritten by Tile', function() {
var expectedHeaders = {
'X-Viewer-Header': 'ViewerHeaderValue',
'X-TiledImage-Header': 'TiledImageHeaderValue-Overwritten',
'X-Tile-Header': 'TileHeaderValue'
};
var tileLoaded = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded);
var tile = evt.tile;
ok(tile, 'tile property exists on event');
ok(tile.ajaxHeaders, 'Tile has ajaxHeaders property');
deepEqual(
tile.ajaxHeaders, expectedHeaders,
'Tile header overwrites TiledImage header'
);
start();
};
viewer.addHandler('tile-loaded', tileLoaded);
// Create a tile source that sets a static header for tiles
var staticHeaderTileSource = OpenSeadragon.extend({}, customTileSource, {
getTileAjaxHeaders: function() {
return {
'X-TiledImage-Header': 'TiledImageHeaderValue-Overwritten',
'X-Tile-Header': 'TileHeaderValue'
};
}
});
viewer.addTiledImage({
ajaxHeaders: {
'X-TiledImage-Header': 'TiledImageHeaderValue'
},
tileSource: staticHeaderTileSource
});
});
})();

1
test/test.html
View File

@ -42,6 +42,7 @@
<script src="/test/modules/tilesourcecollection.js"></script>
<script src="/test/modules/spring.js"></script>
<script src="/test/modules/rectangle.js"></script>
<script src="/test/modules/ajax-tiles.js"></script>
<!-- The navigator tests are the slowest (for now; hopefully they can be sped up)
so we put them last. -->
<script src="/test/modules/navigator.js"></script>