[Bug]: Color profile burnt into pixels of page snapshots

[archfz]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

17.1.1

What operating system are you using?

Ubuntu

Operating System Version

21.10

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

Screenshots taken using Page.captureScreenshot command or by running window.webContents.capturePage() should not have color profile changes burnt in.

Actual Behavior

When taking screenshots programmatically color profile of the system is burnt into the image. On the other hand when screenshot is taken using the DevTools the screenshot is of the actual expected pixels.

Testcase Gist URL

https://github.com/archfz/electron-issue-screenshot

Additional Information

Do the following to reproduce:

0. Ensure you are using a color profile on the system. Example in Ubuntu:
   
1. Clone https://github.com/archfz/electron-issue-screenshot
2. npm i && npm start
3. In 2 seconds a screenshot will be taken ./test.png programmatically using window.webContents.capturePage()
4. Click on DevTools pane and press [ctrl+shift+p], search screenshot, and take screenshot using devtools. Save under project as ./test.correct.png
5. Notice the difference. For my case the expected color #e55145 (in index.html and in ./test.correct.png) becomes #c85847 (in test.png).

I have found that the following options do not change the behaviour in how screenshots are taken:

• --force-color-profile=srgb
• --disable-color-correct-rendering
• --enable-legacy-color-correct-rendering

Why is this an issue? I am attempting to do screenshot testing, and screenshots using both electron and chrome are inconsistent between systems, thus causing false positive failures in automation. I am using Cypress, and this framework comes bundled with electron, thus it is also the default choice for pipelines to not overbloat docker images.

I am able to confirm using Cypress that the same issue is present in chrome as well. I cannot confirm with standalone chrome. Now I do not know how to actually confirm this being an issues in chromium, as that repository is highly unfamiliar for me. This issue on the other hand is not present at all in Firefox.

I think this is a major reason why there are now far from ideal workarounds, like only generating images inside docker containers, not being able to accept changes on screenshots from GUI, or even pricey third party solutions to do the screenshots. A fix on this would greatly improve DX and potentially reduce costs.

I've created this issue in electron, as this is the closest browser with easy access to screenshot testing. I hope there is someone with chromium knowledge to confirm and potentially help with a fix on the issue, by comparing how DevTools vs how Page.captureScreenshot works.

Related issues:

• Chrome and Electron render colors differently #10732
• Proposal: Visual Regression / Screenshot Diffing cypress-io/cypress#495
• False positive on images jaredpalmer/cypress-image-snapshot#98
• (bug) Screenshots do not match with different monitor setups. meinaart/cypress-plugin-snapshots#117

[ckerr]

Gist version for easier testing in Electron-Fiddle:

https://gist.github.com/ckerr/10d6bf646218d6712d27592f5b39f66e

[ckerr]

Tested on Ubuntu 21.10 with color managed profiles enabled. Oddly, the color values between my two snapshots are identical, both #e55145 -- but it's clear that two different generation steps are happening, as test.png is 1545 bytes and test.correct.png is 2589.

I am able to confirm using Cypress that the same issue is present in chrome as well. I cannot confirm with standalone chrome. Now I do not know how to actually confirm this being an issues in chromium, as that repository is highly unfamiliar for me.

If this is an upstream issue in Chrome, it's better to report it there. It's very often the case that the best way to fix an issue is to have it fixed upstream so that Electron can pick up the fix automatically.

[archfz]

@ckerr Can you confirm that this is not an electron bug but a chromium one? If yes I will report it upstream.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

[github-actions]

This issue has been closed due to inactivity, and will not be monitored. If this is a bug and you can reproduce this issue on a supported version of Electron please open a new issue and include instructions for reproducing the issue.