leaflet-rotate 0.5.2 → 0.5.3

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

package/test/steps/overlays.steps.js

@@ -425,3 +425,47 @@ Then('the second map center remains unchanged and its popup stays anchored', fun
   assert.ok(Math.hypot(...this.secondaryPopup.delta) < 2, JSON.stringify(this.secondaryPopup));
   assert.ok(Math.hypot(...this.secondaryPopup.tooltipDelta) < 2, JSON.stringify(this.secondaryPopup));
 });
+
+When('I add markers to a Canvas-preferred map at pitch {int}', async function (pitch) {
+  this.domMarkers = await this.page.evaluate(pitch => {
+    const container = document.createElement('div');
+    container.style.cssText = 'height: 300px; width: 500px';
+    document.body.appendChild(container);
+    const map = new L.Map(container, {
+      center: [55, 10], zoom: 6, rotate: true, bearing: 35, pitch, preferCanvas: true,
+    });
+    const marker = new L.Marker([55, 10], { draggable: true, rotation: Math.PI / 4 })
+      .bindPopup('DOM popup', { autoPan: false }).addTo(map);
+    const divMarker = new L.Marker([55.1, 10.1], { icon: new L.DivIcon({ html: 'Label' }) }).addTo(map);
+    const vector = new L.CircleMarker([55.2, 10.2]).addTo(map);
+    map.panBy([40, 20], { animate: false });
+    marker.setLatLng([55.3, 10.3]).setOpacity(0.5);
+    const element = marker.getElement();
+    const transform = new DOMMatrix(getComputedStyle(element).transform);
+    const position = L.DomUtil.getPosition(element).add(map._getMapPanePos());
+    const expected = map.latLngToContainerPoint(marker.getLatLng());
+    element.click();
+    const result = {
+      icon: element.tagName,
+      iconPane: element.parentNode === map.getPane('markerPane'),
+      shadow: marker._shadow.tagName,
+      divIcon: divMarker.getElement().tagName,
+      vectorCanvas: vector._renderer instanceof L.Canvas,
+      aligned: position.distanceTo(expected) < 1,
+      rotation: Math.abs(Math.atan2(transform.b, transform.a) - Math.PI / 4) < 1e-6,
+      opacity: element.style.opacity,
+      draggable: marker.dragging.enabled(),
+      popup: marker.isPopupOpen(),
+    };
+    marker.remove();
+    result.removed = !element.isConnected && !marker.getElement();
+    return result;
+  }, pitch);
+});
+
+Then('the markers use Leaflet DOM icons while vector paths use Canvas', function () {
+  assert.deepEqual(this.domMarkers, {
+    icon: 'IMG', iconPane: true, shadow: 'IMG', divIcon: 'DIV', vectorCanvas: true,
+    aligned: true, rotation: true, opacity: '0.5', draggable: true, popup: true, removed: true,
+  });
+});

package/test/steps/pitch.steps.js

