Bug 202259 – [css-grid] The computed value of grid-template-{columns|rows} should not expand repeat()

• Component: CSS
• Status: RESOLVED FIXED

[Oriol Brufau]

The repeat() notation with an integral number of repetitions used to be expanded at specified-value time.
After bug 197840, this happens at computed-value time. But this is still wrong, it should be expanded at used-value time.

Usually this is not noticeable because getComputedStyle returns the used value for grid containers.
But it's observable if the property is used in an element which is not a grid container.
Also, preserving repeat() is necessary for proper interpolation (https://github.com/w3c/csswg-drafts/issues/3503)

What steps will reproduce the problem?
(1) Load https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20id%3D%22foo%22%20style%3D%22grid-template-rows%3A%20repeat(2%2C%20100px)%22%3E%3C%2Fdiv%3E%0A%3Cscript%3Ew(getComputedStyle(foo).gridTemplateRows)%3C%2Fscript%3E

    <div id="foo" style="grid-template-rows: repeat(2, 100px)"></div>
    <script>console.log(getComputedStyle(foo).gridTemplateRows)</script>

What is the expected result?
It logs "repeat(2, 100px)"

What happens instead?
It logs "100px 100px"

Blink is also wrong: https://bugs.chromium.org/p/chromium/issues/detail?id=989004
Firefox fixed it: https://bugzilla.mozilla.org/show_bug.cgi?id=1519958

[Oriol Brufau]

Blocking bug 204580 since this affects interpolation.
https://drafts.csswg.org/css-grid/#repeat-interpolation

[Radar WebKit Bug Importer]

<rdar://problem/90406085>

[Matt Woodrow]

Created attachment 454925 [details]
Patch

[Matt Woodrow]

Created attachment 455869 [details]
Patch for landing

[EWS]

Committed r291956 (248923@main): <https://commits.webkit.org/248923@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 455869 [details].