css-element-queries

css-element-queries copied to clipboard

I am using the CSS element queries 1.0.2 with Emberjs. Every time I start the Ember tests with PhantomJS Prebuilt 2.1.14, I get the error TypeError: null is not an object (evaluating 'styles.getPropertyValue('animation-name').index Of') which comes from this function (lines 410-426) in ElementQueries.js.

document.body.addEventListener(animationStart, function (e) {
 var element = e.target;
 var styles = window.getComputedStyle(element, null);

   if (-1 !== styles.getPropertyValue('animation-name').indexOf('element-queries')) {
    element.elementQueriesSensor = new ResizeSensor(element, function () {
     if (element.elementQueriesSetupInformation) {
      element.elementQueriesSetupInformation.call();
     }
    });

    var sensorStyles = window.getComputedStyle(element.resizeSensor, null);
    var id = sensorStyles.getPropertyValue('min-width');
    id = parseInt(id.replace('px', ''));
    setupElement(e.target, idToSelectorMapping[id]);
   }
 });

This only fails with PhantomJS and is fine in browser tests with Chrome, so I assume there might be something wrong in general when using element queries with headless browsers or maybe only with PhantomJS. My attempt at implementing a sanity check was wrapping styles.getPropertyValue('animation-name') !== null around the two if conditions, which seems to work. Is that of any use?

Mh, getComputedStyle should work in headless as well. Have you tried headless chrome? https://github.com/GoogleChrome/puppeteer

What I didn't know was that my co-worker tried out the ElementQueries but deleted everything except the import and the listener, so we could just remove the import and the listener and the tests worked just fine. Replacing PhantomJS with Puppeteer was no option, so if you say it works in Puppeteer this might be a PhantomJS thing.