capricorn86 / happy-dom

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

The value of `getPropertyValue` is wrong when using style attributes and custom properties #1364

Closed odanado closed 3 months ago

odanado commented 4 months ago

Describe the bug The value of getPropertyValue is wrong when using style attributes and custom properties.

import { Window } from "happy-dom";

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

const div = window.document.createElement("div");
div.setAttribute("style", "--my-color1: pink;");

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

style.textContent = `
  div {
    border-color: var(--my-color1);
  }
`;

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

// OK: expected: pink, actual: "" (empty string)
console.log(window.getComputedStyle(div).getPropertyValue("border-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:

capricorn86 commented 3 months ago

Thank you for reporting @odanado! :slightly_smiling_face:

There is a fix in now: https://github.com/capricorn86/happy-dom/releases/tag/v14.3.10

odanado commented 3 months ago

Thank you!