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: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 204580
  Show dependency treegraph
 
Reported: 2019-09-26 01:46 PDT by Oriol Brufau
Modified: 2019-11-25 08:02 PST (History)
2 users (show)

See Also:


Attachments

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