More CSS tests
Design notes
These tests focus on particular features of CSS 2.1 specifications, mainly on those that I didn't explain clearly in my general tests. For the following tests I've used the W3C guidelines, although my testcases are a little different, but only for some aspects. For each test I'll explain the features tested and I'll provide a reference rendering (expected rendering) so you can easily understand if a browser passes a test or not. I will not provide a support chart for the tests, since I believe that this approach has a main side effect. In fact, for every new browser release I should update that support chart, obviously after installing the new browser and reviewing all the tests. This is a matter of spare time, and actually I'm lacking of that.
IMPORTANT: Before sending me any kind of comments, please read the About file for these tests. For a further reading you can download my CSS bookmarks (collected by Marcello Cerruti).
Markup notes
In these tests I use the following DTD:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
The tests are served as text/html and not as application/xhtml+xml (or any other XML-based MIME Type), due to the lack of support in Internet Explorer 7 and lower. Morover, Internet Explorer 6 switches to quirks mode when there is a XML prologue before the DOCTYPE, so for a better review you should remove the prologue. The relevant styles are embedded in each page.
Personal notes
I'm especially grateful to css-d for the incredible feedback given to my tests.
I'd like to thank sincerely Bruno Fassino for his suggestions, especially those concerning the
clip property (see his test), which I have clearly misinterpreted.
Bruno has also found the cause of an IE7's bug in
this test. Many thanks to him.
I thank also David, Mike A., Abhishek Thakkar, Philippe (thanks for the screenshot) and all who have found my tests a little interesting.
By the way, you've probably noticed that I'm not very skilled in bug fixing. To be honest, I'm not very skilled at all. Finally, a special credit goes to
Gerard Talbot for having inserted some of my testcases in his
bug section. Frankly, I can't still believe it. I hope that these tests will help
other people to understand the issues related to CSS coding. If there's something that you
don't understand, please let me know.
Features tested
Basic tests
These are only basic tests. You can download all the tests here.
Real tests
These are advanced tests. You can download all the tests here.
Is your remarkably stupid bug intentional, or just some horrible mistake?
| Name | Features tested | Expected rendering | Notes |
|---|---|---|---|
| Alert with CSS | System colors, absolute positioning. | Image | JavaScript required. |
| Bar code | Floating, box model, letter-spacing. |
Image | None. |
| Bar graphs | Floating, box model. | Image | Requires the Ahem font. |
| Composite images | Absolute positioning, negative margins, floating, box model, background images. | Image | None. |
| Composite images 2 | Absolute positioning, negative margins, box model, background images. | Image | None. |
| Composite images 3 | Absolute positioning, negative margins, box model, background images. | Image | Credits: Bruno Fassino. |
| CSS Button | Borders, box model, floating, font sizing. | Image | Requires the Ahem font. |
| Definition list gallery | Borders, box model, clear, floating, generated content, margins. | Image | Credits: Bruno Fassino. |
| Dynamic graphs | Box model, floating, :hover pseudo-class. |
Image (on :hover) | The bars should change their heights and backgrounds on :hover. |
| FL: Feel Like Lynx | Alternate stylesheets/user stylesheets. Use the View > Style option of your browser. | Image | See the alternate stylesheet/user stylesheet. |
| Foo Fighters | Absolute positioning, background images, negative text-indent, font sizing, letter-spacing,
z-index. |
Image | Remaking of an album cover. |
| Francis Bacon | Absolute positioning, background images, negative margins, clip property. |
Image | Credits: Bruno Fassino. |
| Hixie: A study on a Ian Hickson picture | Absolute positioning, background images, negative margins, :hover pseudo-class. |
Image (on :hover) | On :hover the four parts of the picture should change their background image and it should appear
a block of text inside each part. This block should be horizontally and vertically centered and it should be
clickable while changing its background color. |
| Italy map | Absolute positioning, background images, !important statement. |
Image | All numbers should be clickable. |
| McGraw-Hill Italy (cloning) | Box model, background images, borders, floating, font sizing, form elements, margins. | Image | Original page taken on May 2007. |
| Margins in percentage | Margins, percentages, box model, absolute positioning. | Image | None. |
| Microsoft Download Page (cloning) | Absolute positioning, background images, box model, floating, form elements. | Image | Original page taken on April 2005. |
| Nested layout | Absolute positioning, background images, box model, floating, :hover pseudo-class, percentages. |
Image | None. |
| Playing card | Absolute positioning, box model, clear, floating, generated content, Unicode characters. | Image | None. |
| Pseudo-acid test | Box model, floating, relative and absolute positioning, margins, background images. | Image | Requires the Ahem font. |
| Rhomb | Borders, box model, margins. | Image | Requires the Ahem font. |
| School form | Borders, box model, form elements, vertical alignment of form elements. | Image | None. |
| Star rating | Box model, background images, absolute positioning, floating, form elements. | Image | JavaScript required only for submit effects. |
| Study on a header | Box model, background images, margins, negative absolute positioning, negative text-indent. |
Image | None. |
