Getting result of CSS calc to set custom properties
<p>I'm testing a CSS framework for specifying numbers via micro-classes. For instance, something like <code>&lt;div class="fifty percent wide"&gt;</code> might translate into <code>width: 50%</code>. The implementation uses CSS variables (custom properties).</p>

<p>Consider the following CSS:</p>

<pre><code>.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    { width: var(--percent); }
</code></pre>

<p>That's all fine and works great. The issue is that I want to write a test suite, which would verify that <code>fifty percent</code> results in a value for the custom property <code>--percent</code> of <code>50%</code>. Unfortunately, if I use <code>getComputedStyle</code> to examine the value of <code>--percent</code>, I see the entire (unresolved, uncomputed) "calc" string. If I examine the value of <code>width</code>, I get the already-resolved value such as "512px". </p>

<p>Is there some way to obtain and validate programatically the resolved, calculated values of custom CSS properties? Or an API to force the evaluation of "calc" expressions?</p>