Bug 217751

Summary: MediaQueryList serialization order is inconsistent.
Product: WebKit Reporter: Emilio Cobos Álvarez (:emilio) <emilio>
Component: CSSAssignee: Emilio Cobos Álvarez (:emilio) <emilio>
Status: RESOLVED FIXED    
Severity: Normal CC: eric.carlson, esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, jer.noble, koivisto, macpherson, menard, philipj, sergio, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar, WebExposed
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on: 218157    
Bug Blocks:    
Attachments:
Description Flags
Patch for EWS
ews-feeder: commit-queue-
Patch
none
Patch none

Description Emilio Cobos Álvarez (:emilio) 2020-10-15 05:05:16 PDT 
See also https://bugs.chromium.org/p/chromium/issues/detail?id=1138859

If you run: window.matchMedia('(max-width: 100px) and (max-aspect-ratio: 1/1)').media

You get back: (max-aspect-ratio: 1/1) and (max-width: 100px)

Instead of the expected original order.

Per https://drafts.csswg.org/cssom-view/#mediaquerylist-media -> https://drafts.csswg.org/cssom/#serialize-a-media-query-list:

> Serialize each media query in the list of media queries, in the same order as they appear in the media query list, and then serialize the list. 

Seems like Gecko is correct and the order shouldn't change.
Comment 1 Emilio Cobos Álvarez (:emilio) 2020-10-16 05:50:59 PDT 
There's a sorting step below.
Comment 3 Radar WebKit Bug Importer 2020-10-25 06:09:13 PDT 
<rdar://problem/70658754>
Comment 4 Emilio Cobos Álvarez (:emilio) 2020-10-25 06:45:17 PDT 
Created attachment 412263 [details]
Patch for EWS
Comment 5 Emilio Cobos Álvarez (:emilio) 2020-10-25 10:17:06 PDT 
Created attachment 412271 [details]
Patch
Comment 6 Emilio Cobos Álvarez (:emilio) 2020-10-25 16:45:31 PDT 
Created attachment 412282 [details]
Patch
Comment 7 EWS 2020-10-26 04:00:40 PDT 
Committed r268966: <https://trac.webkit.org/changeset/268966>

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