hasStyle does not work for CSS variables

[DingoEatingFuzz]

The bug

Consider this element:

<div style="--my-var:123" />

The following assertion does not work:

assert.dom('div').hasStyle({ '--my-var': 123 });

Since hasStyle is implemented with getComputedStyle and getComputedStyle returns styles after computations are resolved, variable styles are not present on the CSSDeclaration object.

In order to get the variable styles from an element you must use element.style.getPropertyValue('--my-var').

Motivation to have this behavior

An emerging pattern now that CSS variables have broad adoption is to dynamically set variables in JS/HTML and then read the variables in static CSS.

For instance:

div {
  --my-var: 100; /* default value */
  height: var(--my-var); /* overridable from JS without hardcoding height */
  max-height: var(--my-var); /* implementation detail not the concern of JS */
}

Proposed solution

I think the API for hasStyle can remain unchanged. The keys for the expected object can be divided into variables (start with --) and declarations. Then the two sets can be iterated over using style.getPropertyValue and getComputedStyle respectively.

[monovertex]

I came upon this feature request while looking for the same functionality. If this is something wanted in the proposed form I can take a stab at implementing this and opening a PR.

[vladucu]

We would love to see support added for this.
An attempt to implement this already exist in #1976. Anything I can do to get this merged?

[BobrImperator]

3.1.0 has been released https://www.npmjs.com/package/qunit-dom/v/3.1.0

See if it works for you

[BobrImperator]

Closing this since we've released the 3.1.0 version, if the issue is still present, feel free to reopen.