@@ -0,0 +1,264 @@
+import assert from 'node:assert/strict';
+import { Given, Then } from '@cucumber/cucumber';
+
+Given('a standalone pitched map is open', async function () {
+  const leaflet = process.env.LEAFLET_VERSION === '2'
+    ? '<script src="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js"></script><script>globalThis.L = globalThis.leaflet;</script>'
+    : '<script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"></script>';
+  await this.page.goto(`${this.baseUrl}/test/index.html`);
+  await this.page.setContent(`<!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <base href="${this.baseUrl}/">
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@${process.env.LEAFLET_VERSION === '2' ? '2.0.0-alpha.1' : '1.9'}/dist/leaflet.css">
+        ${leaflet}
+        <script src="dist/leaflet-rotate-src.js"></script>
+      </head>
+      <body>
+        <div id="first" style="width:400px;height:300px"></div>
+        <script>
+          window.testPitch = { map: new L.Map('first', {
+            center: [48.8582601, 2.29449985], zoom: 17, rotate: true, pitch: 45, bearing: 30,
+          }) };
+        </script>
+      </body>
+    </html>`);
+  await this.page.waitForFunction(() => window.testPitch);
+  assert.equal(await this.page.evaluate(() => L.Layer.types), undefined);
+});
+
+Then('raster perspective follows pitch on late and reattached layers', async function () {
+  const result = await this.page.evaluate(() => {
+    const map = testPitch.map, checks = [];
+    const pane = map.createPane('lateRaster', map._rotatePane);
+    const first = new L.GridLayer({ pane: 'lateRaster', updateWhenIdle: true }).addTo(map);
+    const second = new L.GridLayer({ pane: 'lateRaster' }).addTo(map);
+    const check = () => {
+      const expected = 'preserve-3d';
+      checks.push([map._rotatePane, pane, first._container, second._container]
+        .every(el => el.style.transformStyle === expected));
+      checks.push(getComputedStyle(map._mapPane).transformStyle === 'preserve-3d');
+      checks.push([first, second].every(layer => Object.values(layer._levels)
+        .every(level => getComputedStyle(level.el).transformStyle === 'flat')));
+    };
+    check();
+    map.setPitch(0); check();
+    first.remove();
+    map.setPitch(75);
+    first.addTo(map); check();
+    map.setPitch(0); check();
+    map.setPitch(45); check();
+    first.remove(); second.remove();
+    pane.remove();
+    return checks;
+  });
+  assert.ok(result.every(Boolean), 'Late layers, custom panes and updateWhenIdle must follow pitch');
+});
+
+
+Then('pitched raster surfaces draw loaded tiles after rapid camera changes', { timeout: 30000 }, async function () {
+  await this.page.addStyleTag({ content: '.leaflet-control { display: none; }' });
+  const png = await this.page.evaluate(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 256;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#00ff00';
+    ctx.fillRect(0, 0, 256, 256);
+    return canvas.toDataURL().split(',')[1];
+  });
+  await this.page.route(/\/pitched-tile\.png/, async route => {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    await route.fulfill({ contentType: 'image/png', body: Buffer.from(png, 'base64') });
+  });
+  await this.page.evaluate(() => {
+    const map = testPitch.map;
+    map.getContainer().style.width = '1000px';
+    map.getContainer().style.height = '731px';
+    map.invalidateSize({ animate: false });
+    map.setView([48.85478060234936, 2.28643600540333], 17, { animate: false });
+    testPitch.tiles = new L.TileLayer('/pitched-tile.png?{z}/{x}/{y}', { maxNativeZoom: 17 }).addTo(map);
+  });
+  await this.page.waitForFunction(() => !testPitch.tiles.isLoading());
+  await this.page.evaluate(() => {
+    const map = testPitch.map, layer = testPitch.tiles, level = layer._levels[layer._tileZoom];
+    map._setPitchAndBearing(60.5, 152.98861657457235);
+    level.origin = new L.Point(16990718, 11542325);
+    L.DomUtil.setTransform(level.el, new L.Point(-1816, 672), 1);
+    for (const tile of Object.values(layer._tiles)) {
+      L.DomUtil.setPosition(tile.el, new L.Point(tile.coords.x, tile.coords.y).scaleBy(layer.getTileSize()).subtract(level.origin));
+    }
+    map._pixelOrigin = new L.Point(16992534, 11541653);
+    L.DomUtil.setPosition(map._mapPane, new L.Point(-670, 1433));
+    map._setPitchTransform('matrix3d(-1.3127, 0.608476, 0.395287, -0.000360499, 0.373224, -1.19361, -0.775414, 0.000707172, -0.525431, -0.390956, 0.492424, -0.000449087, -2578.6, 2999.53, 2642.09, -1.40956)');
+  });
+  const checkPixels = async () => {
+    await this.page.waitForFunction(() => !testPitch.map._animatingZoom &&
+      !testPitch.map._bearingAnimationFrame && !testPitch.map._panAnim?._inProgress);
+    await this.page.waitForTimeout(400);
+    const image = await this.page.locator('#first').screenshot({ animations: 'disabled' });
+    const missing = await this.page.evaluate(async base64 => {
+      const img = new Image();
+      img.src = `data:image/png;base64,${base64}`;
+      await img.decode();
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width; canvas.height = img.height;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+      let missing = 0;
+      for (let y = 120; y < 700; y += 80) {
+        for (let x = 100; x < 950; x += 100) {
+          const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
+          if (g < 240 || r > 10 || b > 10) missing++;
+        }
+      }
+      return missing;
+    }, image.toString('base64'));
+    assert.equal(missing, 0, 'Actual raster pixels must cover the ground, not just loaded DOM images');
+  };
+  await checkPixels();
+  const checkMarker = async () => {
+    const points = await this.page.evaluate(() => {
+      const map = testPitch.map;
+      const marker = new L.Marker(map.containerPointToLatLng([550, 390]), {
+        icon: new L.DivIcon({ className: '', html: '<div style="width:30px;height:30px;background:#ff00ff"></div>', iconSize: [30, 30], iconAnchor: [15, 15] })
+      }).addTo(map);
+      marker.bindTooltip('<div style="width:30px;height:30px;background:#00ffff"></div>', {
+        permanent: true, direction: 'right', opacity: 1
+      });
+      testPitch.visibleMarker = marker;
+      const rect = marker.getTooltip().getElement().querySelector('div').getBoundingClientRect();
+      const container = map.getContainer().getBoundingClientRect();
+      return [map.latLngToContainerPoint(marker.getLatLng()), {
+        x: rect.left - container.left + rect.width / 2, y: rect.top - container.top + rect.height / 2
+      }];
+    });
+    await this.page.waitForTimeout(300);
+    const image = await this.page.locator('#first').screenshot({ animations: 'disabled' });
+    const colors = await this.page.evaluate(async ({ base64, points }) => {
+      const img = new Image(); img.src = `data:image/png;base64,${base64}`; await img.decode();
+      const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height;
+      const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0);
+      return points.map(point => [...ctx.getImageData(Math.round(point.x), Math.round(point.y), 1, 1).data]);
+    }, { base64: image.toString('base64'), points });
+    await this.page.evaluate(() => testPitch.visibleMarker.remove());
+    const expected = [[255, 0, 255, 255], [0, 255, 255, 255]];
+    assert.ok(colors.every((color, i) => color.every((channel, j) => Math.abs(channel - expected[i][j]) <= 32)),
+      `Markers and permanent tooltips paint above the raster ground: ${JSON.stringify(colors)}`);
+  };
+  await checkMarker();
+  await this.page.evaluate(async () => {
+    const map = testPitch.map;
+    for (let i = 0; i < 12; i++) {
+      map.setPitch([20, 75, 45][i % 3], { animate: true, duration: .15 });
+      map.setBearing(i * 61, { animate: true, duration: .15 });
+      map.setZoomAround([400, 350], i % 2 ? 17 : 18);
+      map.panBy([30, -20], { animate: true, duration: .1 });
+      await new Promise(resolve => setTimeout(resolve, 70));
+    }
+    await new Promise(resolve => setTimeout(resolve, 400));
+    map.setPitch(45); map.setBearing(153);
+    map.setView([48.85478060234936, 2.28643600540333], 17, { animate: false });
+  });
+  await this.page.waitForFunction(() => !testPitch.tiles.isLoading());
+  await checkPixels();
+  await checkMarker();
+  await this.page.addStyleTag({ content: '.leaflet-control-rotate { display: block; }' });
+  await this.page.locator('.leaflet-control-rotate a').click();
+  await this.page.waitForFunction(() => testPitch.map.getPitch() === 0 && testPitch.map.getBearing() === 0);
+  await this.page.waitForFunction(() => !testPitch.tiles.isLoading());
+  await checkPixels();
+  await checkMarker();
+  const styles = await this.page.evaluate(() => {
+    testPitch.map.setPitch(0);
+    return [testPitch.map._mapPane, testPitch.map._rotatePane, testPitch.tiles._container, testPitch.tiles.getPane()]
+      .map(el => el.style.transformStyle);
+  });
+  assert.deepEqual(styles, Array(4).fill('preserve-3d'), 'Compass reset preserves the ground context at pitch zero');
+});
+
+
+Then('pitched view resets preserve the ground perspective after accumulated pans', async function () {
+  const result = await this.page.evaluate(async () => {
+    const map = testPitch.map;
+    map.getContainer().style.width = '1000px';
+    map.getContainer().style.height = '731px';
+    map.invalidateSize({ animate: false });
+    const layer = new L.GridLayer({ maxNativeZoom: 17 }).addTo(map);
+    map.setZoom(18, { animate: false });
+    for (let i = 0; i < 5; i++) map.panBy([-250, -150], { animate: false });
+    map._setPitchAndBearing(85, 46.43810536434438);
+    const farBefore = map._getPitchFarY();
+    await new Promise(resolve => {
+      map.once('zoomend', resolve);
+      map.setView([48.85826, 2.2945], 19);
+    });
+    const panRetained = map._getMapPanePos().x !== 0;
+    map.setView([48.859, 2.294], 18, { animate: false });
+    const target = new L.LatLng(48.859, 2.294), size = map.getSize(), screenCenter = size.divideBy(2);
+    const center = map.project(target), angle = map.getBearing() * Math.PI / 180;
+    const pitch = map.getPitch() * Math.PI / 180, perspective = size.y * 1.5;
+    const errors = [];
+    for (const [x, y] of [[-100, -100], [100, -100], [-100, 100], [100, 100]]) {
+      const ll = map.unproject(center.add([x, y]));
+      const rx = x * Math.cos(angle) - y * Math.sin(angle);
+      const ry = x * Math.sin(angle) + y * Math.cos(angle);
+      const scale = perspective / (perspective - ry * Math.sin(pitch));
+      const expected = screenCenter.add([rx * scale, ry * Math.cos(pitch) * scale]);
+      errors.push(map.latLngToContainerPoint(ll).distanceTo(expected));
+    }
+    const farAfter = map._getPitchFarY(), pane = map._getMapPanePos().clone();
+    const centerError = map.latLngToContainerPoint(target).distanceTo(screenCenter);
+    layer.remove();
+    return { errors, farBefore, farAfter, pane, centerError, panRetained };
+  });
+  assert.equal(result.panRetained, true, 'Exercise animated zoom without resetting the accumulated pan');
+  assert.deepEqual(result.pane, { x: 0, y: 0 });
+  assert.ok(result.centerError < 1);
+  assert.ok(Math.max(...result.errors) < 1, `Reset ground projection: ${JSON.stringify(result)}`);
+  assert.ok(Math.abs(result.farAfter - result.farBefore) < 1, 'Resetting the view must not move the horizon');
+});
+
+
+Then('raster tiles remain aligned after panning before their first pitch change', async function () {
+  const result = await this.page.evaluate(async () => {
+    const map = testPitch.map;
+    map.getContainer().style.width = '1000px';
+    map.getContainer().style.height = '731px';
+    map.invalidateSize({ animate: false });
+    const layer = new L.GridLayer({ maxNativeZoom: 17 }).addTo(map);
+    const firstRotation = !layer._rotateOrigin;
+    map.setZoom(18, { animate: false });
+    for (let i = 0; i < 5; i++) map.panBy([-250, -150], { animate: false });
+    const center = map.getCenter();
+    map._setPitchAndBearing(85, 46.43810536434438);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    const errors = [];
+    let missing = 0;
+    const size = map.getSize(), farY = map._getPitchFarY(), level = layer._levels[layer._tileZoom];
+    for (let y = Math.max(0, farY) + 10; y < size.y; y += 60) {
+      for (let x = 20; x < size.x; x += 100) {
+        const point = new L.Point(x, y), location = map.containerPointToLatLng(point);
+        const projected = map.project(location, level.zoom);
+        const coords = projected.divideBy(256).floor();
+        if (!layer._tiles[`${coords.x}:${coords.y}:${level.zoom}`]) missing++;
+        const position = projected.subtract(level.origin);
+        const reference = document.createElement('div');
+        reference.style.cssText = `position:absolute;width:0;height:0;left:${position.x}px;top:${position.y}px`;
+        level.el.appendChild(reference);
+        const rect = reference.getBoundingClientRect(), container = map.getContainer().getBoundingClientRect();
+        errors.push(Math.hypot(rect.left - container.left - x, rect.top - container.top - y));
+        reference.remove();
+      }
+    }
+    const stableCenter = map.project(center).distanceTo(map.project(map.getCenter()));
+    const pane = map._getMapPanePos();
+    layer.remove();
+    return { firstRotation, stableCenter, errors, missing, pane };
+  });
+  assert.equal(result.firstRotation, true, 'Exercise the first rotation after layer addition');
+  assert.ok(Math.abs(result.pane.x) > 1000 && Math.abs(result.pane.y) > 700);
+  assert.ok(result.stableCenter < 0.01);
+  assert.equal(result.missing, 0, 'Visible ground tiles remain present');
+  assert.ok(Math.max(...result.errors) < 2, `Rendered tile alignment: ${JSON.stringify(result)}`);
+});

