perf(web): contain offscreen vehicle rows

vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts

@@ -1,9 +1,32 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { describe, expect, test } from 'vitest';
 import mainSource from '../main.tsx?raw';
 
+const v2Styles = readFileSync(resolve(process.cwd(), 'src/v2/styles/v2.css'), 'utf8');
+
 describe('V2 production entry', () => {
   test('does not load the legacy Semi UI theme and global stylesheet', () => {
     expect(mainSource).not.toContain("./styles/global.css");
     expect(mainSource).toContain("./v2/styles/v2.css");
   });
+
+  test('applies rendering containment to off-screen vehicle items instead of the visible scroller', () => {
+    const ruleBody = (selector: string) => {
+      const start = v2Styles.indexOf(`${selector} {`);
+      expect(start).toBeGreaterThanOrEqual(0);
+      const end = v2Styles.indexOf('}', start);
+      expect(end).toBeGreaterThan(start);
+      return v2Styles.slice(start, end);
+    };
+    const scrollRule = ruleBody('.v2-vehicle-scroll');
+    const rowRule = ruleBody('.v2-vehicle-row');
+    const mobileCardRule = ruleBody('.v2-monitor-mobile-cards > article');
+
+    expect(scrollRule).not.toContain('content-visibility');
+    expect(rowRule).toContain('content-visibility: auto');
+    expect(rowRule).toContain('contain-intrinsic-size: auto 60px');
+    expect(mobileCardRule).toContain('content-visibility: auto');
+    expect(mobileCardRule).toContain('contain-intrinsic-size: auto 154px');
+  });
 });