Bug 270924 – cssText gets serialized using inconsistent order for 'grid-template-rows' and 'grid-template-columns'

• Status: NEW
• Component: CSS

[Daniel Holbert]

Created attachment 470348 [details]
testcase 1

STR:
1. Load attached testcase

EXPECTED RESULTS:
All results should be the same color/weight, probably all green/nonbold.
(More specifically: the browser should consistently serialize "grid-template-rows" and "grid-template-columns" in the same order -- probably with "rows" first).

ACTUAL RESULTS:
Results 4-6 are red & bold.
(which is an indication that the browser is serializing "grid-template-columns" first in the cssText there)


This testcase does not specify these properties explicitly, but the browser is forced to expand them automatically when producing cssText.

When the browser does that, it seems reasonable to expect that it will do so using a consistent order (since no order was provided by the author).

Firefox gives EXPECTED RESULTS here.  Chromium/Safari give ACTUAL RESULTS.

This discrepancy is the reason for the "MISSING" entries on this WPT:
https://wpt.fyi/results/css/css-grid/parsing/grid-shorthand-serialization.html?label=experimental&label=master&aligned

In fact all browsers are running the same subtests, but the grid-shorthand-serialization.html WPT happens to use the browser-provided serialization as the subtest label -- so for cases where browsers disagree about these serializations, the WPT harness judges it to mean that browsers are missing results for certain subtests.

[Daniel Holbert]

Created attachment 470350 [details]
screenshot of Firefox (top) vs. WebKit (middle) vs. Chrome (bottom)

Here's a screenshot to make the discrepancy a bit clearer.  WebKit is in the middle (Epiphany); lime arrows are pointing to the spots where "grid-auto-rows" is serialized first, red arrows are pointing to the spots where "grid-auto-columns" is serialized first.

[Daniel Holbert]

(One other side note -- I used `grid-auto-flow: var(--foo)` in the testcase's CSS here, but that variable usage isn't super-important or required to trigger the bug.  It just makes the bug easier to see in more scenarios. If I use an explicit keyword there instead, then some of the examples are able to collapse the `style` attribute into a single CSS property-declaration which reduces my ability to exhibit the inconsistency here.)

[Daniel Holbert]

Chromium version of this bug: https://issues.chromium.org/issues/329442309

[Radar WebKit Bug Importer]

<rdar://problem/124875370>