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

Gabriele Romanato 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?

Real tests
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.

CSS Zibaldone