Bug 202259 - [css-grid] The computed value of grid-template-{columns|rows} should not expand repeat()
Summary: [css-grid] The computed value of grid-template-{columns|rows} should not expa...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Matt Woodrow
URL:
Keywords: InRadar
Depends on:
Blocks: 204580
  Show dependency treegraph
 
Reported: 2019-09-26 01:46 PDT by Oriol Brufau
Modified: 2022-03-27 21:19 PDT (History)
16 users (show)

See Also:


Attachments
Patch (105.20 KB, patch)
2022-03-16 19:45 PDT, Matt Woodrow
dino: review+
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch for landing (116.50 KB, patch)
2022-03-27 16:19 PDT, Matt Woodrow
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Oriol Brufau 2019-09-26 01:46:21 PDT
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
Comment 1 Oriol Brufau 2019-11-25 08:02:28 PST
Blocking bug 204580 since this affects interpolation.
https://drafts.csswg.org/css-grid/#repeat-interpolation
Comment 2 Radar WebKit Bug Importer 2022-03-16 19:45:28 PDT
<rdar://problem/90406085>
Comment 3 Matt Woodrow 2022-03-16 19:45:47 PDT
Created attachment 454925 [details]
Patch
Comment 4 Matt Woodrow 2022-03-27 16:19:00 PDT
Created attachment 455869 [details]
Patch for landing
Comment 5 EWS 2022-03-27 21:19:16 PDT
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].