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!
We can get similar result using filters. In this case the overlay should have 50% opacity and applied filter: invert(100%) to it. The parts that are the same will be gray and the differences will shine like a christmass tree :D . The two methods work almost the same except that using blend-modes costs one line of code, and using filters costs two lines of code :D
invert / 50% opacity is the trick I use to assist aligning images in photoshop; never heard of it being used in the browser. Good to know, thanks!
Thanks for posting this amazing information about regression testing it’s really very helpful info good job! .. – http://bit.ly/1widA2V