leaflet-rotate 0.5.2 → 0.5.4

package/test/features/navigation-bounds.feature

@@ -0,0 +1,33 @@
+@navigation-bounds
+Feature: Navigation limits on rotated and pitched maps
+  Background:
+    Given a standalone map with navigation limits is open
+
+  @issue-75
+  Scenario Outline: Zoom and programmatic navigation respect the transformed viewport
+    When navigation rotation is <enabled> with bearing <bearing> and pitch <pitch>
+    Then minimum zoom 14 applies to view changes, wheel zoom and pinch zoom
+    And maximum bounds constrain programmatic pans and camera changes
+
+    Examples:
+      | enabled | bearing | pitch |
+      | false   | 0       | 0     |
+      | true    | 0       | 0     |
+      | true    | 45      | 0     |
+      | true    | 135     | 45    |
+      | true    | 270     | 85    |
+
+  @issue-75
+  Scenario Outline: Viscosity limits the geographic footprint during dragging
+    When navigation rotation is <enabled> with bearing <bearing> and pitch <pitch>
+    Then viscosity 1 prevents crossing maximum bounds during a mouse drag
+    And viscosities 0 and 0.5 allow progressively less overshoot
+    And maximum bounds are restored after drag inertia
+
+    Examples:
+      | enabled | bearing | pitch |
+      | false   | 0       | 0     |
+      | true    | 0       | 0     |
+      | true    | 45      | 0     |
+      | true    | 135     | 45    |
+      | true    | 270     | 85    |

package/test/features/overlays.feature

@@ -47,6 +47,22 @@ Feature: Rotating a Leaflet map
     When I focus a marker near the edge of a rotated map
     Then the map center remains unchanged
 
+  @issue-76
+  Scenario: Marker popups still work after dragging and resetting the bearing
+    When I drag between city markers and reset north before clicking Trondheim
+    Then the Trondheim popup opens without jumping back to London
+
+  Scenario Outline: PanInside preserves visibility and minimal movement near bearing zero
+    When I keep padded points visible with rotation <rotate> and bearing <bearing>
+    Then panInside moves only enough to reach the padded viewport
+
+    Examples:
+      | rotate | bearing |
+      | false  | 0       |
+      | true   | 0       |
+      | true   | 2.8     |
+      | true   | 2.9     |
+
   @issue-51
   Scenario: Opening an edge popup pans only enough to keep it visible
     When I open a popup near the edge of a rotated map
@@ -56,3 +72,12 @@ Feature: Rotating a Leaflet map
   Scenario: Opening a popup in a second rotated map does not move it
     When I open a popup in a second rotated map with map listeners
     Then the second map center remains unchanged and its popup stays anchored
+
+  Scenario Outline: Markers keep Leaflet DOM rendering when the map prefers Canvas
+    When I add markers to a Canvas-preferred map at pitch <pitch>
+    Then the markers use Leaflet DOM icons while vector paths use Canvas
+
+    Examples:
+      | pitch |
+      | 0     |
+      | 45    |

package/test/features/pitch.feature

@@ -0,0 +1,19 @@
+Feature: Pitched map rendering
+  Background:
+    Given a standalone pitched map is open
+
+  @issue-75
+  Scenario: Raster layers restore perspective after toggling and late attachment
+    Then raster perspective follows pitch on late and reattached layers
+
+  @issue-75
+  Scenario: Pitched raster surfaces and markers remain visible after camera changes and compass reset
+    Then pitched raster surfaces draw loaded tiles after rapid camera changes
+
+  @issue-75
+  Scenario: Raster tile levels follow the first camera change after accumulated pans
+    Then raster tiles remain aligned after panning before their first pitch change
+
+  @issue-75
+  Scenario: Resetting a pitched view after animated zoom restores the ground camera
+    Then pitched view resets preserve the ground perspective after accumulated pans

package/test/index.html

