1350069 - [css-grid] calc() function doesn't work inside repeat() function and grid line/span

Status: RESOLVED FIXED

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

Description

[Pavel Lovtsevich]

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

Steps to reproduce:

It's not possible to use dynamic values in CSS Grids repeat() function through calc() function. You can't use calculations inside or outside it.

Like this:
grid-template-columns: repeat(calc(2 * 2), 1fr);

Or like this:
--value: calc(2 * 2);
grid-template-columns: repeat(var(--value), 1fr);

It's very sad because you can't do more with CSS Grids, e.g. subgrids polyfilling (http://codepen.io/lautsevich/pen/NpYobE).


Actual results:

Grids don't works at all.


Expected results:

You should see a four columns grid.

Comment 1

[Mats Palmgren (inactive)]

Right, the spec is very clear that calc() "can be used wherever <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values are allowed."
https://drafts.csswg.org/css-values/#calc-notation

Chrome supports it for repeat() and grid line and span <integer>s,
so we should try to fix this soon-ish.  I'll take a stab at it...

Comment 2

[Sebastian Zartner [:sebo]]

I've added a note about this to https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#Browser_compatibility. Once this bug is fixed, that page should be updated accordingly.

Sebastian

Comment 3

[yisibl]

See also https://bugzilla.mozilla.org/show_bug.cgi?id=1296209

Comment 4

[Anthony Ramine [:nox]]

This will soon be yet another stylo/gecko mismatch, so I would appreciate it if this was supported soon.

Comment 5

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 6

[Emilio Cobos Álvarez (:emilio)]

This is fixed by stylo.

Comment 7

[Will Bamberg [:wbamberg]]

I've updated the compat data for repeat() to say the that note added in Comment 2 is not applicable from Firefox 57:

https://github.com/mdn/browser-compat-data/pull/2415
https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

(due to a caching experiment currently running in MDN you may need to add a bogus parameter, to see the current page:
https://developer.mozilla.org/en-US/docs/Web/CSS/repeat?some-bogus-parameter )

Marking dev-doc-needed, but please let me know if we need anything else.