Merge pull request #613 from avandecreme/master

Fix Cross Origin policy not working (#612)

src/openseadragon.js

@@ -175,9 +175,6 @@
   *     these paths, prefer setting the option.prefixUrl rather than overriding
   *     every image path directly through this setting.
   *
-  * @property {Object} [tileHost=null]
-  *     TODO: Implement this. Currently not used.
-  *
   * @property {Boolean} [debugMode=false]
   *     TODO: provide an in-screen panel providing event detail feedback.
   *

src/viewer.js

@@ -409,10 +409,10 @@ $.Viewer = function( options ) {
             width:             this.navigatorWidth,
             height:            this.navigatorHeight,
             autoResize:        this.navigatorAutoResize,
-            tileHost:          this.tileHost,
             prefixUrl:         this.prefixUrl,
             viewer:            this,
-            navigatorRotate:   this.navigatorRotate
+            navigatorRotate:   this.navigatorRotate,
+            crossOriginPolicy: this.crossOriginPolicy
         });
     }
 
@@ -505,7 +505,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                         height:      this.referenceStripHeight,
                         width:       this.referenceStripWidth,
                         tileSources: this.tileSources,
-                        tileHost:    this.tileHost,
                         prefixUrl:   this.prefixUrl,
                         viewer:      this
                     });
@@ -1290,6 +1289,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     blendTime: _this.blendTime,
                     alwaysBlend: _this.alwaysBlend,
                     minPixelRatio: _this.minPixelRatio,
+                    crossOriginPolicy: _this.crossOriginPolicy,
                     debugMode: _this.debugMode
                 });
 

test/coverage.html

@@ -39,7 +39,7 @@
     <script src="/src/referencestrip.js"></script>
     <script src="/src/displayrectangle.js"></script>
     <script src="/src/spring.js"></script>
-    <script src="/src/imageLoader.js"></script>
+    <script src="/src/imageloader.js"></script>
     <script src="/src/tile.js"></script>
     <script src="/src/overlay.js"></script>
     <script src="/src/drawer.js"></script>

test/modules/basic.js

@@ -301,4 +301,77 @@
         viewer.open('/test/data/testpattern.dzi');
     });
 
+
+    // The Wikipedia logo has CORS enabled
+    var corsImg = 'http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png';
+
+    // PhantomJS always taint the canvas, so we only run some tests on browsers
+    // supporting CORS images.
+    function browserSupportsImgCrossOrigin(callback) {
+        var img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = function() {
+            var canvas = document.createElement("canvas");
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0);
+            callback(!isCanvasTainted(ctx));
+        };
+        img.src = corsImg;
+    }
+
+    function isCanvasTainted(context) {
+        var isTainted = false;
+        try {
+            // We test if the canvas is tainted by retrieving data from it.
+            // An exception will be raised if the canvas is tainted.
+            var url = context.getImageData(0, 0, 1, 1);
+        } catch (e) {
+            isTainted = true;
+        }
+        return isTainted;
+    }
+
+    asyncTest( 'CrossOriginPolicyMissing', function () {
+
+        viewer.crossOriginPolicy = false;
+        viewer.open( {
+            type: 'legacy-image-pyramid',
+            levels: [ {
+                    url: corsImg,
+                    width: 135,
+                    height: 155
+                } ]
+        } );
+        viewer.addHandler('tile-drawn', function() {
+            ok(isCanvasTainted(viewer.drawer.context), "Canvas should be tainted.");
+            start();
+        });
+
+    } );
+
+    asyncTest( 'CrossOriginPolicyAnonymous', function () {
+
+        browserSupportsImgCrossOrigin(function(supported) {
+            if (!supported) {
+                expect(0);
+                start();
+            } else {
+                viewer.crossOriginPolicy = 'Anonymous';
+                viewer.open( {
+                    type: 'legacy-image-pyramid',
+                    levels: [ {
+                            url: corsImg,
+                            width: 135,
+                            height: 155
+                        } ]
+                } );
+                viewer.addHandler('tile-drawn', function() {
+                    ok(!isCanvasTainted(viewer.drawer.context), "Canvas should not be tainted.");
+                    start();
+                });
+            }
+        });
+
+    } );
+
 })();

test/modules/navigator.js

@@ -843,4 +843,29 @@
         viewer.addHandler('open', openHandler);
     });
 
+    asyncTest('Viewer options transmitted to navigator', function() {
+
+        viewer = OpenSeadragon({
+            id:            'example',
+            prefixUrl:     '/build/openseadragon/images/',
+            tileSources:   ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
+            springStiffness: 100, // Faster animation = faster tests
+            showNavigator:  true,
+            collectionMode: true,
+            crossOriginPolicy: 'Anonymous'
+        });
+        viewer.addHandler('open', function openHandler() {
+            viewer.removeHandler('open', openHandler);
+
+            var navigator = viewer.navigator;
+
+            equal(navigator.prefixUrl, viewer.prefixUrl,
+                "Prefix URL should be transmitted to the navigator.");
+            equal(navigator.crossOriginPolicy, viewer.crossOriginPolicy,
+                "Cross origin policy should be transmitted to the navigator.");
+            start();
+        });
+
+    });
+
 })();