Merge pull request #310 from msalsbery/Navigator-Resize

Enhanced Navigator Resizability (#280, #296)

changelog.txt

@@ -6,6 +6,11 @@ OPENSEADRAGON CHANGELOG
 * Fixed: Nav button highlight states aren't quite aligned on Firefox (#303)
 * Added ControlAnchor options for default controls (#304)
 * Enabled basic cross-domain tile loading without tainting canvas (works in Chrome and Firefox) (#308)
+* Added a ControlAnchor.ABSOLUTE enumeration. Enables absolute positioning of control elements in the viewer (#310)
+* Added a 'navigator-scroll' event to Navigator. Fired when mousewheel/pinch events occur in the navigator (#310)
+* Added a navigatorMaintainSizeRatio option. If set to true, the navigator minimap resizes when the viewer element is resized (#310)
+* Added 'ABSOLUTE' as a navigatorPosition option, along with corresponding navigatorTop, navigatorLeft options. Allows the navigator minimap to be placed anywhere in the viewer (#310)
+* Enhanced the navigatorTop, navigatorLeft, navigatorHeight, and navigatorWidth options to allow a number for pixel units or a string for other element units (%, em, etc.) (#310)
 * Additional enhancements for IIIF support (#315)
 
 1.0.0:

src/control.js

@@ -46,13 +46,15 @@
  * @property {Number} TOP_RIGHT
  * @property {Number} BOTTOM_LEFT
  * @property {Number} BOTTOM_RIGHT
+ * @property {Number} ABSOLUTE
  */
 $.ControlAnchor = {
     NONE: 0,
     TOP_LEFT: 1,
     TOP_RIGHT: 2,
     BOTTOM_RIGHT: 3,
-    BOTTOM_LEFT: 4
+    BOTTOM_LEFT: 4,
+    ABSOLUTE: 5
 };
 
 /**
@@ -110,14 +112,30 @@ $.Control = function ( element, options, container ) {
      * @member {Element} wrapper
      * @memberof OpenSeadragon.Control#
      */
-    this.wrapper    = $.makeNeutralElement( "span" );
+    if ( this.anchor == $.ControlAnchor.ABSOLUTE ) {
-    this.wrapper.style.display = "inline-block";
+        this.wrapper    = $.makeNeutralElement( "div" );
-    this.wrapper.appendChild( this.element );
+        this.wrapper.style.position = "absolute";
+        this.wrapper.style.top = typeof ( options.top )  == "number" ? ( options.top + 'px' ) : options.top;
+        this.wrapper.style.left  = typeof ( options.left )  == "number" ?  (options.left + 'px' ) : options.left;
+        this.wrapper.style.height = typeof ( options.height )  == "number" ? ( options.height + 'px' ) : options.height;
+        this.wrapper.style.width  = typeof ( options.width )  == "number" ? ( options.width + 'px' ) : options.width;
+        this.wrapper.style.margin = "0px";
+        this.wrapper.style.padding = "0px";
 
-    if ( this.anchor == $.ControlAnchor.NONE ) {
+        this.element.style.position = "relative";
-        // IE6 fix
+        this.element.style.top = "0px";
-        this.wrapper.style.width = this.wrapper.style.height = "100%";
+        this.element.style.left = "0px";
+        this.element.style.height = "100%";
+        this.element.style.width = "100%";
+    } else {
+        this.wrapper    = $.makeNeutralElement( "span" );
+        this.wrapper.style.display = "inline-block";
+        if ( this.anchor == $.ControlAnchor.NONE ) {
+            // IE6 fix
+            this.wrapper.style.width = this.wrapper.style.height = "100%";
+        }
     }
+    this.wrapper.appendChild( this.element );
 
     if (options.attachToViewer ) {
         if ( this.anchor == $.ControlAnchor.TOP_RIGHT ||
@@ -161,7 +179,7 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{
      */
     setVisible: function( visible ) {
         this.wrapper.style.display = visible ?
-            "inline-block" :
+            ( this.anchor == $.ControlAnchor.ABSOLUTE ? 'block' : 'inline-block' ) :
             "none";
     },
 

src/controldock.js

@@ -126,6 +126,11 @@
                     element.style.paddingLeft = "0px";
                     element.style.paddingTop = "0px";
                     break;
+                case $.ControlAnchor.ABSOLUTE:
+                    div = this.container;
+                    element.style.margin = "0px";
+                    element.style.padding = "0px";
+                    break;
                 default:
                 case $.ControlAnchor.NONE:
                     div = this.container;

src/navigator.js

@@ -50,7 +50,8 @@
 $.Navigator = function( options ){
 
     var viewer      = options.viewer,
-        viewerSize  = $.getElementSize( viewer.element),
+        viewerSize,
+        navigatorSize,
         unneededElement;
 
     //We may need to create a new element and id if they did not
@@ -73,6 +74,12 @@ $.Navigator = function( options ){
                options.controlOptions.anchor = $.ControlAnchor.TOP_RIGHT;
             } else if( 'TOP_LEFT' == options.position ){
                options.controlOptions.anchor = $.ControlAnchor.TOP_LEFT;
+            } else if( 'ABSOLUTE' == options.position ){
+               options.controlOptions.anchor = $.ControlAnchor.ABSOLUTE;
+               options.controlOptions.top = options.top;
+               options.controlOptions.left = options.left;
+               options.controlOptions.height = options.height;
+               options.controlOptions.width = options.width;
             }
         }
         
@@ -99,12 +106,12 @@ $.Navigator = function( options ){
         showSequenceControl:    false,
         immediateRender:        true,
         blendTime:              0,
-        animationTime:          0
+        animationTime:          0,
+        autoResize:             options.autoResize
     });
 
     options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
 
-    this.viewerSizeInPoints = viewer.viewport.deltaPointsFromPixels(viewerSize);
     this.borderWidth = 2;
     //At some browser magnification levels the display regions lines up correctly, but at some there appears to
     //be a one pixel gap.
@@ -112,14 +119,16 @@ $.Navigator = function( options ){
     this.totalBorderWidths = new $.Point(this.borderWidth*2, this.borderWidth*2).minus(this.fudge);
 
 
-    (function( style, borderWidth ){
+    if ( options.controlOptions.anchor != $.ControlAnchor.NONE ) {
-        style.margin        = '0px';
+        (function( style, borderWidth ){
-        style.border        = borderWidth + 'px solid #555';
+            style.margin        = '0px';
-        style.padding       = '0px';
+            style.border        = borderWidth + 'px solid #555';
-        style.background    = '#000';
+            style.padding       = '0px';
-        style.opacity       = 0.8;
+            style.background    = '#000';
-        style.overflow      = 'hidden';
+            style.opacity       = 0.8;
-    }( this.element.style, this.borderWidth));
+            style.overflow      = 'hidden';
+        }( this.element.style, this.borderWidth));
+    }
 
     this.displayRegion           = $.makeNeutralElement( "div" );
     this.displayRegion.id        = this.element.id + '-displayregion';
@@ -152,15 +161,11 @@ $.Navigator = function( options ){
 
 
     this.element.innerTracker = new $.MouseTracker({
-        element:        this.element,
+        element:         this.element,
-        dragHandler:        $.delegate( this, onCanvasDrag ),
+        dragHandler:     $.delegate( this, onCanvasDrag ),
-        clickHandler:       $.delegate( this, onCanvasClick ),
+        clickHandler:    $.delegate( this, onCanvasClick ),
-        releaseHandler:     $.delegate( this, onCanvasRelease ),
+        releaseHandler:  $.delegate( this, onCanvasRelease ),
-        scrollHandler:  function(){
+        scrollHandler:   $.delegate( this, onCanvasScroll )
-            //dont scroll the page up and down if the user is scrolling
-            //in the navigator
-            return false;
-        }
     }).setTracking( true );
 
     /*this.displayRegion.outerTracker = new $.MouseTracker({
@@ -178,14 +183,22 @@ $.Navigator = function( options ){
         options.controlOptions
     );
 
-    if( options.width && options.height ){
+    if ( options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE && options.controlOptions.anchor != $.ControlAnchor.NONE ) {
-        this.element.style.width  = options.width + 'px';
+        if ( options.width && options.height ) {
-        this.element.style.height = options.height + 'px';
+            this.element.style.height = typeof ( options.height )  == "number" ? ( options.height + 'px' ) : options.height;
-    } else {
+            this.element.style.width  = typeof ( options.width )  == "number" ? ( options.width + 'px' ) : options.width;
-        this.element.style.width  = ( viewerSize.x * options.sizeRatio ) + 'px';
+        } else {
-        this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
+            viewerSize = $.getElementSize( viewer.element );
+            this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
+            this.element.style.width  = ( viewerSize.x * options.sizeRatio ) + 'px';
+            this.oldViewerSize = viewerSize;
+        }
+        navigatorSize = $.getElementSize( this.element );
+        this.elementArea = navigatorSize.x * navigatorSize.y;
     }
 
+    this.oldContainerSize = new $.Point( 0, 0 );
+
     $.Viewer.apply( this, [ options ] );
 
     this.element.getElementsByTagName('form')[0].appendChild( this.displayRegion );
@@ -199,18 +212,71 @@ $.Navigator = function( options ){
 $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{
 
     /**
+     * Used to notify the navigator when its size has changed. 
+     * Especially useful when {@link OpenSeadragon.Options}.navigatorAutoResize is set to false and the navigator is resizable.
      * @function
      */
-    update: function( viewport ){
+    updateSize: function () {
+        if ( this.viewport ) {
+            var containerSize = new $.Point(
+                    (this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
+                    (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
+                );
+            if ( !containerSize.equals( this.oldContainerSize ) ) {
+                var oldBounds = this.viewport.getBounds();
+                var oldCenter = this.viewport.getCenter();
+                this.viewport.resize( containerSize, true );
+                var imageHeight = 1 / this.source.aspectRatio;
+                var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
+                var newHeight = oldBounds.height <= imageHeight ?
+                    oldBounds.height : imageHeight;
+                var newBounds = new $.Rect(
+                    oldCenter.x - ( newWidth / 2.0 ),
+                    oldCenter.y - ( newHeight / 2.0 ),
+                    newWidth,
+                    newHeight
+                    );
+                this.viewport.fitBounds( newBounds, true );
+                this.oldContainerSize = containerSize;
+                this.drawer.update();
+            }
+        }
+    },
 
-        var bounds,
+    /**
+     * Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
+     * @function
+     * @param {OpenSeadragon.Viewport} The viewport this navigator is tracking.
+     */
+    update: function( viewport ) {
+
+        var viewerSize,
+            newWidth,
+            newHeight,
+            bounds,
             topleft,
             bottomright;
 
-        if( viewport && this.viewport ){
+        viewerSize = $.getElementSize( this.viewer.element );
+        if ( !viewerSize.equals( this.oldViewerSize ) ) {
+            this.oldViewerSize = viewerSize;
+            if ( this.maintainSizeRatio ) {
+                newWidth  = viewerSize.x * this.sizeRatio;
+                newHeight = viewerSize.y * this.sizeRatio;
+            }
+            else {
+                newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y));
+                newHeight = this.elementArea / newWidth;
+            }
+            this.element.style.width  = newWidth + 'px';
+            this.element.style.height = newHeight + 'px';
+            this.updateSize();
+        }
+
+        if( viewport && this.viewport ) {
             bounds      = viewport.getBounds( true );
-            topleft     = this.viewport.pixelFromPoint( bounds.getTopLeft());
+            topleft     = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
-            bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight()).minus(this.totalBorderWidths);
+            bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false ).minus( this.totalBorderWidths );
 
             //update style for navigator-box
             (function(style) {
@@ -229,7 +295,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
 
     },
 
-    open: function( source ){
+    open: function( source ) {
+        this.updateSize();
         var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio );
         if( source.tileSize > containerSize.x ||
             source.tileSize > containerSize.y ){
@@ -256,21 +323,7 @@ function onCanvasClick( event ) {
         dimensions;
     if (! this.drag) {
         if ( this.viewer.viewport ) {
-            viewerPosition = this.viewport.deltaPointsFromPixels( event.position );
+            this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) );
-            dimensions = this.viewer.viewport.getBounds().getSize();
-            newBounds = new $.Rect(
-                viewerPosition.x - dimensions.x/2,
-                viewerPosition.y - dimensions.y/2,
-                dimensions.x,
-                dimensions.y
-            );
-            if (this.viewer.source.aspectRatio > this.viewer.viewport.getAspectRatio()) {
-                newBounds.y = newBounds.y -  ((this.viewerSizeInPoints.y - (1/this.viewer.source.aspectRatio)) /2 );
-            }
-            else  {
-                newBounds.x = newBounds.x -  ((this.viewerSizeInPoints.x -1) /2 );
-            }
-            this.viewer.viewport.fitBounds(newBounds);
             this.viewer.viewport.applyConstraints();
         }
     }
@@ -320,16 +373,30 @@ function onCanvasRelease( event ) {
  * @function
  */
 function onCanvasScroll( event ) {
-    var factor;
+    /**
-    if ( this.viewer.viewport ) {
+     * Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#navigator} element (mouse wheel, touch pinch, etc.).
-        factor = Math.pow( this.zoomPerScroll, event.scroll );
+     *
-        this.viewer.viewport.zoomBy(
+     * @event navigator-scroll
-            factor,
+     * @memberof OpenSeadragon.Viewer
-            this.viewport.getCenter()
+     * @type {object}
-        );
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
-        this.viewer.viewport.applyConstraints();
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
-    }
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
-    //cancels event
+     * @property {Number} scroll - The scroll delta for the event.
+     * @property {Boolean} shift - True if the shift key was pressed during this event.
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.viewer.raiseEvent( 'navigator-scroll', {
+        tracker: event.eventSource,
+        position: event.position,
+        scroll: event.scroll,
+        shift: event.shift,
+        originalEvent: event.originalEvent
+    });
+
+    //dont scroll the page up and down if the user is scrolling
+    //in the navigator
     return false;
 }
 

src/openseadragon.js

@@ -271,20 +271,38 @@
   *     Set to true to make the navigator minimap appear.
   *
   * @property {Boolean} [navigatorId=navigator-GENERATED DATE]
-  *     Set the ID of a div to hold the navigator minimap.  If one is not specified,
+  *     The ID of a div to hold the navigator minimap.
-  *     one will be generated and placed on top of the main image
+  *     If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored.
+  *     If an ID is not specified, a div element will be generated and placed on top of the main image.
   *
-  * @property {Number} [navigatorHeight=null]
+  * @property {String} [navigatorPosition='TOP_RIGHT']
-  *     TODO: Implement this. Currently not used.
+  *     Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.<br>
-  *
+  *     If 'ABSOLUTE' is specified, then navigatorTop|Left|Height|Width determines the size and position of the navigator minimap in the viewer, and navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.<br>
-  * @property {Number} [navigatorWidth=null]
+  *     For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the navigatorSizeRatio or navigatorHeight|Width values determine the size of the navigator minimap.
-  *     TODO: Implement this. Currently not used.
-  *
-  * @property {Number} [navigatorPosition=null]
-  *     TODO: Implement this. Currently not used.
   *
   * @property {Number} [navigatorSizeRatio=0.2]
-  *     Ratio of navigator size to viewer size.
+  *     Ratio of navigator size to viewer size. Ignored if navigatorHeight|Width are specified.
+  *
+  * @property {Boolean} [navigatorMaintainSizeRatio=false]
+  *     If true, the navigator minimap is resized (using navigatorSizeRatio) when the viewer size changes.
+  *
+  * @property {Number|String} [navigatorTop=null]
+  *     Specifies the location of the navigator minimap (see navigatorPosition).
+  *
+  * @property {Number|String} [navigatorLeft=null]
+  *     Specifies the location of the navigator minimap (see navigatorPosition).
+  *
+  * @property {Number|String} [navigatorHeight=null]
+  *     Specifies the size of the navigator minimap (see navigatorPosition).
+  *     If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
+  *
+  * @property {Number|String} [navigatorWidth=null]
+  *     Specifies the size of the navigator minimap (see navigatorPosition).
+  *     If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
+  *
+  * @property {Boolean} [navigatorAutoResize=true]
+  *     Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior.
+  *     Setting to false can also improve performance when the navigator is configured to a fixed size.
   *
   * @property {Number} [controlsFadeDelay=2000]
   *     The number of milliseconds to wait once the user has stopped interacting
@@ -713,12 +731,16 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             mouseNavEnabled:         true,  //GENERAL MOUSE INTERACTIVITY
 
             //VIEWPORT NAVIGATOR SETTINGS
-            showNavigator:          false,
+            showNavigator:              false,
-            navigatorId:            null,
+            navigatorId:                null,
-            navigatorHeight:        null,
+            navigatorPosition:          null,
-            navigatorWidth:         null,
+            navigatorSizeRatio:         0.2,
-            navigatorPosition:      null,
+            navigatorMaintainSizeRatio: false,
-            navigatorSizeRatio:     0.2,
+            navigatorTop:               null,
+            navigatorLeft:              null,
+            navigatorHeight:            null,
+            navigatorWidth:             null,
+            navigatorAutoResize:        true,
 
             // INITIAL ROTATION
             degrees:                0,

src/viewer.js

@@ -910,6 +910,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
         }
 
+        if ( this.navigator && this.viewport ) {
+            this.navigator.update( this.viewport );
+        }
+
         /**
          * Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}).
          *
@@ -991,6 +995,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                         _this.element.style.height = _this.fullPageStyleHeight;
                     }
                 }
+                if ( _this.navigator && _this.viewport ) {
+                    _this.navigator.update( _this.viewport );
+                }
                 /**
                  * Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
                  *
@@ -1469,16 +1476,20 @@ function openTileSource( viewer, source ) {
             _this.navigator.open( source );
         } else {
             _this.navigator = new $.Navigator({
-                id:          _this.navigatorId,
+                id:                _this.navigatorId,
-                position:    _this.navigatorPosition,
+                position:          _this.navigatorPosition,
-                sizeRatio:   _this.navigatorSizeRatio,
+                sizeRatio:         _this.navigatorSizeRatio,
-                height:      _this.navigatorHeight,
+                maintainSizeRatio: _this.navigatorMaintainSizeRatio,
-                width:       _this.navigatorWidth,
+                top:               _this.navigatorTop,
-                tileSources: source,
+                left:              _this.navigatorLeft,
-                tileHost:    _this.tileHost,
+                width:             _this.navigatorWidth,
-                prefixUrl:   _this.prefixUrl,
+                height:            _this.navigatorHeight,
-                overlays:    _this.overlays,
+                autoResize:        _this.navigatorAutoResize,
-                viewer:      _this
+                tileSources:       source,
+                tileHost:          _this.tileHost,
+                prefixUrl:         _this.prefixUrl,
+                overlays:          _this.overlays,
+                viewer:            _this
             });
         }
     }

test/navigator.js

@@ -3,12 +3,11 @@
 QUnit.config.autostart = false;
 
 (function () {
-    var viewer,
+    var debug = false,
+        viewer,
         displayRegion,
         navigator,
-        navigatorAspectRatio,
+        navigatorScaleFactor,
-        leftScalingFactor,
-        maxHeightFactor,
         contentStartFromLeft,
         contentStartFromTop,
         displayRegionWidth,
@@ -42,9 +41,7 @@ QUnit.config.autostart = false;
         }
         displayRegion = null;
         navigator = null;
-        navigatorAspectRatio = null;
+        navigatorScaleFactor = null;
-        leftScalingFactor = null;
-        maxHeightFactor = null;
         contentStartFromLeft = null;
         contentStartFromTop = null;
         displayRegionWidth = null;
@@ -55,8 +52,27 @@ QUnit.config.autostart = false;
     var assessNavigatorLocation = function (expectedX, expectedY) {
         var navigator = $(".navigator");
 
-        Util.assessNumericValue(expectedX, navigator.offset().left, 4, ' Navigator x position');
+        Util.assessNumericValue(expectedX, navigator.offset().left, 10, ' Navigator x Position');
-        Util.assessNumericValue(expectedY, navigator.offset().top, 4, ' Navigator y position');
+        Util.assessNumericValue(expectedY, navigator.offset().top, 10, ' Navigator y Position');
+    };
+
+    var assessNavigatorSize = function (expectedWidth, expectedHeight, msg) {
+        var navigator = $(".navigator");
+
+        Util.assessNumericValue(expectedWidth, navigator.width(), 2, ' Navigator Width ' + (msg ? msg : ''));
+        Util.assessNumericValue(expectedHeight, navigator.height(), 2, ' Navigator Height ' + (msg ? msg : ''));
+    };
+
+    var assessNavigatorAspectRatio = function (expectedAspectRatio, variance, msg) {
+        var navigator = $(".navigator");
+
+        Util.assessNumericValue(expectedAspectRatio, navigator.width() / navigator.height(), variance, ' Navigator Aspect Ratio ' + (msg ? msg : ''));
+    };
+
+    var assessNavigatorArea = function (expectedArea, msg) {
+        var navigator = $(".navigator");
+
+        Util.assessNumericValue(expectedArea, navigator.width() * navigator.height(), Math.max(navigator.width(), navigator.height()), ' Navigator Area ' + (msg ? msg : ''));
     };
 
     var navigatorRegionBoundsInPoints = function () {
@@ -65,46 +81,47 @@ QUnit.config.autostart = false;
             expectedDisplayRegionHeight,
             expectedDisplayRegionXLocation,
             expectedDisplayRegionYLocation;
-        if (navigator === null) {
-            maxHeightFactor = 1;
-            navigator = $(".navigator");
-            navigatorAspectRatio = navigator.height() / navigator.width();
-            leftScalingFactor = navigatorAspectRatio * viewer.source.aspectRatio;
-            if (viewer.source.aspectRatio < 1) {
-                if (viewer.source.aspectRatio < navigatorAspectRatio) {
-                    maxHeightFactor = viewer.source.aspectRatio * navigatorAspectRatio;
-                }
-                else {
-                    maxHeightFactor = viewer.source.aspectRatio;
-                }
-                contentStartFromLeft = ((1 / maxHeightFactor) - 1) / 2 * maxHeightFactor * navigator.width();
-                contentStartFromTop = 0;
-            }
-            else {
-                if (viewer.source.aspectRatio < navigatorAspectRatio) {
-                    contentStartFromTop = (navigatorAspectRatio - (1 / viewer.source.aspectRatio)) / 2 / navigatorAspectRatio * navigator.height();
-                }
-                else {
-                    contentStartFromTop = (navigatorAspectRatio - (1 / viewer.source.aspectRatio)) / 2 / navigatorAspectRatio * navigator.height();
-                    leftScalingFactor = 1;
-                }
-            }
-            displayRegionWidth = navigator.width() - 2 * contentStartFromLeft;
-            displayRegionHeight = navigator.height() - 2 * contentStartFromTop;
-        }
 
-        expectedDisplayRegionWidth = navigator.width() / viewer.viewport.getZoom() * maxHeightFactor;
+        if (navigator === null) {
-        expectedDisplayRegionHeight = navigator.height() / viewer.viewport.getZoom() * maxHeightFactor;
+            navigator = $(".navigator");
-        expectedDisplayRegionXLocation = viewer.viewport.getBounds().x * maxHeightFactor * navigator.width() + contentStartFromLeft;
+            navigatorScaleFactor = Math.min(navigator.width() / viewer.viewport.contentSize.x, navigator.height() / viewer.viewport.contentSize.y);
-        expectedDisplayRegionYLocation = viewer.viewport.getBounds().y * leftScalingFactor * navigator.width() + contentStartFromTop;
+            displayRegionWidth = viewer.viewport.contentSize.x * navigatorScaleFactor;
+            displayRegionHeight = viewer.viewport.contentSize.y * navigatorScaleFactor;
+            contentStartFromLeft = (navigator.width() - displayRegionWidth) / 2;
+            contentStartFromTop = (navigator.height() - displayRegionHeight) / 2;
+        }
+        expectedDisplayRegionWidth = viewer.viewport.getBounds().width * displayRegionWidth;
+        expectedDisplayRegionHeight = viewer.viewport.getBounds().height * displayRegionHeight * viewer.source.aspectRatio;
+        expectedDisplayRegionXLocation = viewer.viewport.getBounds().x * displayRegionWidth + contentStartFromLeft;
+        expectedDisplayRegionYLocation = viewer.viewport.getBounds().y * displayRegionHeight * viewer.source.aspectRatio + contentStartFromTop;
         regionBoundsInPoints = new OpenSeadragon.Rect(expectedDisplayRegionXLocation, expectedDisplayRegionYLocation, expectedDisplayRegionWidth, expectedDisplayRegionHeight);
 
+        if (debug) {
+            console.log('Image width: ' + viewer.viewport.contentSize.x + '\n' +
+                        'Image height: ' + viewer.viewport.contentSize.y + '\n' +
+                        'navigator.width(): ' + navigator.width() + '\n' +
+                        'navigator.height(): ' + navigator.height() + '\n' +
+                        'navigatorScaleFactor: ' + navigatorScaleFactor + '\n' +
+                        'contentStartFromLeft: ' + contentStartFromLeft + '\n' +
+                        'contentStartFromTop: ' + contentStartFromTop + '\n' +
+                        'displayRegionWidth: ' + displayRegionWidth + '\n' +
+                        'displayRegionHeight: ' + displayRegionHeight + '\n' +
+                        'expectedDisplayRegionXLocation: ' + expectedDisplayRegionXLocation + '\n' +
+                        'expectedDisplayRegionYLocation: ' + expectedDisplayRegionYLocation + '\n' +
+                        'expectedDisplayRegionWidth: ' + expectedDisplayRegionWidth + '\n' +
+                        'expectedDisplayRegionHeight: ' + expectedDisplayRegionHeight + '\n'
+            );
+        }
+
         return regionBoundsInPoints;
 
     };
 
     var assessDisplayRegion = function (status) {
 
+        if (debug) {
+            console.log(status);
+        }
         var expectedBounds = navigatorRegionBoundsInPoints();
         Util.assessNumericValue(expectedBounds.width, displayRegion.width() + viewer.navigator.totalBorderWidths.x, 2, status + ' Width synchronization');
         Util.assessNumericValue(expectedBounds.height, displayRegion.height() + viewer.navigator.totalBorderWidths.y, 2, status + ' Height synchronization');
@@ -259,34 +276,53 @@ QUnit.config.autostart = false;
         simulateNavigatorDrag(viewer.navigator, delta.x * displayRegionWidth, delta.y * displayRegionHeight);
     };
 
+    var resizeElement = function ($element, width, height) {
+        $element.width(width);
+        $element.height(height);
+    };
+
     var assessNavigatorViewerPlacement = function (seadragonProperties, testProperties) {
         var navigatorOperationScenarios = [
-            {interactionOperation:clickOnNavigator("TOPRIGHT"),
+                {interactionOperation:clickOnNavigator("TOPRIGHT"),
-              assessmentOperation:assessViewerInCorner("TOPRIGHT"),
+                  assessmentOperation:assessViewerInCorner("TOPRIGHT"),
-                assessmentMessage:"After click on navigator on top right"  },
+                    assessmentMessage:"After click on navigator on top right"  },
-            {interactionOperation:dragNavigatorBackToCenter,
+                {interactionOperation:dragNavigatorBackToCenter,
-              assessmentOperation:assessViewerInCenter,
+                  assessmentOperation:assessViewerInCenter,
-                assessmentMessage:"After drag on navigator from top right"  },
+                    assessmentMessage:"After drag on navigator from top right"  },
-            {interactionOperation:clickOnNavigator("BOTTOMLEFT"),
+                {interactionOperation:clickOnNavigator("BOTTOMLEFT"),
-              assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
+                  assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
-                assessmentMessage:"After click on navigator on bottom left"  },
+                    assessmentMessage:"After click on navigator on bottom left"  },
-            {interactionOperation:dragNavigatorBackToCenter,
+                {interactionOperation:dragNavigatorBackToCenter,
-              assessmentOperation:assessViewerInCenter,
+                  assessmentOperation:assessViewerInCenter,
-                assessmentMessage:"After drag on navigator from bottom left"  },
+                    assessmentMessage:"After drag on navigator from bottom left"  },
-            {interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
+                {interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
-              assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
+                  assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
-                assessmentMessage:"After click on navigator on bottom right"  },
+                    assessmentMessage:"After click on navigator on bottom right"  },
-            {interactionOperation:dragNavigatorBackToCenter,
+                {interactionOperation:dragNavigatorBackToCenter,
-              assessmentOperation:assessViewerInCenter,
+                  assessmentOperation:assessViewerInCenter,
-                assessmentMessage:"After drag on navigator from bottom right"  },
+                    assessmentMessage:"After drag on navigator from bottom right"  },
-            {interactionOperation:clickOnNavigator("TOPLEFT"),
+                {interactionOperation:clickOnNavigator("TOPLEFT"),
-              assessmentOperation:assessViewerInCorner("TOPLEFT"),
+                  assessmentOperation:assessViewerInCorner("TOPLEFT"),
-                assessmentMessage:"After click on navigator on top left"  },
+                    assessmentMessage:"After click on navigator on top left"  },
-            {interactionOperation:dragNavigatorBackToCenter,
+                {interactionOperation:dragNavigatorBackToCenter,
-              assessmentOperation:assessViewerInCenter,
+                  assessmentOperation:assessViewerInCenter,
-                assessmentMessage:"After drag on navigator from top left"  }
+                    assessmentMessage:"After drag on navigator from top left"  }
-        ],
+            ],
-            autoFadeWaitTime = 100;
+            viewerResizeScenarios = [
+                {resizeFactorX:0.5, resizeFactorY:1.0, assessmentMessage:"After Viewer Resize (50%, 100%)"},
+                {resizeFactorX:1.0, resizeFactorY:0.5, assessmentMessage:"After Viewer Resize (100%, 50%)"},
+                {resizeFactorX:1.0, resizeFactorY:1.0, assessmentMessage:"After Viewer Resize (100%, 100%)"}
+            ],
+            navigatorResizeScenarios = [
+                {resizeFactorX:0.75, resizeFactorY:1.0, assessmentMessage:"After Navigator Resize (75%, 100%)"},
+                {resizeFactorX:1.0, resizeFactorY:0.75, assessmentMessage:"After Navigator Resize (100%, 75%)"},
+                {resizeFactorX:1.0, resizeFactorY:1.0, assessmentMessage:"After Navigator Resize (100%, 100%)"}
+            ],
+            autoFadeWaitTime = 100,
+            navigatorElement = null,
+            viewerElement = null,
+            viewerOriginalSize = null,
+            navigatorOriginalSize = null;
 
         seadragonProperties.visibilityRatio = 1;
         viewer = OpenSeadragon(seadragonProperties);
@@ -330,38 +366,112 @@ QUnit.config.autostart = false;
             waitForViewer(assessAfterDragOnViewer);
         };
 
+        var assessAfterResizeNavigator = function () {
+            viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
+            waitForViewer(assessAfterZoomOnViewer);
+        };
+
+        var assessNavigatorResizeAndTakeNextStep = function (step) {
+            return function () {
+                var nextStep = step + 1;
+                assessNavigatorSize(navigatorOriginalSize.x * navigatorResizeScenarios[step].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[step].resizeFactorY, navigatorResizeScenarios[step].assessmentMessage);
+                assessDisplayRegion(navigatorResizeScenarios[step].assessmentMessage);
+                if (step === viewerResizeScenarios.length - 1) {
+                    assessAfterResizeNavigator();
+                }
+                else {
+                    resizeElement(navigatorElement, navigatorOriginalSize.x * navigatorResizeScenarios[nextStep].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[nextStep].resizeFactorY);
+                    waitForViewer(assessNavigatorResizeAndTakeNextStep(nextStep));
+                }
+            };
+        };
+
+        var assessViewerResizeAndTakeNextStep = function (step) {
+            return function () {
+                var nextStep = step + 1;
+                if (seadragonProperties.navigatorId) {
+                    // Navigator hosted in outside element...size shouldn't change
+                    assessNavigatorSize(navigatorOriginalSize.x, navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
+                }
+                else {
+                    // Navigator hosted in viewer
+                    if (seadragonProperties.navigatorPosition && seadragonProperties.navigatorPosition == 'ABSOLUTE') {
+                        // Navigator positioned 'ABSOLUTE'...size shouldn't change
+                        assessNavigatorSize(navigatorOriginalSize.x, navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
+                    }
+                    else {
+                        // Navigator positioned 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', or 'BOTTOM_RIGHT'
+                        if (seadragonProperties.navigatorMaintainSizeRatio) {
+                            // Navigator should maintain aspect ratio and size proportioned to viewer size
+                            assessNavigatorAspectRatio(viewerElement.width() / viewerElement.height(), 0.0001, viewerResizeScenarios[step].assessmentMessage);
+                            assessNavigatorSize(viewerElement.width() * seadragonProperties.navigatorSizeRatio, viewerElement.height() * seadragonProperties.navigatorSizeRatio, viewerResizeScenarios[step].assessmentMessage);
+                        }
+                        else {
+                            // Navigator should maintain aspect ratio and area
+                            // Variances are loosened up here, since 1 pixel rounding difference in resizing to maintain area
+                            //   can cause a relatively large difference in area and aspect ratio.
+                            assessNavigatorAspectRatio(viewerElement.width() / viewerElement.height(), 0.1, viewerResizeScenarios[step].assessmentMessage);
+                            assessNavigatorArea(navigatorOriginalSize.x * navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
+                        }
+                    }
+                }
+
+                if (step === viewerResizeScenarios.length - 1) {
+                    if (seadragonProperties.navigatorId) {
+                        // Navigator hosted in outside element...run navigator resize tests
+                        resizeElement(navigatorElement, navigatorOriginalSize.x * navigatorResizeScenarios[0].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[0].resizeFactorY);
+                        waitForViewer(assessNavigatorResizeAndTakeNextStep(0));
+                    }
+                    else {
+                        // Navigator hosted in viewer...skip navigator resize tests
+                        assessAfterResizeNavigator();
+                    }
+                }
+                else {
+                    resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[nextStep].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[nextStep].resizeFactorY);
+                    waitForViewer(assessViewerResizeAndTakeNextStep(nextStep));
+                }
+            };
+        };
+
         var captureInitialStateThenAct = function () {
             assessDisplayRegion("After image load");
 
             testProperties.determineExpectationsAndAssessNavigatorLocation(seadragonProperties, testProperties);
 
-            viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
+            viewerOriginalSize = new OpenSeadragon.Point(viewerElement.width(), viewerElement.height());
-            waitForViewer(assessAfterZoomOnViewer);
+            navigatorOriginalSize = new OpenSeadragon.Point(navigatorElement.width(), navigatorElement.height());
+
+            resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[0].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[0].resizeFactorY);
+            waitForViewer(assessViewerResizeAndTakeNextStep(0));
         };
 
         var assessAutoFadeTriggered = function () {
-            ok($(testProperties.navigatorLocator).parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
+            ok(navigatorElement.parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
             waitForViewer(captureInitialStateThenAct);
         };
 
         var assessAutoFadeDisabled = function () {
-            ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
+            ok(navigatorElement.parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
             waitForViewer(captureInitialStateThenAct);
         };
 
         var openHandler = function () {
             viewer.removeHandler('open', openHandler);
+            navigatorElement = $(testProperties.navigatorLocator);
+            viewerElement = $("#" + seadragonProperties.id);
+            //TODO This should be testProperties.testAutoFade, but test hangs. Fix this!
             if (!testProperties.testAutohide) {
                 waitForViewer(captureInitialStateThenAct);
             }
             else {
-                ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be visible initially");
+                ok(navigatorElement.parent().css("opacity") > 0, "Expecting navigator to be visible initially");
                 var event = {
                      clientX:1,
                      clientY:1
                  };
 
-                $("#" + seadragonProperties.id).simulate('blur', event);
+                viewerElement.simulate('blur', event);
 
                 if (testProperties.expectedAutoFade) {
                     setTimeout(assessAutoFadeTriggered,autoFadeWaitTime);
@@ -379,6 +489,8 @@ QUnit.config.autostart = false;
                 prefixUrl:'/build/openseadragon/images/',
                 tileSources:'/test/data/wide.dzi',
                 showNavigator:true,
+                navigatorSizeRatio:0.2,
+                navigatorMaintainSizeRatio: false,
                 animationTime:0
             },
             {
@@ -390,11 +502,192 @@ QUnit.config.autostart = false;
                         navigatorElement = $(testProperties.navigatorLocator);
                     assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
                         mainViewerElement.offset().top);
+                    assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+                    assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
                 }
             });
     });
 
-    asyncTest('CustomNavigatorLocationWithWideImageWideViewer', function () {
+    asyncTest('DefaultNavigatorLocationWithTallImageWideViewer', function () {
+        assessNavigatorViewerPlacement({
+                id:'wideexample',
+                prefixUrl:'/build/openseadragon/images/',
+                tileSources:'/test/data/tall.dzi',
+                showNavigator:true,
+                navigatorSizeRatio:0.2,
+                navigatorMaintainSizeRatio: false,
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
+            },
+            {
+                displayRegionLocator:'.navigator .displayregion',
+                navigatorLocator:'.navigator',
+                testAutoFade: true,
+                expectedAutoFade: true,
+                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+                    var mainViewerElement = $("#" + seadragonProperties.id),
+                        navigatorElement = $(testProperties.navigatorLocator);
+                    assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+                        mainViewerElement.offset().top);
+                    assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+                    assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+                }
+            });
+    });
+
+    asyncTest('TopLeftNavigatorLocation', function () {
+        assessNavigatorViewerPlacement({
+                id:'example',
+                prefixUrl:'/build/openseadragon/images/',
+                tileSources:'/test/data/testpattern.dzi',
+                showNavigationControl: false,
+                showNavigator:true,
+                navigatorSizeRatio:0.2,
+                navigatorMaintainSizeRatio: false,
+                navigatorPosition: 'TOP_LEFT',
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
+            },
+            {
+                displayRegionLocator:'.navigator .displayregion',
+                navigatorLocator:'.navigator',
+                testAutoFade: true,
+                expectedAutoFade: true,
+                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+                    var mainViewerElement = $("#" + seadragonProperties.id),
+                        navigatorElement = $(testProperties.navigatorLocator);
+                    assessNavigatorLocation(mainViewerElement.offset().left,
+                        mainViewerElement.offset().top);
+                    assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+                    assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+                }
+            });
+    });
+
+    asyncTest('TopRightNavigatorLocation', function () {
+        assessNavigatorViewerPlacement({
+                id:'example',
+                prefixUrl:'/build/openseadragon/images/',
+                tileSources:'/test/data/testpattern.dzi',
+                showNavigationControl: false,
+                showNavigator:true,
+                navigatorSizeRatio:0.2,
+                navigatorMaintainSizeRatio: true,
+                navigatorPosition: 'TOP_RIGHT',
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
+            },
+            {
+                displayRegionLocator:'.navigator .displayregion',
+                navigatorLocator:'.navigator',
+                testAutoFade: true,
+                expectedAutoFade: true,
+                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+                    var mainViewerElement = $("#" + seadragonProperties.id),
+                        navigatorElement = $(testProperties.navigatorLocator);
+                    assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+                        mainViewerElement.offset().top);
+                    assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+                    assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+                }
+            });
+    });
+
+    asyncTest('BottomLeftNavigatorLocation', function () {
+        assessNavigatorViewerPlacement({
+                id:'example',
+                prefixUrl:'/build/openseadragon/images/',
+                tileSources:'/test/data/testpattern.dzi',
+                showNavigationControl: false,
+                showNavigator:true,
+                navigatorSizeRatio:0.2,
+                navigatorMaintainSizeRatio: false,
+                navigatorPosition: 'BOTTOM_LEFT',
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
+            },
+            {
+                displayRegionLocator:'.navigator .displayregion',
+                navigatorLocator:'.navigator',
+                testAutoFade: true,
+                expectedAutoFade: true,
+                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+                    var mainViewerElement = $("#" + seadragonProperties.id),
+                        navigatorElement = $(testProperties.navigatorLocator);
+                    assessNavigatorLocation(mainViewerElement.offset().left,
+                        mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
+                    assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+                    assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+                }
+            });
+    });
+
+    asyncTest('BottomRightNavigatorLocation', function () {
+        assessNavigatorViewerPlacement({
+                id:'example',
+                prefixUrl:'/build/openseadragon/images/',
+                tileSources:'/test/data/testpattern.dzi',
+                showNavigationControl: false,
+                showNavigator:true,
+                navigatorSizeRatio:0.2,
+                navigatorMaintainSizeRatio: false,
+                navigatorPosition: 'BOTTOM_RIGHT',
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
+            },
+            {
+                displayRegionLocator:'.navigator .displayregion',
+                navigatorLocator:'.navigator',
+                testAutoFade: true,
+                expectedAutoFade: true,
+                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+                    var mainViewerElement = $("#" + seadragonProperties.id),
+                        navigatorElement = $(testProperties.navigatorLocator);
+                    assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
+                        mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
+                    assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
+                    assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
+                }
+            });
+    });
+
+    asyncTest('AbsoluteNavigatorLocation', function () {
+        assessNavigatorViewerPlacement({
+                id:'example',
+                prefixUrl:'/build/openseadragon/images/',
+                tileSources:'/test/data/testpattern.dzi',
+                showNavigationControl: false,
+                showNavigator:true,
+                navigatorPosition: 'ABSOLUTE',
+                navigatorTop: 10,
+                navigatorLeft: 10,
+                navigatorHeight: 150,
+                navigatorWidth: 175,
+                animationTime:0,
+                controlsFadeDelay:0,
+                controlsFadeLength:1
+            },
+            {
+                displayRegionLocator:'.navigator .displayregion',
+                navigatorLocator:'.navigator',
+                testAutoFade: true,
+                expectedAutoFade: true,
+                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
+                    var mainViewerElement = $("#" + seadragonProperties.id),
+                        navigatorElement = $(testProperties.navigatorLocator);
+                    assessNavigatorLocation(mainViewerElement.offset().left + seadragonProperties.navigatorLeft,
+                        mainViewerElement.offset().top + seadragonProperties.navigatorTop);
+                    assessNavigatorSize(seadragonProperties.navigatorWidth, seadragonProperties.navigatorHeight);
+                }
+            });
+    });
+
+    asyncTest('CustomNavigatorElementWithWideImageWideViewer', function () {
         assessNavigatorViewerPlacement({
                 id:'wideexample',
                 navigatorId:'exampleNavigator',
@@ -416,8 +709,21 @@ QUnit.config.autostart = false;
             });
     });
 
-    asyncTest('CustomDialogNavigatorLocationWithTallImageTallViewer', function () {
+    asyncTest('CustomDialogNavigatorElementWithTallImageTallViewer', function () {
-        $('#exampleNavigator').dialog();
+        $('#exampleNavigator').dialog({ width: 150,
+                                        height:100,
+                                        open: function (event, ui) {
+                                            $('#exampleNavigator').width(150);
+                                            $('#exampleNavigator').height(100);
+                                        }
+                                        //TODO Use this in testing resizable navigator
+                                        //resize: function (event, ui) {
+                                        //    //ui.size.width
+                                        //    //ui.size.height
+                                        //    //$('#exampleNavigator').dialog("option", "width", 200);
+                                        //    //$('#exampleNavigator').dialog("option", "width", 200);
+                                        //}
+                                      });
         assessNavigatorViewerPlacement({
                 id:'tallexample',
                 navigatorId:'exampleNavigator',
@@ -440,30 +746,7 @@ QUnit.config.autostart = false;
                     var jqueryDialog = $(testProperties.navigatorLocator);
                     assessNavigatorLocation(jqueryDialog.offset().left,
                         jqueryDialog.offset().top);
-                }
+                    assessNavigatorSize(jqueryDialog.width(), jqueryDialog.height());
-            });
-    });
-
-    asyncTest('DefaultNavigatorLocationWithTallImageWideViewer', function () {
-        assessNavigatorViewerPlacement({
-                id:'wideexample',
-                prefixUrl:'/build/openseadragon/images/',
-                tileSources:'/test/data/tall.dzi',
-                showNavigator:true,
-                animationTime:0,
-                controlsFadeDelay:0,
-                controlsFadeLength:1
-            },
-            {
-                displayRegionLocator:'.navigator .displayregion',
-                navigatorLocator:'.navigator',
-                testAutoFade: true,
-                expectedAutoFade: true,
-                determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
-                    var mainViewerElement = $("#" + seadragonProperties.id),
-                        navigatorElement = $(testProperties.navigatorLocator);
-                    assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
-                        mainViewerElement.offset().top);
                 }
             });
     });

test/test.css

@@ -3,6 +3,11 @@
     width: 500px;
 }
 
+#exampleNavigator {
+    height: 100px;
+    width: 150px;
+}
+
 #wideexample {
     height: 300px;
     width: 700px;