765518 - Serialized media query lists should be sorted in lexicographical order

Status: NEW

(Core :: DOM: CSS Object Model, defect)

Description

[bensheldon]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5

Steps to reproduce:

1. Created a style with a media query
2. Add new media query to that style using appendMedium()
3. View the mediaText property of that media query

See test here: http://test.csswg.org/shepherd/testcase/medialist-interfaces-001/author/bensheldon/


Actual results:

When appending media queries to style then serializing htem using appendMedium(), for example "all","screen", & "print) (in that order), the resulting serialized media query list is not in alphabetical order but instead "all, screen, print"


Expected results:

The resulting serialized media query list is not in alphabetical order but instead "all, print, screen".

Comment 1

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Hi reporter,

I have accessed your posted link with test but I have not managed to test your code. Can you please provide a test case and  some steps to reproduce so I can try to test this on my end?

Also, can you please test this on the latest Firefox release (43.0.4) or latest Nightly (46.0a1, https://nightly.mozilla.org/) and tell me if this still reproduces for you ? When doing this please use a new fresh Firefox profile, maybe also in safe mode (https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems). 

Thanks,
Cosmin.

Comment 2

[bensheldon]

Hi Cosmin,

If you click the link to shepherd, there is a a "View Source" tab that shows the reproducible test-case:
https://test.csswg.org/shepherd/testcase/medialist-interfaces-001/author/bensheldon/

Ben

Comment 3

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Hi Ben,

I have tried to test your issue using the code from the "View Source" tab, but I have not managed to ran it because of the "testharness.js" and "testharnessreport.js" resources that are failed to load (failed to load resources errors displayed for them). Shouldn't I need those resources to run the code ? Or maybe I need to setup something on my environment. 
Can you please provide more details on how I can test this on my end using that code ?

Also, have you test this on latest Firefox (43.0.4) release? This could be already fixed. 

Thanks,
Cosmin.

Comment 4

[bensheldon]

Hi Cosmin,

I'm not sure why you're having an issue loading the `testharness.js` and `testharnessreport.js` files.  I am able to load those files successfully and run them in the browser as-is. You can also try clicking the link at the top for "Source File": Source File:
https://test.csswg.org/shepherd/repository/d6ef85a87b368138c3221dcb78ef3986b2fa54a7/cssom-1/medialist-interfaces-001.html

I'll admit though that I submitted this as part of a Mozilla's "Test the Web Forward" campaign and don't have much context anymore for the shepherd system.

Comment 5

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Hi Ben,

I have test this using the provided link and here are the obtained results:
-on latest Firefox (43.0.4) release, the 4th test is the only failed.
-on latest Nightly (46.0a1) release, the same 4th test is failed.

I have tested also on other browsers and I obtained the following results:
-on Chrome 4th test is failed.
-on Safari 4th test is failed.
-on Internet explorer both the 3rd and 4th ones are failed.

I am not sure if this is a Firefox browser issue, but I will assign a component for this issue in order to involve the development team. Maybe someone with more experience on this could share an opinion. I oscillate between "Core-DOM: Core & HTML" and "Core-Serializers", and I chose "Core-DOM: & HTML and Core" because I have found bugs similar to this component. If someone considers that the component is not the right one, please feel free to change it with a more appropriate one. 


Thanks,
Cosmin.

Comment 6

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

DOM was correct, but this is a CSS OM feature.

Comment 7

[Andrew Overholt [:overholt]]

Attachment: index.html

https://drafts.csswg.org/cssom/#common-serializing-idioms does say "in list order".

Here's a hacked up single page showing the issue.

Anne, you once edited this spec, does "list order" == alphabetical?

Comment 8

[Anne (:annevk)]

See step 5 of https://drafts.csswg.org/cssom/#serialize-a-media-query.

Comment 9

[Andrew Overholt [:overholt]]

My quite-possibly-incorrect analysis is that either https://dxr.mozilla.org/mozilla-central/source/layout/style/CSSStyleSheet.cpp#810 needs to change to keep things in lexicographical order or https://dxr.mozilla.org/mozilla-central/source/layout/style/CSSStyleSheet.cpp#624 needs to sort the array before concatenating elements with ", ". Tests should be added in https://dxr.mozilla.org/mozilla-central/source/layout/style/test/test_media_queries.html.

dbaron, how does that ^ look? WDYT about making this a good-first-bug and you being the mentor?

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Anne (:annevk) from comment #8)
> See step 5 of https://drafts.csswg.org/cssom/#serialize-a-media-query.

That's not relevant to the bug reported in comment 0, which is about the order of the separate queries, not the order within a query.  What's relevant to that is step 2 of https://drafts.csswg.org/cssom/#serialize-a-media-query-list , which calls for preserving order.

We should probably file a separate bug for step 5, which I believe we don't do -- at least assuming it's something that other browsers do.  If it isn't, we should perhaps look into changing the spec, unless there's a good reason for it.

And for this bug, it seems worth knowing whether other browsers preserve order or whether they do some sort of sorting.  If other browsers also preserve order, I'd just want to mark this report as invalid.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We should also correct any incorrect tests in the CSS WG test repository.