Jsdom: Cascading of inline styles

Created on 28 Dec 2016 · 4Comments · Source: jsdom/jsdom

Am I doing something wrong, or is JSDOM completely lacking support for cascading inline styles?

A simple example:

var doc = jsdom.jsdom('<html><body><div style="color: red;"><div id="nested"></div></div></body></html>');
var win = doc.defaultView;
var el = doc.getElementById('nested');
console.log(win.getComputedStyle(el, ''));

Output:

CSSStyleDeclaration {
  '0': 'display',
  _values: { display: 'block' },
  _importants: { display: '' },
  _length: 1,
  _onChange: [Function] }

As reference, here the browser's behavior for the same example:

https://jsfiddle.net/qxu1v1zc/

css feature

Source

lehni

👍2

All 4 comments

is JSDOM completely lacking support for cascading inline styles?

That is true afaik. No one has written anything to properly deal with cascading yet.

Sebmaster on 31 Dec 2016

Ouch... That sounds like a massive task? As far as style handling goes, it also looks like there isn't any kind of style parsing in place in getComputedStyle()? For example, the browser returns rgb(255, 0, 0) for the color in the above example, while jsdom returns red.

lehni on 31 Dec 2016

Any idea when/if this will be fixed? My tests are failing due to getComputedStyle returning the wrong value due to lack of cascading in JSDOM.