/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog, propEqual */ (function() { var viewer; module('TiledImage', { setup: function() { var example = $('
').appendTo("#qunit-fixture"); testLog.reset(); viewer = OpenSeadragon({ id: 'example', prefixUrl: '/build/openseadragon/images/', springStiffness: 100 // Faster animation = faster tests }); }, teardown: function() { if (viewer && viewer.close) { viewer.close(); } viewer = null; } }); // ---------- var checkBounds = function(image, expected, message) { var bounds = image.getBounds(); equal(bounds.x, expected.x, message + ' x'); equal(bounds.y, expected.y, message + ' y'); equal(bounds.width, expected.width, message + ' width'); equal(bounds.height, expected.height, message + ' height'); }; // ---------- asyncTest('metrics', function() { var handlerCount = 0; viewer.addHandler('open', function(event) { var image = viewer.world.getItemAt(0); var contentSize = image.getContentSize(); equal(contentSize.x, 500, 'contentSize.x'); equal(contentSize.y, 2000, 'contentSize.y'); checkBounds(image, new OpenSeadragon.Rect(5, 6, 10, 40), 'initial bounds'); var scale = image.getContentSize().x / image.getBounds().width; var viewportPoint = new OpenSeadragon.Point(10, 11); var imagePoint = viewportPoint.minus(image.getBounds().getTopLeft()).times(scale); propEqual(image.viewportToImageCoordinates(viewportPoint), imagePoint, 'viewportToImageCoordinates'); propEqual(image.imageToViewportCoordinates(imagePoint), viewportPoint, 'imageToViewportCoordinates'); var viewportRect = new OpenSeadragon.Rect(viewportPoint.x, viewportPoint.y, 6, 7); var imageRect = new OpenSeadragon.Rect(imagePoint.x, imagePoint.y, viewportRect.width * scale, viewportRect.height * scale); propEqual(image.viewportToImageRectangle(viewportRect), imageRect, 'viewportToImageRectangle'); propEqual(image.imageToViewportRectangle(imageRect), viewportRect, 'imageToViewportRectangle'); image.addHandler('bounds-change', function boundsChangeHandler(event) { image.removeHandler('bounds-change', boundsChangeHandler); handlerCount++; }); image.setPosition(new OpenSeadragon.Point(7, 8)); checkBounds(image, new OpenSeadragon.Rect(7, 8, 10, 40), 'bounds after position'); image.setWidth(5); checkBounds(image, new OpenSeadragon.Rect(7, 8, 5, 20), 'bounds after width'); image.setHeight(4); checkBounds(image, new OpenSeadragon.Rect(7, 8, 1, 4), 'bounds after width'); equal(handlerCount, 1, 'correct number of handlers called'); start(); }); viewer.open({ tileSource: '/test/data/tall.dzi', x: 5, y: 6, width: 10 }); }); // ---------- asyncTest('animation', function() { viewer.addHandler("open", function() { var image = viewer.world.getItemAt(0); propEqual(image.getBounds(), new OpenSeadragon.Rect(0, 0, 1, 1), 'target bounds on open'); propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds on open'); image.setPosition(new OpenSeadragon.Point(1, 2)); propEqual(image.getBounds(), new OpenSeadragon.Rect(1, 2, 1, 1), 'target bounds after position'); propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds after position'); image.setWidth(3); propEqual(image.getBounds(), new OpenSeadragon.Rect(1, 2, 3, 3), 'target bounds after width'); propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds after width'); viewer.addHandler('animation-finish', function animationHandler() { viewer.removeHandler('animation-finish', animationHandler); propEqual(image.getBounds(), new OpenSeadragon.Rect(1, 2, 3, 3), 'target bounds after animation'); propEqual(image.getBounds(true), new OpenSeadragon.Rect(1, 2, 3, 3), 'current bounds after animation'); start(); }); }); viewer.open('/test/data/testpattern.dzi'); }); // ---------- asyncTest('update', function() { var handlerCount = 0; viewer.addHandler('open', function(event) { var image = viewer.world.getItemAt(0); equal(image.needsDraw(), true, 'needs draw after open'); viewer.addHandler('update-level', function updateLevelHandler(event) { viewer.removeHandler('update-level', updateLevelHandler); handlerCount++; equal(event.eventSource, viewer, 'sender of update-level event was viewer'); equal(event.tiledImage, image, 'tiledImage of update-level event is correct'); ok('havedrawn' in event, 'update-level event includes havedrawn'); ok('level' in event, 'update-level event includes level'); ok('opacity' in event, 'update-level event includes opacity'); ok('visibility' in event, 'update-level event includes visibility'); ok('topleft' in event, 'update-level event includes topleft'); ok('bottomright' in event, 'update-level event includes bottomright'); ok('currenttime' in event, 'update-level event includes currenttime'); ok('best' in event, 'update-level event includes best'); }); viewer.addHandler('update-tile', function updateTileHandler(event) { viewer.removeHandler('update-tile', updateTileHandler); handlerCount++; equal(event.eventSource, viewer, 'sender of update-tile event was viewer'); equal(event.tiledImage, image, 'tiledImage of update-level event is correct'); ok(event.tile, 'update-tile event includes tile'); }); viewer.addHandler('tile-drawing', function tileDrawingHandler(event) { viewer.removeHandler('tile-drawing', tileDrawingHandler); handlerCount++; equal(event.eventSource, viewer, 'sender of tile-drawing event was viewer'); equal(event.tiledImage, image, 'tiledImage of update-level event is correct'); ok(event.tile, 'tile-drawing event includes a tile'); ok(event.context, 'tile-drawing event includes a context'); ok(event.rendered, 'tile-drawing event includes a rendered'); }); viewer.addHandler('tile-drawn', function tileDrawnHandler(event) { viewer.removeHandler('tile-drawn', tileDrawnHandler); handlerCount++; equal(event.eventSource, viewer, 'sender of tile-drawn event was viewer'); equal(event.tiledImage, image, 'tiledImage of update-level event is correct'); ok(event.tile, 'tile-drawn event includes tile'); equal(handlerCount, 4, 'correct number of handlers called'); start(); }); image.draw(); }); viewer.open('/test/data/testpattern.dzi'); }); // ---------- asyncTest('reset', function() { viewer.addHandler('tile-drawn', function updateHandler() { viewer.removeHandler('tile-drawn', updateHandler); ok(viewer.tileCache.numTilesLoaded() > 0, 'we have tiles after tile-drawn'); viewer.world.getItemAt(0).reset(); equal(viewer.tileCache.numTilesLoaded(), 0, 'no tiles after reset'); viewer.addHandler('tile-drawn', function updateHandler2() { viewer.removeHandler('tile-drawn', updateHandler2); ok(viewer.tileCache.numTilesLoaded() > 0, 'more tiles load'); viewer.world.getItemAt(0).destroy(); equal(viewer.tileCache.numTilesLoaded(), 0, 'no tiles after destroy'); start(); }); }); equal(viewer.tileCache.numTilesLoaded(), 0, 'no tiles at start'); viewer.open('/test/data/testpattern.dzi'); }); // ---------- asyncTest('clip', function() { var clip = new OpenSeadragon.Rect(100, 100, 800, 800); viewer.addHandler('open', function() { var image = viewer.world.getItemAt(0); propEqual(image.getClip(), clip, 'image has correct clip'); image.setClip(null); equal(image.getClip(), null, 'clip is cleared'); image.setClip(clip); propEqual(image.getClip(), clip, 'clip is set correctly'); Util.spyOnce(viewer.drawer, 'setClip', function(rect) { var homeBounds = viewer.viewport.getHomeBounds(); var canvasClip = viewer.drawer .viewportToDrawerRectangle(homeBounds); var precision = 0.00000001; Util.assertRectangleEquals(rect, canvasClip, precision, 'clipping should be ' + canvasClip); start(); }); }); viewer.open({ tileSource: '/test/data/testpattern.dzi', clip: clip }); }); // ---------- asyncTest('clip-change event', function() { expect(0); var clip = new OpenSeadragon.Rect(100, 100, 800, 800); viewer.addHandler('open', function() { var image = viewer.world.getItemAt(0); image.addOnceHandler('clip-change', function() { image.addOnceHandler('clip-change', function() { start(); }); image.setClip(clip); }); image.setClip(null); }); viewer.open({ tileSource: '/test/data/testpattern.dzi' }); }); // ---------- asyncTest('getClipBounds', function() { var clip = new OpenSeadragon.Rect(100, 200, 800, 500); viewer.addHandler('open', function() { var image = viewer.world.getItemAt(0); var bounds = image.getClippedBounds(); var expectedBounds = new OpenSeadragon.Rect(1.2, 1.4, 1.6, 1); propEqual(bounds, expectedBounds, 'getClipBounds should take clipping into account.'); image = viewer.world.getItemAt(1); bounds = image.getClippedBounds(); expectedBounds = new OpenSeadragon.Rect(1, 2, 2, 2); propEqual(bounds, expectedBounds, 'getClipBounds should work when no clipping set.'); start(); }); viewer.open([{ tileSource: '/test/data/testpattern.dzi', clip: clip, x: 1, y: 1, width: 2 }, { tileSource: '/test/data/testpattern.dzi', x: 1, y: 2, width: 2 }]); }); // ---------- asyncTest('opacity', function() { function testDefaultOpacity() { viewer.removeHandler('open', testDefaultOpacity); var image = viewer.world.getItemAt(0); strictEqual(image.getOpacity(), 0.5, 'image has default opacity'); image.setOpacity(1); strictEqual(image.getOpacity(), 1, 'opacity is set correctly'); viewer.addHandler('open', testTileSourceOpacity); viewer.open({ tileSource: '/test/data/testpattern.dzi', opacity: 0.25 }); } function testTileSourceOpacity() { viewer.removeHandler('open', testTileSourceOpacity); var image = viewer.world.getItemAt(0); strictEqual(image.getOpacity(), 0.25, 'image has correct opacity'); image.setOpacity(0); strictEqual(image.getOpacity(), 0, 'opacity is set correctly'); start(); } viewer.addHandler('open', testDefaultOpacity); viewer.opacity = 0.5; viewer.open({ tileSource: '/test/data/testpattern.dzi', }); }); // ---------- asyncTest('rotation', function() { function testDefaultRotation() { var image = viewer.world.getItemAt(0); strictEqual(image.getRotation(), 0, 'image has default rotation'); image.setRotation(400); strictEqual(image.getRotation(), 40, 'rotation is set correctly'); viewer.addOnceHandler('open', testTileSourceRotation); viewer.open({ tileSource: '/test/data/testpattern.dzi', degrees: -60 }); } function testTileSourceRotation() { var image = viewer.world.getItemAt(0); strictEqual(image.getRotation(), 300, 'image has correct rotation'); start(); } viewer.addOnceHandler('open', testDefaultRotation); viewer.open({ tileSource: '/test/data/testpattern.dzi', }); }); asyncTest('fitBounds', function() { function assertRectEquals(actual, expected, message) { ok(actual.equals(expected), message + ' should be ' + expected.toString() + ', found ' + actual.toString()); } viewer.addHandler('open', function openHandler() { viewer.removeHandler('open', openHandler); var squareImage = viewer.world.getItemAt(0); squareImage.fitBounds( new OpenSeadragon.Rect(0, 0, 1, 2), OpenSeadragon.Placement.CENTER, true); var actualBounds = squareImage.getBounds(true); var expectedBounds = new OpenSeadragon.Rect(0, 0.5, 1, 1); assertRectEquals(actualBounds, expectedBounds, 'Square image bounds'); var tallImage = viewer.world.getItemAt(1); tallImage.fitBounds( new OpenSeadragon.Rect(0, 0, 1, 2), OpenSeadragon.Placement.TOP_LEFT, true); actualBounds = tallImage.getBounds(true); expectedBounds = new OpenSeadragon.Rect(0, 0, 0.5, 2); assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds'); var wideImage = viewer.world.getItemAt(2); wideImage.fitBounds( new OpenSeadragon.Rect(0, 0, 1, 2), OpenSeadragon.Placement.BOTTOM_RIGHT, true); actualBounds = wideImage.getBounds(true); expectedBounds = new OpenSeadragon.Rect(0, 1.75, 1, 0.25); assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds'); start(); }); viewer.open([ '/test/data/testpattern.dzi', '/test/data/tall.dzi', '/test/data/wide.dzi' ]); }); // ---------- asyncTest('fitBounds in constructor', function() { function assertRectEquals(actual, expected, message) { ok(actual.equals(expected), message + ' should be ' + expected.toString() + ', found ' + actual.toString()); } viewer.addHandler('open', function openHandler() { viewer.removeHandler('open', openHandler); var squareImage = viewer.world.getItemAt(0); var actualBounds = squareImage.getBounds(true); var expectedBounds = new OpenSeadragon.Rect(0, 0.5, 1, 1); assertRectEquals(actualBounds, expectedBounds, 'Square image bounds'); var tallImage = viewer.world.getItemAt(1); actualBounds = tallImage.getBounds(true); expectedBounds = new OpenSeadragon.Rect(0, 0, 0.5, 2); assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds'); var wideImage = viewer.world.getItemAt(2); actualBounds = wideImage.getBounds(true); expectedBounds = new OpenSeadragon.Rect(0, 1.75, 1, 0.25); assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds'); start(); }); viewer.open([{ tileSource: '/test/data/testpattern.dzi', x: 1, // should be ignored y: 1, // should be ignored width: 2, // should be ignored fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2) // No placement specified, should default to CENTER }, { tileSource: '/test/data/tall.dzi', fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2), fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT }, { tileSource: '/test/data/wide.dzi', fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2), fitBoundsPlacement: OpenSeadragon.Placement.BOTTOM_RIGHT }]); }); // ---------- asyncTest('fitBounds with clipping', function() { function assertRectEquals(actual, expected, message) { ok(actual.equals(expected), message + ' should be ' + expected.toString() + ', found ' + actual.toString()); } viewer.addHandler('open', function openHandler() { viewer.removeHandler('open', openHandler); var squareImage = viewer.world.getItemAt(0); var actualBounds = squareImage.getBounds(true); var expectedBounds = new OpenSeadragon.Rect(-1, -1, 2, 2); assertRectEquals(actualBounds, expectedBounds, 'Square image bounds'); var tallImage = viewer.world.getItemAt(1); actualBounds = tallImage.getBounds(true); expectedBounds = new OpenSeadragon.Rect(1, 1, 2, 8); assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds'); var wideImage = viewer.world.getItemAt(2); actualBounds = wideImage.getBounds(true); expectedBounds = new OpenSeadragon.Rect(1, 1, 16, 4); assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds'); start(); }); viewer.open([{ tileSource: '/test/data/testpattern.dzi', clip: new OpenSeadragon.Rect(500, 500, 500, 500), fitBounds: new OpenSeadragon.Rect(0, 0, 1, 1) }, { tileSource: '/test/data/tall.dzi', clip: new OpenSeadragon.Rect(0, 0, 250, 100), fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2), fitBoundsPlacement: OpenSeadragon.Placement.TOP }, { tileSource: '/test/data/wide.dzi', clip: new OpenSeadragon.Rect(0, 0, 100, 250), fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2), fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT }]); }); // ---------- asyncTest('fullyLoaded', function() { viewer.addHandler('open', function openHandler() { viewer.removeHandler('open', openHandler); var image = viewer.world.getItemAt(0); equal(image.getFullyLoaded(), false, 'not fully loaded at first'); var count = 0; var fullyLoadedChangeHandler = function(event) { if (count === 0) { equal(event.fullyLoaded, true, 'event includes true fullyLoaded property'); equal(image.getFullyLoaded(), true, 'image is fully loaded after event'); viewer.viewport.zoomBy(5, null, true); } else if (count === 1) { equal(event.fullyLoaded, false, 'event includes false fullyLoaded property'); equal(image.getFullyLoaded(), false, 'image is not fully loaded after zoom'); } else { image.removeHandler('fully-loaded-change', fullyLoadedChangeHandler); equal(image.getFullyLoaded(), true, 'image is once again fully loaded'); start(); } count++; }; image.addHandler('fully-loaded-change', fullyLoadedChangeHandler); }); viewer.open([{ tileSource: '/test/data/tall.dzi', }]); }); // PhantomJS is missing Function.prototype.bind function bind(func, _this) { return function() { return func.apply(_this, arguments); }; } test('_getCornerTiles without wrapping', function() { var tiledImageMock = { wrapHorizontal: false, wrapVertical: false, source: new OpenSeadragon.TileSource({ width: 1500, height: 1000, tileWidth: 200, tileHeight: 150, tileOverlap: 1, }), }; var _getCornerTiles = bind( OpenSeadragon.TiledImage.prototype._getCornerTiles, tiledImageMock); function assertCornerTiles(topLeftBound, bottomRightBound, expectedTopLeft, expectedBottomRight) { var cornerTiles = _getCornerTiles(11, topLeftBound, bottomRightBound); ok(cornerTiles.topLeft.equals(expectedTopLeft), 'Top left tile should be ' + expectedTopLeft.toString() + ' found ' + cornerTiles.topLeft.toString()); ok(cornerTiles.bottomRight.equals(expectedBottomRight), 'Bottom right tile should be ' + expectedBottomRight.toString() + ' found ' + cornerTiles.bottomRight.toString()); } assertCornerTiles( new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(1, 10 / 15), new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(7, 6) ) // Floating point errors should be handled assertCornerTiles( new OpenSeadragon.Point(-1e-14, -1e-14), new OpenSeadragon.Point(1 + 1e-14, 10 / 15 + 1e-14), new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(7, 6) ) assertCornerTiles( new OpenSeadragon.Point(0.3, 0.5), new OpenSeadragon.Point(0.5, 0.6), new OpenSeadragon.Point(2, 5), new OpenSeadragon.Point(3, 6) ) }); test('_getCornerTiles with horizontal wrapping', function() { var tiledImageMock = { wrapHorizontal: true, wrapVertical: false, source: new OpenSeadragon.TileSource({ width: 1500, height: 1000, tileWidth: 200, tileHeight: 150, tileOverlap: 1, }), }; var _getCornerTiles = bind( OpenSeadragon.TiledImage.prototype._getCornerTiles, tiledImageMock); function assertCornerTiles(topLeftBound, bottomRightBound, expectedTopLeft, expectedBottomRight) { var cornerTiles = _getCornerTiles(11, topLeftBound, bottomRightBound); ok(cornerTiles.topLeft.equals(expectedTopLeft), 'Top left tile should be ' + expectedTopLeft.toString() + ' found ' + cornerTiles.topLeft.toString()); ok(cornerTiles.bottomRight.equals(expectedBottomRight), 'Bottom right tile should be ' + expectedBottomRight.toString() + ' found ' + cornerTiles.bottomRight.toString()); } assertCornerTiles( new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(1, 10 / 15), new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(8, 6) ) assertCornerTiles( new OpenSeadragon.Point(-1, 0), new OpenSeadragon.Point(0.5, 10 / 15 + 1e-14), new OpenSeadragon.Point(-8, 0), new OpenSeadragon.Point(3, 6) ) assertCornerTiles( new OpenSeadragon.Point(1.3, 0.5), new OpenSeadragon.Point(1.5, 0.6), new OpenSeadragon.Point(10, 5), new OpenSeadragon.Point(11, 6) ) }); test('_getCornerTiles with vertical wrapping', function() { var tiledImageMock = { wrapHorizontal: false, wrapVertical: true, source: new OpenSeadragon.TileSource({ width: 1500, height: 1000, tileWidth: 200, tileHeight: 150, tileOverlap: 1, }), }; var _getCornerTiles = bind( OpenSeadragon.TiledImage.prototype._getCornerTiles, tiledImageMock); function assertCornerTiles(topLeftBound, bottomRightBound, expectedTopLeft, expectedBottomRight) { var cornerTiles = _getCornerTiles(11, topLeftBound, bottomRightBound); ok(cornerTiles.topLeft.equals(expectedTopLeft), 'Top left tile should be ' + expectedTopLeft.toString() + ' found ' + cornerTiles.topLeft.toString()); ok(cornerTiles.bottomRight.equals(expectedBottomRight), 'Bottom right tile should be ' + expectedBottomRight.toString() + ' found ' + cornerTiles.bottomRight.toString()); } assertCornerTiles( new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(1, 10 / 15), new OpenSeadragon.Point(0, 0), new OpenSeadragon.Point(7, 7) ) assertCornerTiles( new OpenSeadragon.Point(0, -10 / 15 / 2), new OpenSeadragon.Point(0.5, 0.5), new OpenSeadragon.Point(0, -4), new OpenSeadragon.Point(3, 5) ) assertCornerTiles( new OpenSeadragon.Point(0, 10 / 15 + 0.1), new OpenSeadragon.Point(0.3, 10 / 15 + 0.3), new OpenSeadragon.Point(0, 7), new OpenSeadragon.Point(2, 9) ) }); })();