Add test for layer hit on cross-origin canvas

test/spec/ol/renderer/canvas/imagelayer.test.js

@@ -66,6 +66,189 @@ describe('ol.renderer.canvas.ImageLayer', function () {
     });
   });
 
+  describe('#forEachLayerAtPixel Image CORS', function () {
+    let map,
+      target,
+      imageExtent,
+      projection,
+      sourceCross,
+      source,
+      imageLayer,
+      imageLayerCross;
+    beforeEach(function (done) {
+      projection = new Projection({
+        code: 'custom-image',
+        units: 'pixels',
+        extent: [0, 0, 200, 200],
+      });
+      target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+      imageExtent = [0, 0, 20, 20];
+      source = new Static({
+        url: `https://openlayers.org/assets/theme/img/logo70.png`,
+        projection: projection,
+        imageExtent: imageExtent,
+      });
+      imageLayer = new ImageLayer({
+        source: source,
+      });
+      sourceCross = new Static({
+        url: `https://openlayers.org/assets/theme/img/logo70.png`,
+        projection: projection,
+        imageExtent: imageExtent,
+        crossOrigin: 'anonymous',
+      });
+      imageLayerCross = new ImageLayer({
+        source: sourceCross,
+      });
+      map = new Map({
+        pixelRatio: 1,
+        target: target,
+        layers: [imageLayer, imageLayerCross],
+        view: new View({
+          projection: projection,
+          center: [10, 10],
+          zoom: 1,
+          maxZoom: 8,
+        }),
+      });
+      let loadedCount = 0;
+      [source, sourceCross].forEach(function (source) {
+        source.once('imageloadend', function () {
+          loadedCount++;
+          if (loadedCount === 2) {
+            done();
+          }
+        });
+      });
+    });
+
+    afterEach(function () {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('should detect pixels even if there is no color because neither crossOrigin or extent is set', function () {
+      imageLayerCross.setVisible(false);
+      imageLayer.setVisible(true);
+      map.renderSync();
+      let has = false;
+      function hasLayer() {
+        has = true;
+      }
+      map.forEachLayerAtPixel([50, 50], hasLayer);
+      expect(has).to.be(true);
+      has = false;
+      map.forEachLayerAtPixel([10, 10], hasLayer);
+      expect(has).to.be(true);
+    });
+
+    it('should not detect pixels outside of the layer extent with crossOrigin set', function () {
+      imageLayerCross.setVisible(true);
+      imageLayer.setVisible(false);
+      map.renderSync();
+      let has = false;
+      function hasLayer() {
+        has = true;
+      }
+      map.forEachLayerAtPixel([50, 50], hasLayer);
+      expect(has).to.be(true);
+      has = false;
+      map.forEachLayerAtPixel([10, 10], hasLayer);
+      expect(has).to.be(false);
+    });
+
+    it('should not detect pixels outside of the layer extent with extent set', function () {
+      imageLayerCross.setVisible(true);
+      imageLayerCross.setExtent(imageExtent);
+      imageLayer.setVisible(false);
+      map.renderSync();
+      let has = false;
+      function hasLayer() {
+        has = true;
+      }
+      map.forEachLayerAtPixel([50, 50], hasLayer);
+      expect(has).to.be(true);
+      has = false;
+      map.forEachLayerAtPixel([10, 10], hasLayer);
+      expect(has).to.be(false);
+    });
+  });
+
+  describe('#getDataAtPixel', function () {
+    let map, target, source, imageLayer;
+    beforeEach(function (done) {
+      const projection = new Projection({
+        code: 'custom-image',
+        units: 'pixels',
+        extent: [0, 0, 200, 200],
+      });
+      target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+      const imageExtent = [0, 0, 20, 20];
+      source = new Static({
+        url: 'spec/ol/data/dot.png',
+        projection: projection,
+        imageExtent: imageExtent,
+      });
+      imageLayer = new ImageLayer({
+        source: source,
+        extent: imageExtent,
+      });
+      map = new Map({
+        pixelRatio: 1,
+        target: target,
+        layers: [imageLayer],
+        view: new View({
+          projection: projection,
+          center: [10, 10],
+          zoom: 1,
+          maxZoom: 8,
+        }),
+      });
+      source.on('imageloadend', function () {
+        done();
+      });
+    });
+
+    afterEach(function () {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('should not detect pixels outside of the layer extent', function () {
+      map.renderSync();
+      const pixel = [10, 10];
+      const frameState = map.frameState_;
+      const hitTolerance = 0;
+      const layerRenderer = imageLayer.getRenderer();
+      const data = layerRenderer.getDataAtPixel(
+        pixel,
+        frameState,
+        hitTolerance
+      );
+      expect(data).to.be(null);
+    });
+
+    it('should detect pixels in the layer extent', function () {
+      map.renderSync();
+      const pixel = [50, 50];
+      const frameState = map.frameState_;
+      const hitTolerance = 0;
+      const layerRenderer = imageLayer.getRenderer();
+      const data = layerRenderer.getDataAtPixel(
+        pixel,
+        frameState,
+        hitTolerance
+      );
+      expect(data.length > 0).to.be(true);
+    });
+  });
+
   describe('Image rendering', function () {
     let map, div, layer;