Web Platform Test unexpectedly passing in Firefox

[Yash Joshi]

Hello Firefox devs,
I am Yash Joshi, an undergrad student from India. I recently wrote my first web platform test which checks if browsers wait for delayed stylesheets with non matching Media Queries. Every Single browser I tested [chromium safari and firefox] has not yet implemented the said feature.
I thus wrote a simple WPT which basically delays serving the stylesheet {with non matching MQ} by 1s and checks if browser continued JS execution in the meantime or waited for the stylesheet to load [test failed in this case] and all browsers fail test [expected] and firefox somehow passes this [which should not be the case].
I am attaching relevant links and detailed context below for your reference. Pls let me know what am I missing here or if there is something wrong with my approach.
Also, pls direct me to correct channels if this is not the right place to discuss this.
Thanks a lot for your consideration.
-------------------------------------------------------------------Details------------------------------------------------------------

Relevant Specification: Assigning property values, Cascading, and Inheritance (w3.org) and  CSS Cascading and Inheritance Level 5 (w3c.github.io)

Live Test Link (wait for 10s to load): and check the console panel for wait time : : https://cheerful-capybara-92469b.netlify.app [Source Code: Github Link for test code]

WPT Status : web-platform-tests dashboard (wpt.fyi)

Github Link:  Add WPT to check that browser lazy loads non-matching Media Query by chromium-wpt-export-bot · Pull Request #38370 · web-platform-tests/wpt (github.com)
Gerrit Link:  Add WPT to check that browser lazy loads non-matching Media Query (4224891) ·] Used trickle pipe for delay of 1s.

[Emilio Cobos Álvarez]

Hi Yash, thanks for reaching out.

Moving the thread to dev-platform@ which is the right mailing-list for Gecko stuff, and cc'ing Yoav who reviewed the chromium patch.

So, what might happen (and pretty sure happens) is that we really start fetching the @import rule earlier than the first script runs, due to the import scanner that runs during parsing, introduced in bug 1546783.

We ignore the media list in this scanner, because @import url() media really is blocking the rendering regardless of media, so we need to load it asap anyways. There's a test here for that.

That explains that the test passes in some cases, depending on timing.

That said, I'm not convinced the test is correct. The spec doesn't mention @import's media list at all, and more importantly, @import can be mixed with other rules (or other imports) not covered by its media query, and the CSSOM doesn't have a concept for having a partially-loaded stylesheet. So if you have:

  @import url("print.css") print;

  div { color: green }

It seems we'd need to block on the import. The right way for authors if they want a single @import that doesn't block rendering would be something like:

<style media="print">

  @import url("foo");

</style>

Not sure how interoperably that works, but that should work per spec if my read is correct (and ~sure it works in Firefox). I might be missing something though?

Cheers,

 -- Emilio

--
You received this message because you are subscribed to the Google Groups "firef...@mozilla.org" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firefox-dev...@mozilla.org.
To view this discussion on the web visit https://groups.google.com/a/mozilla.org/d/msgid/firefox-dev/9aaf45d3-39c9-4a09-9129-d482c8606664n%40mozilla.org.