package/test/steps/rotation.steps.js

@@ -84,6 +84,28 @@ When('I set the map pitch to 45 degrees', async function () {
       roundTripPoint = map.containerPointToLayerPoint(pitched),
       centerPoint = map.latLngToContainerPoint(map.getCenter()),
       size = map.getSize();
+    const css = new DOMMatrix(getComputedStyle(map._rotatePane).transform),
+      pivot = map._getPixelCenter(),
+      origin = map._rotatePane._leaflet_pos,
+      angle = Math.PI / 4,
+      bearing = map._bearing,
+      perspective = size.y * 1.5,
+      container = map.getContainer().getBoundingClientRect(),
+      panePos = map._getMapPanePos(),
+      projectionError = Math.max(...[[0, 0], [size.x, 0], [0, size.y], [size.x, size.y]].map(([x, y]) => {
+        const dx = x + origin.x - pivot.x,
+          dy = y + origin.y - pivot.y,
+          rotatedX = dx * Math.cos(bearing) - dy * Math.sin(bearing),
+          rotatedY = dx * Math.sin(bearing) + dy * Math.cos(bearing),
+          factor = perspective / (perspective - rotatedY * Math.sin(angle)),
+          probe = document.createElement('div');
+        probe.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:0;height:0`;
+        map._rotatePane.appendChild(probe);
+        const actual = probe.getBoundingClientRect();
+        probe.remove();
+        return Math.hypot(actual.x - container.left - map.getContainer().clientLeft - panePos.x - pivot.x - rotatedX * factor,
+          actual.y - container.top - map.getContainer().clientTop - panePos.y - pivot.y - rotatedY * Math.cos(angle) * factor);
+      }));
 
     return {
       pitch: map.getPitch(),
@@ -95,18 +117,20 @@ When('I set the map pitch to 45 degrees', async function () {
       roundTripPoint,
       centerPoint,
       size,
-      transform: map._rotatePane.style.transform,
+      projectionError,
+      groundDepth: [css.m13, css.m23, css.m43],
     };
   });
 });
 
 Then('map coordinates stay consistent with the pitched view', function () {
-  const { pitch, maxPitch, bearing, flat, pitched, layerPoint, roundTripPoint, centerPoint, size, transform } = this.pitchProjection;
+  const { pitch, maxPitch, bearing, flat, pitched, layerPoint, roundTripPoint, centerPoint, size,
+    projectionError, groundDepth } = 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(projectionError < 0.01, `CSS pitch projection error: ${projectionError}px`);
+  assert.deepEqual(groundDepth, [0, 0, 0], 'Ground must not occlude upright overlays');
   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);

package/test/support/hooks.js

@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import { After, AfterAll, Before, BeforeAll, Given, setDefaultTimeout } from '@cucumber/cucumber';
-import { chromium } from 'playwright';
+import { chromium, firefox } from 'playwright';
 import { startServer } from '../../build/server.js';
 
 setDefaultTimeout(10000);
@@ -9,19 +9,27 @@ let server;
 let browser;
 let baseUrl;
 
-BeforeAll(async () => {
+BeforeAll({ timeout: 60000 }, async () => {
   server = await startServer(0);
   baseUrl = `http://127.0.0.1:${server.address().port}`;
-  browser = await chromium.launch();
+  const testBrowser = process.env.TEST_BROWSER;
+  const [engine, options] = testBrowser === 'firefox'
+    // Windows throttles requestAnimationFrame in windows it considers occluded.
+    ? [firefox, { firefoxUserPrefs: { 'widget.windows.window_occlusion_tracking.enabled': false } }]
+    : [chromium, testBrowser === 'chrome' || testBrowser === 'msedge' ? { channel: testBrowser } : {}];
+  browser = await engine.launch(options);
 });
 
 AfterAll({ timeout: 30000 }, async () => {
   await browser.close();
-  server.closeAllConnections();
-  await new Promise((resolve, reject) => server.close(error => error ? reject(error) : resolve()));
+  await new Promise((resolve, reject) => {
+    server.close(error => error ? reject(error) : resolve());
+    server.closeAllConnections();
+  });
 });
 
-Before(async function () {
+// @unit scenarios run in Node only and need no browser page.
+Before({ tags: 'not @unit' }, async function () {
   this.baseUrl = baseUrl;
   this.context = await browser.newContext();
   await this.context.route(/.html$/, async route => {
@@ -37,6 +45,10 @@ Before(async function () {
           '<script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"></script>',
           '<script src="https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js"></script><script>globalThis.L = globalThis.leaflet;</script>'
         )
+        .replace(
+          '"leaflet": "https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"',
+          '"leaflet": "https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js"'
+        )
         .replace('https://unpkg.com/leaflet@1.9/dist/leaflet.css', 'https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css');
     }
     await route.fulfill({ response, body, headers: response.headers() });
@@ -44,7 +56,7 @@ Before(async function () {
   this.page = await this.context.newPage();
 });
 
-After(async function () {
+After({ tags: 'not @unit' }, async function () {
   await this.context.close();
 });