Add tests to ensure correct pointer tracking

test/browser/spec/ol/MapBrowserEventHandler.test.js

@@ -281,4 +281,48 @@ describe('ol/MapBrowserEventHandler', function () {
       expect(dblclickSpy.called).to.not.be.ok();
     });
   });
+
+  describe('Event target change', function () {
+    let target, handler, element, down1, down2, up1, up2;
+    beforeEach(function () {
+      target = document.createElement('div');
+      handler = new MapBrowserEventHandler(
+        new Map({
+          target: target,
+        })
+      );
+
+      element = handler.element_;
+      down1 = new Event('pointerdown', {target: element});
+      down1.clientX = 0;
+      down1.clientY = 0;
+      down1.button = 0;
+      down1.pointerId = 1;
+      down2 = new Event('pointerdown', {target: element});
+      down2.clientX = 0;
+      down2.clientY = 0;
+      down2.button = 0;
+      down2.pointerId = 2;
+      up1 = new Event('pointerup', {target: element.firstChild});
+      up1.clientX = 0;
+      up1.clientY = 0;
+      up1.button = 0;
+      up1.pointerId = 3;
+      up2 = new Event('pointerup', {target: element.firstChild});
+      up2.clientX = 0;
+      up2.clientY = 0;
+      up2.button = 0;
+      up2.pointerId = 4;
+    });
+
+    it('keeps activePointers up to date when event target changes', function () {
+      element.dispatchEvent(down1);
+      element.dispatchEvent(down2);
+      expect(handler.activePointers_[0].pointerId).to.be(1);
+      expect(handler.activePointers_[1].pointerId).to.be(2);
+      document.dispatchEvent(up1);
+      document.dispatchEvent(up2);
+      expect(handler.activePointers_).to.have.length(0);
+    });
+  });
 });

test/browser/spec/ol/interaction/pointer.test.js

@@ -1,7 +1,10 @@
-import Event from '../../../../../src/ol/events/Event.js';
+import Layer from '../../../../../src/ol/layer/Layer.js';
 import Map from '../../../../../src/ol/Map.js';
 import MapBrowserEvent from '../../../../../src/ol/MapBrowserEvent.js';
+import MapBrowserEventHandler from '../../../../../src/ol/MapBrowserEventHandler.js';
+import OlEvent from '../../../../../src/ol/events/Event.js';
 import PointerInteraction from '../../../../../src/ol/interaction/Pointer.js';
+import View from '../../../../../src/ol/View.js';
 
 describe('ol.interaction.Pointer', function () {
   describe('#handleEvent', function () {
@@ -10,7 +13,7 @@ describe('ol.interaction.Pointer', function () {
 
     beforeEach(function () {
       const type = 'pointerdown';
-      const pointerEvent = new Event();
+      const pointerEvent = new OlEvent();
       pointerEvent.type = type;
       pointerEvent.pointerId = 0;
       pointerEvent.preventDefault = function () {
@@ -130,4 +133,66 @@ describe('ol.interaction.Pointer', function () {
       expect(handleUpCalled).to.be(true);
     });
   });
+
+  describe("With a map's MapBrowserEventHandler", function () {
+    let target, interaction, element, down1, down2, up1, up2;
+    beforeEach(function () {
+      target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+      interaction = new PointerInteraction({});
+      const handler = new MapBrowserEventHandler(
+        new Map({
+          target: target,
+          layers: [
+            new Layer({
+              render: () => {},
+            }),
+          ],
+          interactions: [interaction],
+          view: new View({
+            center: [0, 0],
+            zoom: 0,
+          }),
+        })
+      );
+      handler.map_.renderSync();
+      element = handler.element_;
+      down1 = new Event('pointerdown', {target: element});
+      down1.clientX = 0;
+      down1.clientY = 0;
+      down1.button = 0;
+      down1.pointerId = 1;
+      down2 = new Event('pointerdown', {target: element});
+      down2.clientX = 0;
+      down2.clientY = 0;
+      down2.button = 0;
+      down2.pointerId = 2;
+      up1 = new Event('pointerup', {target: element.firstChild});
+      up1.clientX = 0;
+      up1.clientY = 0;
+      up1.button = 0;
+      up1.pointerId = 1;
+      up2 = new Event('pointerup', {target: element.firstChild});
+      up2.clientX = 0;
+      up2.clientY = 0;
+      up2.button = 0;
+      up2.pointerId = 2;
+    });
+
+    afterEach(function () {
+      document.body.removeChild(target);
+    });
+
+    it('tracks pointers correctly', function () {
+      element.dispatchEvent(down1);
+      element.dispatchEvent(down2);
+      expect(interaction.targetPointers[0].pointerId).to.be(1);
+      expect(interaction.targetPointers[1].pointerId).to.be(2);
+      document.dispatchEvent(up1);
+      document.dispatchEvent(up2);
+      expect(interaction.targetPointers).to.have.length(0);
+    });
+  });
 });