Request: test cases!
Here at css3.info we have a limited amount of resources, yet I’d like to push this site a little further then it’s already going, so I’m hoping you guys out there can help us out! What we need, are test cases for the different modules. The first that comes to mind, or actually was a request of Eric Seidel, Webkit developer: multi-column layout testcases.
Our current preview page doesn’t match the last version of the module, and browsers like Safari 3 are catching up, so we need more tests of it! If you make a testcase which we publish you will of course receive full credit for it in the footer of such a testcase.
here’s my version of the css3 multi-column layout, unfortunately it doesn’t work in any browser I could find.
http://csskarma.com/css3/css3.html
the syntax is actually a lot more straight forward than I thought it would be.
-Tim
@Tim: Your test case doesn’t work in WebKit (Safari) or Gecko (Firefox) because you used the raw CSS3 property names. Because CSS3 is still in flux, neither WebKit or Gecko support the specified names, instead they use -webkit- and -moz- prefixed names. So you’d have to write code like:
-moz-column-gap: 3em;
-webkit-column-gap: 3m;
If you’d want your page to work in both browsers.
Such is the price of living on the edge. :) Thanks the post.
yea, i was trying to not use those. I can put them in for the test case if thats how they’re supposed to be done. I try to stay away from the brower-specific rules when i can.
i’ll throw ‘em in there.
thanks
@Tim: Yeah, once the CSS3 Multi-column layout Module settles down a little (it’s changed significantly in just the last year), you’ll see implementors starting to support the real property names, without -moz- or -webkit-. But until that time, you’ll need the prefixes in your test cases.
David Baron has written some test cases for CSS3 Color as well: http://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/
@Tim: thx!
@fantasai: Yeah we should probably be linking to the w3 css3 test cases :) I’d love to have some more previews on this site covering the aspects of css3 that we don’t currently cover.
currentColor is one of the things that the site doesn’t cover that Opera supports, an SVG colour keywords (but they work almost everywhere). I just have to find time to write about them and find an interesting demo for them.
@David: Interestingly enough, Safari support SVG Colors (for it’s SVG support), but I noticed the other day that things like currentColor aren’t supported in the HTML/CSS part of the engine. :) So those sorts of tests/demos are still useful (at least for WebKit).
Eric: I think that is probably because SVG colours are just the name the W3C come up with as that was the first spec to formalise the names in a Spec. Netscape supported the colours a long time ago, without supporting SVG.
We used to have the same issue with currentColor not being supported in CSS as it was originally just part of the SVG spec and not required in CSS until the cSS3 colour module. If I remember correctly you guys took your SVG support from KSVG, so I guess it takes time to sync it up with the rest of the engine. It shouldn’t be too much work to get currentColor to work in CSS though.
Any plans to support SVG in CSS background-image? There are some great use cases for it, but only Opera currently supports it, which limits its use as a real world technique. Adding gradients and things like bullet icons are a great use for it, especially when scaling is needed with adaptive zoom and such.
@David:
currentColor only works for SVG paint values. It would be easy to make it work for the rest of the engine, it’s just as you said: it wasn’t spec’d until CSS3 so we haven’t bothered to wire it up yet.
Yup, we took our SVG support (and the authors!) from KDE’s KSVG2/KDOM (a fork of khtml). It’s pretty well integrated at this point, but it sure has taken us a long time to get there (2 years).
We already have (remedial) support for SVG’s as CSS background images. You can see for yourself using the latest nightly builds:
http://nightly.webkit.org/
If you have any SVG-as-CSS-backgrounds (or , etc.) tests, I would *LOVE* to try them. I know our support is rather half-baked at present, but I haven’t bothered to go back and fix it all.
Eric: I have a article here http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/
including SVG as a background image (gradient) here - http://files.myopera.com/dstorey/experiments/iTunesTable.html (may have to press enter again in the url field due to hotlinking problems)
Rounded corners as background image - http://files.myopera.com/dstorey/experiments/roundedcorners.html
I don’t have any example using the list markers, but it should work the same. Let me know if you have any questions.
@David:
Very nice! Unfortunately all of your test cases are broken in WebKit due to this bug:
http://bugs.webkit.org/show_bug.cgi?id=12095
We only currently support SVGs as images when the SVGs have a fixed size. WebKit needs to be taught how to handle images which don’t have an intrinsic size. (Such as does when it’s width=”100%” height=”100%”, aka the ’s default size.)
Thanks for the nice examples.
Here’s the test case for CSS3 transforms in WebKit
@ Ain: That link is dead.
Up and running again. Sorry for the inconveniences.
Another test case for CSS animation in WebKit
Test case for Selectors API in WebKit.
Hi, here’s another testcase for multicolumns it shows the desired result, Safari fares best as it includes column-rule.. but Safari does show, at this time, there’s a problem with the column break at the header in third column it breaks the headers background?