fix(site-builder): bounce stays visible + springier; image/video crop fills (cover) + resize shrinks footprint

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-14 16:04:50 -07:00
parent 2ac62c4e9e
commit 5c44dd545c
6 changed files with 282 additions and 9 deletions
@@ -121,6 +121,58 @@ describe('MediaStylePanel Video size controls (Width + Aspect Ratio) are gated o
    expect(q('size-control')).toBeNull();
    expect(q('aspect-ratio-control')).toBeNull();
  });
+
+  test('a video-shaped selection only renders one SizeControl (Width) -- no separate Height control', () => {
+    // See MediaStylePanel.tsx's note: VideoBlock sizes its <video>/iframe from
+    // width + aspectRatio directly, not from an outer-wrapper height, so a
+    // Height control would reintroduce the empty-space bug this fix targets.
+    lastProps = { videoUrl: 'https://example.com/clip.mp4', poster: '', style: {} };
+    render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
+    expect(qAll('size-control').length).toBe(1);
+  });
+});
+
+/* FIX (fix-anim-image contract, B+C): applying a crop aspect-ratio to a video
+   should fill by default (objectFit defaults to 'cover' when unset) and clear
+   any stale height, matching ImageStylePanel's treatment -- for prop-schema
+   consistency even though VideoBlock's file-type <video> already hardcodes
+   object-fit: cover today. */
+describe('MediaStylePanel Video AspectRatioControl applies crop-fills-by-default treatment (fix-anim-image B+C)', () => {
+  function clickPresetByLabel(root: Element | null, label: string) {
+    const btn = Array.from(root?.querySelectorAll('button') ?? []).find((b) => b.textContent === label);
+    expect(btn).toBeTruthy();
+    act(() => { btn!.dispatchEvent(new MouseEvent('click', { bubbles: true })); });
+  }
+
+  test('applying a non-empty ratio with objectFit unset also sets objectFit to cover', () => {
+    lastProps = { videoUrl: 'https://example.com/clip.mp4', poster: '', style: {} };
+    render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
+
+    clickPresetByLabel(q('aspect-ratio-control'), '1:1');
+
+    expect(lastProps.style.aspectRatio).toBe('1 / 1');
+    expect(lastProps.style.objectFit).toBe('cover');
+  });
+
+  test('applying a ratio clears a stale height', () => {
+    lastProps = { videoUrl: 'https://example.com/clip.mp4', poster: '', style: { height: '50%' } };
+    render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
+
+    clickPresetByLabel(q('aspect-ratio-control'), '16:9');
+
+    expect(lastProps.style.aspectRatio).toBe('16 / 9');
+    expect(lastProps.style.height).toBe('');
+  });
+
+  test('clearing the ratio (Original) does not force-clear objectFit', () => {
+    lastProps = { videoUrl: 'https://example.com/clip.mp4', poster: '', style: { aspectRatio: '1 / 1', objectFit: 'cover' } };
+    render(<MediaStylePanel selectedId="vid-1" nodeProps={lastProps} />);
+
+    clickPresetByLabel(q('aspect-ratio-control'), 'Original');
+
+    expect(lastProps.style.aspectRatio).toBe('');
+    expect(lastProps.style.objectFit).toBe('cover');
+  });
 });

 function openCollapsibleByTitle(title: string) {