schalli
cf70a197cd
Befund aus dem Browser-Rundgang: example.com setzt `margin: 15vh` — mit 3000 px Vorschauhoehe lag die Ueberschrift bei y 450, in der Kachel mit 720 px Rahmenhoehe bei y 108. Der in der Vorschau gewaehlte Ausschnitt zeigte in der Kachel also etwas anderes. Die Kachel nutzt jetzt dieselbe Layouthoehe wie die Vorschau (3000), damit vh-relative Seiten identisch umbrechen; der Rest wird ohnehin weggeschnitten. Vorschau: `overflow-x-hidden`, die Eckgriffe am rechten Rand erzeugten einen 4-px-Querbalken. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
72 lines
3.3 KiB
TypeScript
72 lines
3.3 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
import { XFRAME_PREVIEW_PAGE_HEIGHT, applyCropDrag, computeCropLayout } from './xframe-crop';
|
|
|
|
/**
|
|
* xframe-crop.test — NEU (quick-260922-ge2).
|
|
*
|
|
* Reine Geometrie ohne React: Einpassen (contain) und Zentrieren des
|
|
* Ausschnitts in der Kachel, Layouthoehe des Rahmens, Nullkachel ohne
|
|
* Division durch 0 (T-GE2-05); Ziehmathematik der Vorschau — Verschieben
|
|
* bei fester Groesse, Ecken bewegen nur ihre zwei Kanten, die Gegenecke
|
|
* bleibt stehen, Mindestgroesse an der bewegten Kante.
|
|
*/
|
|
const FULL = { x: 0, y: 0, w: 1280, h: 720 };
|
|
const START = { x: 100, y: 100, w: 400, h: 300 };
|
|
|
|
describe('computeCropLayout (quick-260922-ge2)', () => {
|
|
it('Test 1: breitenbegrenzt — 1280x720 in 640x720 -> scale 0.5, left 0, top 180', () => {
|
|
expect(computeCropLayout(FULL, 640, 720)).toEqual({ scale: 0.5, left: 0, top: 180, frameHeight: 3000 });
|
|
});
|
|
|
|
it('Test 2: hoehenbegrenzt — 1280x720 in 1280x180 -> scale 0.25, left 480, top 0', () => {
|
|
expect(computeCropLayout(FULL, 1280, 180)).toEqual({ scale: 0.25, left: 480, top: 0, frameHeight: 3000 });
|
|
});
|
|
|
|
it('Test 3: Vergroesserung erlaubt — 200x100 in 800x400 -> scale 4', () => {
|
|
expect(computeCropLayout({ x: 0, y: 0, w: 200, h: 100 }, 800, 400)).toEqual({
|
|
scale: 4,
|
|
left: 0,
|
|
top: 0,
|
|
frameHeight: 3000,
|
|
});
|
|
});
|
|
|
|
it('Test 4: frameHeight ist immer die Vorschauhoehe 3000 — gleiches Layout wie in der Vorschau (vh-Masse)', () => {
|
|
expect(computeCropLayout({ x: 0, y: 0, w: 1280, h: 100 }, 640, 360).frameHeight).toBe(3000);
|
|
expect(computeCropLayout({ x: 0, y: 3000, w: 1280, h: 400 }, 640, 360).frameHeight).toBe(3000);
|
|
});
|
|
|
|
it('Test 5: ungemessene Kachel (0x0 oder 640x0) -> scale 0, left 0, top 0 (nichts rendern)', () => {
|
|
expect(computeCropLayout(FULL, 0, 0)).toEqual({ scale: 0, left: 0, top: 0, frameHeight: 3000 });
|
|
expect(computeCropLayout(FULL, 640, 0)).toEqual({ scale: 0, left: 0, top: 0, frameHeight: 3000 });
|
|
});
|
|
});
|
|
|
|
describe('applyCropDrag (quick-260922-ge2)', () => {
|
|
it('Test 6: move um +100/+50 verschiebt bei fester Groesse', () => {
|
|
expect(applyCropDrag('move', START, 100, 50)).toEqual({ x: 200, y: 150, w: 400, h: 300 });
|
|
});
|
|
|
|
it('Test 7: move ueber den Rand -> an der Kante geklemmt (x 880 = 1280 - 400; -500/-500 -> 0/0)', () => {
|
|
expect(applyCropDrag('move', START, 2000, 0)).toEqual({ x: 880, y: 100, w: 400, h: 300 });
|
|
expect(applyCropDrag('move', START, -500, -500)).toEqual({ x: 0, y: 0, w: 400, h: 300 });
|
|
});
|
|
|
|
it('Test 8: se um +100/+100 -> groesser, obere linke Ecke bleibt', () => {
|
|
expect(applyCropDrag('se', START, 100, 100)).toEqual({ x: 100, y: 100, w: 500, h: 400 });
|
|
});
|
|
|
|
it('Test 9: nw um +350/+10 -> Mindestbreite 100 an der bewegten Kante, rechte Kante 500 bleibt', () => {
|
|
expect(applyCropDrag('nw', START, 350, 10)).toEqual({ x: 400, y: 110, w: 100, h: 290 });
|
|
});
|
|
|
|
it('Test 10: ne um +2000/0 -> rechte Kante 1280 (w 1180), linke Kante bleibt', () => {
|
|
expect(applyCropDrag('ne', START, 2000, 0)).toEqual({ x: 100, y: 100, w: 1180, h: 300 });
|
|
});
|
|
|
|
it('Test 11: sw um 0/+5000 -> untere Kante an der Vorschauhoehe 3000 (h 2900)', () => {
|
|
expect(XFRAME_PREVIEW_PAGE_HEIGHT).toBe(3000);
|
|
expect(applyCropDrag('sw', START, 0, 5000)).toEqual({ x: 100, y: 100, w: 400, h: 2900 });
|
|
});
|
|
});
|