Brought over #2416 fix

changelog.txt

@@ -1,6 +1,10 @@
 OPENSEADRAGON CHANGELOG
 =======================
 
+4.1.1:
+
+* Fixed: Strange behavior if IIIF sizes were not in ascending order (#2416 @lutzhelm)
+
 4.1.0:
 
 * NEW BEHAVIOR: When `navigatorRotate` is false, while the navigator image doesn't rotate, the red outline now does (#2356 @lcl45)

src/iiiftilesource.js

@@ -145,7 +145,7 @@ $.IIIFTileSource = function( options ){
     if( this.sizes ) {
         var sizeLength = this.sizes.length;
         if ( (sizeLength === options.maxLevel) || (sizeLength === options.maxLevel + 1) ) {
-            this.levelSizes = this.sizes;
+            this.levelSizes = this.sizes.slice().sort(( size1, size2 ) => size1.width - size2.width);
             // Need to take into account that the list may or may not include the full resolution size
             if( sizeLength === options.maxLevel ) {
                 this.levelSizes.push( {width: this.width, height: this.height} );

test/modules/iiif.js

@@ -107,6 +107,21 @@
             ],
             "profile": "level0"
         },
+        infoJson3level0WithTiles = {
+            "@context": "http://iiif.io/api/image/3/context.json",
+            "id": id,
+            "width": 2000,
+            "height": 1000,
+            "tiles": [
+                { "width": 256, "scaleFactors": [ 2, 4, 1 ] }
+            ],
+            "sizes": [
+                { width: 2000, height: 1000 },
+                { width: 1000, height: 500 },
+                { width: 500, height: 250 }
+            ],
+            "profile": "level0"
+        },
         infoJson3level0ContextExtension = {
             "@context": [
                 "http://iiif.io/api/image/3/context.json",
@@ -141,6 +156,21 @@
             "width": 2000,
             "height": 1000,
             "profile": "level1"
+        },
+        infoJson3DescendingSizeOrder = {
+            "@context": "http://iiif.io/api/image/3/context.json",
+            "id": id,
+            "width": 2000,
+            "height": 1000,
+            "tiles": [
+                { "width": 512, "scaleFactors": [ 1, 2, 4 ] }
+            ],
+            "sizes": [
+                { width: 2000, height: 1000 },
+                { width: 1000, height: 500 },
+                { width: 500, height: 250 }
+            ],
+            "profile": "level1",
         };
 
     QUnit.module('IIIF');
@@ -238,6 +268,11 @@
         assert.equal(source2Level0.getTileUrl(0, 0, 0), "http://example.com/identifier/full/1000,/0/default.jpg");
         assert.equal(source2Level0.getTileUrl(1, 0, 0), "http://example.com/identifier/full/2000,/0/default.jpg");
 
+        var source3Level0WithTiles = getSource(infoJson3level0WithTiles);
+        assert.equal(source3Level0WithTiles.getTileUrl(0, 0, 0), "http://example.com/identifier/0,0,1024,1000/256,250/0/default.jpg");
+        assert.equal(source3Level0WithTiles.getTileUrl(1, 1, 0), "http://example.com/identifier/512,0,512,512/256,256/0/default.jpg");
+        assert.equal(source3Level0WithTiles.getTileUrl(2, 0, 0), "http://example.com/identifier/0,0,256,256/256,256/0/default.jpg");
+
         var source3Level1 = getSource(infoJson3level1);
         assert.equal(source3Level1.getTileUrl(0, 0, 0), "http://example.com/identifier/full/8,4/0/default.jpg");
         assert.equal(source3Level1.getTileUrl(7, 0, 0), "http://example.com/identifier/0,0,1024,1000/512,500/0/default.jpg");
@@ -246,6 +281,11 @@
         assert.equal(source3Level1.getTileUrl(8, 3, 0), "http://example.com/identifier/1536,0,464,512/464,512/0/default.jpg");
         assert.equal(source3Level1.getTileUrl(8, 0, 1), "http://example.com/identifier/0,512,512,488/512,488/0/default.jpg");
         assert.equal(source3Level1.getTileUrl(8, 3, 1), "http://example.com/identifier/1536,512,464,488/464,488/0/default.jpg");
+
+        var source3DescendingSizeOrder = getSource(infoJson3DescendingSizeOrder);
+        assert.equal(source3DescendingSizeOrder.getTileUrl(0, 0, 0), "http://example.com/identifier/full/500,250/0/default.jpg");
+        assert.equal(source3DescendingSizeOrder.getTileUrl(1, 1, 0), "http://example.com/identifier/1024,0,976,1000/488,500/0/default.jpg");
+        assert.equal(source3DescendingSizeOrder.getTileUrl(2, 0, 0), "http://example.com/identifier/0,0,512,512/512,512/0/default.jpg");
     });
 
 })();