1440251 - Allow division in calc for <integer>s.

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Philipp Rudloff]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180208173149

Steps to reproduce:

The following property declaration does not compute the correct value:

z-index: calc(10 / 2); 

Whereas the following do compute the correct value:

line-height: calc(10 / 2);
z-index: calc(10 * 0.5);

Reduced example:

https://codepen.io/kleinfreund/pen/VQpZxY

Other browsers that are affected:

- Google Chrome 64
- Opera


Actual results:

The computed value for z-index is `auto`.


Expected results:

The computed value for z-index is `5`.

Comment 1

[Ciprian Muresan [:cmuresan], Ecosystem QA]

User Agent 	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID 	20180226230123

I have managed to reproduce this issue on the latest Firefox release and on the latest Nightly on Windows 10, Mac 10.12 and Arch Linux.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

So when I rewrote calc I left a check for <integer> that the old code had:

  https://searchfox.org/mozilla-central/rev/056a4057575029f58eb69ae89bc7b6c3c11e2e28/servo/components/style/values/specified/calc.rs#275

On hindsight, it makes sense, since arbitrary division can make integrals non-integrals. line-height is different because it takes <number>, not <integer>.

See https://github.com/w3c/csswg-drafts/issues/2337 for a spec issue that could change the spec around this.

Comment 3

[Jet Villegas (inactive)]

[Triage 2018/03/23 - P3]

Comment 4

[Ana Tudor]

As per the Values 4 spec, this should now work https://drafts.csswg.org/css-values-4/#calc-type-checking

I came across this while trying to use calc() with division inside repeat().

Reduced test case (my actual use case employed variables) https://codepen.io/thebabydino/pen/VBOZXM

Comment 5

[Emilio Cobos Álvarez (:emilio)]

I guess we should fix this, since we already allow <number> inside calc-as-an-integer:

document.body.style.zIndex = "calc(0.5)"
> "calc(0.5)"
document.body.style.zIndex
> "calc(0)"

Though right now we floor instead of round, so this would be a slight behavior change. In any case I don't expect it to break anything since Blink / WebKit don't accept this.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Allow integer division inside calc() expressions.

Took more to write the test than to write the code :)

Comment 7

[Xidorn Quan [:xidorn] UTC+10]

Comment on attachment 9009480 [details]
Allow integer division inside calc() expressions.

Xidorn Quan [:xidorn] UTC+10 has approved the revision.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/284b4d46eb19
Allow integer division inside calc() expressions. r=xidorn

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/13037 for changes under testing/web-platform/tests

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 11

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/284b4d46eb19

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Can't merge web-platform-tests PR due to failing upstream checks:
Github PR https://github.com/web-platform-tests/wpt/pull/13037
* Taskcluster (pull_request) (https://tools.taskcluster.net/task-group-inspector/#/V3Nlzt76TKeQhchihe5-JQ)