feat: implement a new image comparison function #19166
Conversation
aslushnikov
force-pushed
the
introduce-image-tools
branch
from
9a9cd14
to
5f3e4f9
Compare
|
This is amazing! It might be worth also exploring multi-scale SSIM — as further improvements to SSIM. |
aslushnikov
force-pushed
the
introduce-image-tools
branch
2 times, most recently
from
68c1972
to
f9893b1
Compare
|
@pastelsky thank you for the recommendation! I'm familiar with MS-SSIM, but we don't need it here since we're only inspecting a small locality of the image around the anti-aliased pixel. I haven't seen ssimulacra2 before - thank you for pointing it out. I'll explore it. |
This patch implements a new image comparison function, codenamed
'ssim_v1'. The goal of the new comparison function is to cancel out
browser non-determenistic rendering.
To use the new comparison function:
```ts
await expect(page).toHaveScreenshot({
comparator: 'ssim_v1',
});
```
As of Nov 30, 2022, we identified the following sources of
non-determenistic rendering for Chromium:
- Anti-aliasing for certain shapes might be different due to the
way skia rasterizes certain shapes.
- Color blending might be different on `x86` and `aarch64` architectures.
The new function employes a few heuristics to fight these
differences.
Consider two non-equal image pixels `(r1, g1, b1)` and `(r2, g2, b2)`:
1. If the [CIE94] metric is less then 1.0, then we consider these pixels
**EQUAL**. (The value `1.0` is the [just-noticeable difference] for
[CIE94].). Otherwise, proceed to next step.
1. If all the 8 neighbours of the first pixel match its color, or
if the 8 neighbours of the second pixel match its color, then these
pixels are **DIFFERENT**. (In case of anti-aliasing, some of the
direct neighbours have to be blended up or down.) Otherwise, proceed
to next step.
1. If SSIM in some locality around the different pixels is more than
0.99, then consider this pixels to be **EQUAL**. Otherwise, mark them
as **DIFFERENT**. (Local SSIM for anti-aliased pixels turns out to be
very close to 1.0).
[CIE94]: https://en.wikipedia.org/wiki/Color_difference#CIE94
[just-noticeable difference]: https://en.wikipedia.org/wiki/Just-noticeable_difference
aslushnikov
force-pushed
the
introduce-image-tools
branch
from
f9893b1
to
cf62159
Compare
This reverts commit cf62159.
|
Was this released in |
|
@aslushnikov Can we get this included in some of the newer alpha versions or it's going to be available only with |
|
@Jovan27 it is available as a |
This patch implements a new image comparison function, codenamed
"ssim-cie94". The goal of the new comparison function is to cancel out
browser non-determenistic rendering.
To use the new comparison function:
As of Nov 30, 2022, we identified the following sources of
non-determenistic rendering for Chromium:
way skia rasterizes certain shapes.
x86andaarch64architectures.The new function employs a few heuristics to fight these
differences.
Consider two non-equal image pixels
(r1, g1, b1)and(r2, g2, b2):EQUAL. (The value
1.0is the just-noticeable difference forCIE94.). Otherwise, proceed to next step.
if the 8 neighbors of the second pixel match its color, then these
pixels are DIFFERENT. (In case of anti-aliasing, some of the
direct neighbors have to be blended up or down.) Otherwise, proceed
to next step.
0.99, then consider this pixels to be EQUAL. Otherwise, mark them
as DIFFERENT. (Local SSIM for anti-aliased pixels turns out to be
very close to 1.0).