Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.
I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out we can.
See the Pen Visual Regression Testing with CSS Mix-Blend-Modes by Sarah Drasner (@sdras) on CodePen.
The above pen shows that the text block of our layout only changed slightly but the button has been modified more dramatically, and the illustration had small triangles that were altered.
When I tweeted about this idea, Bennett Feely, author of such impressive tools as Clippy (for CSS clip-path generation) and CSS Gradients With Background Blend-Mode, had already created something similar, but it used background-blend-mode: difference; instead.
You can hover over it to see the two images separated:
See the Pen Image diffing by Bennett Feely (@bennettfeely) on CodePen.
To make things even more interesting, I was pointed to this post by Franklin Ta which might be patient zero to this whole idea and it beautifully explains the concept behind creating visual diffs with CSS. This post came out two full years ago and is worth reading.
Una then took all of this one step further and created a tool that we can use in the browser to readily create visual regression diffs without a lot of scripting, called Diffy. Pretty neat.
All with one line of CSS!
Visual Regression Testing with CSS Blend Modes is a post from CSS-Tricks
No Comments