leaflet-rotate 0.5.0 → 0.5.2

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));
 });

package/test/steps/gestures.steps.js

@@ -53,6 +53,61 @@ When('I move a two-finger pinch gesture', async function () {
   });
 });
 
+When('I drag two fingers vertically and then pinch with touch pitch enabled', async function () {
+  this.touchPitch = await this.page.evaluate(() => {
+    map.setView([55, 10], 6, { animate: false });
+    map.setPitch(0);
+    map.setBearing(20);
+    map.touchPitch.enable();
+    const container = map.getContainer();
+    const rect = container.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const touches = (x1, y1, x2, y2) => [
+      new Touch({ identifier: 1, target: container, clientX: centerX + x1, clientY: centerY + y1 }),
+      new Touch({ identifier: 2, target: container, clientX: centerX + x2, clientY: centerY + y2 }),
+    ];
+    const dispatch = (target, type, activeTouches, changedTouches = activeTouches) => {
+      target.dispatchEvent(new TouchEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        touches: activeTouches,
+        targetTouches: activeTouches,
+        changedTouches,
+      }));
+    };
+    const state = () => ({ pitch: map.getPitch(), bearing: map.getBearing(), zoom: map.getZoom() });
+
+    // both fingers up by 60px: pitch +30°
+    dispatch(container, 'touchstart', touches(-40, 0, 40, 0));
+    for (let dy = -10; dy >= -60; dy -= 10) {
+      dispatch(document, 'touchmove', touches(-40, dy, 40, dy));
+    }
+    dispatch(document, 'touchend', [], touches(-40, -60, 40, -60));
+    const afterPitch = state();
+
+    // fingers spreading apart vertically: pinch, pitch unchanged
+    dispatch(container, 'touchstart', touches(-40, 0, 40, 0));
+    for (let d = 10; d <= 40; d += 10) {
+      dispatch(document, 'touchmove', touches(-40 - d, -d, 40 + d, d));
+    }
+    dispatch(document, 'touchend', [], touches(-80, -40, 80, 40));
+    const afterPinch = state();
+
+    map.touchPitch.disable();
+    map.setPitch(0);
+    return { afterPitch, afterPinch };
+  });
+});
+
+Then('only the vertical two-finger drag changes the pitch', function () {
+  const { afterPitch, afterPinch } = this.touchPitch;
+  assert.ok(Math.abs(afterPitch.pitch - 30) < 1e-6, JSON.stringify(this.touchPitch));
+  assert.ok(Math.abs(afterPitch.bearing - 20) < 1e-6, JSON.stringify(this.touchPitch));
+  assert.equal(afterPitch.zoom, 6);
+  assert.ok(Math.abs(afterPinch.pitch - 30) < 1e-6, JSON.stringify(this.touchPitch));
+});
+
 When('I drag a constrained marker on a rotated map', async function () {
   await this.page.evaluate(() => {
     map.options.zoomAnimation = false;

package/test/steps/{bearing.steps.js → rotation.steps.js}

@@ -167,10 +167,8 @@ When('I drag the pitched map', async function () {
       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 bounds = element.getBoundingClientRect();
+      return [bounds.left + bounds.width / 2, bounds.top + bounds.height / 2];
     };
     const before = vectorScreenPoint(),
       pinBoundsBefore = pinElement.getBoundingClientRect(),
@@ -183,18 +181,42 @@ When('I drag the pitched map', async function () {
   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,
+    const { pinElement, vectorScreenPoint } = window.__pitchPanTest,
       after = vectorScreenPoint(),
       pinBoundsAfter = pinElement.getBoundingClientRect(),
-      pinAfter = [pinBoundsAfter.left + pinBoundsAfter.width / 2, pinBoundsAfter.top + pinBoundsAfter.height / 2];
-    delete window.__pitchPanTest;
+      pinAfter = [pinBoundsAfter.left + pinBoundsAfter.width / 2, pinBoundsAfter.top + pinBoundsAfter.height / 2],
+      container = map.getContainer().getBoundingClientRect(),
+      expected = map.latLngToContainerPoint(new L.LatLng(55, 10));
     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],
+      vector: [after[0] - container.left, after[1] - container.top],
+      expected: [expected.x, expected.y],
+      vectorError: Math.hypot(after[0] - container.left - expected.x, after[1] - container.top - expected.y),
+      pinError: Math.hypot(pinAfter[0] - container.left - expected.x, pinAfter[1] - container.top - expected.y),
     };
   });
+  this.repeatedPitchPanErrors = [];
+  for (let i = 0; i < 2; i++) {
+    const bounds = await this.page.locator('#map').boundingBox(),
+      center = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+    await this.page.mouse.move(center.x, center.y);
+    await this.page.mouse.down();
+    await this.page.mouse.move(center.x + 40, center.y + 20, { steps: 3 });
+    await this.page.mouse.up();
+    this.repeatedPitchPanErrors.push(await this.page.evaluate(() => {
+      const { element, pinElement } = window.__pitchPanTest,
+        bounds = element.getBoundingClientRect(),
+        vector = [bounds.left + bounds.width / 2, bounds.top + bounds.height / 2],
+        pinBounds = pinElement.getBoundingClientRect(),
+        pin = [pinBounds.left + pinBounds.width / 2, pinBounds.top + pinBounds.height / 2],
+        container = map.getContainer().getBoundingClientRect(),
+        expected = map.latLngToContainerPoint(new L.LatLng(55, 10));
+      return [
+        Math.hypot(vector[0] - container.left - expected.x, vector[1] - container.top - expected.y),
+        Math.hypot(pin[0] - container.left - expected.x, pin[1] - container.top - expected.y),
+      ];
+    }));
+  }
+  await this.page.evaluate(() => { delete window.__pitchPanTest; });
 });
 
 Then('vector layers stay aligned with their map coordinates', function () {
@@ -215,10 +237,92 @@ Then('vector layers stay aligned with their map coordinates', function () {
     }
     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));
+  assert.ok(this.pitchedDrag.vectorError < 2, JSON.stringify(this.pitchedDrag));
+  assert.ok(this.pitchedDrag.pinError < 2, JSON.stringify(this.pitchedDrag));
+  for (const errors of this.repeatedPitchPanErrors) {
+    assert.ok(errors[0] < 2 && errors[1] < 2, JSON.stringify(this.repeatedPitchPanErrors));
+  }
+});
+
+When('I pan a highly pitched map in several directions', { timeout: 30000 }, async function () {
+  this.pitchPanErrors = [];
+  this.page.on('pageerror', error => this.pitchPanErrors.push(error.message));
+  await this.page.evaluate(() => {
+    map.setView([50, 5], 5, { animate: false });
+    map.setBearing(45);
+    map.setPitch(70);
+    map.options.inertia = false;
+    const size = map.getSize(),
+      locations = [[0.35, 0.35], [0.65, 0.35], [0.35, 0.65], [0.65, 0.65]]
+        .map(([x, y]) => map.containerPointToLatLng([size.x * x, size.y * y])),
+      marker = new L.Marker(locations[0]).addTo(map),
+      vector = new L.CircleMarker(locations[0], { radius: 4 }).addTo(map),
+      bounds = element => {
+        const rect = element.getBoundingClientRect();
+        return [rect.x, rect.y, rect.width, rect.height];
+      };
+    window.__pitchRelease = {
+      locations,
+      resets: 0,
+      measure: () => ({
+        points: locations.map(ll => map.latLngToContainerPoint(ll)),
+        marker: bounds(marker.getElement()),
+        vector: bounds(vector.getElement()),
+      }),
+    };
+    map.on('viewreset', () => window.__pitchRelease.resets++);
+  });
+  this.pitchReleases = [];
+  for (const [dx, dy] of [[0, -60], [-60, 0], [30, 50], [30, 10]]) {
+    const bounds = await this.page.locator('#map').boundingBox(),
+      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 + dx, y + dy, { steps: 10 });
+    const before = await this.page.evaluate(() => window.__pitchRelease.measure());
+    await this.page.mouse.up();
+    await this.page.waitForTimeout(50);
+    this.pitchReleases.push(await this.page.evaluate(before => {
+      const state = window.__pitchRelease,
+        after = state.measure(),
+        center = map.project(map.getCenter()),
+        size = map.getSize(),
+        bearing = map.getBearing() * Math.PI / 180,
+        pitch = map.getPitch() * Math.PI / 180,
+        perspective = size.y * 1.5,
+        projectionErrors = state.locations.map(ll => {
+          const point = map.project(ll).subtract(center),
+            x = point.x * Math.cos(bearing) - point.y * Math.sin(bearing),
+            y = point.x * Math.sin(bearing) + point.y * Math.cos(bearing),
+            scale = perspective / (perspective - y * Math.sin(pitch)),
+            actual = map.latLngToContainerPoint(ll);
+          return Math.hypot(actual.x - size.x / 2 - x * scale, actual.y - size.y / 2 - y * Math.cos(pitch) * scale);
+        });
+      return { before, after, resets: state.resets, projectionErrors };
+    }, before));
+  }
+  this.pitchPanToError = await this.page.evaluate(() => {
+    const center = map.getCenter(),
+      target = new L.LatLng(center.lat + 0.1, center.lng + 0.1);
+    map.panTo(target, { animate: false });
+    return map.latLngToContainerPoint(target).distanceTo(map.getSize().divideBy(2));
+  });
+});
+
+Then('releasing the map does not jump or reset its layers', function () {
+  assert.deepEqual(this.pitchPanErrors, [], 'Pitched dragging must not throw JavaScript errors');
+  assert.ok(this.pitchPanToError < 1.5, `panTo missed its target by ${this.pitchPanToError}px`);
+  for (const result of this.pitchReleases) {
+    assert.equal(result.resets, 0, 'Releasing a pan must not reset the view or reload its tiles');
+    for (let i = 0; i < result.before.points.length; i++) {
+      const before = result.before.points[i], after = result.after.points[i];
+      assert.ok(Math.hypot(before.x - after.x, before.y - after.y) < 0.1, JSON.stringify(result));
+    }
+    for (const layer of ['marker', 'vector']) {
+      assert.ok(result.before[layer].every((value, i) => Math.abs(value - result.after[layer][i]) < 0.1), JSON.stringify(result));
+    }
+    assert.ok(result.projectionErrors.every(error => error < 1.5), JSON.stringify(result));
   }
 });
 
@@ -575,3 +679,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));
+  }
+});