Merge pull request #256 from avandecreme/fullscreen

Recenter the image after switching fullscreen mode. #62 and #170

src/fullscreen.js

@@ -72,6 +72,7 @@
             requestFullScreen: function() {},
             cancelFullScreen: function() {},
             fullScreenEventName: '',
+            fullScreenErrorEventName: '',
             prefix: ''
         },
         browserPrefixes = 'webkit moz o ms khtml'.split(' ');
@@ -95,6 +96,7 @@
     // update methods to do something useful
     if (fullScreenApi.supportsFullScreen) {
         fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
+        fullScreenApi.fullScreenErrorEventName = fullScreenApi.prefix + 'fullscreenerror';
 
         fullScreenApi.isFullScreen = function() {
             switch (this.prefix) {

src/openseadragon.js

@@ -900,7 +900,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
 
 
         /**
-         * Determines the pages current scroll position.
+         * Determines the page's current scroll position.
          * @function
          * @name OpenSeadragon.getPageScroll
          * @returns {Point}
@@ -931,14 +931,64 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
                     );
                 };
             } else {
-                $.getPageScroll = function(){
+                // We can't reassign the function yet, as there was no scroll.
-                    return new $.Point(0,0);
+                return new $.Point(0,0);
-                };
             }
 
             return $.getPageScroll();
         },
 
+        /**
+         * Set the page scroll position.
+         * @function
+         * @name OpenSeadragon.getPageScroll
+         * @returns {Point}
+         */
+        setPageScroll: function( scroll ) {
+            if ( typeof ( window.scrollTo ) !== "undefined" ) {
+                $.setPageScroll = function( scroll ) {
+                    window.scrollTo( scroll.x, scroll.y );
+                };
+            } else {
+                var originalScroll = $.getPageScroll();
+                if ( originalScroll.x === scroll.x &&
+                    originalScroll.y === scroll.y ) {
+                    // We are already correctly positioned and there
+                    // is no way to detect the correct method.
+                    return;
+                }
+
+                document.body.scrollLeft = scroll.x;
+                document.body.scrollTop = scroll.y;
+                var currentScroll = $.getPageScroll();
+                if ( currentScroll.x !== originalScroll.x &&
+                    currentScroll.y !== originalScroll.y ) {
+                    $.setPageScroll = function( scroll ) {
+                        document.body.scrollLeft = scroll.x;
+                        document.body.scrollTop = scroll.y;
+                    };
+                    return;
+                }
+
+                document.documentElement.scrollLeft = scroll.x;
+                document.documentElement.scrollTop = scroll.y;
+                currentScroll = $.getPageScroll();
+                if ( currentScroll.x !== originalScroll.x &&
+                    currentScroll.y !== originalScroll.y ) {
+                    $.setPageScroll = function( scroll ) {
+                        document.documentElement.scrollLeft = scroll.x;
+                        document.documentElement.scrollTop = scroll.y;
+                    };
+                    return;
+                }
+
+                // We can't find anything working, so we do nothing.
+                $.setPageScroll = function( scroll ) {
+                };
+            }
+
+            return $.setPageScroll( scroll );
+        },
 
         /**
          * Determines the size of the browsers window.

src/viewer.js

@@ -656,35 +656,52 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      */
     setFullPage: function( fullPage ) {
 
-        var body            = document.body,
+        var body = document.body,
-            bodyStyle       = body.style,
+            bodyStyle = body.style,
-            docStyle        = document.documentElement.style,
+            docStyle = document.documentElement.style,
-            canvasStyle     = this.canvas.style,
+            _this = this,
-            _this           = this,
-            oldBounds,
-            newBounds,
-            viewer,
             hash,
             nodes,
             i;
 
         //dont bother modifying the DOM if we are already in full page mode.
         if ( fullPage == this.isFullPage() ) {
-            return;
+            return this;
         }
 
+        var fullPageEventArgs = {
+            fullPage: fullPage,
+            preventDefaultAction: false
+        };
+        this.raiseEvent( 'pre-full-page', fullPageEventArgs );
+        if ( fullPageEventArgs.preventDefaultAction ) {
+            return this;
+        }
 
         if ( fullPage ) {
 
-            this.bodyOverflow   = bodyStyle.overflow;
+            this.elementSize = $.getElementSize( this.element );
-            this.docOverflow    = docStyle.overflow;
+            this.pageScroll = $.getPageScroll();
-            bodyStyle.overflow  = "hidden";
-            docStyle.overflow   = "hidden";
 
-            this.bodyWidth      = bodyStyle.width;
+            this.elementMargin = this.element.style.margin;
-            this.bodyHeight     = bodyStyle.height;
+            this.element.style.margin = "0";
-            bodyStyle.width     = "100%";
+            this.elementPadding = this.element.style.padding;
-            bodyStyle.height    = "100%";
+            this.element.style.padding = "0";
+
+            this.bodyMargin = bodyStyle.margin;
+            this.docMargin = docStyle.margin;
+            bodyStyle.margin = "0";
+            docStyle.margin = "0";
+
+            this.bodyPadding = bodyStyle.padding;
+            this.docPadding = docStyle.padding;
+            bodyStyle.padding = "0";
+            docStyle.padding = "0";
+
+            this.bodyWidth = bodyStyle.width;
+            this.bodyHeight = bodyStyle.height;
+            bodyStyle.width = "100%";
+            bodyStyle.height = "100%";
 
             //when entering full screen on the ipad it wasnt sufficient to leave
             //the body intact as only only the top half of the screen would
@@ -697,14 +714,14 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             THIS[ this.hash ].prevElementWidth = this.element.style.width;
             THIS[ this.hash ].prevElementHeight = this.element.style.height;
             nodes = body.childNodes.length;
-            for ( i = 0; i < nodes; i ++ ){
+            for ( i = 0; i < nodes; i++ ) {
                 this.previousBody.push( body.childNodes[ 0 ] );
                 body.removeChild( body.childNodes[ 0 ] );
             }
 
             //If we've got a toolbar, we need to enable the user to use css to
             //preserve it in fullpage mode
-            if( this.toolbar && this.toolbar.element ){
+            if ( this.toolbar && this.toolbar.element ) {
                 //save a reference to the parent so we can put it back
                 //in the long run we need a better strategy
                 this.toolbar.parentNode = this.toolbar.element.parentNode;
@@ -719,38 +736,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             $.addClass( this.element, 'fullpage' );
             body.appendChild( this.element );
 
-            if( $.supportsFullScreen ){
+            this.element.style.height = $.getWindowSize().y + 'px';
-                THIS[ this.hash ].onfullscreenchange = function() {
+            this.element.style.width = $.getWindowSize().x + 'px';
-                    /*
-                        fullscreenchange events don't include the new fullscreen status so we need to
-                        retrieve the current status from the fullscreen API. See:
-                        https://developer.mozilla.org/en-US/docs/Web/Reference/Events/fullscreenchange
-                    */
 
-                    if( $.isFullScreen() ){
+            if ( this.toolbar && this.toolbar.element ) {
-                        _this.setFullPage( true );
-                    } else {
-                        _this.setFullPage( false );
-                    }
-                };
-
-                $.requestFullScreen( document.body );
-
-                // The target of the event is always the document,
-                // but it is possible to retrieve the fullscreen element through the API
-                // Note that the API is still vendor-prefixed in browsers implementing it
-                document.addEventListener(
-                    $.fullScreenEventName,
-                    THIS[ this.hash ].onfullscreenchange
-                );
-                this.element.style.height = '100%';
-                this.element.style.width = '100%';
-            }else{
-                this.element.style.height = $.getWindowSize().y + 'px';
-                this.element.style.width = $.getWindowSize().x + 'px';
-            }
-
-            if( this.toolbar && this.toolbar.element ){
                 this.element.style.height = (
                     $.getElementSize( this.element ).y - $.getElementSize( this.toolbar.element ).y
                 ) + 'px';
@@ -761,29 +750,23 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             // mouse will be inside container now
             $.delegate( this, onContainerEnter )( {} );
 
-
         } else {
 
-            if( $.supportsFullScreen ){
+            this.element.style.margin = this.elementMargin;
-                document.removeEventListener(
+            this.element.style.padding = this.elementPadding;
-                    $.fullScreenEventName,
-                    THIS[ this.hash ].onfullscreenchange
-                );
-                $.cancelFullScreen( document );
-            }
 
-            bodyStyle.overflow  = this.bodyOverflow;
+            bodyStyle.margin = this.bodyMargin;
-            docStyle.overflow   = this.docOverflow;
+            docStyle.margin = this.docMargin;
 
-            bodyStyle.width     = this.bodyWidth;
+            bodyStyle.padding = this.bodyPadding;
-            bodyStyle.height    = this.bodyHeight;
+            docStyle.padding = this.docPadding;
 
-            canvasStyle.backgroundColor = "";
+            bodyStyle.width = this.bodyWidth;
-            canvasStyle.color           = "";
+            bodyStyle.height = this.bodyHeight;
 
             body.removeChild( this.element );
             nodes = this.previousBody.length;
-            for ( i = 0; i < nodes; i++ ){
+            for ( i = 0; i < nodes; i++ ) {
                 body.appendChild( this.previousBody.shift() );
             }
 
@@ -795,75 +778,117 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
             //If we've got a toolbar, we need to enable the user to use css to
             //reset it to its original state
-            if( this.toolbar && this.toolbar.element ){
+            if ( this.toolbar && this.toolbar.element ) {
                 body.removeChild( this.toolbar.element );
 
                 //Make sure the user has some ability to style the toolbar based
                 //on the mode
                 $.removeClass( this.toolbar.element, 'fullpage' );
-                //this.toolbar.element.style.position = 'relative';
+
                 this.toolbar.parentNode.insertBefore(
                     this.toolbar.element,
                     this.toolbar.nextSibling
                 );
                 delete this.toolbar.parentNode;
                 delete this.toolbar.nextSibling;
-
-                //this.container.style.top = 'auto';
             }
 
             this.element.style.width = THIS[ this.hash ].prevElementWidth;
             this.element.style.height = THIS[ this.hash ].prevElementHeight;
 
+            // After exiting fullPage or fullScreen, it can take some time
+            // before the browser can actually set the scroll.
+            var restoreScrollCounter = 0;
+            var restoreScroll = function() {
+                $.setPageScroll( _this.pageScroll );
+                var pageScroll = $.getPageScroll();
+                restoreScrollCounter++;
+                if ( restoreScrollCounter < 10 &&
+                    pageScroll.x !== _this.pageScroll.x ||
+                    pageScroll.y !== _this.pageScroll.y ) {
+                    $.requestAnimationFrame( restoreScroll );
+                }
+            };
+            $.requestAnimationFrame( restoreScroll );
+
             THIS[ this.hash ].fullPage = false;
 
             // mouse will likely be outside now
-            $.delegate( this, onContainerExit )( {} );
+            $.delegate( this, onContainerExit )( { } );
-
 
         }
-        this.raiseEvent( 'fullpage', { fullpage: fullPage } );
 
-        if ( this.viewport ) {
+        this.raiseEvent( 'full-page', { fullPage: fullPage } );
-            oldBounds = this.viewport.getBounds();
-            this.viewport.resize( THIS[ this.hash ].prevContainerSize );
-            newBounds = this.viewport.getBounds();
 
-            if ( fullPage ) {
-                THIS[ this.hash ].fsBoundsDelta = new $.Point(
-                    newBounds.width  / oldBounds.width,
-                    newBounds.height / oldBounds.height
-                );
-            } else {
-                this.viewport.update();
-                this.viewport.zoomBy(
-                    Math.max(
-                        THIS[ this.hash ].fsBoundsDelta.x,
-                        THIS[ this.hash ].fsBoundsDelta.y
-                    ),
-                    null,
-                    true
-                );
-                //Ensures that if multiple viewers are on a page, the viewers that
-                //were hidden during fullpage are 'reopened'
-                for( hash in VIEWERS ){
-                    viewer = VIEWERS[ hash ];
-                    if( viewer !== this && viewer != this.navigator ){
-                        viewer.open( viewer.source );
-                        if( viewer.navigator ){
-                            viewer.navigator.open( viewer.source );
-                        }
-                    }
-                }
-            }
-
-            THIS[ this.hash ].forceRedraw = true;
-            updateOnce( this );
-
-        }
         return this;
     },
 
+    /**
+     * Toggle full screen mode if supported. Toggle full page mode otherwise.
+     * @function
+     * @name OpenSeadragon.Viewer.prototype.setFullScreen
+     * @param {Boolean} fullScreen
+     *      If true, enter full screen mode.  If false, exit full screen mode.
+     * @return {OpenSeadragon.Viewer} Chainable.
+     */
+    setFullScreen: function( fullScreen ) {
+        var _this = this;
+
+        if ( !$.supportsFullScreen ) {
+            return this.setFullPage( fullScreen );
+        }
+
+        if ( $.isFullScreen() === fullScreen ) {
+            return this;
+        }
+
+        var fullScreeEventArgs = {
+            fullScreen: fullScreen,
+            preventDefaultAction: false
+        };
+        this.raiseEvent( 'pre-full-screen', fullScreeEventArgs );
+        if ( fullScreeEventArgs.preventDefaultAction ) {
+            return this;
+        }
+
+        if ( fullScreen ) {
+
+            this.setFullPage( true );
+            // If the full page mode is not actually entered, we need to prevent
+            // the full screen mode.
+            if ( !this.isFullPage() ) {
+                return this;
+            }
+
+            this.fullPageStyleWidth = this.element.style.width;
+            this.fullPageStyleHeight = this.element.style.height;
+            this.element.style.width = '100%';
+            this.element.style.height = '100%';
+
+            var onFullScreenChange = function() {
+                var isFullScreen = $.isFullScreen();
+                if ( !isFullScreen ) {
+                    $.removeEvent( document, $.fullScreenEventName, onFullScreenChange );
+                    $.removeEvent( document, $.fullScreenErrorEventName, onFullScreenChange );
+
+                    _this.setFullPage( false );
+                    if ( _this.isFullPage() ) {
+                        _this.element.style.width = _this.fullPageStyleWidth;
+                        _this.element.style.height = _this.fullPageStyleHeight;
+                    }
+                }
+                _this.raiseEvent( 'full-screen', { fullScreen: isFullScreen } );
+            };
+            $.addEvent( document, $.fullScreenEventName, onFullScreenChange );
+            $.addEvent( document, $.fullScreenErrorEventName, onFullScreenChange );
+
+            $.requestFullScreen( document.body );
+
+        } else {
+            $.cancelFullScreen();
+        }
+        return this;
+    },
 
     /**
      * @function
@@ -988,7 +1013,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             beginZoomingOutHandler  = $.delegate( this, beginZoomingOut ),
             doSingleZoomOutHandler  = $.delegate( this, doSingleZoomOut ),
             onHomeHandler           = $.delegate( this, onHome ),
-            onFullPageHandler       = $.delegate( this, onFullPage ),
+            onFullScreenHandler     = $.delegate( this, onFullScreen ),
             onFocusHandler          = $.delegate( this, onFocus ),
             onBlurHandler           = $.delegate( this, onBlur ),
             navImages               = this.navImages,
@@ -1063,7 +1088,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                 srcGroup:   resolveUrl( this.prefixUrl, navImages.fullpage.GROUP ),
                 srcHover:   resolveUrl( this.prefixUrl, navImages.fullpage.HOVER ),
                 srcDown:    resolveUrl( this.prefixUrl, navImages.fullpage.DOWN ),
-                onRelease:  onFullPageHandler,
+                onRelease:  onFullScreenHandler,
                 onFocus:    onFocusHandler,
                 onBlur:     onBlurHandler
             }));
@@ -1633,8 +1658,11 @@ function updateOnce( viewer ) {
     containerSize = _getSafeElemSize( viewer.container );
     if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
         // maintain image position
-        viewer.viewport.resize( containerSize, true );
+        var oldBounds = viewer.viewport.getBounds();
+        var oldCenter = viewer.viewport.getCenter();
+        resizeViewportAndRecenter(viewer, containerSize, oldBounds, oldCenter);
         THIS[ viewer.hash ].prevContainerSize = containerSize;
+        THIS[ viewer.hash ].forceRedraw = true;
     }
 
     animated = viewer.viewport.update();
@@ -1675,7 +1703,30 @@ function updateOnce( viewer ) {
     //viewer.profiler.endUpdate();
 }
 
+// This function resizes the viewport and recenters the image
+// as it was before resizing.
+// TODO: better adjust width and height. The new width and height
+// should depend on the image dimensions and on the dimensions
+// of the viewport before and after switching mode.
+function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter ) {
+    var viewport = viewer.viewport;
 
+    viewport.resize( containerSize, true );
+
+    // We try to remove blanks as much as possible
+    var imageHeight = 1 / viewer.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
+        );
+    viewport.fitBounds( newBounds, true );
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 // Navigation Controls
@@ -1765,10 +1816,15 @@ function onHome() {
 }
 
 
-function onFullPage() {
+function onFullScreen() {
-    this.setFullPage( !this.isFullPage() );
+    if ( this.isFullPage() && !$.isFullScreen() ) {
+        // Is fullPage but not fullScreen
+        this.setFullPage( false );
+    } else {
+        this.setFullScreen( !this.isFullPage() );
+    }
     // correct for no mouseout event on change
-    if( this.buttons ){
+    if ( this.buttons ) {
         this.buttons.emulateExit();
     }
     this.fullPageButton.element.focus();

test/basic.js

@@ -174,22 +174,80 @@
     });
 
     // ----------
-    asyncTest('Fullscreen', function() {
+    asyncTest('FullPage', function() {
         viewer.addHandler("open", function () {
             ok(!viewer.isFullPage(), 'Started out not fullpage');
             ok(!$(viewer.element).hasClass('fullpage'),
                 'No fullpage class on div');
 
-            viewer.setFullPage(true);
+            var checkEnteringPreFullPage = function(event) {
-            ok(viewer.isFullPage(), 'Enabled fullpage');
+                viewer.removeHandler('pre-full-page', checkEnteringPreFullPage);
-            ok($(viewer.element).hasClass('fullpage'),
+                ok(event.fullPage, 'Switching to fullpage');
-                'Fullpage class added to div');
+                ok(!viewer.isFullPage(), 'Not yet fullpage');
+            };
 
-            viewer.setFullPage(false);
+            var checkEnteringFullPage = function(event) {
-            ok(!viewer.isFullPage(), 'Disabled fullpage');
+                viewer.removeHandler('full-page', checkEnteringFullPage);
-            ok(!$(viewer.element).hasClass('fullpage'),
+                ok(event.fullPage, 'Switched to fullpage');
-                'Fullpage class removed from div');
+                ok(viewer.isFullPage(), 'Enabled fullpage');
+                ok($(viewer.element).hasClass('fullpage'),
+                    'Fullpage class added to div');
+
+                var checkExitingPreFullPage = function(event) {
+                    viewer.removeHandler('pre-full-page', checkExitingPreFullPage);
+                    ok(!event.fullPage, 'Exiting fullpage');
+                    ok(viewer.isFullPage(), 'Still fullpage');
+                };
+
+                var checkExitingFullPage = function(event) {
+                    viewer.removeHandler('full-page', checkExitingFullPage);
+                    ok(!event.fullPage, 'Exiting fullpage');
+                    ok(!viewer.isFullPage(), 'Disabled fullpage');
+                    ok(!$(viewer.element).hasClass('fullpage'),
+                        'Fullpage class removed from div');
+                    start();
+                };
+
+                viewer.addHandler("pre-full-page", checkExitingPreFullPage);
+                viewer.addHandler("full-page", checkExitingFullPage);
+                viewer.setFullPage(false);
+            };
+            viewer.addHandler("pre-full-page", checkEnteringPreFullPage);
+            viewer.addHandler("full-page", checkEnteringFullPage);
+            viewer.setFullPage(true);
+        });
+
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+    asyncTest('FullScreen', function() {
+
+        if (!OpenSeadragon.supportsFullScreen) {
+            expect(0);
             start();
+            return;
+        }
+
+        viewer.addHandler("open", function () {
+            ok(!OpenSeadragon.isFullScreen(), 'Started out not fullscreen');
+
+            var checkEnteringPreFullScreen = function(event) {
+                viewer.removeHandler('pre-full-screen', checkEnteringPreFullScreen);
+                ok(event.fullScreen, 'Switching to fullscreen');
+                ok(!OpenSeadragon.isFullScreen(), 'Not yet fullscreen');
+            };
+
+            // The fullscreen mode is always denied during tests so we are
+            // exiting directly.
+            var checkExitingFullScreen = function(event) {
+                viewer.removeHandler('full-screen', checkExitingFullScreen);
+                ok(!event.fullScreen, 'Exiting fullscreen');
+                ok(!OpenSeadragon.isFullScreen(), 'Disabled fullscreen');
+                start();
+            };
+            viewer.addHandler("pre-full-screen", checkEnteringPreFullScreen);
+            viewer.addHandler("full-screen", checkExitingFullScreen);
+            viewer.setFullScreen(true);
         });
 
         viewer.open('/test/data/testpattern.dzi');

test/polyfills.js

@@ -0,0 +1,128 @@
+/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
+
+( function() {
+
+    module( 'Polyfills', {
+        setup: function() {
+            testLog.reset();
+        }
+    } );
+
+    // ----------
+    test( 'pageScroll', function() {
+        // Setup
+        var origWidth = $( "body" ).width(),
+            origHeight = $( "body" ).height();
+        $( "body" ).width( origWidth + 10000 );
+        $( "body" ).height( origHeight + 10000 );
+        $( document ).scrollLeft( 0 );
+        $( document ).scrollTop( 0 );
+        // End setup
+
+        // Test get
+        var originalGetPageScroll = OpenSeadragon.getPageScroll;
+
+        var scroll = OpenSeadragon.getPageScroll();
+        equal( scroll.x, 0, "Scroll should be 0 at beginning." );
+        equal( scroll.y, 0, "Scroll should be 0 at beginning." );
+
+        // If window.pageXOffset is not supported, the getPageScroll method should
+        // not have been redefined
+        if ( typeof ( window.pageXOffset ) != "number" ) {
+            equal( originalGetPageScroll, OpenSeadragon.getPageScroll,
+                "OpenSeadragon.getPageScroll must not be redefined when on 0,0" +
+                " and window API is not supported." );
+        } else {
+            notEqual( originalGetPageScroll, OpenSeadragon.getPageScroll,
+                "OpenSeadragon.getPageScroll must be redefined when window API " +
+                "is supported." );
+        }
+
+        $( document ).scrollLeft( 200 );
+        $( document ).scrollTop( 100 );
+        scroll = originalGetPageScroll();
+        equal( scroll.x, 200, "First call to getScroll." );
+        equal( scroll.y, 100, "First call to getScroll." );
+
+        $( document ).scrollLeft( 500 );
+        $( document ).scrollTop( 600 );
+        scroll = OpenSeadragon.getPageScroll();
+        equal( scroll.x, 500, "Second call to getScroll." );
+        equal( scroll.y, 600, "Second call to getScroll." );
+
+
+
+        // Test set, must be imperatively be done after tests for get to not
+        // break them.
+        var originalSetPageScroll = OpenSeadragon.setPageScroll;
+
+        $( document ).scrollLeft( 0 );
+        $( document ).scrollTop( 0 );
+        var scroll = new OpenSeadragon.Point( 0, 0 );
+        OpenSeadragon.setPageScroll( scroll );
+        equal( $( document ).scrollLeft(), 0, "First call to 0,0 while already on 0,0." );
+        equal( $( document ).scrollTop(), 0, "First call to 0,0 while already on 0,0." );
+
+        // If window.pageXOffset is not supported, the getPageScroll method should
+        // not have been redefined
+        if ( typeof ( window.scrollTo ) === "undefined" ) {
+            equal( originalSetPageScroll, OpenSeadragon.setPageScroll,
+                "OpenSeadragon.setPageScroll must not be redefined when not moving." );
+        } else {
+            notEqual( originalSetPageScroll, OpenSeadragon.setPageScroll,
+                "OpenSeadragon.setPageScroll must be redefined when window API is supported." );
+        }
+
+
+        OpenSeadragon.setPageScroll = originalSetPageScroll;
+        $( document ).scrollLeft( 100 );
+        $( document ).scrollTop( 200 );
+        var scroll = new OpenSeadragon.Point( 100, 200 );
+        OpenSeadragon.setPageScroll( scroll );
+        equal( $( document ).scrollLeft(), 100, "First call to 100,200 while already on 100,200." );
+        equal( $( document ).scrollTop(), 200, "First call to 100,200 while already on 100,200." );
+
+        // If window.pageXOffset is not supported, the getPageScroll method should
+        // not have been redefined
+        if ( typeof ( window.scrollTo ) === "undefined" ) {
+            equal( originalSetPageScroll, OpenSeadragon.setPageScroll,
+                "OpenSeadragon.setPageScroll must not be redefined when not moving." );
+        } else {
+            notEqual( originalSetPageScroll, OpenSeadragon.setPageScroll,
+                "OpenSeadragon.setPageScroll must be redefined when window API is supported." );
+        }
+
+
+        OpenSeadragon.setPageScroll = originalSetPageScroll;
+        $( document ).scrollLeft( 20000 );
+        $( document ).scrollTop( 20000 );
+        var actualScrollLeft = $( document ).scrollLeft();
+        var actualScrollTop = $( document ).scrollTop();
+        $( document ).scrollLeft( 0 );
+        $( document ).scrollTop( 0 );
+        var scroll = new OpenSeadragon.Point( 20000, 20000 );
+        OpenSeadragon.setPageScroll( scroll );
+        equal( $( document ).scrollLeft(), actualScrollLeft, "First call to position above limits." );
+        equal( $( document ).scrollTop(), actualScrollTop, "First call to position above limits." );
+        notEqual( originalSetPageScroll, OpenSeadragon.setPageScroll,
+            "Even if outside scroll limits, OpenSeadragon.setPageScroll can be " +
+            "reassigned on first call." );
+
+
+        var currentSetPageScroll = OpenSeadragon.setPageScroll;
+        var scroll = new OpenSeadragon.Point( 200, 200 );
+        OpenSeadragon.setPageScroll( scroll );
+        equal( $( document ).scrollLeft(), 200, "Second call." );
+        equal( $( document ).scrollTop(), 200, "Second call." );
+        equal( currentSetPageScroll, OpenSeadragon.setPageScroll,
+            "OpenSeadragon.setPageScroll must not be reassigned after first call." );
+
+
+        // Teardown
+        $( "body" ).width( origWidth );
+        $( "body" ).height( origHeight );
+        $( document ).scrollLeft( 0 );
+        $( document ).scrollTop( 0 );
+    } );
+
+} )();

test/test.html

@@ -16,6 +16,10 @@
     <script src="/test/lib/jquery.simulate.js"></script>
     <script src="/build/openseadragon/openseadragon.min.js"></script>
     <script src="/test/test.js"></script>
+
+    <!-- Polyfill must be inserted first because it is testing functions
+         reassignments which could be done by other test. -->
+    <script src="/test/polyfills.js"></script>
     <script src="/test/basic.js"></script>
     <script src="/test/navigator.js"></script>
     <script src="/test/strings.js"></script>