@@ -162,20 +162,84 @@
 				version: 8,
 				sources: {
 					esri: { type: 'raster', tiles: [tiles], tileSize: 256, maxzoom: 18 },
-					polygon: { type: 'geojson', data: { type: 'Polygon', coordinates: [[...polygonLatLngs, polygonLatLngs[0]].map(([lat, lng]) => [lng, lat])] } },
-					route: { type: 'geojson', data: { type: 'LineString', coordinates: route.map(([lat, lng]) => [lng, lat]) } },
+					overlays: { type: 'geojson', data: { type: 'FeatureCollection', features: [] } },
 				},
 				layers: [
 					{ id: 'esri', type: 'raster', source: 'esri' },
-					{ id: 'polygon', type: 'fill', source: 'polygon', paint: { 'fill-color': '#3388ff', 'fill-opacity': 0.2 } },
-					{ id: 'polygon-line', type: 'line', source: 'polygon', paint: { 'line-color': '#3388ff', 'line-width': 3 } },
-					{ id: 'route', type: 'line', source: 'route', paint: { 'line-color': 'yellow', 'line-width': 3 } },
+					{ id: 'overlay-fills', type: 'fill', source: 'overlays', filter: ['==', ['geometry-type'], 'Polygon'], paint: { 'fill-color': ['get', 'fillColor'], 'fill-opacity': ['get', 'fillOpacity'] } },
+					{ id: 'overlay-lines', type: 'line', source: 'overlays', filter: ['!=', ['geometry-type'], 'Point'], paint: { 'line-color': ['get', 'color'], 'line-opacity': ['get', 'opacity'], 'line-width': ['get', 'weight'] } },
+					{ id: 'overlay-points', type: 'circle', source: 'overlays', filter: ['==', ['geometry-type'], 'Point'], paint: { 'circle-radius': ['get', 'radius'], 'circle-color': ['get', 'fillColor'], 'circle-opacity': ['get', 'fillOpacity'], 'circle-stroke-color': ['get', 'color'], 'circle-stroke-opacity': ['get', 'opacity'], 'circle-stroke-width': ['get', 'weight'] } },
 				],
 			},
 		}) : null;
 		if (ml) {
 			ml.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));
-			for (const name in places) new maplibregl.Marker().setLngLat([places[name][1], places[name][0]]).setPopup(new maplibregl.Popup().setText(name)).addTo(ml);
+			const mirrors = new Map();
+			let mirrorFrame;
+			const syncOverlays = () => {
+				mirrorFrame = null;
+				if (!ml.getSource('overlays')) return;
+				const active = new Set(), features = [];
+				lf.eachLayer(layer => {
+					if (layer instanceof L.Marker) {
+						active.add(layer);
+						let marker = mirrors.get(layer);
+						if (!marker) {
+							const element = document.createElement('div');
+							element.style.width = element.style.height = '0px';
+							const icon = layer.options.icon.createIcon();
+							icon.style.position = 'absolute';
+							icon.style.transform = `scale(${layer.options.scale ?? 1})`;
+							element.appendChild(icon);
+							marker = new maplibregl.Marker({ element, rotationAlignment: 'viewport', pitchAlignment: 'viewport', draggable: Boolean(layer.dragging?.enabled()) });
+							marker.on('drag', () => {
+								const ll = marker.getLngLat();
+								layer.setLatLng([ll.lat, ll.lng]);
+							});
+							layer.on('move', scheduleOverlays);
+							const tooltip = layer.getTooltip();
+							if (tooltip) marker.setPopup(new maplibregl.Popup().setHTML(tooltip.getContent()));
+							mirrors.set(layer, marker);
+							marker.setLngLat([layer.getLatLng().lng, layer.getLatLng().lat]).addTo(ml);
+						}
+						const ll = layer.getLatLng();
+						marker.setLngLat([ll.lng, ll.lat]);
+						marker.setRotation(layer._getIconBearing() * 180 / Math.PI);
+						marker.getElement().style.opacity = layer.options.opacity;
+					} else if (layer instanceof L.Path && !layer._marker) {
+						let feature = layer.toGeoJSON();
+						if (layer instanceof L.Circle) {
+							const center = layer.getLatLng(), angular = layer.getRadius() / 6371000,
+								lat = center.lat * Math.PI / 180, lng = center.lng * Math.PI / 180;
+							const ring = Array.from({ length: 65 }, (_, i) => {
+								const angle = i * 2 * Math.PI / 64;
+								const y = Math.asin(Math.sin(lat) * Math.cos(angular) + Math.cos(lat) * Math.sin(angular) * Math.cos(angle));
+								const x = lng + Math.atan2(Math.sin(angle) * Math.sin(angular) * Math.cos(lat), Math.cos(angular) - Math.sin(lat) * Math.sin(y));
+								return [x * 180 / Math.PI, y * 180 / Math.PI];
+							});
+							feature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ring] } };
+						}
+						const o = layer.options;
+						feature.properties = {
+							color: o.color, fillColor: o.fillColor || o.color,
+							opacity: o.stroke ? o.opacity : 0, fillOpacity: o.fill ? o.fillOpacity : 0,
+							weight: o.weight || 0, radius: layer instanceof L.CircleMarker ? layer.getRadius() : 0,
+						};
+						features.push(feature);
+					}
+				});
+				for (const [layer, marker] of mirrors) {
+					if (!active.has(layer)) {
+						layer.off('move', scheduleOverlays);
+						marker.remove();
+						mirrors.delete(layer);
+					}
+				}
+				ml.getSource('overlays').setData({ type: 'FeatureCollection', features });
+			};
+			const scheduleOverlays = () => { mirrorFrame ??= requestAnimationFrame(syncOverlays); };
+			lf.on('layeradd layerremove move zoom rotate pitch', scheduleOverlays);
+			ml.on('load', syncOverlays);
 		}
 
 		/**
@@ -229,6 +293,11 @@
 
 		const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 		const frame = () => new Promise(resolve => requestAnimationFrame(resolve));
+		const clientPoint = (el, fx, fy) => {
+			const r = el.getBoundingClientRect();
+			// MouseEvent client coordinates are integers; anchors must use the same pixels.
+			return { clientX: Math.round(r.left + el.clientLeft + el.clientWidth * fx), clientY: Math.round(r.top + el.clientTop + el.clientHeight * fy) };
+		};
 		/**
 		 * Create synthetic mouse/pointer/wheel input for one renderer.
 		 * Positions are container fractions (0..1 inside, outside values allowed).
@@ -244,8 +313,7 @@
 			let pressed = 0, button = 0;
 			/** Convert fractional container coordinates to viewport client pixels. */
 			const at = (fx, fy) => {
-				const r = el.getBoundingClientRect();
-				return { clientX: r.left + r.width * fx, clientY: r.top + r.height * fy };
+				return clientPoint(el, fx, fy);
 			};
 			/** Hit-test layers/markers; use body outside this map so document listeners still run. */
 			const target = ({ clientX, clientY }) => {
@@ -467,14 +535,25 @@
 			}
 			const anchor = scenario.anchor && (() => {
 				const r = m.el.getBoundingClientRect();
-				return scenario.anchor.map(([fx, fy]) => [r.width * fx, r.height * fy]);
+				return scenario.anchor.map(([fx, fy]) => {
+					const p = clientPoint(m.el, fx, fy);
+					return [p.clientX - r.left - m.el.clientLeft, p.clientY - r.top - m.el.clientTop];
+				});
 			})();
