New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 641556 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Aug 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

calc(): + and - with one operand of unitless length 0 and another of a length with explicit units are incorrectly ignored as invalid

Project Member Reported by bickne...@google.com, Aug 26 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Example URL:
http://jsbin.com/jejewa/1/edit?html,output

Steps to reproduce the problem:
Write a CSS rule using `calc()` to produce a length and add unitless zero to that length within the `calc()`. For example, `calc(1px + 0)`. The rule will be considered invalid.

What is the expected behavior?
Unitless zero is a valid length (https://www.w3.org/TR/css-values/#lengths, https://drafts.csswg.org/css-values-3/#lengths) so adding and subtracting unitless zero and other lengths with explicit units should resolve to the type of unit of the other operand.

One specific problem this bug results in is when using `calc()` with CSS custom properties. If you write a `calc()` function using a custom property as an operand to an addition or subtraction with a length, the person setting the value of that custom property you've provided can't use the unitless zero shorthand even though it is a valid length.

What went wrong?
Chrome (and all other browsers I tested) report this kind of expression as invalid and ignore it.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No Firefox 48.0, Safari 9.1.2 (11601.7.7), WebKit Nightly (r205027)

Chrome version: 52.0.2743.116  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 22.0 r0
 
Project Member

Comment 1 by sheriffbot@chromium.org, Aug 28 2016

Labels: Hotlist-Google

Comment 2 by f...@opera.com, Aug 29 2016

Components: -Blink Blink>CSS

Comment 3 by samli@chromium.org, Aug 29 2016

Labels: Needs-Bisect
Status: Untriaged (was: Unconfirmed)

Comment 4 by timloh@chromium.org, Aug 30 2016

Cc: alancutter@chromium.org tabatkins@chromium.org
Labels: -Needs-Bisect -OS-Mac OS-All
Status: WontFix (was: Untriaged)
Seems like this is WAI, see spec link -- 0 (a <number-token> -> <integer>) won't be able to coalesce with 1px (a <dimension-token> -> <length>).

https://drafts.csswg.org/css-values-3/#calc-type-checking

You probably want to file an issue here https://github.com/w3c/csswg-drafts/issues.
Yes, this is WAI (as the person who wrote that spec text).

I do need to add a little bit of text allowing numbers to coalesce with lengths when they're "length-equivalent", like percentages do, to handle line-height properly, but I don't intend for that to handle unitless 0 in general.

But feel free to open an issue on the CSSWG, as Tim recommends; we can discuss it there.

Sign in to add a comment