search

chromaui / addon-visual-tests

Visual Tests addon for Storybook
MIT License
28 stars 1 forks source link

Fix white background on snapshot image thumbnail with transparent `backgroundColor` #283

Closed ghengeveld closed 3 months ago

ghengeveld commented 3 months ago

If the backgroundColor for a snapshot is transparent (e.g. rgba(0, 0, 0, 0) which is the default), the thumbnail would render against that transparent background rather than the intended white background (which would be the effective page background color). This fixes that issue and adds some stories to verify it.

Screenshot 2024-04-04 at 20 42 02 Screenshot 2024-04-04 at 20 43 32

Additionally, I tweaked the UI to have a little border around the snapshot, similar to what we have on the Chromatic webapp (note the white border):

Screenshot 2024-04-04 at 20 03 01
ndelangen commented 3 months ago

How do you know the intended background is white?

ghengeveld commented 3 months ago

How do you know the intended background is white?

Because white is the default page background color since the earliest days of the web. If there is no background color specified, that's what our capture browsers will render.