-			const latlng = anchor && m.toLatLng(anchor[0]);
+			let latlng = anchor && m.toLatLng(anchor[0]);
+			const input = driver(key), down = input.down;
+			if (anchor) {
+				input.down = async (...args) => {
+					// A composite rotation + pan anchors the point when the plain pan starts.
+					if (!args[2]?.ctrlKey && !args[2]?.button) latlng = m.toLatLng(anchor[0]);
+					await down(...args);
+				};
+			}
 			const inertia = key === 'lf' && scenario.noInertia ? lf.options.inertia : undefined;
 			if (inertia !== undefined) lf.options.inertia = false;
 			try {
 				if (scenario.goTo) await runGoTo(key, scenario.goTo);
-				else await scenario.run(driver(key));
+				else await scenario.run(input);
 				if (key === 'ml' && scenario.noInertia) ml.stop();
 				await sleep(scenario.settle || 900);
 			} finally {

package/test/steps/example.steps.js

@@ -59,6 +59,24 @@ Then('every debugger rotation control matches the map bearing', function () {
   });
 });
 
+When('I place the debugger overlays over a marker', async function () {
+  this.markerHit = await this.page.evaluate(() => {
+    map.setView(markers[0].getLatLng(), 6, { animate: false });
+    map.setBearing(0);
+    const icon = markers[0]._icon;
+    const box = icon.getBoundingClientRect();
+    const mapBox = map._mapPane.getBoundingClientRect();
+    const x = box.left + box.width / 2, y = box.top + box.height / 2;
+    map.___rotatePivotDot.style.left = `${x - mapBox.left - 5}px`;
+    map.___rotatePivotDot.style.top = `${y - mapBox.top - 5}px`;
+    return document.elementFromPoint(x, y) === icon;
+  });
+});
+
+Then('the marker receives the pointer events', function () {
+  assert.equal(this.markerHit, true);
+});
+
 When('I rotate a map with the default rotate control', async function () {
   this.rotateControlVisibility = await this.page.evaluate(() => {
     const container = document.createElement('div');

package/test/steps/harness.steps.js

@@ -0,0 +1,207 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { Given, Then, When } from '@cucumber/cucumber';
+import { generateMessages } from '@cucumber/gherkin';
+import { IdGenerator, SourceMediaType } from '@cucumber/messages';
+
+Given('the interactive regression page is open', { timeout: 30000 }, async function () {
+  this.harnessErrors = [];
+  this.page.on('pageerror', error => this.harnessErrors.push(error.message));
+  await this.page.route(/server\.arcgisonline\.com|tile\.openstreetmap\.org/, route =>
+    route.fulfill({ contentType: 'image/svg+xml', body: '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"/>' }));
+  const version = process.env.LEAFLET_VERSION === '2' ? '2' : '1';
+  await this.page.goto(`${this.baseUrl}/test/index.html?leaflet=${version}&maplibre=0&debug=0`, {
+    waitUntil: 'domcontentloaded',
+  });
+  await this.page.waitForFunction(() => window.runScenario && window.scenarios);
+  await this.page.evaluate(() => { map.options.inertia = false; });
+  assert.match(await this.page.evaluate(() => L.version), version === '2' ? /^2\.0\.0-alpha/ : /^1\.9/);
+});
+
+Then('every interactive scenario is listed in the BDD examples', async function () {
+  const source = await readFile(new URL('../features/harness.feature', import.meta.url), 'utf8');
+  const messages = generateMessages(source, 'harness.feature', SourceMediaType.TEXT_X_CUCUMBER_GHERKIN_PLAIN, {
+    includeGherkinDocument: true,
+    includePickles: false,
+    includeSource: false,
+    newId: IdGenerator.incrementing(),
+  });
+  const document = messages.find(message => message.gherkinDocument)?.gherkinDocument;
+  assert.ok(document, 'Could not parse harness.feature');
+  const examples = document.feature.children.flatMap(child =>
+    child.scenario?.examples.flatMap(example => {
+      const index = example.tableHeader.cells.findIndex(cell => cell.value === 'scenario');
+      return example.tableBody.map(row => row.cells[index].value);
+    }) || []);
+  const scenarios = await this.page.evaluate(() => scenarios.map(scenario => scenario.name));
+  assert.equal(new Set(examples).size, examples.length, 'Duplicate BDD examples');
+  assert.deepEqual(examples.sort(), scenarios.sort(), 'Interactive scenarios and BDD examples must match');
+});
+
+Then('active drags return to their starting position without turning clicks into drags', async function () {
+  await this.page.evaluate(() => {
+    const parent = document.createElement('div');
+    parent.style.cssText = 'position:absolute;z-index:10000;left:100px;top:100px;width:100px;height:100px;transform:scale(2);transform-origin:0 0';
+    const element = document.createElement('div');
+    element.id = 'returning-drag';
+    element.style.cssText = 'width:20px;height:20px;background:red';
+    parent.append(element);
+    document.body.append(parent);
+    const draggable = new L.Draggable(element);
+    draggable.enable();
+    window.returningDrag = { draggable, parent, element, starts: 0 };
+    draggable.on('dragstart', () => returningDrag.starts++);
+    L.DomUtil.setPosition(element, new L.Point(0, 0));
+  });
+  for (const offset of [0, 1]) {
+    const rect = await this.page.locator('#returning-drag').boundingBox();
+    const start = { x: rect.x + 10, y: rect.y + 10 };
+    await this.page.mouse.move(start.x, start.y);
+    await this.page.mouse.down();
+    await this.page.mouse.move(start.x + 30, start.y + 30, { steps: 3 });
+    await this.page.mouse.move(start.x + offset, start.y);
+    await this.page.mouse.up();
+    const result = await this.page.evaluate(() => {
+      const { element, draggable, starts } = returningDrag;
+      const position = L.DomUtil.getPosition(element);
+      L.DomUtil.setPosition(element, new L.Point(0, 0));
+      return { x: position.x, y: position.y, starts, moving: draggable._moving };
+    });
+    assert.ok(Math.abs(result.x - offset / 2) < 1e-7, JSON.stringify(result));
+    assert.equal(result.y, 0, JSON.stringify(result));
+    assert.equal(result.starts, offset + 1, JSON.stringify(result));
+    assert.equal(result.moving, false, JSON.stringify(result));
+  }
+  const rect = await this.page.locator('#returning-drag').boundingBox();
+  await this.page.mouse.move(rect.x + 10, rect.y + 10);
+  await this.page.mouse.down();
+  await this.page.mouse.move(rect.x + 11, rect.y + 10);
+  await this.page.mouse.up();
+  const click = await this.page.evaluate(() => {
+    const { parent, element, draggable, starts } = returningDrag;
+    const position = L.DomUtil.getPosition(element);
+    draggable.disable();
+    parent.remove();
+    return { x: position.x, y: position.y, starts };
+  });
+  assert.deepEqual(click, { x: 0, y: 0, starts: 2 });
+});
+
+When('I run the interactive scenario {string}', { timeout: 30000 }, async function (name) {
+  this.harnessResult = await this.page.evaluate(async name => {
+    const scenario = scenarios.find(scenario => scenario.name === name);
+    if (!scenario) throw new Error(`Unknown interactive scenario: ${name}`);
+    const initial = { lat: 50, lng: 5, zoom: 5, bearing: 0, pitch: 0, ...scenario.view };
+    map.setView([initial.lat, initial.lng], initial.zoom, { animate: false });
+    map.setPitch(initial.pitch);
+    map.setBearing(initial.bearing);
+    const markerLocations = markers.map(marker => marker.getLatLng());
+    const probe = new L.CircleMarker([initial.lat, initial.lng], { radius: 4 }).addTo(map);
+    const bearings = [];
+    const onRotate = () => bearings.push(map.getBearing());
+    map.on('rotate', onRotate);
+    const anchorProbe = () => {
+      if (scenario.anchor) {
+        const [x, y] = scenario.anchor[0];
+        probe.setLatLng(map.containerPointToLatLng([map.getSize().x * x, map.getSize().y * y]));
+      }
+    };
+    map.once('rotate', anchorProbe);
+    const results = await runScenario(scenario);
+    map.off('rotate', onRotate);
+    map.off('rotate', anchorProbe);
+    const [{ end, drift }] = results;
+    const center = map.project(map.getCenter());
+    if (scenario.goTo) probe.setLatLng(map.getCenter());
+    const expected = map.latLngToContainerPoint(probe.getLatLng());
+    const rect = probe.getElement().getBoundingClientRect();
+    const container = map.getContainer().getBoundingClientRect();
+    const vectorError = Math.hypot(
+      rect.left + rect.width / 2 - container.left - map.getContainer().clientLeft - expected.x,
+      rect.top + rect.height / 2 - container.top - map.getContainer().clientTop - expected.y,
+    );
+    probe.remove();
+    const destination = scenario.goTo;
+    const boundsLayer = { Circle: circle, Polygon: polygon, Path: path, 'Rectangle (fit from z 0)': rectangle }[destination];
+    return {
+      name, initial, end, drift, vectorError, bearings,
+      centerMovement: center.distanceTo(map.project([initial.lat, initial.lng], end.zoom)),
+      centerError: map.latLngToContainerPoint(map.getCenter()).distanceTo(map.getSize().divideBy(2)),
+      markersUnchanged: markers.every((marker, index) => marker.getLatLng().equals(markerLocations[index])),
+      dragging: Boolean(map.shiftKeyRotate._dragging || map.dragging._draggable._moving),
+      destinationDistance: destination && !boundsLayer ? map.getCenter().distanceTo(new L.LatLng(...places[destination])) : null,
+      boundsVisible: boundsLayer ? map.getBounds().contains(boundsLayer.getBounds()) : null,
+    };
+  }, name);
+});
+
+Then('the interactive camera result is {string}', function (outcome) {
+  const r = this.harnessResult, details = JSON.stringify(r);
+  assert.deepEqual(this.harnessErrors, [], 'Interactive scenario raised a browser error');
+  assert.ok(Object.values(r.end).every(Number.isFinite), details);
+  assert.ok(r.end.pitch >= 0 && r.end.pitch <= 85, details);
+  assert.ok(r.end.bearing >= 0 && r.end.bearing < 360, details);
+  assert.equal(r.markersUnchanged, true, details);
+  assert.equal(r.dragging, false, details);
+  assert.ok(r.centerError < 1.5, details);
+  assert.ok(r.vectorError < 3, details);
+  if (r.drift !== null) assert.ok(r.drift < 3, details);
+  const bearingDelta = ((r.end.bearing - r.initial.bearing + 540) % 360) - 180;
+  if (['zoom in', 'zoom out', 'pan', 'navigate'].includes(outcome)) {
+    assert.ok(Math.abs(bearingDelta) < 0.1, details);
+    assert.ok(Math.abs(r.end.pitch - r.initial.pitch) < 0.1, details);
+  }
+  switch (outcome) {
+    case 'pitch up':
+      assert.ok(r.end.pitch > r.initial.pitch + 1, details);
+      assert.ok(Math.abs(bearingDelta) < 0.1, details);
+      break;
+    case 'pitch zero':
+      assert.equal(r.end.pitch, 0, details);
+      break;
+    case 'pitch max':
+      assert.ok(Math.abs(r.end.pitch - 85) < 0.1, details);
+      break;
+    case 'clockwise':
+    case 'counterclockwise':
+      assert.ok(outcome === 'clockwise' ? bearingDelta > 1 : bearingDelta < -1, details);
+      assert.equal(r.end.pitch, r.initial.pitch, details);
+      break;
+    case 'pitch and bearing':
+    case 'rotate then pan':
+    case 'zoom and rotate':
+      assert.ok(r.bearings.some(bearing => Math.abs(((bearing - r.initial.bearing + 540) % 360) - 180) > 1), details);
+      assert.ok(r.end.pitch > r.initial.pitch + 1, details);
+      if (outcome === 'zoom and rotate') assert.ok(r.end.zoom > r.initial.zoom, details);
+      break;
+    case 'shift rotate':
+      assert.ok(Math.abs(bearingDelta - 30) < 0.1, details);
+      assert.equal(r.end.pitch, r.initial.pitch, details);
+      break;
+    case 'cancel zoom':
+      assert.equal(r.end.zoom, r.initial.zoom, details);
+      assert.ok(r.end.pitch > 1 && Math.abs(bearingDelta) > 1, details);
+      break;
+    case 'zoom in':
+    case 'zoom out':
+      assert.ok(outcome === 'zoom in' ? r.end.zoom > r.initial.zoom : r.end.zoom < r.initial.zoom, details);
+      break;
+    case 'pan':
+      assert.equal(r.end.zoom, r.initial.zoom, details);
+      break;
+    case 'navigate':
+      if (r.destinationDistance !== null) {
+        assert.ok(r.destinationDistance < 1, details);
+        assert.equal(r.end.zoom, 10, details);
+      } else {
+        assert.equal(r.boundsVisible, true, details);
+      }
+      break;
+    default:
+      assert.fail(`Unknown camera expectation: ${outcome}`);
+  }
+  if (!['zoom in', 'zoom out', 'zoom and rotate', 'pan', 'rotate then pan', 'navigate'].includes(outcome)) {
+    assert.equal(r.end.zoom, r.initial.zoom, details);
+    assert.ok(r.centerMovement < 1.5, details);
+  }
+});

package/test/steps/navigation-bounds.steps.js

@@ -0,0 +1,195 @@
+import assert from 'node:assert/strict';
+import { After, Given, Then, When } from '@cucumber/cucumber';
+
+After({ tags: '@navigation-bounds' }, function () {
+  assert.deepEqual(this.navigationErrors, [], 'No browser errors during navigation');
+});
+
+Given('a standalone map with navigation limits is open', { timeout: 30000 }, async function () {
+  this.navigationErrors = [];
+  this.page.on('pageerror', error => this.navigationErrors.push(error.message));
+  await this.page.clock.install();
+  const version = process.env.LEAFLET_VERSION === '2' ? '2.0.0-alpha.1' : '1.9.4';
+  const script = process.env.LEAFLET_VERSION === '2' ? 'leaflet-global-src.js' : 'leaflet-src.js';
+  await this.page.route('**/test/navigation-bounds.html', route => route.fulfill({
+    contentType: 'text/html',
+    body: `<!DOCTYPE html><html><head>
+      <link rel="stylesheet" href="https://unpkg.com/leaflet@${version}/dist/leaflet.css">
+      <script src="https://unpkg.com/leaflet@${version}/dist/${script}"></script>
+      <script>globalThis.L = globalThis.leaflet || globalThis.L;</script>
+      <script src="../dist/leaflet-rotate-src.js"></script>
+      </head><body style="margin:0"><div id="map" style="width:800px;height:600px"></div></body></html>`,
+  }));
+  await this.page.goto(`${this.baseUrl}/test/navigation-bounds.html`);
+});
+
+When('navigation rotation is {word} with bearing {int} and pitch {int}', async function (enabled, bearing, pitch) {
+  this.navigationOptions = { rotate: enabled === 'true', bearing, pitch };
+  await this.page.evaluate(options => {
+    window.map = new L.Map('map', {
+      ...options, center: [48.8582601, 2.29449985], zoom: 17,
+      minZoom: 14, maxZoom: 20, maxBounds: [[48.8162, 2.2424], [48.9022, 2.416]],
+      maxBoundsViscosity: 1, inertia: false, zoomAnimation: false,
+      rotateControl: false, touchZoom: true, touchRotate: false, touchPitch: false,
+      bounceAtZoomLimits: false,
+    });
+    window.navigationSnapshot = () => {
+      const size = map.getSize();
+      const [min, max] = map._rotate ? map._getPitchedContainerBounds(0) : [new L.Point(0, 0), size];
+      const footprint = new L.Bounds([
+        [min.x, min.y], [max.x, min.y], [min.x, max.y], [max.x, max.y],
+      ].map(point => map.project(map.containerPointToLatLng(point))));
+      const bounds = map.options.maxBounds;
+      const limits = new L.Bounds(map.project(bounds.getNorthWest()), map.project(bounds.getSouthEast()));
+      const errors = ['x', 'y'].map(axis => {
+        if (footprint.getSize()[axis] > limits.getSize()[axis]) {
+          // Leaflet centers an oversized viewport, leaving equal overhang on both sides.
+          return Math.abs(footprint.getCenter()[axis] - limits.getCenter()[axis]);
+        }
+        return Math.max(0, limits.min[axis] - footprint.min[axis], footprint.max[axis] - limits.max[axis]);
+      });
+      return { error: Math.max(...errors), center: map.getCenter(), zoom: map.getZoom(),
+        footprint: { min: footprint.min, max: footprint.max }, limits: { min: limits.min, max: limits.max } };
+    };
+  }, this.navigationOptions);
+});
+
+Then('minimum zoom 14 applies to view changes, wheel zoom and pinch zoom', async function () {
+  const zooms = await this.page.evaluate(async () => {
+    const zooms = [];
+    for (const operation of [
+      () => map.setView(map.getCenter(), 1, { animate: false }),
+      () => map.setZoom(1, { animate: false }),
+      () => map.zoomOut(10),
+      () => map.setZoomAround([200, 400], 1),
+      () => map.fitBounds([[40, -10], [55, 10]], { animate: false }),
+    ]) {
+      map.setZoom(17, { animate: false });
+      operation();
+      zooms.push(map.getZoom());
+    }
+    map.setZoom(14, { animate: false });
+    return zooms;
+  });
+  assert.deepEqual(zooms.slice(0, 4), [14, 14, 14, 14]);
+  assert.ok(zooms[4] >= 14, `fitBounds zoom: ${zooms[4]}`);
+  await this.page.mouse.move(400, 300);
+  await this.page.mouse.wheel(0, 2000);
+  await this.page.waitForTimeout(200);
+  assert.equal(await this.page.evaluate(() => map.getZoom()), 14);
+  const pinch = await this.page.evaluate(async () => {
+    const touch = (x, id) => new Touch({ identifier: id, target: map.getContainer(), clientX: x, clientY: 300 });
+    const dispatch = (type, xs) => map.getContainer().dispatchEvent(new TouchEvent(type, {
+      bubbles: true, cancelable: true, touches: xs.map((x, id) => touch(x, id)),
+    }));
+    dispatch('touchstart', [200, 600]);
+    dispatch('touchmove', [350, 450]);
+    const during = map.getZoom();
+    dispatch('touchend', []);
+    await new Promise(requestAnimationFrame);
+    return { during, after: map.getZoom() };
+  });
+  assert.deepEqual(pinch, { during: 14, after: 14 });
+});
+
+Then('maximum bounds constrain programmatic pans and camera changes', { timeout: 30000 }, async function () {
+  const checks = await this.page.evaluate(async () => {
+    const checks = [];
+    const record = name => checks.push({ name, ...navigationSnapshot() });
+    const settle = async () => {
+      while (map._panAnim?._inProgress) await new Promise(requestAnimationFrame);
+    };
+    for (const location of [[48.92, 2.20], [48.92, 2.46], [48.78, 2.20], [48.78, 2.46]]) {
+      map.setView(location, 17, { animate: false });
+      await settle();
+      record('setView');
+      map.panTo(location, { animate: false });
+      await settle();
+      record('panTo');
+    }
+    for (const offset of [[2000, 0], [-2000, 0], [0, 2000], [0, -2000]]) {
+      map.panBy(offset, { animate: false });
+      await settle();
+      record('panBy');
+      const limited = map._limitOffset(new L.Point(...offset), map.options.maxBounds);
+      map.panBy(limited, { animate: false });
+      await settle();
+      record('inertia offset');
+    }
+    if (map._rotate) {
+      for (const [bearing, pitch] of [[45, 0], [135, 45], [270, 85], [0, 0]]) {
+        map.setBearing(bearing);
+        map.setPitch(pitch);
+        await settle();
+        record('camera change');
+      }
+    }
+    map.setZoom(14, { animate: false });
+    await settle();
+    record('minimum zoom / oversized viewport');
+    return checks;
+  });
+  for (const check of checks) assert.ok(check.error <= 2, JSON.stringify(check));
+});
+
+async function drag(page, offset, viscosity, inertia = false) {
+  await page.evaluate(({ viscosity, inertia }) => {
+    map.options.maxBoundsViscosity = viscosity;
+    map.options.inertia = inertia;
+    map.setView([48.8582601, 2.29449985], 15, { animate: false });
+    window.navigationDragFrames = [];
+    window.navigationInertiaFrames = [];
+    window.navigationReleased = false;
+    map.once('dragend', () => { window.navigationReleased = true; });
+    window.navigationMoveDone = new Promise(resolve => map.once('moveend', resolve));
+    map.off('drag', window.recordNavigationDrag);
+    map.off('move', window.recordNavigationInertia);
+    window.recordNavigationDrag = () => navigationDragFrames.push(navigationSnapshot());
+    window.recordNavigationInertia = () => {
+      if (navigationReleased) navigationInertiaFrames.push(navigationSnapshot());
+    };
+    map.on('drag', recordNavigationDrag);
+    map.on('move', recordNavigationInertia);
+  }, { viscosity, inertia });
+  if (inertia) {
+    const now = await page.evaluate(() => Date.now());
+    await page.clock.pauseAt(now + 100);
+  }
+  await page.mouse.move(320, 450);
+  await page.mouse.down();
+  for (let step = 1; step <= 8; step++) {
+    await page.mouse.move(320 + offset[0] * step / 8, 450 + offset[1] * step / 8);
+    if (inertia) await page.clock.runFor(16);
+    else if (step < 8) await page.waitForTimeout(10);
+  }
+  await page.mouse.up();
+  if (inertia) await page.clock.resume();
+  await page.evaluate(() => navigationMoveDone);
+  await page.waitForFunction(() => !map._panAnim?._inProgress && !map.dragging.moving());
+  return { during: await page.evaluate(() => navigationDragFrames), after: await page.evaluate(() => navigationSnapshot()),
+    inertia: await page.evaluate(() => navigationInertiaFrames) };
+}
+
+Then('viscosity 1 prevents crossing maximum bounds during a mouse drag', { timeout: 30000 }, async function () {
+  for (const offset of [[3000, 0], [-3000, 0], [0, 900], [0, -100]]) {
+    const result = await drag(this.page, offset, 1);
+    assert.ok(result.during.length > 0, 'Expected actual mouse drag frames');
+    for (const frame of [...result.during, result.after]) assert.ok(frame.error <= 2, JSON.stringify(frame));
+  }
+});
+
+Then('viscosities 0 and 0.5 allow progressively less overshoot', { timeout: 30000 }, async function () {
+  const free = await drag(this.page, [3000, 0], 0);
+  const viscous = await drag(this.page, [3000, 0], 0.5);
+  const freeError = free.during.at(-1).error;
+  const viscousError = viscous.during.at(-1).error;
+  assert.ok(freeError > 20, JSON.stringify(free));
+  assert.ok(viscousError > 2 && viscousError < freeError, JSON.stringify({ freeError, viscousError }));
+  for (const result of [free, viscous]) assert.ok(result.after.error <= 2, JSON.stringify(result.after));
+});
+
+Then('maximum bounds are restored after drag inertia', { timeout: 30000 }, async function () {
+  const result = await drag(this.page, [80, 20], 1, true);
+  assert.ok(result.inertia.length > 0, 'Expected movement after releasing the drag');
+  assert.ok(result.after.error <= 2, JSON.stringify(result.after));
+});