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
Comments to: Visual Regression Testing with CSS Blend Modes

Recent Articles

Good Reads

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
La camiseta principal es blanca con el logo y el escudo en azul marino. La camiseta es azul con detalles amarillos, mientras que el pantalón corto es blanco. El agente de Lukaku ha revelado un deseo ardiente de que la estrella reescriba su historia en el club. Está ligeramente inspirada en la equipación de visitante […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]