Skip to main content
13 October 2023

SVG with GIF inside. How to freeze the animation?

We discovered that you can place animated GIFs inside of the SVG. This makes freezing animation very interesting problem. Example is on the site Neutec

GIF inside SVG

 

Here is a way to freeze it with javascript:
 

const image = document.querySelector('#Layer_1 image[*|href$=".gif"]');

if (image) {
    const c = document.createElement('canvas');
    const w = c.width = image.getAttribute('width');
    const h = c.height = image.getAttribute('height');

    c.getContext('2d').drawImage(image, 0, 0, w, h);
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', c.toDataURL('image/gif'));
}

Visual Testing of Patternlab and Drupal

Because both Patternlab and Drupal 8 can use twig as a rendering engine it is possible to build a theme to be based on Patternlab’s components. It makes very easy to apply visual regression testing to Patternlab’s demo site.
6 mins read read

Testing tabs, mobile menu, sliders

A lot web pages right now have some elements that gets activated by clicking on the pages. For example, sliders, or dropdown menu, or tabs. How to take screenshots of those pages too?
4 mins read read

Make some pages for Visual Regression Testing only in Drupal

When you do visual regression testing, it can be a great idea to have some dedicated pages with all the different elements of your site combined. So instead of running screenshots of many pages on your site, you could do just a few and cover all the UI. These are also sometimes called style guides.

On the other hand, you do not want your site visitors to accidentally open these pages and be surprised by what they are for.

1 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs