[cssom-view] Different serialization across browsers for MediaQueryList

[karlcow]

(Ooops I typed enter too fast)

This is triggered by mozilla-mobile/fenix#15124 (comment)

window.matchMedia('(max-width: 567px) and (max-aspect-ratio: 1/1)').media

Safari returns

"(max-aspect-ratio: 1/1) and (max-width: 567px)" = $1

Chrome returns

"(max-aspect-ratio: 1/1) and (max-width: 567px)"

Firefox returns

"(max-width: 567px) and (max-aspect-ratio: 1)"

And just for the sake of testing, if I do

window.matchMedia('(max-width: 567px) and (max-aspect-ratio: 1/2)').media

Firefox returns

"(max-width: 567px) and (max-aspect-ratio: 1 / 2)"

while Safari/Chrome return

window.matchMedia('(max-width: 567px) and (max-aspect-ratio: 1/2)').media

https://codepen.io/webcompat/pen/abZbvMV
illustrating the differences in between chrome and Firefox.

https://drafts.csswg.org/cssom-view/#dom-window-matchmedia

Return a new MediaQueryList object, with the context object’s associated Document as the document, with parsed media query list as its associated media query list.

Then https://drafts.csswg.org/cssom-view/#media-query-list

A MediaQueryList object has an associated media which is the serialized form of the associated media query list.

Then https://drafts.csswg.org/cssom/#serialize-a-media-query-list

To serialize a media query list run these steps:

1. If the media query list is empty, then return the empty string.
2. 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.

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

• So Safari and Chrome have a bug on the order?
• And Firefox a bug on the serialization of aspect-ratio value?

Is the specification clear enough?

[karlcow]

I updated the issue, I mistakenly typed enter.

[karlcow]

Updated the test
https://codepen.io/webcompat/pen/abZbvMV

Chrome left, Firefox right

[karlcow]

1. Both component parts for the ratio is resolved by [css-values-4] Should ratios always get serialized with both components? #5561
2. Space around the slash is [cssom] Adjacent space when serializing '/' #4282 and @emilio filed https://bugs.chromium.org/p/chromium/issues/detail?id=1138849
3. Order is different in between firefox, chrome and safari (if I understood the spec text)

[emilio]

2. Space around the slash is #4282 and @emilio filed https://bugs.chromium.org/p/chromium/issues/detail?id=1138849

I fixed that and sent a patch to WebKit as well https://bugs.webkit.org/show_bug.cgi?id=217888.

3. Order is different in between firefox, chrome and safari (if I understood the spec text)

Let's track that in #5627, it seems WebKit / Blink should also change here, but we'll see.