search

LeaVerou / css3test

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

Added option to filter tests #212

Closed SebastianZ closed 2 years ago

SebastianZ commented 2 years ago

This addresses #178 and adds a drop-down list to the sidebar allowing to filter the tests by specification status. The options are "All", "Stable", and the different CSS snapshots. The chosen option is saved in the local storage and read on page load to keep the shown info stable.

For that to work I added a new status field to the specifications which holds the field stability indicating whether a spec. is stable or experimental. Optionally, there are two fields first-snapshot and last-snapshot indicating the first and last snapshot a specification got included as official part of CSS, respectively. last-snapshot indicates that a higher level spec. supersedes a previous one in a later snapshot. I.e. it ensures that only the level listed in the snapshot is shown.

Note that this is still WIP. In its current form I had to drop the counting up animation. Instead, the results are shown right away. Also, I'd like to get some feedback on whether that's generally the right direction I am heading. Are you missing any options? Is the idea of superseding specs ok? Should the default option be changed? Should the options be more fine-grained (maybe even be feature based as discussed earlier)? Should specific features listed in "Safe to Release pre-CR Exceptions" be included even when their specification isn't?

Sebastian

Zefling commented 2 years ago

It's really cool is much faster. Anchors work better.

There is something weird: image

And it would be nicer if we could filter those in "experimental".

SebastianZ commented 2 years ago

It's really cool is much faster. Anchors work better.

Yes, that's a benefit. Hope Lea is fine with that, too. She held onto the animation in the past.

There is something weird: image

It was reset for every test. I've fixed that now.

And it would be nicer if we could filter those in "experimental".

Good point! I've added a filter for them.

Sebastian

LeaVerou commented 2 years ago

I did quite like the animation, and it allows us to have slower tests too, but I'll concede if you both agree with removing it. I'm not one to hold a project back just because of my opinions. :)

Is there a screenshot or something about this change? It would help review it!

LeaVerou commented 2 years ago

Note that this is still WIP.

You may want to mark it as draft until it's ready to merge

SebastianZ commented 2 years ago

I also liked the animation somewhat, though it also had some issues. Firstly, the mentioned anchor problem, i.e. you can't get to the spec. by entering a URL with its anchor. Also, with more tests it takes longer and longer until the final values appear. And the displayed time it took to execute the tests is a bit misleading as it takes much longer until they are displayed, so users might not immediately understand what that value means.

So, at least for now, I am for removing it. We may add back an animation solely for the display of the score at some point.

I think with the latest commits the changes aren't WIP anymore. Again, detailed feedback is very welcome.

Here's a screenshot:

Screenshot of patch showing filter drop-down list

Sebastian

Zefling commented 2 years ago

The animation was a cool at first, but now it becomes a problem, because there is really a lot of tests. Even to test the addition of new tests, it is little useless, because you have to wait longer and longer. I think it would be beneficial for everyone to remove it.

SebastianZ commented 2 years ago

And it would be nicer if we could filter those in "experimental".

Good point! I've added a filter for them.

Forgot to push that change. Did that now.

Please give it a shot!

Sebastian

Zefling commented 2 years ago

Maybe we should move "whatwg" and "svg" in separate group.

LeaVerou commented 2 years ago

Now that I saw the screenshot I understand what the PR is about. What a fantastic feature!!! Thank you so much for implementing it!

SebastianZ commented 2 years ago

Maybe we should move "whatwg" and "svg" in separate group.

Let's discuss this in a separate issue, please! I'd like to get this feature online first. Afterwards we can still iterate on it and add more filters.

I'll also create new features for the questions I had above, so we can discuss them separately and iterate on what we have now.

Sebastian

SebastianZ commented 2 years ago

@PolariTOON Thank you for the detailed feedback!

But in practice, i don't think this reduces the noise that much : there's a lot of green in the snapshots coming from the previous better supported versions. We could still add diffs between snapshots later, like in Kangax's compatibility table for JavaScript.

That's true. Currently, the snapshot filters include all specifications listed as part of the official CSS definition of the related snapshot. Adding diffs between two snapshots shouldn't be too hard.

Just one more question: what makes a spec "stable" or "experimental"?

Sorry, I added a description to the filters in their title attributes but didn't make that clear in the description!

I defined "stable" as everything that's listed in the latest snapshot plus all the predecessor specifications and those that probably won't change much anymore. As described in #178, "stable" could also be defined as something that's implemented in at least two different browsers, though that may require a property-based approach.

Sebastian

SebastianZ commented 2 years ago

@PolariTOON I think I've addressed all your points now. For most of them I've created separate issues to discuss them further.

If there's anything left you think should be in this first version of the feature, please tell me! Otherwise, it would be great if you also gave your approval, so it can be merged.

Sebastian