From 95b6f094e0dd786b7452acb6398ca6705351e23f Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Fri, 12 Sep 2014 15:19:28 -0700
Subject: [PATCH 01/18] Revert "Changelog for #466 and #468"

This reverts commit bcb16de02bb3a6cbf1797bfd3f7d56022203b854.
---
 changelog.txt | 2 --
 1 file changed, 2 deletions(-)

diff --git a/changelog.txt b/changelog.txt
index 1b701458..e9c895f1 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -15,8 +15,6 @@ OPENSEADRAGON CHANGELOG
 * Debug mode now works with rotate images (#453)
 * Now supporting dzi xml with namespaces (#462)
 * You can now rotate the navigator along with the main viewer (#455)
-* Viewport.setRotation now allows all rotation angles (#466)
-* Pinch rotate is now available (defaults to off) (#468)
 
 1.1.1:
 

From 119ff4226d7ff9662ddf17a9253cd9efb011f92d Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Thu, 2 Oct 2014 13:20:28 -0700
Subject: [PATCH 02/18] Add a new test file to hold the viewport tests, and a
 few new tests to it.

---
 test/viewport.js | 117 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 test/viewport.js

diff --git a/test/viewport.js b/test/viewport.js
new file mode 100644
index 00000000..352a18c8
--- /dev/null
+++ b/test/viewport.js
@@ -0,0 +1,117 @@
+/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
+
+(function () {
+    var viewer;
+
+     module("viewport", {
+        setup: function () {
+            var example = $('<div id="example"></div>').appendTo("#qunit-fixture");
+
+            testLog.reset();
+
+            viewer = OpenSeadragon({
+                id:            'example',
+                prefixUrl:     '/build/openseadragon/images/',
+                springStiffness: 100 // Faster animation = faster tests
+            });
+        },
+        teardown: function () {
+            if (viewer && viewer.close) {
+                viewer.close();
+            }
+
+            viewer = null;
+        }
+    });
+
+    // ----------
+/*
+    asyncTest('template', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            // do stuff here
+            var orig = ;
+            var expected = ;
+            var actual = ;
+            equal(expected, actual, "what are you testing");
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+*/    asyncTest('WindowToWViewportCoordinates', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig_x = Math.floor(Math.random() * 10000);
+            var orig_y = Math.floor(Math.random() * 10000);
+            var orig = new OpenSeadragon.Point(orig_x, orig_y);
+            // why does the math work this way?
+            var expected = new OpenSeadragon.Point((orig_x / 500) + 20, (orig_x / 500) + 20);
+            var actual = viewport.windowToViewportCoordinates(orig);
+            equal(actual.x, expected.x, "x coordinate for " + orig_x);
+            equal(actual.y, expected.y, "y coordinate for " + orig_y);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+    asyncTest('viewportToWindowCoordinates', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig_x = Math.floor(Math.random() * 1000);
+            var orig_y = Math.floor(Math.random() * 1000);
+            var orig = new OpenSeadragon.Point(orig_x, orig_y);
+            // why does the math work this way?
+            var expected = new OpenSeadragon.Point((orig_x - 20) * 500, (orig_y -20) * 500);
+            var actual = viewport.viewportToWindowCoordinates(orig);
+            equal(actual.x, expected.x, "x coordinate for " + orig_x);
+            equal(actual.y, expected.y, "y coordinate for " + orig_y);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+    asyncTest('viewportToImageZoom', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig = Math.floor(Math.random() * 4);
+            var expected = orig / 2; // because the container is 500 x 500
+            var actual = viewport.viewportToImageZoom(orig);
+            equal(expected, actual, "Expected " + expected + ", got " + actual);
+            start();
+        };
+
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+    asyncTest('imageToViewportZoom', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig = Math.floor(Math.random() * 4);
+            var expected = orig * 2; // because the container is 500 x 500
+            var actual = viewport.imageToViewportZoom(orig);
+            equal(expected, actual, "Expected " + expected + ", got " + actual);
+            start();
+        };
+
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+})();
\ No newline at end of file

From e8d4c00c5fab72cbccc9718ca6b0adf1aaf5faa3 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Thu, 9 Oct 2014 16:58:45 -0700
Subject: [PATCH 03/18] Add viewport.js to test.html so tests get run. Use
 built-in Point functions. Add a helper function to get a random number.

---
 test/test.html   |  1 +
 test/viewport.js | 32 ++++++++++++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/test/test.html b/test/test.html
index 592847bd..b837d733 100644
--- a/test/test.html
+++ b/test/test.html
@@ -31,5 +31,6 @@
     <script src="/test/layers.js"></script>
     <script src="/test/overlays.js"></script>
     <script src="/test/controls.js"></script>
+    <script src="/test/viewport.js"></script>
 </body>
 </html>
diff --git a/test/viewport.js b/test/viewport.js
index 352a18c8..d9788b3c 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -23,6 +23,10 @@
             viewer = null;
         }
     });
+    // helper
+    var getRandom = function(min, max){
+        return min + Math.floor(Math.random() * (max - min + 1));
+    }
 
     // ----------
 /*
@@ -47,14 +51,14 @@
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig_x = Math.floor(Math.random() * 10000);
-            var orig_y = Math.floor(Math.random() * 10000);
+            var orig_x = getRandom(500, 10000);
+            var orig_y = getRandom(500, 10000);
             var orig = new OpenSeadragon.Point(orig_x, orig_y);
-            // why does the math work this way?
-            var expected = new OpenSeadragon.Point((orig_x / 500) + 20, (orig_x / 500) + 20);
+
+            // 500 is the viewport container size; there's 20 px of padding (I think)
+            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
             var actual = viewport.windowToViewportCoordinates(orig);
-            equal(actual.x, expected.x, "x coordinate for " + orig_x);
-            equal(actual.y, expected.y, "y coordinate for " + orig_y);
+            ok(actual.equals(expected), "Coordinates converted correctly for " + orig);
 
             start();
         };
@@ -67,14 +71,14 @@
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig_x = Math.floor(Math.random() * 1000);
-            var orig_y = Math.floor(Math.random() * 1000);
+            var orig_x = getRandom(0, 1000);
+            var orig_y = getRandom(0, 1000);
             var orig = new OpenSeadragon.Point(orig_x, orig_y);
-            // why does the math work this way?
-            var expected = new OpenSeadragon.Point((orig_x - 20) * 500, (orig_y -20) * 500);
+
+            // 500 is the viewport container size; there's 20 px of padding (I think)
+            var expected = orig.minus( new OpenSeadragon.Point(20, 20) ).times(500);
             var actual = viewport.viewportToWindowCoordinates(orig);
-            equal(actual.x, expected.x, "x coordinate for " + orig_x);
-            equal(actual.y, expected.y, "y coordinate for " + orig_y);
+            ok(actual.equals(expected), "Coordinates converted correctly for " + orig);
 
             start();
         };
@@ -87,7 +91,7 @@
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig = Math.floor(Math.random() * 4);
+            var orig = getRandom(0, 4);
             var expected = orig / 2; // because the container is 500 x 500
             var actual = viewport.viewportToImageZoom(orig);
             equal(expected, actual, "Expected " + expected + ", got " + actual);
@@ -103,7 +107,7 @@
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig = Math.floor(Math.random() * 4);
+            var orig = getRandom(0, 4);
             var expected = orig * 2; // because the container is 500 x 500
             var actual = viewport.imageToViewportZoom(orig);
             equal(expected, actual, "Expected " + expected + ", got " + actual);

From 1a1ad1f6f2f152c857bf4ec70221eed6476ff860 Mon Sep 17 00:00:00 2001
From: The Gitter Badger <badger@gitter.im>
Date: Wed, 15 Oct 2014 18:14:40 +0000
Subject: [PATCH 04/18] Added Gitter badge

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 1ddabf86..71fafeca 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # OpenSeadragon
+[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/openseadragon/openseadragon?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
 

From 13045e2ac44cd06e6ca673d4f797d7fae3ffc1b8 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Wed, 15 Oct 2014 11:45:19 -0700
Subject: [PATCH 05/18] Use propEqual to verify Point values, add a stub test
 for imageToWindowCoordinates

---
 test/viewport.js | 60 ++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 51 insertions(+), 9 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index d9788b3c..c5ef7612 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -46,19 +46,59 @@
         viewer.addHandler('open', openHandler);
         viewer.open('/test/data/testpattern.dzi');
     });
-*/    asyncTest('WindowToWViewportCoordinates', function() {
+*/
+/*    asyncTest('windowToImageCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig_x = getRandom(500, 10000);
-            var orig_y = getRandom(500, 10000);
+            // do stuff here
+            var orig = ;
+            var expected = ;
+            var actual = ;
+            equal(expected, actual, "what are you testing");
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });*/
+
+/*  Need imagetoViewerElementCoordinates first to figure out this one
+    asyncTest('imageToWindowCoordinates', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            // test image is 1000 x 1000
+            var orig = new OpenSeadragon.Point(
+                    getRandom(0, 1000), getRandom(0, 1000)
+                );
+            var expected = orig.plus( new OpenSeadragon.Point(20, 20) );
+            console.log(expected);
+            var actual = viewport.imageToWindowCoordinates(orig);
+            console.log(actual);
+            ok(actual.equals(expected), "Coordinates converted correctly for " + orig);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });*/
+
+    asyncTest('WindowToViewportCoordinates', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig_x = getRandom(100, 3000);
+            var orig_y = getRandom(100, 3000);
             var orig = new OpenSeadragon.Point(orig_x, orig_y);
 
             // 500 is the viewport container size; there's 20 px of padding (I think)
             var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
             var actual = viewport.windowToViewportCoordinates(orig);
-            ok(actual.equals(expected), "Coordinates converted correctly for " + orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
             start();
         };
@@ -78,7 +118,7 @@
             // 500 is the viewport container size; there's 20 px of padding (I think)
             var expected = orig.minus( new OpenSeadragon.Point(20, 20) ).times(500);
             var actual = viewport.viewportToWindowCoordinates(orig);
-            ok(actual.equals(expected), "Coordinates converted correctly for " + orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
             start();
         };
@@ -92,9 +132,10 @@
             var viewport = viewer.viewport;
 
             var orig = getRandom(0, 4);
-            var expected = orig / 2; // because the container is 500 x 500
+            // because the container is 500 x 500 and the image is 1000 x 1000
+            var expected = orig / 2;
             var actual = viewport.viewportToImageZoom(orig);
-            equal(expected, actual, "Expected " + expected + ", got " + actual);
+            equal(expected, actual, "Coordinates converted correctly for " + orig);
             start();
         };
 
@@ -108,9 +149,10 @@
             var viewport = viewer.viewport;
 
             var orig = getRandom(0, 4);
-            var expected = orig * 2; // because the container is 500 x 500
+            // because the container is 500 x 500 and the image is 1000 x 1000
+            var expected = orig * 2;
             var actual = viewport.imageToViewportZoom(orig);
-            equal(expected, actual, "Expected " + expected + ", got " + actual);
+            equal(expected, actual, "Coordinates converted correctly for " + orig);
             start();
         };
 

From 59ee91ea1a5c2b7e261fb6ff331b79502a7e79d1 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Wed, 15 Oct 2014 12:22:52 -0700
Subject: [PATCH 06/18] add test for windowToImageCoordinates

---
 test/viewport.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index c5ef7612..5d822abd 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -47,22 +47,24 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 */
-/*    asyncTest('windowToImageCoordinates', function() {
+   asyncTest('windowToImageCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            // do stuff here
-            var orig = ;
-            var expected = ;
-            var actual = ;
-            equal(expected, actual, "what are you testing");
+            var orig = new OpenSeadragon.Point(
+                    getRandom(100, 3000), getRandom(100, 3000)
+                );
+            // 500 is the viewer size; there's 20 px of padding (I think)
+            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
+            var actual = viewport.windowToViewportCoordinates(orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
             start();
         };
         viewer.addHandler('open', openHandler);
         viewer.open('/test/data/testpattern.dzi');
-    });*/
+    });
 
 /*  Need imagetoViewerElementCoordinates first to figure out this one
     asyncTest('imageToWindowCoordinates', function() {
@@ -91,9 +93,9 @@
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig_x = getRandom(100, 3000);
-            var orig_y = getRandom(100, 3000);
-            var orig = new OpenSeadragon.Point(orig_x, orig_y);
+            var orig = new OpenSeadragon.Point(
+                    getRandom(100, 3000), getRandom(100, 3000)
+                );
 
             // 500 is the viewport container size; there's 20 px of padding (I think)
             var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
@@ -111,9 +113,9 @@
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
 
-            var orig_x = getRandom(0, 1000);
-            var orig_y = getRandom(0, 1000);
-            var orig = new OpenSeadragon.Point(orig_x, orig_y);
+            var orig = new OpenSeadragon.Point(
+                    getRandom(0, 1000), getRandom(0, 1000)
+                );
 
             // 500 is the viewport container size; there's 20 px of padding (I think)
             var expected = orig.minus( new OpenSeadragon.Point(20, 20) ).times(500);

From c6dd2f213d642963ca9454497d187665ad9cb419 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Wed, 15 Oct 2014 16:54:09 -0700
Subject: [PATCH 07/18] imageToViewerElementCoordinates and
 imageToWindowCoordinates

---
 test/viewport.js | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index 5d822abd..941ea3d3 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -47,6 +47,26 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 */
+    asyncTest('imageToViewerElementCoordinates', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig = new OpenSeadragon.Point(
+                    getRandom(0, 1000), getRandom(0, 1000)
+                );
+            // The image is twice as large as the viewer.
+            // Multiplying instead of dividing to avoid precision errors
+            var expected = orig.times(0.500);
+            var actual = viewport.imageToViewerElementCoordinates(orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
    asyncTest('windowToImageCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
@@ -56,7 +76,8 @@
                     getRandom(100, 3000), getRandom(100, 3000)
                 );
             // 500 is the viewer size; there's 20 px of padding (I think)
-            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
+            // Multiplying instead of dividing to avoid precision errors
+            var expected = orig.times(0.002).plus( new OpenSeadragon.Point(20, 20) );
             var actual = viewport.windowToViewportCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -66,7 +87,6 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 
-/*  Need imagetoViewerElementCoordinates first to figure out this one
     asyncTest('imageToWindowCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
@@ -76,17 +96,18 @@
             var orig = new OpenSeadragon.Point(
                     getRandom(0, 1000), getRandom(0, 1000)
                 );
-            var expected = orig.plus( new OpenSeadragon.Point(20, 20) );
-            console.log(expected);
+            // The image is twice as large as the viewer.
+            // Multiplying instead of dividing to avoid precision errors
+            // don't know why I have to subtract 10000 though.
+            var expected = orig.times(0.500).minus( new OpenSeadragon.Point(10000, 10000) );
             var actual = viewport.imageToWindowCoordinates(orig);
-            console.log(actual);
-            ok(actual.equals(expected), "Coordinates converted correctly for " + orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
             start();
         };
         viewer.addHandler('open', openHandler);
         viewer.open('/test/data/testpattern.dzi');
-    });*/
+    });
 
     asyncTest('WindowToViewportCoordinates', function() {
         var openHandler = function(event) {
@@ -98,7 +119,8 @@
                 );
 
             // 500 is the viewport container size; there's 20 px of padding (I think)
-            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
+            // Multiplying instead of dividing to avoid precision errors
+            var expected = orig.times(0.002).plus( new OpenSeadragon.Point(20, 20) );
             var actual = viewport.windowToViewportCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 

From d9bd3343cc975c45dea173c93c7d3dacac7a8453 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Wed, 15 Oct 2014 17:00:11 -0700
Subject: [PATCH 08/18] viewerElementToImageCoordinates

---
 test/viewport.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/test/viewport.js b/test/viewport.js
index 941ea3d3..5dcbb0d3 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -47,6 +47,25 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 */
+asyncTest('viewerElementToImageCoordinates', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            var orig = new OpenSeadragon.Point(
+                    getRandom(0, 500), getRandom(0, 500)
+                );
+            // The image is twice as large as the viewer.
+            var expected = orig.times(2);
+            var actual = viewport.viewerElementToImageCoordinates(orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
     asyncTest('imageToViewerElementCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);

From 2d8652046a8411cf749fb0092f9ac4d59fce94b1 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Thu, 16 Oct 2014 14:00:07 -0700
Subject: [PATCH 09/18] First stab at margins

---
 src/drawer.js                 |  2 +-
 src/tiledimage.js             |  2 +-
 src/viewer.js                 |  3 +-
 src/viewport.js               | 51 ++++++++++++++++++++++++----
 test/demo/collections/main.js | 62 +++++++++++++++++++++++++++++++++--
 5 files changed, 108 insertions(+), 12 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index fbb8db0f..4dd999ef 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -298,7 +298,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     clear: function() {
         this.canvas.innerHTML = "";
         if ( this.useCanvas ) {
-            var viewportSize = this.viewport.getContainerSize();
+            var viewportSize = this.viewport.getContainerSizeWithMargins();
             if( this.canvas.width != viewportSize.x ||
                 this.canvas.height != viewportSize.y ) {
                 this.canvas.width = viewportSize.x;
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 0134897a..8f4c5d6a 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -179,7 +179,7 @@ function updateViewport( tiledImage ) {
         haveDrawn       = false,
         currentTime     = $.now(),
         viewportSize    = tiledImage.viewport.getContainerSize(),
-        viewportBounds  = tiledImage.viewport.getBounds( true ),
+        viewportBounds  = tiledImage.viewport.getBoundsWithMargins( true ),
         viewportTL      = viewportBounds.getTopLeft(),
         viewportBR      = viewportBounds.getBottomRight(),
         zeroRatioC      = tiledImage.viewport.deltaPixelsFromPoints(
diff --git a/src/viewer.js b/src/viewer.js
index 388d6b1e..1dadfacb 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1871,7 +1871,8 @@ function openTileSource( viewer, source, options ) {
             viewer:             _this,
             degrees:            _this.degrees,
             navigatorRotate:    _this.navigatorRotate,
-            homeFillsViewer:    _this.homeFillsViewer
+            homeFillsViewer:    _this.homeFillsViewer,
+            margins:            _this.viewportMargins
         });
     }
 
diff --git a/src/viewport.js b/src/viewport.js
index 0c3744b0..445afa37 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -89,6 +89,16 @@ $.Viewport = function( options ) {
 
     }, options );
 
+    this.margins = $.extend({
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    }, this.margins || {});
+
+    this.containerSize.x -= this.margins.left + this.margins.right;
+    this.containerSize.y -= this.margins.top + this.margins.bottom;
+
     this.centerSpringX = new $.Spring({
         initial: 0,
         springStiffness: this.springStiffness,
@@ -281,6 +291,16 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
+    /**
+     * @function
+     */
+    getContainerSizeWithMargins: function() {
+        return new $.Point(
+            this.containerSize.x + this.margins.left + this.margins.right,
+            this.containerSize.y + this.margins.top + this.margins.bottom
+        );
+    },
+
     /**
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
@@ -298,18 +318,37 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
+    /**
+     * @function
+     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     */
+    getBoundsWithMargins: function( current ) {
+        var bounds = this.getBounds(current);
+        var factor = this.containerSize.x * this.getZoom(current);
+        // var fullSize = this.getContainerSizeWithMargins();
+        bounds.x -= this.margins.left / factor;
+        bounds.y -= this.margins.top / factor;
+        bounds.width += (this.margins.left + this.margins.right) / factor;
+        bounds.height += (this.margins.top + this.margins.bottom) / factor;
+        // $.console.log(this.margins.top / (this.containerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerSize.y)));
+        // bounds.width *= fullSize.x / this.containerSize.x;
+        // bounds.height *= fullSize.y / this.containerSize.y;
+        return bounds;
+    },
+
     /**
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
     getCenter: function( current ) {
+        var factor = this.containerSize.x * this.getZoom(current) * 2;
         var centerCurrent = new $.Point(
-                this.centerSpringX.current.value,
-                this.centerSpringY.current.value
+                this.centerSpringX.current.value - (this.margins.left / factor),
+                this.centerSpringY.current.value - (this.margins.top / factor)
             ),
             centerTarget = new $.Point(
-                this.centerSpringX.target.value,
-                this.centerSpringY.target.value
+                this.centerSpringX.target.value - (this.margins.left / factor),
+                this.centerSpringY.target.value - (this.margins.top / factor)
             ),
             oldZoomPixel,
             zoom,
@@ -801,8 +840,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             widthDeltaFactor;
 
         this.containerSize = new $.Point(
-            newContainerSize.x,
-            newContainerSize.y
+            newContainerSize.x - (this.margins.left + this.margins.right),
+            newContainerSize.y - (this.margins.top + this.margins.bottom)
         );
 
         if ( maintain ) {
diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js
index 9eeb757c..7691d650 100644
--- a/test/demo/collections/main.js
+++ b/test/demo/collections/main.js
@@ -6,15 +6,28 @@
         init: function() {
             var self = this;
 
-            this.viewer = OpenSeadragon( {
+            var config = {
                 debugMode: true,
                 zoomPerScroll: 1.02,
                 // showNavigator: true,
                 id: "contentDiv",
                 prefixUrl: "../../../build/openseadragon/images/"
-            } );
+            };
 
-            this.gridTest();
+            config.viewportMargins = {
+                // top: 250,
+                // left: 250,
+                right: 250,
+                bottom: 250
+            };
+            this.viewer = OpenSeadragon(config);
+
+            this.basicTest();
+        },
+
+        // ----------
+        basicTest: function() {
+            this.viewer.open("../../data/testpattern.dzi");
         },
 
         // ----------
@@ -87,6 +100,49 @@
                 y: 0,
                 width: 1
             });
+        },
+
+        // ----------
+        bigTest: function() {
+            this.viewer.open("../../data/testpattern.dzi", {
+                x: -2,
+                y: -2,
+                width: 6
+            });
+        },
+
+        // ----------
+        cjTest: function() {
+            var imageKey = "e-pluribus-unum";
+            var imageXML = '<?xml version="1.0" encoding="UTF-8"?><Image TileSize="254" Overlap="1" Format="png" xmlns="http://schemas.microsoft.com/deepzoom/2008"><Size Width="88560" Height="88560"/></Image>';
+            var $xml = $($.parseXML(imageXML));
+            var $image = $xml.find('Image');
+            var $size = $xml.find('Size');
+
+            var dzi = {
+                Image: {
+                    xmlns: $image.attr('xmlns'),
+                    Url: "http://chrisjordan.com/dzi/" + imageKey + '_files/',
+                    Format: $image.attr('Format'),
+                    Overlap: $image.attr('Overlap'),
+                    TileSize: $image.attr('TileSize'),
+                    Size: {
+                        Height: $size.attr('Height'),
+                        Width: $size.attr('Width')
+                    }
+                }
+            };
+
+            this.viewer.open(dzi, {
+                width: 100
+            });
+        },
+
+        // ----------
+        stanfordTest: function() {
+            var info = {"@context":"http://library.stanford.edu/iiif/image-api/1.1/context.json","@id":"http://ids.lib.harvard.edu/ids/iiif/48530377","width":6251,"height":109517,"scale_factors":[1,2,4,8,16,32],"tile_width":256,"tile_height":256,"formats":["jpg"],"qualities":["native"],"profile":"http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level1"};
+
+            this.viewer.open(info);
         }
     };
 

From 2a7f48ef60801a5859df72e35b10e20bf68cf370 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Thu, 16 Oct 2014 15:19:05 -0700
Subject: [PATCH 10/18] Cleanup and docs for margins

---
 src/drawer.js        |  2 +-
 src/openseadragon.js |  4 +++
 src/tiledimage.js    |  1 -
 src/viewport.js      | 65 +++++++++++++++++++++-----------------------
 4 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index 4dd999ef..fbb8db0f 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -298,7 +298,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     clear: function() {
         this.canvas.innerHTML = "";
         if ( this.useCanvas ) {
-            var viewportSize = this.viewport.getContainerSizeWithMargins();
+            var viewportSize = this.viewport.getContainerSize();
             if( this.canvas.width != viewportSize.x ||
                 this.canvas.height != viewportSize.y ) {
                 this.canvas.width = viewportSize.x;
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 63f0a659..81abf94e 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -262,6 +262,10 @@
   *     achieved.  Setting this to 0 and wrapHorizontal ( or wrapVertical ) to
   *     true will provide the effect of an infinitely scrolling viewport.
   *
+  * @property {Object} [viewportMargins={}]
+  *     Pushes the "home" region in from the sides by the specified amounts.
+  *     Possible subproperties (Numbers, in screen coordinates): left, top, right, bottom.
+  *
   * @property {Number} [imageLoaderLimit=0]
   *     The maximum number of image requests to make concurrently.  By default
   *     it is set to 0 allowing the browser to make the maximum number of
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 8f4c5d6a..e2afbed5 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -178,7 +178,6 @@ function updateViewport( tiledImage ) {
         best            = null,
         haveDrawn       = false,
         currentTime     = $.now(),
-        viewportSize    = tiledImage.viewport.getContainerSize(),
         viewportBounds  = tiledImage.viewport.getBoundsWithMargins( true ),
         viewportTL      = viewportBounds.getTopLeft(),
         viewportBR      = viewportBounds.getBottomRight(),
diff --git a/src/viewport.js b/src/viewport.js
index 445afa37..e629d2ee 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -96,8 +96,10 @@ $.Viewport = function( options ) {
         bottom: 0
     }, this.margins || {});
 
-    this.containerSize.x -= this.margins.left + this.margins.right;
-    this.containerSize.y -= this.margins.top + this.margins.bottom;
+    this.containerInnerSize = new $.Point(
+        Math.max(1, this.containerSize.x - (this.margins.left + this.margins.right)),
+        Math.max(1, this.containerSize.y - (this.margins.top + this.margins.bottom))
+    );
 
     this.centerSpringX = new $.Spring({
         initial: 0,
@@ -267,7 +269,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     getMaxZoom: function() {
         var zoom = this.maxZoomLevel;
         if (!zoom) {
-            zoom = this.contentSize.x * this.maxZoomPixelRatio / this.containerSize.x;
+            zoom = this.contentSize.x * this.maxZoomPixelRatio / this.containerInnerSize.x;
             zoom /= this.homeBounds.width;
         }
 
@@ -278,11 +280,12 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @function
      */
     getAspectRatio: function() {
-        return this.containerSize.x / this.containerSize.y;
+        return this.containerInnerSize.x / this.containerInnerSize.y;
     },
 
     /**
      * @function
+     * @returns {OpenSeadragon.Point} The size of the container, in screen coordinates.
      */
     getContainerSize: function() {
         return new $.Point(
@@ -291,19 +294,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
-    /**
-     * @function
-     */
-    getContainerSizeWithMargins: function() {
-        return new $.Point(
-            this.containerSize.x + this.margins.left + this.margins.right,
-            this.containerSize.y + this.margins.top + this.margins.bottom
-        );
-    },
-
     /**
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in world coordinates.
      */
     getBounds: function( current ) {
         var center = this.getCenter( current ),
@@ -321,18 +315,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     /**
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to,
+     * including the space taken by margins, in world coordinates.
      */
     getBoundsWithMargins: function( current ) {
         var bounds = this.getBounds(current);
-        var factor = this.containerSize.x * this.getZoom(current);
+        var factor = this.containerInnerSize.x * this.getZoom(current);
         // var fullSize = this.getContainerSizeWithMargins();
         bounds.x -= this.margins.left / factor;
         bounds.y -= this.margins.top / factor;
         bounds.width += (this.margins.left + this.margins.right) / factor;
         bounds.height += (this.margins.top + this.margins.bottom) / factor;
-        // $.console.log(this.margins.top / (this.containerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerSize.y)));
-        // bounds.width *= fullSize.x / this.containerSize.x;
-        // bounds.height *= fullSize.y / this.containerSize.y;
+        // $.console.log(this.margins.top / (this.containerInnerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerInnerSize.y)));
+        // bounds.width *= fullSize.x / this.containerInnerSize.x;
+        // bounds.height *= fullSize.y / this.containerInnerSize.y;
         return bounds;
     },
 
@@ -341,7 +337,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
     getCenter: function( current ) {
-        var factor = this.containerSize.x * this.getZoom(current) * 2;
+        var factor = this.containerInnerSize.x * this.getZoom(current) * 2;
         var centerCurrent = new $.Point(
                 this.centerSpringX.current.value - (this.margins.left / factor),
                 this.centerSpringY.current.value - (this.margins.top / factor)
@@ -380,10 +376,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         newZoomPixel    = this.zoomPoint.minus(
             bounds.getTopLeft()
         ).times(
-            this.containerSize.x / bounds.width
+            this.containerInnerSize.x / bounds.width
         );
         deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
-        deltaZoomPoints = deltaZoomPixels.divide( this.containerSize.x * zoom );
+        deltaZoomPoints = deltaZoomPixels.divide( this.containerInnerSize.x * zoom );
 
         return centerTarget.plus( deltaZoomPoints );
     },
@@ -589,14 +585,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         }
 
         referencePoint = oldBounds.getTopLeft().times(
-            this.containerSize.x / oldBounds.width
+            this.containerInnerSize.x / oldBounds.width
         ).minus(
             newBounds.getTopLeft().times(
-                this.containerSize.x / newBounds.width
+                this.containerInnerSize.x / newBounds.width
             )
         ).divide(
-            this.containerSize.x / oldBounds.width -
-            this.containerSize.x / newBounds.width
+            this.containerInnerSize.x / oldBounds.width -
+            this.containerInnerSize.x / newBounds.width
         );
 
         return this.zoomTo( newZoom, referencePoint, immediately );
@@ -839,12 +835,13 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             newBounds = oldBounds,
             widthDeltaFactor;
 
-        this.containerSize = new $.Point(
-            newContainerSize.x - (this.margins.left + this.margins.right),
-            newContainerSize.y - (this.margins.top + this.margins.bottom)
+        this.containerInnerSize = new $.Point(
+            Math.max(1, newContainerSize.x - (this.margins.left + this.margins.right)),
+            Math.max(1, newContainerSize.y - (this.margins.top + this.margins.bottom))
         );
 
         if ( maintain ) {
+            // TODO: widthDeltaFactor will always be 1; probably not what's intended
             widthDeltaFactor = newContainerSize.x / this.containerSize.x;
             newBounds.width  = oldBounds.width * widthDeltaFactor;
             newBounds.height = newBounds.width / this.getAspectRatio();
@@ -916,7 +913,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     deltaPixelsFromPoints: function( deltaPoints, current ) {
         return deltaPoints.times(
-            this.containerSize.x * this.getZoom( current )
+            this.containerInnerSize.x * this.getZoom( current )
         );
     },
 
@@ -927,7 +924,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     deltaPointsFromPixels: function( deltaPixels, current ) {
         return deltaPixels.divide(
-            this.containerSize.x * this.getZoom( current )
+            this.containerInnerSize.x * this.getZoom( current )
         );
     },
 
@@ -941,7 +938,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         return point.minus(
             bounds.getTopLeft()
         ).times(
-            this.containerSize.x / bounds.width
+            this.containerInnerSize.x / bounds.width
         );
     },
 
@@ -953,7 +950,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     pointFromPixel: function( pixel, current ) {
         var bounds = this.getBounds( current );
         return pixel.divide(
-            this.containerSize.x / bounds.width
+            this.containerInnerSize.x / bounds.width
         ).plus(
             bounds.getTopLeft()
         );
@@ -1168,7 +1165,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     viewportToImageZoom: function( viewportZoom ) {
         var imageWidth = this.viewer.source.dimensions.x;
-        var containerWidth = this.getContainerSize().x;
+        var containerWidth = this.containerInnerSize.x;
         var viewportToImageZoomRatio = containerWidth / imageWidth;
         return viewportZoom * viewportToImageZoomRatio;
     },
@@ -1186,7 +1183,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     imageToViewportZoom: function( imageZoom ) {
         var imageWidth = this.viewer.source.dimensions.x;
-        var containerWidth = this.getContainerSize().x;
+        var containerWidth = this.containerInnerSize.x;
         var viewportToImageZoomRatio = imageWidth / containerWidth;
         return imageZoom * viewportToImageZoomRatio;
     }

From a14bea39aa57e3acbb281d6dd336a7c35df467c0 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Fri, 17 Oct 2014 14:27:24 -0700
Subject: [PATCH 11/18] More margins work

---
 src/viewport.js               | 22 ++++++++++++----------
 test/demo/collections/main.js | 13 +++++++------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/viewport.js b/src/viewport.js
index e629d2ee..7abb9a01 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -321,14 +321,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     getBoundsWithMargins: function( current ) {
         var bounds = this.getBounds(current);
         var factor = this.containerInnerSize.x * this.getZoom(current);
-        // var fullSize = this.getContainerSizeWithMargins();
         bounds.x -= this.margins.left / factor;
         bounds.y -= this.margins.top / factor;
         bounds.width += (this.margins.left + this.margins.right) / factor;
         bounds.height += (this.margins.top + this.margins.bottom) / factor;
-        // $.console.log(this.margins.top / (this.containerInnerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerInnerSize.y)));
-        // bounds.width *= fullSize.x / this.containerInnerSize.x;
-        // bounds.height *= fullSize.y / this.containerInnerSize.y;
         return bounds;
     },
 
@@ -337,14 +333,13 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
     getCenter: function( current ) {
-        var factor = this.containerInnerSize.x * this.getZoom(current) * 2;
         var centerCurrent = new $.Point(
-                this.centerSpringX.current.value - (this.margins.left / factor),
-                this.centerSpringY.current.value - (this.margins.top / factor)
+                this.centerSpringX.current.value,
+                this.centerSpringY.current.value
             ),
             centerTarget = new $.Point(
-                this.centerSpringX.target.value - (this.margins.left / factor),
-                this.centerSpringY.target.value - (this.margins.top / factor)
+                this.centerSpringX.target.value,
+                this.centerSpringY.target.value
             ),
             oldZoomPixel,
             zoom,
@@ -835,6 +830,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             newBounds = oldBounds,
             widthDeltaFactor;
 
+        this.containerSize.x = newContainerSize.x;
+        this.containerSize.y = newContainerSize.y;
+
         this.containerInnerSize = new $.Point(
             Math.max(1, newContainerSize.x - (this.margins.left + this.margins.right)),
             Math.max(1, newContainerSize.y - (this.margins.top + this.margins.bottom))
@@ -939,6 +937,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             bounds.getTopLeft()
         ).times(
             this.containerInnerSize.x / bounds.width
+        ).plus(
+            new $.Point(this.margins.left, this.margins.top)
         );
     },
 
@@ -949,7 +949,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     pointFromPixel: function( pixel, current ) {
         var bounds = this.getBounds( current );
-        return pixel.divide(
+        return pixel.minus(
+            new $.Point(this.margins.left, this.margins.top)
+        ).divide(
             this.containerInnerSize.x / bounds.width
         ).plus(
             bounds.getTopLeft()
diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js
index 7691d650..88c8d226 100644
--- a/test/demo/collections/main.js
+++ b/test/demo/collections/main.js
@@ -14,12 +14,13 @@
                 prefixUrl: "../../../build/openseadragon/images/"
             };
 
-            config.viewportMargins = {
-                // top: 250,
-                // left: 250,
-                right: 250,
-                bottom: 250
-            };
+            // config.viewportMargins = {
+            //     top: 250,
+            //     left: 250,
+            //     right: 250,
+            //     bottom: 250
+            // };
+
             this.viewer = OpenSeadragon(config);
 
             this.basicTest();

From 8494b7ee7fd46cf7a59556295392c149a1fe2f0d Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Tue, 21 Oct 2014 11:19:41 -0700
Subject: [PATCH 12/18] Take out multiplication to avoid precision errors
 because it doesn't; add viewportToImageRectangle test

---
 test/viewport.js | 41 ++++++++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index 5dcbb0d3..80d7187f 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -47,7 +47,34 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 */
-asyncTest('viewerElementToImageCoordinates', function() {
+    asyncTest('viewportToImageRectangle', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            // do stuff here
+            var orig = new OpenSeadragon.Rect(
+                getRandom(0, 500),
+                getRandom(0, 500),
+                getRandom(0, 500),
+                getRandom(0, 500)
+            );
+            var expected = new OpenSeadragon.Rect(
+                orig.x * 1000,
+                orig.y * 1000,
+                orig.width * 1000,
+                orig.height * 1000
+            );
+            var actual = viewport.viewportToImageRectangle(orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+    asyncTest('viewerElementToImageCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
@@ -75,8 +102,7 @@ asyncTest('viewerElementToImageCoordinates', function() {
                     getRandom(0, 1000), getRandom(0, 1000)
                 );
             // The image is twice as large as the viewer.
-            // Multiplying instead of dividing to avoid precision errors
-            var expected = orig.times(0.500);
+            var expected = orig.divide(2);
             var actual = viewport.imageToViewerElementCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -95,8 +121,7 @@ asyncTest('viewerElementToImageCoordinates', function() {
                     getRandom(100, 3000), getRandom(100, 3000)
                 );
             // 500 is the viewer size; there's 20 px of padding (I think)
-            // Multiplying instead of dividing to avoid precision errors
-            var expected = orig.times(0.002).plus( new OpenSeadragon.Point(20, 20) );
+            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
             var actual = viewport.windowToViewportCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -116,9 +141,8 @@ asyncTest('viewerElementToImageCoordinates', function() {
                     getRandom(0, 1000), getRandom(0, 1000)
                 );
             // The image is twice as large as the viewer.
-            // Multiplying instead of dividing to avoid precision errors
             // don't know why I have to subtract 10000 though.
-            var expected = orig.times(0.500).minus( new OpenSeadragon.Point(10000, 10000) );
+            var expected = orig.divide(2).minus( new OpenSeadragon.Point(10000, 10000) );
             var actual = viewport.imageToWindowCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -138,8 +162,7 @@ asyncTest('viewerElementToImageCoordinates', function() {
                 );
 
             // 500 is the viewport container size; there's 20 px of padding (I think)
-            // Multiplying instead of dividing to avoid precision errors
-            var expected = orig.times(0.002).plus( new OpenSeadragon.Point(20, 20) );
+            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
             var actual = viewport.windowToViewportCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 

From 46cd2ab800b5478ab229295d80edafaaef6c4728 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Tue, 21 Oct 2014 17:11:09 -0700
Subject: [PATCH 13/18] Fixed issue with top/left margins; cleaned up naming

---
 src/drawer.js                 | 30 +++++++++++++
 src/viewport.js               | 82 ++++++++++++++++++-----------------
 test/demo/collections/main.js | 35 ++++++++++++---
 3 files changed, 102 insertions(+), 45 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index fbb8db0f..fd1cd730 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -324,6 +324,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         }
     },
 
+    /**
+     * @private
+     */
     drawDebugInfo: function( tile, count, i ){
         if ( this.useCanvas ) {
             this.context.save();
@@ -396,6 +399,30 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         }
     },
 
+    /**
+     * @private
+     */
+    debugRect: function(rect) {
+        if ( this.useCanvas ) {
+            this.context.save();
+            this.context.lineWidth = 2;
+            this.context.strokeStyle = this.debugGridColor;
+            this.context.fillStyle = this.debugGridColor;
+
+            this.context.strokeRect(
+                rect.x,
+                rect.y,
+                rect.width,
+                rect.height
+            );
+
+            this.context.restore();
+        }
+    },
+
+    /**
+     * @private
+     */
     _offsetForRotation: function( tile, degrees ){
         var cx = this.canvas.width / 2,
             cy = this.canvas.height / 2,
@@ -410,6 +437,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         tile.position.y = py;
     },
 
+    /**
+     * @private
+     */
     _restoreRotationChanges: function( tile ){
         var cx = this.canvas.width / 2,
             cy = this.canvas.height / 2,
diff --git a/src/viewport.js b/src/viewport.js
index 7abb9a01..fab50455 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -63,6 +63,15 @@ $.Viewport = function( options ) {
         delete options.config;
     }
 
+    this._margins = $.extend({
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    }, options.margins || {});
+
+    delete options.margins;
+
     $.extend( true, this, {
 
         //required settings
@@ -89,16 +98,9 @@ $.Viewport = function( options ) {
 
     }, options );
 
-    this.margins = $.extend({
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0
-    }, this.margins || {});
-
-    this.containerInnerSize = new $.Point(
-        Math.max(1, this.containerSize.x - (this.margins.left + this.margins.right)),
-        Math.max(1, this.containerSize.y - (this.margins.top + this.margins.bottom))
+    this._containerInnerSize = new $.Point(
+        Math.max(1, this.containerSize.x - (this._margins.left + this._margins.right)),
+        Math.max(1, this.containerSize.y - (this._margins.top + this._margins.bottom))
     );
 
     this.centerSpringX = new $.Spring({
@@ -269,7 +271,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     getMaxZoom: function() {
         var zoom = this.maxZoomLevel;
         if (!zoom) {
-            zoom = this.contentSize.x * this.maxZoomPixelRatio / this.containerInnerSize.x;
+            zoom = this.contentSize.x * this.maxZoomPixelRatio / this._containerInnerSize.x;
             zoom /= this.homeBounds.width;
         }
 
@@ -280,7 +282,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @function
      */
     getAspectRatio: function() {
-        return this.containerInnerSize.x / this.containerInnerSize.y;
+        return this._containerInnerSize.x / this._containerInnerSize.y;
     },
 
     /**
@@ -320,11 +322,11 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     getBoundsWithMargins: function( current ) {
         var bounds = this.getBounds(current);
-        var factor = this.containerInnerSize.x * this.getZoom(current);
-        bounds.x -= this.margins.left / factor;
-        bounds.y -= this.margins.top / factor;
-        bounds.width += (this.margins.left + this.margins.right) / factor;
-        bounds.height += (this.margins.top + this.margins.bottom) / factor;
+        var factor = this._containerInnerSize.x * this.getZoom(current);
+        bounds.x -= this._margins.left / factor;
+        bounds.y -= this._margins.top / factor;
+        bounds.width += (this._margins.left + this._margins.right) / factor;
+        bounds.height += (this._margins.top + this._margins.bottom) / factor;
         return bounds;
     },
 
@@ -368,13 +370,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             height
         );
 
-        newZoomPixel    = this.zoomPoint.minus(
-            bounds.getTopLeft()
-        ).times(
-            this.containerInnerSize.x / bounds.width
-        );
+        newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds);
         deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
-        deltaZoomPoints = deltaZoomPixels.divide( this.containerInnerSize.x * zoom );
+        deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
 
         return centerTarget.plus( deltaZoomPoints );
     },
@@ -580,14 +578,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         }
 
         referencePoint = oldBounds.getTopLeft().times(
-            this.containerInnerSize.x / oldBounds.width
+            this._containerInnerSize.x / oldBounds.width
         ).minus(
             newBounds.getTopLeft().times(
-                this.containerInnerSize.x / newBounds.width
+                this._containerInnerSize.x / newBounds.width
             )
         ).divide(
-            this.containerInnerSize.x / oldBounds.width -
-            this.containerInnerSize.x / newBounds.width
+            this._containerInnerSize.x / oldBounds.width -
+            this._containerInnerSize.x / newBounds.width
         );
 
         return this.zoomTo( newZoom, referencePoint, immediately );
@@ -833,9 +831,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         this.containerSize.x = newContainerSize.x;
         this.containerSize.y = newContainerSize.y;
 
-        this.containerInnerSize = new $.Point(
-            Math.max(1, newContainerSize.x - (this.margins.left + this.margins.right)),
-            Math.max(1, newContainerSize.y - (this.margins.top + this.margins.bottom))
+        this._containerInnerSize = new $.Point(
+            Math.max(1, newContainerSize.x - (this._margins.left + this._margins.right)),
+            Math.max(1, newContainerSize.y - (this._margins.top + this._margins.bottom))
         );
 
         if ( maintain ) {
@@ -911,7 +909,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     deltaPixelsFromPoints: function( deltaPoints, current ) {
         return deltaPoints.times(
-            this.containerInnerSize.x * this.getZoom( current )
+            this._containerInnerSize.x * this.getZoom( current )
         );
     },
 
@@ -922,7 +920,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     deltaPointsFromPixels: function( deltaPixels, current ) {
         return deltaPixels.divide(
-            this.containerInnerSize.x * this.getZoom( current )
+            this._containerInnerSize.x * this.getZoom( current )
         );
     },
 
@@ -932,13 +930,19 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
     pixelFromPoint: function( point, current ) {
-        var bounds = this.getBounds( current );
+        return this._pixelFromPoint(point, this.getBounds( current ));
+    },
+
+    /**
+     * @private
+     */
+    _pixelFromPoint: function( point, bounds ) {
         return point.minus(
             bounds.getTopLeft()
         ).times(
-            this.containerInnerSize.x / bounds.width
+            this._containerInnerSize.x / bounds.width
         ).plus(
-            new $.Point(this.margins.left, this.margins.top)
+            new $.Point(this._margins.left, this._margins.top)
         );
     },
 
@@ -950,9 +954,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     pointFromPixel: function( pixel, current ) {
         var bounds = this.getBounds( current );
         return pixel.minus(
-            new $.Point(this.margins.left, this.margins.top)
+            new $.Point(this._margins.left, this._margins.top)
         ).divide(
-            this.containerInnerSize.x / bounds.width
+            this._containerInnerSize.x / bounds.width
         ).plus(
             bounds.getTopLeft()
         );
@@ -1167,7 +1171,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     viewportToImageZoom: function( viewportZoom ) {
         var imageWidth = this.viewer.source.dimensions.x;
-        var containerWidth = this.containerInnerSize.x;
+        var containerWidth = this._containerInnerSize.x;
         var viewportToImageZoomRatio = containerWidth / imageWidth;
         return viewportZoom * viewportToImageZoomRatio;
     },
@@ -1185,7 +1189,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     imageToViewportZoom: function( imageZoom ) {
         var imageWidth = this.viewer.source.dimensions.x;
-        var containerWidth = this.containerInnerSize.x;
+        var containerWidth = this._containerInnerSize.x;
         var viewportToImageZoomRatio = imageWidth / containerWidth;
         return imageZoom * viewportToImageZoomRatio;
     }
diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js
index 88c8d226..7ae66204 100644
--- a/test/demo/collections/main.js
+++ b/test/demo/collections/main.js
@@ -14,20 +14,43 @@
                 prefixUrl: "../../../build/openseadragon/images/"
             };
 
-            // config.viewportMargins = {
-            //     top: 250,
-            //     left: 250,
-            //     right: 250,
-            //     bottom: 250
-            // };
+            var testMargins = false;
+
+            var margins;
+
+            if (testMargins) {
+                margins = {
+                    top: 250,
+                    left: 250,
+                    right: 250,
+                    bottom: 250
+                };
+
+                config.viewportMargins = margins;
+            }
 
             this.viewer = OpenSeadragon(config);
 
+            if (testMargins) {
+                this.viewer.addHandler('animation', function() {
+                    var box = new OpenSeadragon.Rect(margins.left, margins.top,
+                        $('#contentDiv').width() - (margins.left + margins.right),
+                        $('#contentDiv').height() - (margins.top + margins.bottom));
+
+                    self.viewer.drawer.debugRect(box);
+                });
+            }
+
             this.basicTest();
         },
 
         // ----------
         basicTest: function() {
+            var self = this;
+
+            this.viewer.addHandler('open', function() {
+            });
+
             this.viewer.open("../../data/testpattern.dzi");
         },
 

From 72a0ecc195e9534b199b46f984b57a30a92d7d1d Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Thu, 23 Oct 2014 16:13:02 -0700
Subject: [PATCH 14/18] Force a zoom factor of 2 and make that a constant; find
 the viewer position in the window for imageToWindowCoordinates (still not
 sure where the 20 x 20 pixel padding is coming from

---
 test/viewport.js | 59 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index 80d7187f..91a8adc9 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -26,7 +26,9 @@
     // helper
     var getRandom = function(min, max){
         return min + Math.floor(Math.random() * (max - min + 1));
-    }
+    };
+
+    var ZOOM_FACTOR = 2; // the image will be twice as large as the viewer.
 
     // ----------
 /*
@@ -34,6 +36,7 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             // do stuff here
             var orig = ;
@@ -47,12 +50,39 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 */
+    asyncTest('imageToViewportRectangle', function() {
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
+
+            var orig = new OpenSeadragon.Rect(
+                getRandom(0, 1000),
+                getRandom(0, 1000),
+                getRandom(0, 1000),
+                getRandom(0, 1000)
+            );
+            var expected = new OpenSeadragon.Rect(
+                orig.x / 1000,
+                orig.y / 1000,
+                orig.width / 1000,
+                orig.height / 1000
+            );
+            var actual = viewport.imageToViewportRectangle(orig);
+            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
     asyncTest('viewportToImageRectangle', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            // do stuff here
             var orig = new OpenSeadragon.Rect(
                 getRandom(0, 500),
                 getRandom(0, 500),
@@ -78,12 +108,12 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = new OpenSeadragon.Point(
                     getRandom(0, 500), getRandom(0, 500)
                 );
-            // The image is twice as large as the viewer.
-            var expected = orig.times(2);
+            var expected = orig.times(ZOOM_FACTOR);
             var actual = viewport.viewerElementToImageCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -97,12 +127,12 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = new OpenSeadragon.Point(
                     getRandom(0, 1000), getRandom(0, 1000)
                 );
-            // The image is twice as large as the viewer.
-            var expected = orig.divide(2);
+            var expected = orig.divide(ZOOM_FACTOR);
             var actual = viewport.imageToViewerElementCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -116,6 +146,7 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = new OpenSeadragon.Point(
                     getRandom(100, 3000), getRandom(100, 3000)
@@ -135,14 +166,14 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             // test image is 1000 x 1000
             var orig = new OpenSeadragon.Point(
                     getRandom(0, 1000), getRandom(0, 1000)
                 );
-            // The image is twice as large as the viewer.
-            // don't know why I have to subtract 10000 though.
-            var expected = orig.divide(2).minus( new OpenSeadragon.Point(10000, 10000) );
+            var position = viewer.element.getBoundingClientRect();
+            var expected = orig.divide(ZOOM_FACTOR).plus( new OpenSeadragon.Point(position.top, position.left) );
             var actual = viewport.imageToWindowCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -156,6 +187,7 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = new OpenSeadragon.Point(
                     getRandom(100, 3000), getRandom(100, 3000)
@@ -176,6 +208,7 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = new OpenSeadragon.Point(
                     getRandom(0, 1000), getRandom(0, 1000)
@@ -196,10 +229,10 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = getRandom(0, 4);
-            // because the container is 500 x 500 and the image is 1000 x 1000
-            var expected = orig / 2;
+            var expected = orig / ZOOM_FACTOR;
             var actual = viewport.viewportToImageZoom(orig);
             equal(expected, actual, "Coordinates converted correctly for " + orig);
             start();
@@ -213,10 +246,10 @@
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
+            viewport.zoomTo(ZOOM_FACTOR, null, true);
 
             var orig = getRandom(0, 4);
-            // because the container is 500 x 500 and the image is 1000 x 1000
-            var expected = orig * 2;
+            var expected = orig * ZOOM_FACTOR;
             var actual = viewport.imageToViewportZoom(orig);
             equal(expected, actual, "Coordinates converted correctly for " + orig);
             start();

From c1ae3d08f7fbd138f47d5645e7d2f276fd6a725a Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Thu, 23 Oct 2014 16:30:34 -0700
Subject: [PATCH 15/18] More constants, fewer magic numbers.

---
 test/viewport.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index 91a8adc9..c017f4d3 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -29,6 +29,8 @@
     };
 
     var ZOOM_FACTOR = 2; // the image will be twice as large as the viewer.
+    var VIEWER_SIZE = 500; // We set up the viewer to be 500 px x 500 px.
+    var VIEWER_PADDING = new OpenSeadragon.Point(20, 20);
 
     // ----------
 /*
@@ -151,8 +153,7 @@
             var orig = new OpenSeadragon.Point(
                     getRandom(100, 3000), getRandom(100, 3000)
                 );
-            // 500 is the viewer size; there's 20 px of padding (I think)
-            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
+            var expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
             var actual = viewport.windowToViewportCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -193,8 +194,7 @@
                     getRandom(100, 3000), getRandom(100, 3000)
                 );
 
-            // 500 is the viewport container size; there's 20 px of padding (I think)
-            var expected = orig.divide(500).plus( new OpenSeadragon.Point(20, 20) );
+            var expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
             var actual = viewport.windowToViewportCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 
@@ -214,8 +214,7 @@
                     getRandom(0, 1000), getRandom(0, 1000)
                 );
 
-            // 500 is the viewport container size; there's 20 px of padding (I think)
-            var expected = orig.minus( new OpenSeadragon.Point(20, 20) ).times(500);
+            var expected = orig.minus(VIEWER_PADDING).times(VIEWER_SIZE);
             var actual = viewport.viewportToWindowCoordinates(orig);
             propEqual(actual, expected, "Coordinates converted correctly for " + orig);
 

From 2d70ee32fc9bad8295f7a1fff368121fc0464410 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Mon, 27 Oct 2014 17:58:59 -0700
Subject: [PATCH 16/18] Remove randomness from test cases.

---
 test/viewport.js | 188 ++++++++++++++++++++++++++++-------------------
 1 file changed, 112 insertions(+), 76 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index c017f4d3..e7cadd33 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -23,15 +23,43 @@
             viewer = null;
         }
     });
-    // helper
-    var getRandom = function(min, max){
-        return min + Math.floor(Math.random() * (max - min + 1));
-    };
+
+    // helpers and constants
 
     var ZOOM_FACTOR = 2; // the image will be twice as large as the viewer.
     var VIEWER_SIZE = 500; // We set up the viewer to be 500 px x 500 px.
     var VIEWER_PADDING = new OpenSeadragon.Point(20, 20);
 
+    var testZoomLevels = [-1, 0, 0.1, 0.5, 4, 10];
+
+    var testPoints = [
+        new OpenSeadragon.Point(0, 0),
+        new OpenSeadragon.Point(0.001, 0.001),
+        new OpenSeadragon.Point(0.25, 0.5),
+        new OpenSeadragon.Point(0.999, 0.999),
+        new OpenSeadragon.Point(1, 1)
+    ];
+
+    var testRects = [
+        new OpenSeadragon.Rect(0, 0, 0, 0),
+        new OpenSeadragon.Rect(0.001, 0.005, 0.001, 0.003),
+        new OpenSeadragon.Rect(0.25, 0.25, 0.25, 0.25),
+        new OpenSeadragon.Rect(0.999, 0.999, 0.999, 0.999),
+        new OpenSeadragon.Rect(1, 1, 1, 1)
+    ];
+
+    // If this is something we might want to add to the Rect class, I can do that.
+    // But I assumed that since it isn't there already, that's not functionality
+    // that we want to make broadly available.
+    OpenSeadragon.Rect.prototype.times = function( factor ) {
+        return new OpenSeadragon.Rect(
+            this.x * factor,
+            this.y * factor,
+            this.width * factor,
+            this.height * factor
+        );
+    }
+
     // ----------
 /*
     asyncTest('template', function() {
@@ -58,20 +86,18 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Rect(
-                getRandom(0, 1000),
-                getRandom(0, 1000),
-                getRandom(0, 1000),
-                getRandom(0, 1000)
-            );
-            var expected = new OpenSeadragon.Rect(
+            var orig, expected, actual;
+            for (var i = 0; i < testRects.length; i++){
+                orig = testRects[i].times(1000);
+                expected = new OpenSeadragon.Rect(
                 orig.x / 1000,
                 orig.y / 1000,
                 orig.width / 1000,
                 orig.height / 1000
-            );
-            var actual = viewport.imageToViewportRectangle(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+                );
+                actual = viewport.imageToViewportRectangle(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -85,20 +111,18 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Rect(
-                getRandom(0, 500),
-                getRandom(0, 500),
-                getRandom(0, 500),
-                getRandom(0, 500)
-            );
-            var expected = new OpenSeadragon.Rect(
-                orig.x * 1000,
-                orig.y * 1000,
-                orig.width * 1000,
-                orig.height * 1000
-            );
-            var actual = viewport.viewportToImageRectangle(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testRects.length; i++){
+                orig = testRects[i].times(500);
+                expected = new OpenSeadragon.Rect(
+                    orig.x * 1000,
+                    orig.y * 1000,
+                    orig.width * 1000,
+                    orig.height * 1000
+                );
+                actual = viewport.viewportToImageRectangle(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -112,12 +136,13 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Point(
-                    getRandom(0, 500), getRandom(0, 500)
-                );
-            var expected = orig.times(ZOOM_FACTOR);
-            var actual = viewport.viewerElementToImageCoordinates(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                orig = testPoints[i].times(500);
+                expected = orig.times(ZOOM_FACTOR);
+                actual = viewport.viewerElementToImageCoordinates(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -131,12 +156,13 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Point(
-                    getRandom(0, 1000), getRandom(0, 1000)
-                );
-            var expected = orig.divide(ZOOM_FACTOR);
-            var actual = viewport.imageToViewerElementCoordinates(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                orig = testPoints[i].times(1000);
+                expected = orig.divide(ZOOM_FACTOR);
+                actual = viewport.imageToViewerElementCoordinates(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -150,12 +176,13 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Point(
-                    getRandom(100, 3000), getRandom(100, 3000)
-                );
-            var expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
-            var actual = viewport.windowToViewportCoordinates(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                orig = testPoints[i].times(3000);
+                expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
+                actual = viewport.windowToViewportCoordinates(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -169,14 +196,15 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            // test image is 1000 x 1000
-            var orig = new OpenSeadragon.Point(
-                    getRandom(0, 1000), getRandom(0, 1000)
-                );
-            var position = viewer.element.getBoundingClientRect();
-            var expected = orig.divide(ZOOM_FACTOR).plus( new OpenSeadragon.Point(position.top, position.left) );
-            var actual = viewport.imageToWindowCoordinates(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                // Test image is 1000 x 1000
+                orig = testPoints[i].times(1000);
+                position = viewer.element.getBoundingClientRect();
+                expected = orig.divide(ZOOM_FACTOR).plus( new OpenSeadragon.Point(position.top, position.left) );
+                actual = viewport.imageToWindowCoordinates(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -190,13 +218,13 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Point(
-                    getRandom(100, 3000), getRandom(100, 3000)
-                );
-
-            var expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
-            var actual = viewport.windowToViewportCoordinates(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                orig = testPoints[i].times(3000);
+                expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
+                actual = viewport.windowToViewportCoordinates(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -210,13 +238,14 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = new OpenSeadragon.Point(
-                    getRandom(0, 1000), getRandom(0, 1000)
-                );
-
-            var expected = orig.minus(VIEWER_PADDING).times(VIEWER_SIZE);
-            var actual = viewport.viewportToWindowCoordinates(orig);
-            propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                // Test image is 1000 x 1000
+                orig = testPoints[i].times(1000);
+                expected = orig.minus(VIEWER_PADDING).times(VIEWER_SIZE);
+                actual = viewport.viewportToWindowCoordinates(orig);
+                propEqual(actual, expected, "Coordinates converted correctly for " + orig);
+            }
 
             start();
         };
@@ -230,10 +259,13 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = getRandom(0, 4);
-            var expected = orig / ZOOM_FACTOR;
-            var actual = viewport.viewportToImageZoom(orig);
-            equal(expected, actual, "Coordinates converted correctly for " + orig);
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                orig = testZoomLevels[i];
+                expected = orig / ZOOM_FACTOR;
+                actual = viewport.viewportToImageZoom(orig);
+                equal(expected, actual, "Coordinates converted correctly for " + orig);
+            }
             start();
         };
 
@@ -247,10 +279,14 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
-            var orig = getRandom(0, 4);
-            var expected = orig * ZOOM_FACTOR;
-            var actual = viewport.imageToViewportZoom(orig);
-            equal(expected, actual, "Coordinates converted correctly for " + orig);
+
+            var orig, expected, actual;
+            for (var i = 0; i < testPoints.length; i++){
+                orig = testZoomLevels[i];
+                expected = orig * ZOOM_FACTOR;
+                actual = viewport.imageToViewportZoom(orig);
+                equal(expected, actual, "Coordinates converted correctly for " + orig);
+            }
             start();
         };
 

From e0fbf869c92a595ed1f26ebf76c8618ab2f84023 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Mon, 27 Oct 2014 18:06:37 -0700
Subject: [PATCH 17/18] Replace more magic numbers with constants.

---
 test/viewport.js | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/test/viewport.js b/test/viewport.js
index e7cadd33..6c106349 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -28,6 +28,7 @@
 
     var ZOOM_FACTOR = 2; // the image will be twice as large as the viewer.
     var VIEWER_SIZE = 500; // We set up the viewer to be 500 px x 500 px.
+    var IMAGE_SIZE = ZOOM_FACTOR * VIEWER_SIZE; // mostly for convenience
     var VIEWER_PADDING = new OpenSeadragon.Point(20, 20);
 
     var testZoomLevels = [-1, 0, 0.1, 0.5, 4, 10];
@@ -88,12 +89,12 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testRects.length; i++){
-                orig = testRects[i].times(1000);
+                orig = testRects[i].times(IMAGE_SIZE);
                 expected = new OpenSeadragon.Rect(
-                orig.x / 1000,
-                orig.y / 1000,
-                orig.width / 1000,
-                orig.height / 1000
+                orig.x / IMAGE_SIZE,
+                orig.y / IMAGE_SIZE,
+                orig.width / IMAGE_SIZE,
+                orig.height / IMAGE_SIZE
                 );
                 actual = viewport.imageToViewportRectangle(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -113,12 +114,12 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testRects.length; i++){
-                orig = testRects[i].times(500);
+                orig = testRects[i].times(VIEWER_SIZE);
                 expected = new OpenSeadragon.Rect(
-                    orig.x * 1000,
-                    orig.y * 1000,
-                    orig.width * 1000,
-                    orig.height * 1000
+                    orig.x * IMAGE_SIZE,
+                    orig.y * IMAGE_SIZE,
+                    orig.width * IMAGE_SIZE,
+                    orig.height * IMAGE_SIZE
                 );
                 actual = viewport.viewportToImageRectangle(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -138,7 +139,7 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                orig = testPoints[i].times(500);
+                orig = testPoints[i].times(VIEWER_SIZE);
                 expected = orig.times(ZOOM_FACTOR);
                 actual = viewport.viewerElementToImageCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -158,7 +159,7 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                orig = testPoints[i].times(1000);
+                orig = testPoints[i].times(IMAGE_SIZE);
                 expected = orig.divide(ZOOM_FACTOR);
                 actual = viewport.imageToViewerElementCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -198,8 +199,8 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                // Test image is 1000 x 1000
-                orig = testPoints[i].times(1000);
+                // Test image is IMAGE_SIZE x IMAGE_SIZE
+                orig = testPoints[i].times(IMAGE_SIZE);
                 position = viewer.element.getBoundingClientRect();
                 expected = orig.divide(ZOOM_FACTOR).plus( new OpenSeadragon.Point(position.top, position.left) );
                 actual = viewport.imageToWindowCoordinates(orig);
@@ -240,8 +241,8 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                // Test image is 1000 x 1000
-                orig = testPoints[i].times(1000);
+                // Test image is IMAGE_SIZE x IMAGE_SIZE
+                orig = testPoints[i].times(IMAGE_SIZE);
                 expected = orig.minus(VIEWER_PADDING).times(VIEWER_SIZE);
                 actual = viewport.viewportToWindowCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);

From 19844c8f42bfa43f1576fd2d89d53e4e84daadd1 Mon Sep 17 00:00:00 2001
From: nein09 <nein09@nein09.com>
Date: Wed, 29 Oct 2014 09:42:19 -0700
Subject: [PATCH 18/18] Incorporate code review feedback, add a times method to
 the Rect class.

---
 src/rectangle.js | 16 +++++++++
 test/viewport.js | 85 ++++++++++++++++++++----------------------------
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/src/rectangle.js b/src/rectangle.js
index 4e3746eb..4507eb08 100644
--- a/src/rectangle.js
+++ b/src/rectangle.js
@@ -178,6 +178,22 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{
             ( this.height === other.height );
     },
 
+    /**
+    * Multiply all dimensions in this Rect by a factor and return a new Rect.
+    * @function
+    * @param {Number} factor The factor to multiply vector components.
+    * @returns {OpenSeadragon.Rect} A new rect representing the multiplication
+    *  of the vector components by the factor
+    */
+    times: function( factor ) {
+        return new OpenSeadragon.Rect(
+            this.x * factor,
+            this.y * factor,
+            this.width * factor,
+            this.height * factor
+        );
+    },
+
     /**
      * Rotates a rectangle around a point. Currently only 90, 180, and 270
      * degrees are supported.
diff --git a/test/viewport.js b/test/viewport.js
index 6c106349..2daabc68 100644
--- a/test/viewport.js
+++ b/test/viewport.js
@@ -27,9 +27,8 @@
     // helpers and constants
 
     var ZOOM_FACTOR = 2; // the image will be twice as large as the viewer.
-    var VIEWER_SIZE = 500; // We set up the viewer to be 500 px x 500 px.
-    var IMAGE_SIZE = ZOOM_FACTOR * VIEWER_SIZE; // mostly for convenience
     var VIEWER_PADDING = new OpenSeadragon.Point(20, 20);
+    var DZI_PATH = '/test/data/testpattern.dzi'
 
     var testZoomLevels = [-1, 0, 0.1, 0.5, 4, 10];
 
@@ -37,7 +36,7 @@
         new OpenSeadragon.Point(0, 0),
         new OpenSeadragon.Point(0.001, 0.001),
         new OpenSeadragon.Point(0.25, 0.5),
-        new OpenSeadragon.Point(0.999, 0.999),
+        new OpenSeadragon.Point(0.99, 0.99),
         new OpenSeadragon.Point(1, 1)
     ];
 
@@ -49,18 +48,6 @@
         new OpenSeadragon.Rect(1, 1, 1, 1)
     ];
 
-    // If this is something we might want to add to the Rect class, I can do that.
-    // But I assumed that since it isn't there already, that's not functionality
-    // that we want to make broadly available.
-    OpenSeadragon.Rect.prototype.times = function( factor ) {
-        return new OpenSeadragon.Rect(
-            this.x * factor,
-            this.y * factor,
-            this.width * factor,
-            this.height * factor
-        );
-    }
-
     // ----------
 /*
     asyncTest('template', function() {
@@ -78,7 +65,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 */
     asyncTest('imageToViewportRectangle', function() {
@@ -89,12 +76,12 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testRects.length; i++){
-                orig = testRects[i].times(IMAGE_SIZE);
+                orig = testRects[i].times(viewer.source.dimensions.x);
                 expected = new OpenSeadragon.Rect(
-                orig.x / IMAGE_SIZE,
-                orig.y / IMAGE_SIZE,
-                orig.width / IMAGE_SIZE,
-                orig.height / IMAGE_SIZE
+                    orig.x / viewer.source.dimensions.x,
+                    orig.y / viewer.source.dimensions.x,
+                    orig.width / viewer.source.dimensions.x,
+                    orig.height / viewer.source.dimensions.x
                 );
                 actual = viewport.imageToViewportRectangle(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -103,7 +90,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('viewportToImageRectangle', function() {
@@ -114,12 +101,12 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testRects.length; i++){
-                orig = testRects[i].times(VIEWER_SIZE);
+                orig = testRects[i].times(viewport.getContainerSize().x);
                 expected = new OpenSeadragon.Rect(
-                    orig.x * IMAGE_SIZE,
-                    orig.y * IMAGE_SIZE,
-                    orig.width * IMAGE_SIZE,
-                    orig.height * IMAGE_SIZE
+                    orig.x * viewer.source.dimensions.x,
+                    orig.y * viewer.source.dimensions.x,
+                    orig.width * viewer.source.dimensions.x,
+                    orig.height * viewer.source.dimensions.x
                 );
                 actual = viewport.viewportToImageRectangle(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -128,7 +115,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('viewerElementToImageCoordinates', function() {
@@ -139,7 +126,7 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                orig = testPoints[i].times(VIEWER_SIZE);
+                orig = testPoints[i].times(viewport.getContainerSize().x);
                 expected = orig.times(ZOOM_FACTOR);
                 actual = viewport.viewerElementToImageCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -148,7 +135,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('imageToViewerElementCoordinates', function() {
@@ -159,7 +146,7 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                orig = testPoints[i].times(IMAGE_SIZE);
+                orig = testPoints[i].times(viewer.source.dimensions.x);
                 expected = orig.divide(ZOOM_FACTOR);
                 actual = viewport.imageToViewerElementCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
@@ -168,7 +155,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
    asyncTest('windowToImageCoordinates', function() {
@@ -177,10 +164,11 @@
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
+            var window_boundary = Math.min(window.innerWidth, window.innerHeight);
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                orig = testPoints[i].times(3000);
-                expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
+                orig = testPoints[i].times(window_boundary);
+                expected = orig.divide(viewport.getContainerSize().x).plus(VIEWER_PADDING);
                 actual = viewport.windowToViewportCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
             }
@@ -188,7 +176,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('imageToWindowCoordinates', function() {
@@ -199,8 +187,7 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                // Test image is IMAGE_SIZE x IMAGE_SIZE
-                orig = testPoints[i].times(IMAGE_SIZE);
+                orig = testPoints[i].times(viewer.source.dimensions.x);
                 position = viewer.element.getBoundingClientRect();
                 expected = orig.divide(ZOOM_FACTOR).plus( new OpenSeadragon.Point(position.top, position.left) );
                 actual = viewport.imageToWindowCoordinates(orig);
@@ -210,19 +197,20 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
-    asyncTest('WindowToViewportCoordinates', function() {
+    asyncTest('windowToViewportCoordinates', function() {
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
             viewport.zoomTo(ZOOM_FACTOR, null, true);
 
+            var window_boundary = Math.min(window.innerWidth, window.innerHeight);
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                orig = testPoints[i].times(3000);
-                expected = orig.divide(VIEWER_SIZE).plus(VIEWER_PADDING);
+                orig = testPoints[i].times(window_boundary);
+                expected = orig.divide(viewport.getContainerSize().x).plus(VIEWER_PADDING);
                 actual = viewport.windowToViewportCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
             }
@@ -230,7 +218,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('viewportToWindowCoordinates', function() {
@@ -241,9 +229,8 @@
 
             var orig, expected, actual;
             for (var i = 0; i < testPoints.length; i++){
-                // Test image is IMAGE_SIZE x IMAGE_SIZE
-                orig = testPoints[i].times(IMAGE_SIZE);
-                expected = orig.minus(VIEWER_PADDING).times(VIEWER_SIZE);
+                orig = testPoints[i].times(viewer.source.dimensions.x);
+                expected = orig.minus(VIEWER_PADDING).times(viewport.getContainerSize().x);
                 actual = viewport.viewportToWindowCoordinates(orig);
                 propEqual(actual, expected, "Coordinates converted correctly for " + orig);
             }
@@ -251,7 +238,7 @@
             start();
         };
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('viewportToImageZoom', function() {
@@ -271,7 +258,7 @@
         };
 
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
     asyncTest('imageToViewportZoom', function() {
@@ -292,7 +279,7 @@
         };
 
         viewer.addHandler('open', openHandler);
-        viewer.open('/test/data/testpattern.dzi');
+        viewer.open(DZI_PATH);
     });
 
-})();
\ No newline at end of file
+})();