search

LeaVerou / css3test

How does your browser score for its CSS3 support?
http://css3test.com
MIT License
214 stars 83 forks source link

Improve test coverage for media queries #229

Closed PolariTOON closed 1 year ago

PolariTOON commented 2 years ago

In cba6568fa52863517e012f8f2b0964ff0ec5189b, i accidently broke a test about the (orientation) media feature because i forgot about the following note in media-queries-3.js:

Note: the following media queries must be true in supporting UAs!

Only counting media queries that are true as passing tests is a long-standing behavior, but I don't think it makes sense because not every media queries can be true at the same time so it's not possible for a browser to reach 100%. Also testing if the negation is true as it was done does not work either because it uses syntaxes like not (width) are currently only supported by Firefox.

So in this PR, I reverted the way support for media queries is detected to be more like: does it parse or not? Also nowadays, we don't need anymore a polyfill for matchMedia so i directly called the built-in function to see if the browser recognizes media queries by checking for "not all" in the media list.

I also fixed some tests and added more tests about the syntax introduced in MQ3 and MQ4.

SebastianZ commented 1 year ago

@PolariTOON Maybe you have a little time to incorporate my feedback? Would be great to see this land.

Sebastian

PolariTOON commented 1 year ago

@SebastianZ Sorry for letting this PR go stale. I'll rebase and then address your comments as soon as possible.

PolariTOON commented 1 year ago

(force-pushed to rebase and resolve conflicts, comments not addressed yet)

SebastianZ commented 1 year ago

You could have split changing the logic and adding + fixing tests into two changes, but that's ok.

I've split them now.

Sebastian

SebastianZ commented 1 year ago

I went ahead and addressed my comments and rebased the patch again. So we're good to merge the changes now.

Sebastian