capricorn86 / happy-dom

A JavaScript implementation of a web browser without its graphical user interface
MIT License
3.14k stars 189 forks source link

Incorrect return value of `getPropertyValue` for nested custom properties without fallback value #1363

Closed odanado closed 3 months ago

odanado commented 4 months ago

Describe the bug An incorrect return value of getPropertyValue for nested custom properties without fallback value.

import { Window } from "happy-dom";

const window = new Window({ url: "https://localhost:8080" });

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

const style = window.document.createElement("style");

style.textContent = `
  div {
    --my-color1: pink;
    --my-color2: red;

    border-color: var(--my-color1);

    color: var(--my-color1, var(--my-color2, blue));

    background-color: var(--my-color1, var(--my-color2));
  }
`;

window.document.head.appendChild(style);
window.document.body.appendChild(div);

// OK: expected: pink, actual: pink
console.log(window.getComputedStyle(div).getPropertyValue("border-color"));

// with fallback value
// OK: expected: pink, actual: pink
console.log(window.getComputedStyle(div).getPropertyValue("color"));

// without fallback value
// NG: expected: red, actual: "" (empty string)
console.log(window.getComputedStyle(div).getPropertyValue("background-color"));

To Reproduce Steps to reproduce the behavior:

  1. Run git clone https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox
  2. Run npm ci
  3. Run node src/repro-non-fallback.js

Expected behavior --my-color1 is defined, so the background-color should be pink.

Device: