[cssom] getComputedStyle()[--var] return a resolved value?

[jonjohnjohnson]

https://drafts.csswg.org/cssom/#resolved-values

If you have this...

el.style.setProperty('--var','calc(50vh + 4em)');

I know that this...

window.getComputedStyle(el).getPropertyValue('--var');

returns calc(50vh + 4em)

But I've often found myself needing to find out the resolved value, even if it's not used as the exact value of a property for which I could retrieve the resolved value.

So if the window.innerHeight was 600 and the font-size resolved to 20px on the element, I'd hope that something like...

window.getComputedStyle(el)['--var'];

Could return 380px???

I know there may be more pertinent topics to discuss related to getComputedStyle such as #2149, #379, or #1033, but for now, I am usually forced to cause a decent amount of layout thrashing to accomplish what is described above.

[Loirooriol]

But the value of --var: calc(50vh + 4em) is only interpreted as a sequence of tokens, it never resolves to a length!

In fact CSS alone can't know that you want to resolve that custom property to a length and not to something else. But the registerProperty Houdini API could be used for that.

Another approach is setting the expression that you want to resolve as a length to some standard property which computes to a length, e.g.

el.style.marginLeft = "calc(50vh + 4em)";
getComputedStyle(el).marginLeft; // 380px
el.style.marginLeft = "";

[jonjohnjohnson]

@Loirooriol Your suggested approach is what I often do, and is what I'd meant when saying...

...used as the exact value of a property for which I could retrieve the resolved value.

But using that type of approach thrashes my layout more than desired to just retrieve a resolved value.

Didn't think about registerProperty for this, but makes a lot of sense, even if it requires more heavy lifting than my original request.

[FremyCompany]

I'm going to close this issue, since the actual result is by design and that it is possible to achieve what you want using existing API

[jonjohnjohnson]

For anyone else that comes upon this, I figured I would clarify...

If creating the custom property in this way

CSS.registerProperty({
  name: '--var',
  syntax: '<length>',
  inherits: false,
  initialValue: '0px'
});

Then using

el.style.setProperty('--var','calc(50vh + 4em)');
window.getComputedStyle(el).getPropertyValue('--var')

Will in fact give you a resolved value like 380px and not calc(50vh + 4em)