leaflet-rotate 0.5.2 → 0.5.4

package/test/steps/overlays.steps.js

@@ -178,6 +178,148 @@ When('I focus a marker near the edge of a rotated map', async function () {
   });
 });
 
+When('I drag between city markers and reset north before clicking Trondheim', { timeout: 30000 }, async function () {
+  await this.page.evaluate(() => {
+    map.options.inertia = false;
+    map.setBearing(0);
+    map.setView(places.Kyiv, 6, { animate: false });
+    markers.forEach((marker, index) => { marker.getElement().id = `city-marker-${index}`; });
+  });
+  const rect = await this.page.locator('#map').boundingBox();
+  await this.page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2 - 20);
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.down();
+  await this.page.mouse.move(rect.x + rect.width / 2 + 75, rect.y + rect.height / 2 - 20, { steps: 8 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  assert.ok(await this.page.evaluate(() => map.getBearing() > 1 && map.getPitch() === 0));
+
+  const waitForPan = () => this.page.waitForFunction(() => !map._panAnim || !map._panAnim._inProgress);
+  const dragTo = async name => {
+    for (let i = 0; i < 30; i++) {
+      const point = await this.page.evaluate(name => {
+        const point = map.latLngToContainerPoint(places[name]);
+        return { x: point.x, y: point.y };
+      }, name);
+      const dx = Math.max(-rect.width / 4, Math.min(rect.width / 4, rect.width * 0.6 - point.x));
+      const dy = Math.max(-rect.height / 4, Math.min(rect.height / 4, rect.height * 0.65 - point.y));
+      if (Math.hypot(dx, dy) < 2) return;
+      await this.page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
+      await this.page.mouse.down();
+      await this.page.mouse.move(rect.x + rect.width / 2 + dx, rect.y + rect.height / 2 + dy, { steps: 4 });
+      await this.page.mouse.up();
+    }
+    throw new Error(`Could not drag to ${name}`);
+  };
+  for (const [index, name] of [[0, 'Kyiv'], [1, 'London']]) {
+    await dragTo(name);
+    await this.page.locator(`#city-marker-${index}`).click();
+    await waitForPan();
+    await this.page.locator('.leaflet-popup-close-button').click();
+  }
+  const resetCenter = await this.page.evaluate(() => map.project(map.getCenter()));
+  await this.page.locator('.leaflet-control-rotate-toggle').click();
+  await this.page.waitForFunction(() => map.getBearing() === 0 && !map._bearingAnimationFrame);
+  this.cityPopup = await this.page.evaluate(before => ({
+    resetMovement: map.project(map.getCenter()).distanceTo(new L.Point(before.x, before.y)),
+  }), resetCenter);
+  await dragTo('Trondheim');
+  const before = await this.page.evaluate(() => map.project(map.getCenter()));
+  // Use the pointer position, so a focus-induced jump cannot make Playwright chase the marker.
+  const icon = await this.page.locator('#city-marker-4').boundingBox();
+  await this.page.locator('#city-marker-4').focus();
+  await waitForPan();
+  this.cityPopup.focusMovement = await this.page.evaluate(before =>
+    map.project(map.getCenter()).distanceTo(new L.Point(before.x, before.y)), before);
+  await this.page.mouse.click(icon.x + icon.width / 2, icon.y + icon.height / 2);
+  await waitForPan();
+  Object.assign(this.cityPopup, await this.page.evaluate(before => {
+    const popup = markers[4].getPopup();
+    const rect = map.getContainer().getBoundingClientRect();
+    const popupRect = popup.getElement()?.getBoundingClientRect();
+    const center = map.project(map.getCenter());
+    const viewportCenter = map.project(map.containerPointToLatLng(map.getSize().divideBy(2)));
+    return {
+      open: markers[4].isPopupOpen(),
+      movement: center.distanceTo(new L.Point(before.x, before.y)),
+      centerError: center.distanceTo(viewportCenter),
+      inside: Boolean(popupRect && popupRect.left >= rect.left - 1 && popupRect.right <= rect.right + 1
+        && popupRect.top >= rect.top - 1 && popupRect.bottom <= rect.bottom + 1),
+      size: Math.max(map.getSize().x, map.getSize().y),
+    };
+  }, before));
+});
+
+Then('the Trondheim popup opens without jumping back to London', function () {
+  assert.ok(this.cityPopup.resetMovement < 1, JSON.stringify(this.cityPopup));
+  assert.ok(this.cityPopup.focusMovement < 1, JSON.stringify(this.cityPopup));
+  assert.equal(this.cityPopup.open, true, JSON.stringify(this.cityPopup));
+  assert.equal(this.cityPopup.inside, true, JSON.stringify(this.cityPopup));
+  assert.ok(this.cityPopup.movement < this.cityPopup.size / 2, JSON.stringify(this.cityPopup));
+  assert.ok(this.cityPopup.centerError < 1, JSON.stringify(this.cityPopup));
+});
+
+When('I keep padded points visible with rotation {word} and bearing {float}', async function (rotate, bearing) {
+  this.paddedPans = await this.page.evaluate(({ rotate, bearing }) => {
+    const element = document.createElement('div');
+    element.style.cssText = 'width: 400px; height: 300px; margin-left: 100px';
+    document.body.append(element);
+    const testMap = new L.Map(element, {
+      center: [55, 10], zoom: 6, rotate: rotate === 'true', bearing, rotateControl: false,
+    });
+    const results = [];
+    for (const padding of [
+      {},
+      { padding: [20, 30] },
+      { paddingTopLeft: new L.Point(35, 45), paddingBottomRight: new L.Point(25, 15) },
+    ]) {
+      const tl = padding.paddingTopLeft || new L.Point(...(padding.padding || [0, 0]));
+      const br = padding.paddingBottomRight || new L.Point(...(padding.padding || [0, 0]));
+      const min = tl, max = testMap.getSize().subtract(br);
+      for (const point of [
+        min.add([1, 1]), max.subtract([1, 1]),
+        new L.Point(min.x - 80, 150), new L.Point(max.x + 80, 150),
+        new L.Point(200, min.y - 80), new L.Point(200, max.y + 80),
+        min.subtract([80, 80]), max.add([80, 80]),
+      ]) {
+        testMap.setView([55, 10], 6, { reset: true, animate: false });
+        const latlng = testMap.containerPointToLatLng(point);
+        // Measure the rendered center, avoiding the cached setView center before pixel rounding.
+        const center = testMap.getSize().divideBy(2);
+        const before = testMap.project(testMap.containerPointToLatLng(center));
+        const expected = new L.Point(
+          Math.max(min.x, Math.min(max.x, point.x)),
+          Math.max(min.y, Math.min(max.y, point.y)),
+        );
+        const returnedMap = testMap.panInside(latlng, { ...padding, animate: false });
+        const actual = testMap.latLngToContainerPoint(latlng);
+        const after = testMap.project(testMap.containerPointToLatLng(center));
+        results.push({
+          point, expected, actual, rotate, bearing,
+          chainable: returnedMap === testMap,
+          movement: before.distanceTo(after),
+          expectedMovement: point.distanceTo(expected),
+          error: actual.distanceTo(expected),
+        });
+      }
+    }
+    testMap.remove();
+    element.remove();
+    return results;
+  }, { rotate, bearing });
+});
+
+Then('panInside moves only enough to reach the padded viewport', function () {
+  for (const result of this.paddedPans) {
+    assert.equal(result.chainable, true, JSON.stringify(result));
+    assert.ok(result.error < 1.5, JSON.stringify(result));
+    assert.ok(Math.abs(result.movement - result.expectedMovement) < 1.5, JSON.stringify(result));
+    if (result.expectedMovement === 0) {
+      assert.equal(result.movement, 0, JSON.stringify(result));
+    }
+  }
+});
+
 When('I redraw a heat layer after rotating, panning, and zooming', async function () {
   await this.page.evaluate(() => {
     map.setView([55, 10], 6, { animate: false });
@@ -425,3 +567,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,22 +9,30 @@ 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 => {
+  await this.context.route(/\.html(?:\?|$)/, async route => {
     const response = await route.fetch();
     const version = process.env.LEAFLET_VERSION;
     let body = (await response.text())
@@ -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();
 });