Add units tests for scroll

src/openseadragon.js

@@ -843,7 +843,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
 
 
         /**
-         * Determines the page current scroll position.
+         * Determines the page's current scroll position.
          * @function
          * @name OpenSeadragon.getPageScroll
          * @returns {Point}
@@ -893,9 +893,9 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
                     window.scrollTo( scroll.x, scroll.y );
                 };
             } else {
-                var currentScroll = $.getPageScroll();
+                var originalScroll = $.getPageScroll();
-                if ( currentScroll.x === scroll.x &&
+                if ( originalScroll.x === scroll.x &&
-                    currentScroll.y === scroll.y ) {
+                    originalScroll.y === scroll.y ) {
                     // We are already correctly positioned and there
                     // is no way to detect the correct method.
                     return;
@@ -903,9 +903,9 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
 
                 document.body.scrollLeft = scroll.x;
                 document.body.scrollTop = scroll.y;
-                currentScroll = $.getPageScroll();
+                var currentScroll = $.getPageScroll();
-                if ( currentScroll.x === scroll.x &&
+                if ( currentScroll.x !== originalScroll.x &&
-                    currentScroll.y === scroll.y ) {
+                    currentScroll.y !== originalScroll.y ) {
                     $.setPageScroll = function( scroll ) {
                         document.body.scrollLeft = scroll.x;
                         document.body.scrollTop = scroll.y;
@@ -916,8 +916,8 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
                 document.documentElement.scrollLeft = scroll.x;
                 document.documentElement.scrollTop = scroll.y;
                 currentScroll = $.getPageScroll();
-                if ( currentScroll.x === scroll.x &&
+                if ( currentScroll.x !== originalScroll.x &&
-                    currentScroll.y === scroll.y ) {
+                    currentScroll.y !== originalScroll.y ) {
                     $.setPageScroll = function( scroll ) {
                         document.documentElement.scrollLeft = scroll.x;
                         document.documentElement.scrollTop = scroll.y;

src/viewer.js

@@ -656,7 +656,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             return;
         }
         
-        var recenterAfterFullPage = function() {
+        var registerRecenterAfterFullPageChange = function() {
             if ( _this.viewport ) {
                 var oldBounds = _this.viewport.getBounds();
                 var oldCenter = _this.viewport.getCenter();
@@ -696,7 +696,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         var exitFullPage = function() {
             _this.raiseEvent( 'pre-full-page', { fullPage: false } );
             
-            recenterAfterFullPage();
+            registerRecenterAfterFullPageChange();
 
             bodyStyle.margin    = _this.bodyMargin;
             docStyle.margin     = _this.docMargin;
@@ -753,7 +753,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         if ( fullPage ) {
             this.raiseEvent( 'pre-full-page', { fullPage: true } );
 
-            recenterAfterFullPage();
+            registerRecenterAfterFullPageChange();
 
             this.pageScroll     = $.getPageScroll();
 

test/basic.js

@@ -180,16 +180,46 @@
             ok(!$(viewer.element).hasClass('fullpage'),
                 'No fullpage class on div');
 
-            viewer.setFullPage(true);
+            var checkEnteringPreFullPage = function(event) {
+                viewer.removeHandler('pre-full-page', checkEnteringPreFullPage);
+                ok(event.fullPage, 'Switching to fullpage');
+                ok(!viewer.isFullPage(), 'Not yet fullpage');
+            };
+
+            var checkEnteringFullPage = function(event) {
+                viewer.removeHandler('full-page', checkEnteringFullPage);
+                ok(event.fullPage, 'Switched to fullpage');
                 ok(viewer.isFullPage(), 'Enabled fullpage');
                 ok($(viewer.element).hasClass('fullpage'),
                     'Fullpage class added to div');
 
-            viewer.setFullPage(false);
+                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);
+
+                // Workaround: for some reason inside tests, the fullscreen
+                // mode is never activated, so disable it so that we can
+                // continue the tests.
+                OpenSeadragon.supportsFullScreen = false;
+                viewer.setFullPage(false);
+            };
+            viewer.addHandler("pre-full-page", checkEnteringPreFullPage);
+            viewer.addHandler("full-page", checkEnteringFullPage);
+            viewer.setFullPage(true);
         });
 
         viewer.open('/test/data/testpattern.dzi');

test/polyfills.js

@@ -0,0 +1,130 @@
+/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
+
+( function() {
+
+    var origWidth, origHeight;
+
+    module( 'Polyfills', {
+        setup: function() {
+
+            origWidth = $( "body" ).width();
+            origHeight = $( "body" ).height();
+            $( "body" ).width( origWidth + 10000 );
+            $( "body" ).height( origHeight + 10000 );
+
+            $( document ).scrollLeft( 0 );
+            $( document ).scrollTop( 0 );
+            testLog.reset();
+        },
+        teardown: function() {
+            $( "body" ).width( origWidth );
+            $( "body" ).height( origHeight );
+            $( document ).scrollLeft( 0 );
+            $( document ).scrollTop( 0 );
+        }
+    } );
+
+    // ----------
+    test( 'pageScroll', function() {
+
+        // 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." );
+
+    } );
+
+} )();

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>