Styles do not Inherit

[Impally]

Basic info:

• Node.js version: 6.11.1
• jsdom version: 11.6.2

Minimal reproduction case

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`
<style>
  body {
    color: Red;
  }
</style>hello world
<div class="divgroup" id="d1" style="padding-right: 5px;">Content for div 1</div>
`);

 dom.window.getComputedStyle(dom.window.document.querySelector('#d1'))
dom.window.getComputedStyle(dom.window.document.querySelector('#d1')).getPropertyValue('color')

How does similar code behave in browsers?

https://jsbin.com/cujumihabe/edit?html,js,console,output

The computed style for the div does not include the inherited color. That's the major issue, the other being that there are a large amount of things left out, and the color would not be translated to an rgb value, but I believe both of those are issues with cssom.

[domenic]

I think the issue is that we implement cascading, but not inheritance. Inheritance is harder :(.

[TidyIQ]

Cascading isn't working properly if it is implemented.

getComputedStyle(element).getAttribute("color") returns #004ba0 instead of #2e7d32 in jsdom for this element: https://i.imgur.com/zYMaGPu.png