diff --git a/test/navigator.js b/test/navigator.js
new file mode 100644
index 00000000..d13d80e1
--- /dev/null
+++ b/test/navigator.js
@@ -0,0 +1,283 @@
+QUnit.config.autostart = false;
+QUnit.config.testTimeout = 5000;
+
+(function() {
+ var viewer = null;
+
+ $(document).ready(function() {
+ start();
+ });
+
+ var assessNumericValueWithSomeVariance = function (value1, value2, variance, message)
+ {
+ ok(Math.abs (value1 - value2) <= variance, message + " " + value1 + ":" + value2);
+ };
+
+ var assessNavigatorLocation = function (expectedX, expectedY)
+ {
+ var navigator = $(".navigator");
+
+ assessNumericValueWithSomeVariance(expectedX,navigator.offset().left,5,status + ' Navigator x position');
+ assessNumericValueWithSomeVariance(expectedY,navigator.offset().top,5,status +' Navigator y position');
+ };
+
+
+ var assessNavigatorDisplayRegionAndMainViewerState = function (theViewer, theNavigatorSelector, theDisplayRegionSelector, status)
+ {
+ var navigator = $(theNavigatorSelector);
+ var displayRegion = $(theDisplayRegionSelector);
+ var mainViewerBounds = theViewer.viewport.getBounds();
+
+ //TODO These calculation need to be tweaked for non-square images
+ assessNumericValueWithSomeVariance(mainViewerBounds.width,displayRegion.width() / navigator.width(),.025,status + ' Width synchronization');
+ assessNumericValueWithSomeVariance(mainViewerBounds.height,displayRegion.height() / navigator.height(),.025,status +' Height synchronization');
+ assessNumericValueWithSomeVariance(mainViewerBounds.x,displayRegion.position().left / navigator.width(),.025,status + ' Left synchronization');
+ assessNumericValueWithSomeVariance(mainViewerBounds.y,displayRegion.position().top /navigator.height(),.025,status + ' Top synchronization');
+ };
+
+ var filterToDetectThatDisplayRegionHasBeenDrawn = function () {
+ var self = $(this);
+ OpenSeadragon.console.log( "Checking:" + self.html + "\n");
+ return self.width() > 0 &&
+ self.height() > 0 &&
+ (typeof self.position !== 'undefined');
+ };
+
+ var waitUntilFilterSatisfied = function () {
+ return function () {
+ var found = false;
+ var cancel = false;
+ return function (selector, filterfunction, handler, recursiveCall, count) {
+ if (recursiveCall !== true)
+ {
+ found = false;
+ cancel = false;
+ count = 0;
+ }
+ var $this = $(selector).filter(filterfunction);
+ found = found || $this.length > 0;
+ if (!found && !cancel && count < 20) {
+ setTimeout(function () {
+ count++;
+ waitUntilFilterSatisfied(selector, filterfunction, handler, true, count);
+ }, 50)
+ }
+ else {
+ if (!cancel) {
+ cancel = true;
+ handler();
+ }
+ return $this;
+ }
+ return $this;
+ };
+ }();
+ }();
+
+ var waitForDrawer = function () {
+ return function () {
+ var drawerDone = false;
+ var cancel = false;
+ return function (theViewer, handler, recursiveCall, count) {
+ if (recursiveCall !== true)
+ {
+ drawerDone = false;
+ cancel = false;
+ count = 0;
+ }
+ drawerDone = drawerDone || !theViewer.drawer.needsUpdate();
+ if (!drawerDone && !cancel && count < 20) {
+ count++;
+ setTimeout(function () {
+ waitForDrawer(theViewer, handler, true, count);
+ }, 50)
+ }
+ else {
+ if (!cancel) {
+ cancel = true;
+ handler();
+ }
+ return;
+ }
+ return;
+ };
+ }();
+ }();
+
+ module( "navigator", {
+ setup: function() {
+ QUnit.config.testTimeout = 5000;
+ if ($('#exampleNavigator').is(':ui-dialog'))
+ {
+ $('#exampleNavigator').dialog('destroy');
+ }
+ $("#example").empty();
+ $("#exampleNavigator").empty();
+ }, teardown: function() {
+ viewer.removeAllHandlers('animationfinish');
+ }
+ });
+
+ asyncTest('ZoomAndDragOnCustomNavigatorLocation', function () {
+ viewer = OpenSeadragon({
+ id:'example',
+ navigatorId:'exampleNavigator',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigator:true
+ });
+
+ var assessNavigatorAfterDrag = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,"#exampleNavigator",".displayregion", "After pan");
+ start();
+ };
+
+ var assessNavigatorAfterZoom = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,"#exampleNavigator",".displayregion", "After image zoom");
+ viewer.viewport.panTo(new OpenSeadragon.Point(0.1, 0.1));
+ setTimeout(function() {waitForDrawer(viewer.navigator, assessNavigatorAfterDrag)},1000);
+ };
+
+ var captureInitialStateAfterOpenAndThenAct = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,"#exampleNavigator",".displayregion", "After image load");
+
+ var mainViewerElement = $('#example');
+ assessNavigatorLocation(mainViewerElement.offset().left,
+ mainViewerElement.offset().top + mainViewerElement.height() );
+
+ viewer.viewport.zoomTo(2);
+ setTimeout(function() {waitForDrawer(viewer.navigator, assessNavigatorAfterZoom)},1000);
+ };
+
+ var proceedOnceTheIntialImagesAreLoaded = function () {
+ waitUntilFilterSatisfied('#exampleNavigator .displayregion', filterToDetectThatDisplayRegionHasBeenDrawn, captureInitialStateAfterOpenAndThenAct);
+ };
+
+ var waitForNavigator = function () {
+ waitForDrawer(viewer.navigator, proceedOnceTheIntialImagesAreLoaded);
+ };
+
+ var openHandler = function () {
+ viewer.removeHandler('open',openHandler );
+ waitForDrawer(viewer, waitForNavigator);
+ };
+
+ viewer.addHandler('open', openHandler);
+
+ });
+
+ asyncTest('NavigatorOnJQueryDialog', function () {
+ $('#exampleNavigator').dialog();
+
+ viewer = OpenSeadragon({
+ id:'example',
+ navigatorId:'exampleNavigator',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigator:true
+ });
+
+ var assessNavigatorAfterDrag = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,"#exampleNavigator",".displayregion", "After pan");
+ start();
+ };
+
+ var assessNavigatorAfterZoom = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,"#exampleNavigator",".displayregion", "After image zoom");
+ viewer.viewport.panTo(new OpenSeadragon.Point(0.1, 0.1));
+ setTimeout(function() {waitForDrawer(viewer.navigator, assessNavigatorAfterDrag)},1000);
+ };
+
+
+ var captureInitialStateAfterOpenAndThenAct = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,"#exampleNavigator",".displayregion", "After image load");
+
+ var jqueryDialog = $('#exampleNavigator');
+ assessNavigatorLocation(jqueryDialog.offset().left,
+ jqueryDialog.offset().top);
+
+
+ viewer.viewport.zoomTo(2);
+ setTimeout(function() {waitForDrawer(viewer.navigator, assessNavigatorAfterZoom)},1000);
+ };
+
+ var proceedOnceTheIntialImagesAreLoaded = function () {
+ waitUntilFilterSatisfied('#exampleNavigator .displayregion', filterToDetectThatDisplayRegionHasBeenDrawn, captureInitialStateAfterOpenAndThenAct);
+ };
+
+ var waitForNavigator = function () {
+ waitForDrawer(viewer.navigator, proceedOnceTheIntialImagesAreLoaded);
+ };
+
+ var openHandler = function () {
+ viewer.removeHandler('open',openHandler );
+ waitForDrawer(viewer, waitForNavigator);
+ };
+
+ viewer.addHandler('open', openHandler);
+
+ });
+
+ asyncTest('DefaultNavigatorLocation', function () {
+ viewer = OpenSeadragon({
+ id:'example',
+ prefixUrl:'/build/openseadragon/images/',
+ tileSources:'/test/data/testpattern.dzi',
+ showNavigator:true
+ });
+
+ var assessNavigatorAfterDrag = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,".navigator",".displayregion", "After pan");
+ start();
+ };
+
+ var assessNavigatorAfterZoom = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,".navigator",".displayregion", "After image zoom");
+ viewer.viewport.panTo(new OpenSeadragon.Point(0.1, 0.1));
+ setTimeout(function() {waitForDrawer(viewer.navigator, assessNavigatorAfterDrag)},1000);
+ };
+
+ var captureInitialStateAfterOpenAndThenAct = function () {
+ assessNavigatorDisplayRegionAndMainViewerState(viewer,".navigator",".displayregion", "After image load");
+
+ var mainViewerElement = $('#example');
+ var navigatorElement = $('.navigator');
+ assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+ mainViewerElement.offset().top);
+
+ viewer.viewport.zoomTo(2);
+ setTimeout(function() {waitForDrawer(viewer.navigator, assessNavigatorAfterZoom)},1000);
+ };
+
+ var proceedOnceTheIntialImagesAreLoaded = function () {
+ waitUntilFilterSatisfied('.navigator .displayregion', filterToDetectThatDisplayRegionHasBeenDrawn, captureInitialStateAfterOpenAndThenAct);
+ };
+
+ var waitForNavigator = function () {
+ waitForDrawer(viewer.navigator, proceedOnceTheIntialImagesAreLoaded);
+ };
+
+ var openHandler = function () {
+ viewer.removeHandler('open',openHandler );
+ waitForDrawer(viewer, waitForNavigator);
+ };
+
+ viewer.addHandler('open', openHandler);
+
+ });
+
+
+ //Try with different navigator locations, in a jquery dialog and in a default location
+ //Test whether showNavigator works
+ //Test whether the initial locations works
+
+ //Other tests that require additional sample images
+ //Switch content, make sure things work
+ //Try images with different shapes (i.e. including wide and tall)
+
+ //Other tests that require a reasonable event simulation approachj
+ //Test autohide
+ //Operate on the navigator
+
+
+})();
diff --git a/test/test.html b/test/test.html
index a88ca967..454ac324 100644
--- a/test/test.html
+++ b/test/test.html
@@ -4,15 +4,20 @@
OpenSeadragon QUnit
+
+
-
+
+
+
+