[css-values] All browsers handle calc() in <integer> incorrectly

[LeaVerou]

Testcases:

• z-index: http://dabblet.com/gist/f1685a573380ef3f9041842a10965e3d
• grid-column-end: http://dabblet.com/gist/e2e7d3bceef592569f8eadbd66c6b7f1

z-index accepts <integer>.
grid-column-end accepts an <integer> after span.

calc() is allowed everywhere that an <integer> is accepted:

Additionally, math functions that resolve to can be used in any place that only accepts . (It gets rounded to the nearest integer, as specified in §8.1.4 Range Checking.)

However, no browser seems to support this properly (see linked test):

• Blink, WebKit, Gecko support multiplication but not division
• Edge does not seem to support calc() at all in grid-column-end, and supports multiplication but not division in z-index.

[SelenIT]

AFAIK, browsers currently treat the result of division in calc() as number (even when the result has no fractional part), according to the previous level of the spec, so it is not accepted where <integer> is expected. I suppose the change request should be made for them to switch to the Level 4 behavior. It appears that Chrome and Mozilla already have such bugs filed.

[tabatkins]

Right, this isn't a spec issue, just browser bugs due to them not yet following the spec. I'll close this issue; Chrome and Firefox already have bugs.

@FremyCompany I don't want to create a Microsoft account right now - you mind filing this as an Edge bug too?

[LeaVerou]

I filed it via Twitter: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/19025708/

[FremyCompany]

Yes, we also have the "wrong" rounding behavior, this was mentioned when we made the spec change to allow calc for integers. Properties that don't allow calc() are of course another problem, that will eventually need to be updated too.

Thanks everyone for filing all the relevant bugs.