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

ASSIGNED
Assigned to

Status

()

Core
CSS Parsing and Computation
P2
normal
ASSIGNED
9 months ago
3 months ago

People

(Reporter: Pavel Lovtsevich, Assigned: mats)

Tracking

(Depends on: 1 bug, Blocks: 2 bugs, {compat, dev-doc-needed, testcase})

52 Branch
compat, dev-doc-needed, testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [parity-Chrome])

(Reporter)

Description

9 months ago
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.

Updated

9 months ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Summary: cal() function don't work inside repeat() function → calc() function don't work inside repeat() function
Summary: calc() function don't work inside repeat() function → calc() function doesn't work inside repeat() function
(Assignee)

Comment 1

9 months ago
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...
Assignee: nobody → mats
Blocks: 616605
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Keywords: compat, testcase
OS: Unspecified → All
Priority: -- → P2
Hardware: Unspecified → All
Summary: calc() function doesn't work inside repeat() function → [css-grid] calc() function doesn't work inside repeat() function and grid line/span
Whiteboard: [parity-Chrome]
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
Keywords: dev-doc-needed

Comment 3

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

Comment 4

7 months ago
This will soon be yet another stylo/gecko mismatch, so I would appreciate it if this was supported soon.
Depends on: 1296209
See Also: → bug 1350739
Blocks: 1376206
You need to log in before you can comment on or make changes to this bug.