Closed Bug 1350069 Opened 7 years ago Closed 6 years ago

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

Categories

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

Product:
Core
Component:
CSS Parsing and Computation
Version:
52 Branch
Type:
defect

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: zigzag.mcquack, Assigned: MatsPalmgren_bugz)

References

(Blocks 2 open bugs)

Details

(4 keywords) 

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.
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
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: css-grid
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
This will soon be yet another stylo/gecko mismatch, so I would appreciate it if this was supported soon.
Depends on: 1296209
See Also: → 1350739
Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)
Keywords: parity-chrome
Whiteboard: [parity-Chrome]
This is fixed by stylo.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
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.
Keywords: dev-doc-needed → dev-doc-complete
You need to log in before you can comment on or make changes to this bug.