Bug 270924 - cssText gets serialized using inconsistent order for 'grid-template-rows' and 'grid-template-columns'
Summary: cssText gets serialized using inconsistent order for 'grid-template-rows' and...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-03-13 11:46 PDT by Daniel Holbert
Modified: 2024-08-22 06:28 PDT (History)
8 users (show)

See Also:


Attachments
testcase 1 (1.65 KB, text/html)
2024-03-13 11:46 PDT, Daniel Holbert
no flags Details
screenshot of Firefox (top) vs. WebKit (middle) vs. Chrome (bottom) (249.24 KB, image/png)
2024-03-13 11:56 PDT, Daniel Holbert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2024-03-13 11:46:40 PDT
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.
Comment 1 Daniel Holbert 2024-03-13 11:56:10 PDT
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.
Comment 2 Daniel Holbert 2024-03-13 12:02:04 PDT
(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.)
Comment 3 Daniel Holbert 2024-03-13 13:11:10 PDT
Chromium version of this bug: https://issues.chromium.org/issues/329442309
Comment 4 Radar WebKit Bug Importer 2024-03-17 20:07:12 PDT
<rdar://problem/124875370>