getComputedStyle does not work with css variables on the :root

[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 style = window.document.createElement('style');
style.innerHTML = ':root { --test-var: red }';
window.document.body.appendChild(style);
const computedStyles = window.getComputedStyle(window.document.body);
console.log('css var: ' + computedStyles.getPropertyValue('--test-var'));

Output in console:

css var:

How does similar code behave in browsers?

Same code in the browser shows

css var: red;

code pen: https://codepen.io/S-Peeters/pen/zYMYYaY?editors=1111

[SubliemeSiem]

Also, using the variable on an element property and getting the computed style for that element property does not work either.

window.document.body.style.setProperty('color', '--test-var');
console.log(getComputedStyle(window.document.body).color);

does not log "red" or "rgba(255, 0, 0)", which it does log in the browser