leaflet-rotate 0.4.0 → 0.5.1

package/test/steps/bearing.steps.js

@@ -71,6 +71,348 @@ Then('the bearing reaches 90 degrees gradually', function () {
   assert.ok(Math.abs(this.animatedBearings.afterUnavailableHeading - 15) < 1e-6);
 });
 
+When('I set the map pitch to 45 degrees', async function () {
+  this.pitchProjection = await this.page.evaluate(() => {
+    const location = new L.LatLng(54, 12);
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    const flat = map.latLngToContainerPoint(location);
+    map.setPitch(90);
+    const maxPitch = map.getPitch();
+    map.setPitch(45);
+    const layerPoint = map.latLngToLayerPoint(location),
+      pitched = map.layerPointToContainerPoint(layerPoint),
+      roundTripPoint = map.containerPointToLayerPoint(pitched),
+      centerPoint = map.latLngToContainerPoint(map.getCenter()),
+      size = map.getSize();
+
+    return {
+      pitch: map.getPitch(),
+      maxPitch,
+      bearing: map.getBearing(),
+      flat,
+      pitched,
+      layerPoint,
+      roundTripPoint,
+      centerPoint,
+      size,
+      transform: map._rotatePane.style.transform,
+    };
+  });
+});
+
+Then('map coordinates stay consistent with the pitched view', function () {
+  const { pitch, maxPitch, bearing, flat, pitched, layerPoint, roundTripPoint, centerPoint, size, transform } = this.pitchProjection;
+  assert.equal(pitch, 45);
+  assert.equal(maxPitch, 85);
+  assert.ok(Math.abs(bearing - 30) < 1e-9);
+  assert.match(transform, /rotateX\(45deg\)/);
+  assert.ok(Math.abs(Number(transform.match(/perspective\(([\d.]+)px\)/)[1]) - size.y * 1.5) < 1);
+  assert.ok(Math.abs(flat.y - pitched.y) > 0.1);
+  const details = JSON.stringify({ flat, pitched, layerPoint, roundTripPoint, centerPoint, size });
+  assert.ok(Math.abs(roundTripPoint.x - layerPoint.x) < 1e-6, details);
+  assert.ok(Math.abs(roundTripPoint.y - layerPoint.y) < 1e-6, details);
+  assert.ok(Math.abs(centerPoint.x - size.x / 2) < 1, details);
+  assert.ok(Math.abs(centerPoint.y - size.y / 2) < 1, details);
+});
+
+When('I change pitch and bearing with Ctrl-drag', async function () {
+  await this.page.evaluate(() => {
+    map.setPitch(0);
+    map.setBearing(0);
+  });
+  const bounds = await this.page.locator('#map').boundingBox();
+  const start = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
+    panePos = await this.page.evaluate(() => {
+      const pos = map._getMapPanePos();
+      return [pos.x, pos.y];
+    });
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(start.x, start.y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(start.x + 80, start.y - 80, { steps: 4 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  this.ctrlPitchDrag = await this.page.evaluate(() => {
+    const pane = map._getMapPanePos();
+    return {
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+      finalPanePos: [pane.x, pane.y],
+    };
+  });
+  this.ctrlPitchDrag.panePos = panePos;
+});
+
+Then('pitch and bearing change without moving the map pane', function () {
+  assert.equal(this.ctrlPitchDrag.pitch, 40);
+  assert.equal(this.ctrlPitchDrag.bearing, 64);
+  for (let i = 0; i < 2; i++) {
+    assert.ok(Math.abs(this.ctrlPitchDrag.panePos[i] - this.ctrlPitchDrag.finalPanePos[i]) < 0.01);
+  }
+});
+
+When('I drag the pitched map', async function () {
+  const dragStart = await this.page.evaluate(() => {
+    map.setBearing(30);
+    map.setPitch(45);
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    const location = new L.LatLng(55, 10),
+      marker = new L.CircleMarker(location, { radius: 8 }).addTo(map),
+      pin = new L.Marker(location, {
+        icon: new L.DivIcon({ className: '', html: 'x', iconSize: [4, 4], iconAnchor: [2, 2] }),
+      }).addTo(map),
+      element = marker.getElement(),
+      pinElement = pin.getElement(),
+      container = map.getContainer(),
+      rect = container.getBoundingClientRect(),
+      start = [rect.left + rect.width / 2, rect.top + rect.height / 2];
+    const vectorScreenPoint = () => {
+      const bounds = element.getBBox();
+      const point = new DOMPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2)
+        .matrixTransform(element.getScreenCTM());
+      return [point.x, point.y];
+    };
+    const before = vectorScreenPoint(),
+      pinBoundsBefore = pinElement.getBoundingClientRect(),
+      pinBefore = [pinBoundsBefore.left + pinBoundsBefore.width / 2, pinBoundsBefore.top + pinBoundsBefore.height / 2];
+    window.__pitchPanTest = { element, pinElement, vectorScreenPoint, before, pinBefore, rect };
+    return start;
+  });
+  await this.page.mouse.move(dragStart[0], dragStart[1]);
+  await this.page.mouse.down();
+  await this.page.mouse.move(dragStart[0] + 70, dragStart[1] + 35, { steps: 4 });
+  await this.page.mouse.up();
+  this.pitchedDrag = await this.page.evaluate(() => {
+    const { pinElement, vectorScreenPoint, before, pinBefore } = window.__pitchPanTest,
+      after = vectorScreenPoint(),
+      pinBoundsAfter = pinElement.getBoundingClientRect(),
+      pinAfter = [pinBoundsAfter.left + pinBoundsAfter.width / 2, pinBoundsAfter.top + pinBoundsAfter.height / 2];
+    delete window.__pitchPanTest;
+    return {
+      vectorDelta: [after[0] - before[0], after[1] - before[1]],
+      pinDelta: [pinAfter[0] - pinBefore[0], pinAfter[1] - pinBefore[1]],
+      expected: map.latLngToContainerPoint(new L.LatLng(55, 10)),
+      pointerDelta: [70, 35],
+    };
+  });
+});
+
+Then('vector layers stay aligned with their map coordinates', function () {
+  if (this.vectorAlignment) {
+    assert.ok(this.zoomAfterOffCenter > 5, 'Off-center wheel zoom did not run');
+    assert.ok(
+      this.pitchTransformError < 0.1,
+      `Pitch changed the projected map pane by ${this.pitchTransformError}px`
+    );
+    const centerDistance = Math.hypot(
+      this.centerBeforeCtrlDrag[0] - this.centerAfterCtrlDrag[0],
+      this.centerBeforeCtrlDrag[1] - this.centerAfterCtrlDrag[1]
+    );
+    assert.ok(centerDistance < 0.01, `Map center moved ${centerDistance} projected pixels`);
+    for (const layer of this.vectorAlignment) {
+      const error = Math.hypot(layer.actual[0] - layer.expected[0], layer.actual[1] - layer.expected[1]);
+      assert.ok(error < 2, `${layer.name} is ${error}px from its geographic position: ${JSON.stringify(layer)}`);
+    }
+    return;
+  }
+  const { vectorDelta, pinDelta, pointerDelta } = this.pitchedDrag;
+  for (const delta of [vectorDelta, pinDelta]) {
+    assert.ok(Math.abs(delta[0] - pointerDelta[0]) < 2, JSON.stringify(this.pitchedDrag));
+    assert.ok(Math.abs(delta[1] - pointerDelta[1]) < 2, JSON.stringify(this.pitchedDrag));
+  }
+});
+
+When('I zoom off-center then rotate the map', async function () {
+  await this.page.evaluate(() => {
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    map.setBearing(30);
+    map.setPitch(0);
+  });
+  const mapBounds = await this.page.locator('#map').boundingBox(),
+    zoomPoint = { x: mapBounds.x + mapBounds.width * 0.9, y: mapBounds.y + mapBounds.height * 0.1 };
+  await this.page.mouse.move(zoomPoint.x, zoomPoint.y);
+  await this.page.mouse.wheel(0, -480);
+  await this.page.waitForTimeout(500);
+
+  const positions = await this.page.evaluate(() => {
+    const location = map.containerPointToLatLng([600, 170]),
+      marker = new L.Marker(location, {
+        icon: new L.DivIcon({ className: '', html: 'x', iconSize: [8, 8], iconAnchor: [4, 4] }),
+      }).addTo(map),
+      circle = new L.CircleMarker(location, { radius: 5 }).addTo(map),
+      measure = () => {
+        const expected = map.latLngToContainerPoint(location),
+          container = map.getContainer().getBoundingClientRect(),
+          vectorBounds = circle.getElement().getBoundingClientRect(),
+          markerBounds = marker.getElement().getBoundingClientRect();
+        return [
+          {
+            name: 'vector',
+            expected: [expected.x, expected.y],
+            actual: [vectorBounds.left + vectorBounds.width / 2 - container.left, vectorBounds.top + vectorBounds.height / 2 - container.top],
+          },
+          {
+            name: 'marker',
+            expected: [expected.x, expected.y],
+            actual: [markerBounds.left + markerBounds.width / 2 - container.left, markerBounds.top + markerBounds.height / 2 - container.top],
+          },
+        ];
+      };
+
+    const positions = [measure()];
+    const pane = map._rotatePane,
+      pivot = map._getPixelCenter(),
+      size = map.getSize(),
+      beforeTransform = new DOMMatrix(getComputedStyle(pane).transform),
+      testPoints = [[0, 0], [size.x, 0], [0, size.y], [size.x, size.y]]
+        .map(([x, y]) => ({
+          x,
+          y,
+          point: new DOMPoint(x, y).matrixTransform(beforeTransform),
+        }));
+    map.setPitch(1);
+    const afterTransform = new DOMMatrix(getComputedStyle(pane).transform),
+      pitch = Math.PI / 180,
+      perspective = size.y * 1.5;
+    const pitchTransformError = Math.max(...testPoints.map(({ x: pointX, y: pointY, point }) => {
+      const x = point.x / point.w - pivot.x,
+        y = point.y / point.w - pivot.y,
+        factor = perspective / (perspective - y * Math.sin(pitch)),
+        expectedX = pivot.x + x * factor,
+        expectedY = pivot.y + y * Math.cos(pitch) * factor,
+        actual = new DOMPoint(pointX, pointY).matrixTransform(afterTransform);
+      return Math.hypot(actual.x / actual.w - expectedX, actual.y / actual.w - expectedY);
+    }));
+    positions.push(measure());
+    map.setBearing(50);
+    positions.push(measure());
+    map.setPitch(35);
+    positions.push(measure());
+    map.panBy([50, 25], { animate: false });
+    positions.push(measure());
+    window.__rotateAlignment = { marker, circle, measure };
+    const center = map.project(map.getCenter());
+    return {
+      positions: positions.flatMap((position, index) => position.map(layer => ({ ...layer, step: index }))),
+      centerBeforeCtrlDrag: [center.x, center.y],
+      zoomAfterOffCenter: map.getZoom(),
+      pitchTransformError,
+    };
+  });
+  const bounds = await this.page.locator('#map').boundingBox(),
+    start = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(start.x, start.y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(start.x + 24, start.y - 18, { steps: 3 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  const afterCtrlDrag = await this.page.evaluate(() => {
+    const positions = window.__rotateAlignment.measure();
+    const center = map.project(map.getCenter());
+    window.__rotateAlignment.marker.remove();
+    window.__rotateAlignment.circle.remove();
+    delete window.__rotateAlignment;
+    return {
+      positions: positions.map(layer => ({ ...layer, step: 'Ctrl-drag' })),
+      center: [center.x, center.y],
+    };
+  });
+  this.vectorAlignment = [...positions.positions, ...afterCtrlDrag.positions];
+  this.centerBeforeCtrlDrag = positions.centerBeforeCtrlDrag;
+  this.centerAfterCtrlDrag = afterCtrlDrag.center;
+  this.zoomAfterOffCenter = positions.zoomAfterOffCenter;
+  this.pitchTransformError = positions.pitchTransformError;
+});
+
+When('I pan the map then Ctrl-drag', async function () {
+  await this.page.evaluate(() => {
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    map.setBearing(30);
+    map.setPitch(0);
+  });
+  const bounds = await this.page.locator('#map').boundingBox();
+  const x = bounds.x + bounds.width / 2,
+    y = bounds.y + bounds.height / 2;
+  await this.page.mouse.move(x, y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(x + 70, y + 35, { steps: 4 });
+  await this.page.mouse.up();
+  await this.page.waitForTimeout(400);
+  this.centerBeforeCtrlDrag = await this.page.evaluate(() => {
+    const center = map.project(map.getCenter()),
+      pane = map._getMapPanePos();
+    return { point: [center.x, center.y], pane: [pane.x, pane.y] };
+  });
+
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(x + 70, y + 35);
+  await this.page.mouse.down();
+  await this.page.mouse.move(x + 90, y + 20, { steps: 3 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  this.centerAfterCtrlDrag = await this.page.evaluate(() => {
+    const center = map.project(map.getCenter()),
+      pane = map._getMapPanePos();
+    return {
+      point: [center.x, center.y],
+      pane: [pane.x, pane.y],
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+    };
+  });
+});
+
+Then('the map center stays stable during Ctrl-drag', function () {
+  const distance = Math.hypot(
+    this.centerBeforeCtrlDrag.point[0] - this.centerAfterCtrlDrag.point[0],
+    this.centerBeforeCtrlDrag.point[1] - this.centerAfterCtrlDrag.point[1]
+  );
+  assert.ok(distance < 0.01, `Map center moved ${distance} projected pixels: ${JSON.stringify({
+    before: this.centerBeforeCtrlDrag,
+    after: this.centerAfterCtrlDrag,
+  })}`);
+});
+
+When('I Ctrl-drag while a wheel zoom is pending', async function () {
+  await this.page.evaluate(() => {
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    map.setBearing(0);
+    map.setPitch(0);
+    map.options.wheelDebounceTime = 500;
+  });
+  const bounds = await this.page.locator('#map').boundingBox();
+  const zoomPoint = { x: bounds.x + bounds.width * 0.9, y: bounds.y + bounds.height * 0.1 },
+    dragPoint = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+  await this.page.mouse.move(zoomPoint.x, zoomPoint.y);
+  await this.page.mouse.wheel(0, -120);
+  this.pendingZoomBeforeDrag = await this.page.evaluate(() => ({
+    zoom: map.getZoom(),
+    center: map.project(map.getCenter()),
+  }));
+
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(dragPoint.x, dragPoint.y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(dragPoint.x + 20, dragPoint.y - 15);
+  await this.page.waitForTimeout(600);
+  this.pendingZoomAfterDrag = await this.page.evaluate(() => ({
+    zoom: map.getZoom(),
+    center: map.project(map.getCenter()),
+  }));
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+});
+
+Then('the pending wheel zoom does not move the map', function () {
+  assert.equal(this.pendingZoomAfterDrag.zoom, this.pendingZoomBeforeDrag.zoom);
+  const distance = Math.hypot(
+    this.pendingZoomBeforeDrag.center.x - this.pendingZoomAfterDrag.center.x,
+    this.pendingZoomBeforeDrag.center.y - this.pendingZoomAfterDrag.center.y
+  );
+  assert.ok(distance < 0.01, `Map center moved ${distance} projected pixels`);
+});
+
 When('I fit the same bounds twice', async function () {
   this.zooms = await this.page.evaluate(() => {
     const bounds = [[60.81123, 25.71632], [60.81028, 25.73166], [60.7997, 25.72892], [60.80061, 25.71362]];
@@ -233,3 +575,196 @@ Then('its drag callbacks match the marker and pointer coordinates', function ()
   assert.ok(Math.abs(this.markerPosition.marker.lat - lastCallback[0]) < 1e-7, JSON.stringify(this.markerPosition));
   assert.ok(Math.abs(this.markerPosition.marker.lng - lastCallback[1]) < 1e-7, JSON.stringify(this.markerPosition));
 });
+
+When('I animate a zoom from a low level on a rotated map', async function () {
+  this.lowZoomJump = await this.page.evaluate(async () => {
+    const style = document.createElement('style');
+    style.textContent = '*{transition:none!important}';
+    document.head.appendChild(style);
+    map.setView([50, 5], 1, { animate: false });
+    map.setBearing(30);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    const element = circle.getElement(),
+      center = () => {
+        const bounds = element.getBoundingClientRect();
+        return [bounds.left + bounds.width / 2, bounds.top + bounds.height / 2];
+      };
+    map.setZoom(3);
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    const animated = center();
+    await new Promise(resolve => setTimeout(resolve, 500));
+    const settled = center();
+    style.remove();
+    return Math.hypot(animated[0] - settled[0], animated[1] - settled[1]);
+  });
+});
+
+Then('vector layers do not jump at the end of the zoom animation', function () {
+  assert.ok(this.lowZoomJump < 3, `Vector layer jumped ${this.lowZoomJump}px`);
+});
+
+When('I zoom around an off-center point on a pitched map', async function () {
+  this.zoomAroundDrift = await this.page.evaluate(async () => {
+    map.setView([50, 5], 6, { animate: false });
+    map.setBearing(30);
+    map.setPitch(60);
+    const size = map.getSize(),
+      point = new L.Point(size.x * 0.1, size.y * 0.9),
+      latlng = map.containerPointToLatLng(point);
+    map.setZoomAround(point, 7, { animate: false });
+    const drift = map.latLngToContainerPoint(latlng).distanceTo(point);
+    let animated = false;
+    map.once('zoomanim', () => animated = true);
+    map.setZoomAround(new L.Point(size.x * 0.85, size.y * 0.15), 8);
+    await new Promise(resolve => setTimeout(resolve, 400));
+    return { drift, animated };
+  });
+});
+
+Then('the point under the cursor stays in place', function () {
+  assert.ok(this.zoomAroundDrift.drift < 2, `Point under the cursor moved ${this.zoomAroundDrift.drift}px`);
+  assert.equal(this.zoomAroundDrift.animated, true, 'Zoom toward the horizon was not animated');
+});
+
+When('I right-drag horizontally below the map center', async function () {
+  await this.page.evaluate(() => {
+    map.setPitch(0);
+    map.setBearing(0);
+    window.__contextMenus = 0;
+    map.on('contextmenu', () => window.__contextMenus++);
+  });
+  const bounds = await this.page.locator('#map').boundingBox(),
+    start = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 + 50 };
+  await this.page.mouse.move(start.x, start.y);
+  await this.page.mouse.down({ button: 'right' });
+  await this.page.mouse.move(start.x + 50, start.y, { steps: 5 });
+  await this.page.mouse.up({ button: 'right' });
+  await this.page.locator('#map').dispatchEvent('contextmenu', { button: 2, clientX: start.x + 50, clientY: start.y });
+  this.rightDrag = await this.page.evaluate(() => ({
+    bearing: map.getBearing(),
+    contextMenus: window.__contextMenus,
+  }));
+});
+
+Then('the map rotates counterclockwise without opening the context menu', function () {
+  assert.ok(Math.abs(this.rightDrag.bearing - 320) < 1e-6, JSON.stringify(this.rightDrag));
+  assert.equal(this.rightDrag.contextMenus, 0);
+});
+
+When('a context menu event fires immediately on right-button press', async function () {
+  this.earlyContextMenu = await this.page.evaluate(() => {
+    let contextMenus = 0;
+    map.on('contextmenu', () => contextMenus++);
+    const pointer = L.version.startsWith('2.');
+    const Event = pointer ? PointerEvent : MouseEvent;
+    map.getContainer().dispatchEvent(new Event(pointer ? 'pointerdown' : 'mousedown', {
+      button: 2, buttons: 2, bubbles: true, cancelable: true,
+    }));
+    const menu = new MouseEvent('contextmenu', { button: 2, bubbles: true, cancelable: true });
+    map.getContainer().dispatchEvent(menu);
+    document.dispatchEvent(new Event(pointer ? 'pointerup' : 'mouseup', { button: 2 }));
+    return { prevented: menu.defaultPrevented, contextMenus };
+  });
+});
+
+Then('the early context menu is suppressed', function () {
+  assert.deepEqual(this.earlyContextMenu, { prevented: true, contextMenus: 0 });
+});
+
+When('I look at a high zoom map with a high pitch', async function () {
+  this.highPitch = await this.page.evaluate(async () => {
+    const results = [];
+    for (const pitch of [70, 85]) {
+      map.setView([51.45, -0.26], 18, { animate: false });
+      map.setBearing(30);
+      map.setPitch(pitch);
+      await new Promise(resolve => setTimeout(resolve, 300));
+      const layer = Object.values(map._layers).find(l => l._tiles && l._map && l._tileZoom !== undefined),
+        tileSize = layer.getTileSize(),
+        size = map.getSize(),
+        farY = map._getPitchFarY();
+      let missing = 0;
+      for (let x = 0; x <= size.x; x += size.x / 8) {
+        for (let y = Math.max(0, farY + 2); y <= size.y; y += size.y / 8) {
+          const tile = map.project(map.containerPointToLatLng([x, y]), layer._tileZoom).unscaleBy(tileSize).floor();
+          if (!layer._tiles[`${tile.x}:${tile.y}:${layer._tileZoom}`]) missing++;
+        }
+      }
+      const bounds = map.getBounds(), center = map.getCenter(), canvas = path._renderer._container;
+      results.push({
+        pitch,
+        farY,
+        missing,
+        tiles: Object.keys(layer._tiles).length,
+        canvas: [canvas.width, canvas.height],
+        boundsContainCenter: bounds.contains(center),
+        sky: map._pitchSky && map._pitchSky.style.display !== 'none',
+      });
+    }
+    return results;
+  });
+});
+
+Then('tile loading stays bounded and covers the visible map', function () {
+  for (const result of this.highPitch) {
+    const details = JSON.stringify(result);
+    assert.equal(result.missing, 0, details);
+    assert.ok(result.tiles < 300, details);
+    assert.ok(Math.max(...result.canvas) < 5000, details);
+    assert.equal(result.boundsContainCenter, true, details);
+    assert.ok(result.farY > 0, details);
+    assert.equal(result.sky, true, details);
+  }
+});
+
+When('I pan, zoom and change the pitch of a rotated map', async function () {
+  const page = this.page;
+  const setup = ([bearing, pitch]) => {
+    window.__tileErr = () => {
+      const layer = Object.values(map._layers).find(l => l._tiles && l._map && l._level),
+        level = layer._level,
+        point = new L.Point(150, 200),
+        ref = document.createElement('div'),
+        origin = map.project(map.containerPointToLatLng(point), level.zoom).round().subtract(level.origin);
+      ref.style.cssText = `position:absolute;width:0;height:0;left:${origin.x}px;top:${origin.y}px`;
+      level.el.appendChild(ref);
+      const rect = ref.getBoundingClientRect(), container = map.getContainer().getBoundingClientRect();
+      ref.remove();
+      return Math.hypot(rect.left - container.left - point.x, rect.top - container.top - point.y);
+    };
+    map.setView([51.45, -0.26], 10, { animate: false });
+    map.setBearing(bearing);
+    map.setPitch(pitch);
+    map.panBy([60, 60], { animate: false });
+  };
+  const box = await page.locator('#map').boundingBox();
+  this.tileAlignment = [];
+  for (const view of [[30, 30], [30, 0]]) {
+    await page.evaluate(setup, view);
+    await page.mouse.move(box.x + box.width * 0.7, box.y + box.height * 0.6);
+    for (const delta of [-200, 200]) {
+      const zoomEnd = page.evaluate(() => new Promise(resolve => { map.once('zoomend', () => resolve()); setTimeout(resolve, 2000); }));
+      await page.mouse.wheel(0, delta);
+      await zoomEnd;
+      await page.waitForTimeout(500);
+      this.tileAlignment.push({ view, delta, error: await page.evaluate(() => window.__tileErr()) });
+    }
+  }
+  this.tileAlignment.push(await page.evaluate(async () => {
+    map.setView([51.45, -0.26], 10, { animate: false });
+    map.setPitch(85);
+    map.setView([51.45, -0.26], 10, { animate: false });
+    const centerError = map.project(map.getCenter()).distanceTo(map.project([51.45, -0.26]));
+    map.setPitch(0);
+    map.setBearing(30);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    return { view: 'pitch 85 to 0', centerError, error: window.__tileErr() };
+  }));
+});
+
+Then('the map is centered and the tiles stay aligned with the map coordinates', function () {
+  for (const result of this.tileAlignment) {
+    assert.ok(result.error < 3, JSON.stringify(this.tileAlignment));
+    assert.ok(!(result.centerError > 2), JSON.stringify(this.tileAlignment));
+  }
+});

package/test/steps/example.steps.js

@@ -76,32 +76,62 @@ When('I rotate a map with the default rotate control', async function () {
     const displayWhenRotated = getComputedStyle(control).display;
     testMap.setBearing(0);
     const displayAfterReset = getComputedStyle(control).display;
+    testMap.setPitch(30);
+    const displayWhenPitched = getComputedStyle(control).display;
+    testMap.setPitch(0);
+    const displayAfterPitchReset = getComputedStyle(control).display;
     testMap.remove();
     container.remove();
-    return [displayAtZero, displayWhenRotated, displayAfterReset];
+    return [displayAtZero, displayWhenRotated, displayAfterReset, displayWhenPitched, displayAfterPitchReset];
   });
 });
 
 Then('the default rotate control visibility follows the bearing', function () {
-  assert.deepEqual(this.rotateControlVisibility, ['none', 'block', 'none']);
+  assert.deepEqual(this.rotateControlVisibility, ['none', 'block', 'none', 'block', 'none']);
 });
 
 When('I drag the rotate control', async function () {
-  this.controlBearing = await this.page.evaluate(() => {
-    map.setBearing(0);
-    const link = map.rotateControl._link;
-    link.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 100, clientY: 100 }));
-    document.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 135, clientY: 100 }));
-    document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, clientX: 135, clientY: 100 }));
-    return map.getBearing();
-  });
+  await this.page.evaluate(() => { map.setPitch(0); map.setBearing(0); });
+  const box = await this.page.locator('.leaflet-control-rotate-toggle').boundingBox(),
+    x = box.x + box.width / 2,
+    y = box.y + box.height / 2;
+  await this.page.mouse.move(x, y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(x + 50, y, { steps: 5 });
+  await this.page.mouse.move(x + 50, y + 200, { steps: 5 });
+  await this.page.mouse.move(x + 50, y + 160, { steps: 5 });
+  await this.page.mouse.up();
+  await this.page.waitForTimeout(700);
+  this.controlDrag = await this.page.evaluate(() => ({
+    bearing: map.getBearing(),
+    pitch: map.getPitch(),
+    arrow: map.rotateControl._arrow.style.transform,
+  }));
+});
+
+Then('the map bearing and pitch follow the control drag', function () {
+  // a drag must not be followed by the click reset
+  assert.ok(Math.abs(this.controlDrag.bearing - 40) < 1e-6, JSON.stringify(this.controlDrag));
+  assert.ok(Math.abs(this.controlDrag.pitch - 20) < 1e-6, JSON.stringify(this.controlDrag));
+  assert.match(this.controlDrag.arrow, /rotateX\((20|19\.9)[\d.]*deg\) rotate\((40|39\.9)[\d.]*deg\)/);
 });
 
-Then('the map bearing follows the control drag', function () {
-  assert.equal(this.controlBearing, 35);
+When('I click the rotate control on a rotated and pitched map', async function () {
+  await this.page.evaluate(() => { map.setBearing(120); map.setPitch(45); });
+  await this.page.locator('.leaflet-control-rotate-toggle').click();
+  this.controlReset = [await this.page.evaluate(() => ({ bearing: map.getBearing(), pitch: map.getPitch() }))];
+  await this.page.waitForTimeout(800);
+  this.controlReset.push(await this.page.evaluate(() => ({ bearing: map.getBearing(), pitch: map.getPitch() })));
 });
 
-When('I activate compass mode on a permission-based device', async function () {
+Then('the map animates back to north and zero pitch', function () {
+  const [start, end] = this.controlReset;
+  assert.ok(start.bearing > 0 || start.pitch > 0, JSON.stringify(this.controlReset));
+  assert.equal(end.bearing, 0);
+  assert.equal(end.pitch, 0);
+});
+
+When('I enable compass bearing on a permission-based device', async function () {
   this.permissionRequests = await this.page.evaluate(async () => {
     const descriptor = Object.getOwnPropertyDescriptor(window, 'DeviceOrientationEvent');
     window.permissionRequests = 0;
@@ -114,24 +144,21 @@ When('I activate compass mode on a permission-based device', async function () {
         }
       },
     });
-    const click = () => map.rotateControl._link.dispatchEvent(new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    }));
-    click();
-    click();
-    await Promise.resolve();
+    map.compassBearing.disable();
+    map.compassBearing.enable();
+    await new Promise(resolve => setTimeout(resolve));
+    const enabled = map.compassBearing.enabled();
     if (descriptor) {
       Object.defineProperty(window, 'DeviceOrientationEvent', descriptor);
     } else {
       delete window.DeviceOrientationEvent;
     }
-    return window.permissionRequests;
+    return { requests: window.permissionRequests, enabled };
   });
 });
 
 Then('device-orientation permission is requested', function () {
-  assert.equal(this.permissionRequests, 1);
+  assert.deepEqual(this.permissionRequests, { requests: 1, enabled: false });
 });
 
 When('I apply compass heading readings', async function () {
@@ -327,8 +354,8 @@ When('I inspect debugger geometry after resizing and moving the map', async func
       return [point.x - targets[index][0], point.y - targets[index][1]];
     });
     const pixelBounds = map.getPixelBounds();
-    const debugMin = JSON.parse(document.getElementById('ogbx').textContent);
-    const debugMax = JSON.parse(document.getElementById('ogby').textContent);
+    const debugMin = document.getElementById('ogbx').textContent.split(',').map(Number);
+    const debugMax = document.getElementById('ogby').textContent.split(',').map(Number);
     return {
       size: [size.x, size.y],
       paneSizes: ['.panebounds.rotate', '.panebounds.main'].map(selector => {
@@ -343,10 +370,10 @@ When('I inspect debugger geometry after resizing and moving the map', async func
       ],
       pixelOrigin: [read('ogx') - map._pixelOrigin.x, read('ogy') - map._pixelOrigin.y],
       pixelBounds: [
-        debugMin.x - pixelBounds.min.x,
-        debugMin.y - pixelBounds.min.y,
-        debugMax.x - pixelBounds.max.x,
-        debugMax.y - pixelBounds.max.y,
+        debugMin[0] - pixelBounds.min.x,
+        debugMin[1] - pixelBounds.min.y,
+        debugMax[0] - pixelBounds.max.x,
+        debugMax[1] - pixelBounds.max.y,
       ],
       pointer: [
         read('llx') - window.debugMouseEvent.latlng[0],
@@ -392,7 +419,7 @@ When('I use the example zoom controls', async function () {
 
 When('I rotate the example markers from the debugger', async function () {
   this.markerRotationsBefore = await this.page.evaluate(() => markers.map(marker => marker.options.rotation));
-  await this.page.getByRole('button', { name: 'Rotate Markers' }).click();
+  await this.page.getByRole('button', { name: 'Rotate', exact: true }).click();
   await this.page.waitForTimeout(600);
   this.markerRotationsAfter = await this.page.evaluate(() => markers.map(marker => marker.options.rotation));
 });