CSS3 Tests
Published 13 years, 10 months pastOver the past couple of months, I’ve been hacking together some CSS3 tests. I did this to try to figure out what should be included in the upcoming fourth edition of the CSS Pocket Reference (and thereafter CSS: The Definitive Guide) and didn’t plan to do anything public with them, but at this point, I figure what the heck. Maybe they’ll be of interest to others.
I was especially interested by the results for list-style-type, where I found some small spots of support for various types in various browsers. In contrast, WebKit supports most of the CSS3 types, so far as I can tell, though in my install several types were apparently mangled by a lack of appropriate fonts.
If you dig in, you’ll discover that the individual tests are all poured through some PHP. The reason for this is that the base test pages (which are straight HTML; see for example the list-style-type base) include neither navigation links nor vendor prefixes. That’s what the PHP handles. It’s a bit clumsy, URL-wise, and that’s why the index page of the tests warns that the tests’ URLs could change in the future. Not the index page: that will remain cool for as long as I have anything to say about it. I just can’t swear off tinkering with the URLs of the tests for the time being. It’s entirely possible that at some point in the future I’ll ice them down, but no guarantees.
I’m tossing these into the public sphere for three reasons. The first is that they might be useful to other people, and I’m always in favor of sharing stuff that might be useful. The second is that I may have committed grievous errors of fact, and many eyes make errors obvious. If you find an error, please let me know. I prefer that such reports be left as comments here since it lets many eyes evaluate the error reports too, but I’ll accept private mail as well.
The third is that it represents another turn of the wheel. I started my CSS career building tests to see what browsers got right and wrong, and every so often I come back to that same fundamental act. The other times I’ve done so, I’ve published what resulted. This time, I’m publishing a little earlier and little more in the raw, so to speak, but it’s still the same impulse—and by now, it’s Tradition.
So I hope you enjoy, or at least find useful, these tests and whatever other tests get built in the future!
Comments (15)
Very useful, yeah. I’m working on a test page (with Alexis of caniuse.com) for all sorts of CSS3/HTML5 goodness that combines feature tests and visual ref tests for comprehensiveness. This’ll help. Thx.
This is actually just what I was looking for. :)
I’m currently working on a “Coding guideline/Best practices” document for our dev team and I’m searching for some good references to CSS test cases to toss in there, so thank you for sharing Eric.
Very nice, and it’ll come in quite handy.
And Palle, I look forward to reading the guidelines at the office. :)
Eric,
you probably want to do something about this:
http://meyerweb.com/eric/css/tests/css3/show.php?p=hanging-punctuation&-=%3Cscript%3Ealert();%3C/script%3E
best wishes,
steve
Do what about it, Steve? In my browser all I see is that string in the URL and nothing else happens. It does end up in the source but, as I say, there’s no apparent effect.
Pingback ::
Links to Snydersoft 02/15/2011 | snydersoft.com
[…] Eric’s Archived Thoughts: CSS3 Tests […]
You’re quite right.
When I tried before posting that the script tags were output to the browser and the script was run, it looks like the tags themselves are now removed.
At any rate my suggestion was going to be to do that kind of output filtering, looks like you don’t need to.
Steve
Actually, Steve, tags were being passed through unstripped before. My point was that when I tested your link I still didn’t have anything untoward happen (for example, no actual JS alerts occurred) even though there were elements jammed into the page. I decided this morning to strip tags for the heck of it, but I’m still not exactly sure what you were trying to tell me.
What’re your thoughts on putting these on w3c.org? I’ll help if you want :-)
This was not my experience, the link above generated 2 alerts on page load, which was my cause for concern.
Pingback ::
Friday Focus 02/18/11: On the Map | Devlounge
[…] CSS – CSS3 Tests […]
Very handy! just reached here via @smashingmag tweet
Thank you!
I noticed on the word-wrap test you have text-wrap set to ‘suppress’. It looks like ‘suppress’ has been changed to ‘avoid’ in the specs. Is this an error or is there a reason you’re still using ‘suppress’?
Theresa, I’m using ‘suppress’ because when I wrote the test, that’s what the spec said. It was changed eight days ago (as of this writing) and I hadn’t noticed the change. So that’s the reason. Thanks for the pointer.
Thanks for the response, Eric. I figured it was just that you hadn’t had a chance to update it, but I wanted to check in case there was some secret awesome reason ‘suppress’ was a better option :)