Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nested calc() and var() #6010

Open
mikkorantalainen opened this issue Sep 2, 2021 · 0 comments
Open

nested calc() and var() #6010

mikkorantalainen opened this issue Sep 2, 2021 · 0 comments
Labels
Support data suggestion

Comments

@mikkorantalainen
Copy link

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Support data suggestion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mikkorantalainen @Fyrd