Parse errors when using calc with rem and px

Question

I have the following CSS:

body {
  width: calc(700px + 2 * 4rem);
}

.someclass {
  margin: calc(2rem - 2px) 0;
}

When I run this through the W3C CSS validation, I get

Value Error : width Parse Error + 2 * 4rem)
Value Error : margin Parse Error - 2px) 0

What’s causing this? All the units I’m using in calc() are length units, and calc() should be able to handle it.

Answer 1

This is a known bug in w3 css validator:

https://www.w3.org/Bugs/Public/show_bug.cgi?id=18913