getComputedStyle does not return live style CSSStyleDeclaration, but a static one

[SubliemeSiem]

Basic info:

• Node.js version: 16.16.0
• jsdom version: 22.0.0

Minimal reproduction case

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

const jsDom = new JSDOM(
    '',
    {
        url: "https://localhost",
        runScripts: "dangerously",
        pretendToBeVisual: true
    }
);
const window = jsDom.window;

const div = window.document.createElement('div');

window.document.body.appendChild(div);

const computedStyles = window.getComputedStyle(div);

console.log('before: ' + computedStyles.background);

div.style.setProperty('background', 'red');

console.log('after: ' + computedStyles.background);

result:

before: rgba(0, 0, 0, 0)
after: rgba(0, 0, 0, 0)

How does similar code behave in browsers?

In the browser, the "after" line shows an rgba for the red color as expected:

before: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
after: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

Code pen: https://codepen.io/S-Peeters/pen/YzRzKem?editors=1111

[Davont]

I also encountered a similar problem： before: red after: rgb(255, 0, 0)

[juanrgm]

Same case here, the color (#ff0000, red) is always resolved to rgb format (rgb(255, 0, 0)).