Skip to main content

CSS custom properties (--*) and var()

Author-defined properties that inherit and are substituted with var(). Specification: drafts.csswg.org/css-variables/.

Results​

Probed on 2026-10-19 with Node.js v22.23.3.

warpdom 0.1.6​

Partial

2 of 3 checks work.

  • color: var(--c) with --c: red computes to "rgb(255, 0, 0)".
    • Result: computed color: expected "rgb(255, 0, 0)", got "var(--c)"
Report a wrong result for warpdom

happy-dom 21.0.3​

Partial

1 of 3 checks work.

  • A custom property from a stylesheet rule on the parent is inherited: getComputedStyle(child).getPropertyValue("--gap") is "10px".
    • Result: computed --gap: expected "10px", got ""
  • color: var(--c) with --c: red computes to "rgb(255, 0, 0)".
    • Result: computed color: expected "rgb(255, 0, 0)", got "red"
Report a wrong result for happy-dom

jsdom 30.1.3​

Partial

2 of 3 checks work.

  • color: var(--c) with --c: red computes to "rgb(255, 0, 0)".
    • Result: computed color: expected "rgb(255, 0, 0)", got "var(--c)"
Report a wrong result for jsdom

linkedom 0.18.13​

Partial

1 of 3 checks work.

  • A custom property from a stylesheet rule on the parent is inherited: getComputedStyle(child).getPropertyValue("--gap") is "10px".
    • Result: TypeError: w.getComputedStyle is not a function
  • color: var(--c) with --c: red computes to "rgb(255, 0, 0)".
    • Result: TypeError: w.getComputedStyle is not a function
Report a wrong result for linkedom

Checks​

Exists when: element.style has setProperty() and getPropertyValue().

  • inline-roundtrip: style.setProperty("--gap", "10px") is read back by style.getPropertyValue("--gap"). (spec)
  • computed-inherited: A custom property from a stylesheet rule on the parent is inherited: getComputedStyle(child).getPropertyValue("--gap") is "10px". (spec)
  • var-substitution: color: var(--c) with --c: red computes to "rgb(255, 0, 0)". (spec)