# Result comparison

## Sub-features

Result opens a shopper-photo Before/After slider at 50 percent. The native range supports mouse, touch, Arrow keys, Home and End, with a visible focus outline and localized accessible name. The two images retain privacy capture exclusions. Compare shows the actual inference garment beside the result, stacking on screens at most 480 pixels wide. Returning to Result preserves the split.

## How to get to it (user POV)

Confirm a shopper photo and complete a successful storefront try-on. Select Compare, then Result. In Woo demo mode, the same shared comparison appears inside the demo result screen. Its counter, actions and gallery remain available; saved gallery cards retain their garment thumbnails.

## Driving it with Playwright

Run the helper in EN/IT at 320, 390 and 1280 pixels in both Woo merchant and demo modes. It checks distinct original/result image sources, initial value, keyboard endpoints and clipping, focus outline, mouse drag, mobile touch drag, garment/result layout, no horizontal overflow, actions still present, retained split and no additional API request. Inspect before-after and compare screenshots. Shared ResultComparison tests cover absent photo, absent garment, initial compare and a garment disappearing during comparison. Woo's widget-recovery browser test also checks the rebuilt shipping bundle in both modes. The helper records `demo-*` screenshots, traces and source hashes including `demo/DemoResultView.tsx`; demo scenarios also open the saved gallery and verify its result and garment thumbnail without another request.

## Gotchas

The Before image is the confirmed shopper photo, never the garment. Without a shopper photo, Result shows the generated image alone. Without a garment, the toggle disappears and Result remains available even if compare was selected. The range is transparent but focusable, and its parent draws the focus outline. Native mobile behavior is exercised with Chromium touch events; physical Safari/device QA is separate.