chrome-monospace-repro

An attempt at creating a repro case for some spurious image diffs we're seeing in Chrome in Happo

What we're seeing

We use Playwright to take screenshots in Chrome for Happo, a screenshot testing service. We're seeing inconsistently produced screenshots for images with border-radius and a background color.

Given this html:

<img src="/foo.png" style="background-color: red; border-radius: 50%;" />

Taking a screenshot of this element will yield one of two versions:

or

The first one has the background-color leaking a little, causing a kind of "halo" around the image. The second one looks more like the one you would expect.

How to run

npm install
node repro.js

The output from this command is a list of two filenames. If the filenames are the same, we're all good. If you see different filenames, we've reproduced the issue.

This is what I'm seeing when running locally:

⨠ node repro.js
d11fcc1bfd92edcb41fa9009eb86f509.png
a61a4d99837e8dbe60dc1811c3806977.png