It seems that browsers have limitations when calc() and var() are nested. Because they can be nested both ways and individually. I quickly created a test case and at seems that both Firefox and Chrome fail t6of this test case:
https://jsfiddle.net/mtrantalainen/ejmxu8zs/
The test case repeated here:
HTML:
<body>
<article>
<div><span class="t1">t1</span></div>
<div><span class="t2">t2</span></div>
<div><span class="t3">t3</span></div>
<div><span class="t4">t4</span></div>
<div><span class="t5">t5</span></div>
<div><span class="t6">t6</span></div>
<div><span class="t7">t7</span></div>
</article>
</body>
CSS:
body
{
background: white;
--pixel: 1px;
--block: calc(16*var(--pixel));
--emsquare: var(--block);
--counter: 5;
--fallback: calc(5 * var(--emsquare));
--fallback2: var(--fallback);
}
article
{
background: red;
width: 80px;
height: 120px;
}
span
{
background: green;
display: inline-block;
height: 20px;
text-align: center;
}
span.t1
{
width: calc(5 * var(--block));
}
span.t2
{
width: calc(var(--counter) * var(--block));
}
span.t3
{
width: calc(var(--block)*5);
}
span.t4
{
width: calc(5 * var(--emsquare));
}
span.t5
{
width: var(--fallback2);
}
span.t6
{
--pixel: 10px;
width: calc(0.5 * var(--emsquare));
}
span.t7
{
width: var(--undefined42, 80px);
}
Expected result is to have no red visible.
Note that test case t6 is expected to use locally defined --pixel value to define emsquare and end up with result 80px and render identical to other tests. Firefox and Chrome seem to fail this test.
It might make sense to split test cast t6 as a separate item and call it "nested calc() or var() with locally redefined used value" or something like that.
It seems that browsers have limitations when calc() and var() are nested. Because they can be nested both ways and individually. I quickly created a test case and at seems that both Firefox and Chrome fail
t6of this test case:https://jsfiddle.net/mtrantalainen/ejmxu8zs/
The test case repeated here:
HTML:
CSS:
Expected result is to have no red visible.
Note that test case
t6is expected to use locally defined--pixelvalue to defineemsquareand end up with result80pxand render identical to other tests. Firefox and Chrome seem to fail this test.It might make sense to split test cast
t6as a separate item and call it "nested calc() or var() with locally redefined used value" or something like that.