Generate diff images for web snapshots

[rqcai]

No description provided.

[rqcai]

redwood-layout-dom ci was failing because the default background color is white instead of transparent. Here I'm explicitly setting the background color to transparent so the snapshot background color would be consistent.

from https://github.com/cashapp/redwood/actions/runs/17656504943/artifacts/3990317185

[JakeWharton]

So cool!

[squarejesse]

I don’t see why this call is necessary?

[rqcai]

we need to convert the delta image to blob so we can write to file.

[squarejesse]

This case is for when it’s only different on the alpha channel?

[squarejesse]

Should percentDifference be the max of these two measurements?

val percentDifferenceRgb = ...
val percentDifferenceAlpha = ...
val percentDifference = maxOf(percentDifferenceRgb, percentDifferenceAlpha)

?

As is if the alpha difference is 100% but the pixel difference is 0.1%, we’ll report 0.1%.

(That gets to be a practical problem when we support stuff like fuzzy-matching and accept a tolerance of .1%)

[rqcai]

I think you meant take percentDifferenceRgb if it's not 0 else percentDifferenceAlpha

[squarejesse]

I love it.

In a follow-up would you mind extracting this new code into a new class like ImageDiffer or something, and writing a couple test cases for it directly? I know testing tests is a bit yak-shaving, but in this case the code is subtle enough that I think it’s warranted. Plus I want to extract this code into a standalone library for everyone to use!

[squarejesse]

In particular I’d like test cases to cover things like

• Images match exactly
• Images differ on RGB by 10%, and confirm we get a 10% back on percent difference
• Images match on alpha by 10%, and confirm we get a 10% back on percent difference

You can probably use code like this to create sample images, but altering sizes or whatever to create diffs.

    val yellowRect = document.createElement("div").apply {
      setAttribute(
        "style",
        """
        |background-color: #ffff00;
        |width: 200px;
        |height: 100px;
        |position: relative
        """.trimMargin(),
      )
      appendChild(
        document.createElement("div").apply {
          setAttribute(
            "style",
            """
            |background-color: #0000ff;
            |position: absolute;
            |width: 50px;
            |height: 25px;
            |top: 10px;
            |right: 20px;
            """.trimMargin(),
          )
        },
      )
    }