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
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
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
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
This will soon be yet another stylo/gecko mismatch, so I would appreciate it if this was supported soon.
Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)
This is fixed by stylo.
Status: ASSIGNED → RESOLVED
Last Resolved: a year 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.
You need to log in before you can comment on or make changes to this bug.