JSDOM doesn't retrieve the "*style.backgroundColor = 'pink'" property set on a table row

[FagnerMartinsBrack]

Basic info:

• Node.js version: 8.1.2
• jsdom version: 11.2.0

Minimal reproduction case

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

const document = new JSDOM(`
    <table>
      <thead>
        <tr><th>Time</th></tr>
        <tr><th>Customer Name</th></tr>
      </thead>
      <tbody>
        <tr><td>...</td><td>Ricki</td></tr>
        <tr><td>...</td><td>Ricki</td></tr>
        <tr><td>...</td><td>Anna</td></tr>
      </tbody>
    </table>
  `).window.document;

[].slice.call(document.querySelectorAll('tr')).forEach((tr) => { return tr.style.backgroundColor = 'pink'; });

// Expected to have an array of "pink" but got an array of empty values
// Result: [ '', '', '', '', '' ]
console.log([].slice.call(document.querySelectorAll('tr')).map((tr) => { return tr.style.backgroundColor; }));

How does similar code behave in browsers?

The same code works in the browser: https://jsfiddle.net/r0u9p0uv/

Am I missing something?

[TimothyGu]

We don't support getting the style property as JS properties on style for now. You would have to use tr.style.getPropertyValue(). I believe @Zirro is working on a rewrite of the entire CSSOM support in jsdom, though, which should bring support for this feature.

[FagnerMartinsBrack]

@TimothyGu Very useful information. Should we keep this open until support is added?

[FagnerMartinsBrack]

@TimothyGu Unfortunately, this still doesn't work on NodeJS (works in the browser):

[].slice.call(document.querySelectorAll('tr')).forEach((tr) => { return tr.style.backgroundColor = 'pink'; });

// Prints ["","","","",""]
console.log(JSON.stringify([].slice.call(document.querySelectorAll('tr')).map((tr) => { return tr.style.getPropertyValue('background-color'); })));

[TimothyGu]

@FagnerMartinsBrack Apologies, I believe I was incorrect in my earlier evaluation of this issue. This seems to be another manifestation of https://github.com/chad3814/CSSStyleDeclaration/issues/48, in that only a subset of supported CSS colors are regarded as such by the cssstyle module we use:

https://github.com/chad3814/CSSStyleDeclaration/blob/5c51d1657f8b693d46744e05239c24ae03be57e5/lib/parsers.js#L100-L116

Until @Zirro finishes his work I'm not sure there's anything that can be done about this, as @chad3814 does not seem to be active.

[FagnerMartinsBrack]

@TimothyGu So from what I understand 'pink' needs to be added to that list, is that it?

This one works in node:

[].slice.call(document.querySelectorAll('tr')).forEach((tr) => { return tr.style.backgroundColor = '#000'; });

    // Expected to have an array of "pink" but got an array of empty values
    // Result: [ '', '', '', '', '' ]
    console.log([].slice.call(document.querySelectorAll('tr')).map((tr) => { return tr.style.backgroundColor; }));

And in the browser: https://jsfiddle.net/r0u9p0uv/1/

[TimothyGu]

@FagnerMartinsBrack Yes I believe so. "red" works as well, for example.

[FagnerMartinsBrack]

Might be worth using the extended color list to be spec compliant: https://www.w3.org/TR/css3-color/

See on "4.3. Extended color keywords".

[TimothyGu]

Note, we always try to implement the latest Editor's Draft, so https://drafts.csswg.org/css-color/#named-colors.