Add some tests for AJAX tile loading

src/tiledimage.js

@@ -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
     });

test/demo/customheaders.html

@@ -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,

test/modules/ajax-tiles.js

@@ -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
+        });
+    });
+})();

test/test.html

@@ -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>