CSS Test

Design notes

These tests are a work in progress. For any suggestion, comment or addendum, please contact me. What's more, these tests are not exhaustive. A browser can render correctly all these tests and then you can stumble on some bugs that you didn't expect. View these pages with more than one browser (for example, Internet Explorer-Firefox, Firefox-Opera etc.) and then compare the rendering. In these tests I'll try to check the most common features requested in building layouts. As said before, these pages are not exhaustive since I am not exhaustive. In some pages I use an external style sheet. To view the code, simply point your browser to the URL contained in the link or style element, starting from the root of my site. Thanks for viewing these pages.

Credits: Bruno, Gerard, Georg, Ian, Ingo, Mark and all CSS Discuss and Html.it members.

Markup notes

In almost all examples I use the following DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

When I have to test some feature in XHTML I use the following DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

serving it as application/xhtml+xml. Otherwise, I use no DOCTYPE in order to force a browser in quirks mode.

Personal notes

Gabriele Romanato as a child I was born in 1978. I started to study CSS in 2005, after a C++ programming experience. I don't like computing, although I love coding (and logical contradictions). For this reason, I started to study the Firefox's source code in order to get a full overview of browsers features. Meanwhile I noticed some discrepancies in browsers implementations, probably due to my personal experience with the first broken layouts in Internet Explorer. In the spring of 2006 I found On having layout, the first article that explained in some details the problems with Internet Explorer. After translating it into Italian, I joined css-d. My website is very simple. I don't like graphics or so, since in my opinion contents should go first. This is also my philosophy in life. The Web gives us the chance to improve our skills. What's more, on the Web I have also the opportunity of helping other people. This is very important to me, although I'm ready do the same in daily and real life. My weblog (in Italian) will probably tell you more about me and my life, but I'm not really sure that the automatic translation of Google's engine will be very accurate. The above picture depicts me when I was five or so. My name is very long in English, so you can use an abbreviation or my nickname, ernie. "ernie" doesn't come from the name Ernest, but from an Italian dialectal word that literally means "angry". That's because when I was at high school I used to be always so.

Features tested

CSS 3
1. Selectors
CSS 2.1
1. Absolute positioning
2. Borders
3. Display property
4. Floats
5. Fonts
6. Forms
7. Generated content
8. Object
9. Parsing
10. Various
11. Vertical-align
12. XML and CSS

CSS 3

Selectors: Tests on CSS3 selectors.

CSS 2.1

Absolute positioning
Absolute positioning: the 'auto' value: Some peculiarities of the auto value used in the absolute positioning.
Advanced layout 1: Cloning of a MSDN page (2005).
Advanced layout 2: An emulation of the title attribute.
Advanced layout 3: A two-level menu.
Advanced layout 4: Tooltips.
Advanced layout 5: An image map.
Advanced layout 6: A photo gallery with preview on :hover.
Basic layout 1: A basic two-colum centered layout.
Basic layout 2: A basic three-column centered layout.
Basic layout 3: Using absolute positioning to create a shadow text.
Basic layout 4: A dropdown menu.
Basic layout 5: A dropdown-flyout menu.
Basic layout 6: A pull-out menu.
Basic layout 7: Faux columns, minimum height, height and positioning.
Centered boxes: Nested boxes horizontally and vertically centered.
Centered boxes and z-index: Same as above, but with z-index.
Nested boxes and absolute positioning: A test on nested boxes without an explicit dimension.

Borders
Advanced: An advanced test on borders.
Basics: Essential tests on borders.
Complex: A complex test on borders.

Display property
Inline-block: An abstract picture created with display: inline-block.
List item: Test on display: list-item.
Table display: Test on the values related to tables.

Floats
Advanced layout 1: fixed: An advanced two-colum centered layout.
Advanced layout 1: fluid: Same as above, but with fluid dimensions. When resizing the window, both columns should overlap.
Advanced layout 2: A demo based on the main page of an Italian newspaper.
Advanced layout 3: A cloning of Google Italy's main page.
Advanced layout 4: A more complex two-colum layout.
Advanced layout 5: A left-floated menu and a right-floated search engine in a live context.
Advanced layout 6: Floats and absolute positioning.
Advanced layout 7: Floats and negative margins.
Advanced layout 8: Crossword made with floats.
Advanced layout 9: Cross-column pull quotes made with floats.
Advanced layout 10: If you see an horizontal scrollbar, then the test has failed.
Advanced layout 11: A matrix created with floats, relative positioning and vertical-align.
Advanced layout 12: Test on mutiple floats and HTML entities.
Advanced layout 13: Floats and box model.
Advanced layout 14: Floats, box model and dimensions.
Advanced layout 15: A W3C button.
Advanced layout 16: Floats, relative positioning, inline elements and line-height.
Advanced layout 17: Personal file made with floats.
Advanced layout 18: Resize the window to 800x600 pixel. There should be no scrollbar.
Advanced layout 19: A four-column layout.
Advanced layout 20: Floats, background images and min-height.
Advanced layout 21: Floats and background images.
Advanced layout 22: Floats, background images and floating images.
Advanced layout 23: Floats and box model (demo based on this cover).
Advanced layout 24: Float, box model and multiple background images.
Advanced layout 25: Cloning of the old home page of Html.it (2005).
Basic layout 1: A basic two-column centered layout.
Basic layout 2: A basic three-column centered layout.
Basic layout 3: A basic five-column layout.
Basic layout 4: A pseudo-tabular definition list.
Basic layout 5: A picture with a caption.
Basic layout 6: An index for a degree thesis.
Basic layout 7: Floats and faux columns.
Clearing methods and containing floats: Various methods for clearing and containing floats. Credits: www.brunildo.org/test/.
Float and reflow 1: Floating an image dinamically.
Float and reflow 2: Floating an inline element dinamically.
Float and reflow 3: Floating three columns dinamically.
Images: Tests on floating images.
Inverted columns: Test on floating and relative positioning.
Nested floats and positioning: Test on nested floats and positioning.
Nested floats and positioning 2: A second test on nested floats and positioning.
The shrink-to-fit algorithm and the 'auto' value: Some peculiarities of the floating model: the shrink-to-fit algorithm and the auto value.
Tables: Tests on floating tables.

Fonts
Font-size demo: An advanced demo.
Font-size demo 2: A demo with relative lengths.
Font-size test: the 100.01% value: A comparison between pixels and percentages, using 100.01% as the initial value for the body element.

Forms
A complex form: Test on a complex form.
A form with a fieldset: Tests on the fieldset element.
A floated form: Test on floating elements inside a form.
An inline form: Test on form elements with 'display: inline'.
Input background: Test on a background image set on a button.

Generated content
A circle inside a square: Test on the positioning and alignment of generated content.
A generated page: A test page whose content has been created via generated content.
Counters: Tests on counters.
Emoticons: Generated emoticons.
Generated antispam: An email address inserted via generated content.
Generated backgrounds: Multiple backgrounds on the same page.
Generated breadcrumbs: Separators created with generated content.
Multiplication table: An advanced test on counters.
Negative counters: Tests on negative counters.
Special symbols: Test on Unicode special symbols.

Object
Test n. 1: Inserting the object element.
Test n. 2: Padding, borders, background.
Test n. 3: object as replaced element (inline-block).
Test n. 4: Centering the element inside a container.
Test n. 5: Setting the dimensions. Without the stylesheet the element is not rendered.
Test n. 6: Inserting hidden text as a short description. With the CSS turned off, Firefox does not render the element, but Opera does (width and height attributes interpreted as styles).
Test n. 7: Inserting a text file (text/plain) through object. Internet Explorer 6 (and lower) adds a border around the element.
Test n. 8: Inserting a HTML file (text/html) through object.
Test n. 9: Inserting an image (image/jpeg) through object. Internet Explorer 6 (and lower) shows the scrollbars around the image.
Test n. 10: Inserting a video (video/x-ms-wmv) through object. The false value for autoplay ( param element ) works only in Internet Explorer.
Test n. 11: The float property applied to object. Internet Explorer 6 (and lower) needs explicit dimensions in order to honour the specified margins.
Test n. 12: Horizontal and vertical centering inside a container.
Test n. 13: Dimensions expressed in percentages.

Parsing
Test n. 1: Invalid values.
Test n. 2: Invalid values.
Test n. 3: Nested @media rules.
Test n. 4: The !important statement.
Test n. 5: Cascading order: @import.
Test n. 6: Cascading order: @import and !important.
Test n. 7: Same as above.
Test n. 8: Invalid @import rule.
Test n. 9: Linked stylesheet versus imported stylesheet.
Test n. 10: Missing the .css extension.
Test n. 11: Using a .txt extension with text/css as MIME Type.
Test n. 12: Using a .txt extension without MIME Type.
Test n. 13: Using a .txt extension without MIME Type and without the rel attribute.
Test n. 14: Special characters.
Test n. 15: Invalid ID names.
Test n. 15: quirks mode: Invalid ID names in quirks mode.
Test n. 16: Invalid properties.
Test n. 17: Malformed declarations.
Test n. 18: Comments.
Test n. 19: Comments and spaces.
Test n. 20: A stylesheet saved as UTF-8.
Test n. 21: A stylesheet saved as Unicode.
Test n. 22: A stylesheet saved as Unicode Big-Endian.
Test n. 23: ID attributes with space.
Test n. 24: Pseudo-elements.
Test n. 25: Selectors.
Test n. 26: Attribute selectors (ID) with space.
Test n. 27: Attribute selectors (ID) with space: quirks mode.
Test n. 28: Advanced test on selectors and pseudo-elements.
Test n. 29: Multiple classes.
Test n. 30: Pseudo-elements and pseudo-classes.
Test n. 31: Multiple classes and pseudo-elements.
Test n. 32: Multiple classes and pseudo-classes.
Test n. 33: Pseudo-classes and images.
Test n. 34: The :focus pseudo-class.
Test n. 35: Invalid token sequence. There should be no match.
Test n. 36: Invalid token sequence. There should be no match.
Test n. 37: Invalid token sequence. There should be no match.
Test n. 38: Specificity.
Test n. 39: Specificity.
Test n. 40: Spaces between selectors.
Test n. 41: Invalid selectors sequence. There should be no match.
Test n. 42: Tabulations between selectors.
Test n. 43: Spaces inside blocks.
Test n. 44: Tabulations inside blocks.
Test n. 45: A long sequence of comments.
Test n. 46: A long sequence of comments, spaces and tabulations.
Test n. 47: Nested comments.
Test n. 48: Nested curly braces.
Test n. 49: Tag soup.
Test n. 50: Same ID on multiple elements.
Test n. 51: Same as above, but in XHTML.
Test n. 52: Repeated tokens.

Various
Box model and text properties: An advanced test on box model and text properties.
Clipping: Tests on the clip property.
Collapsing margins: Tests on collapsing margins.
:first-letter: The :first-letter pseudo-element.
Inline elements: Tests on inline elements.
Overflow: Tests on the overflow property.

Vertical-align
Form elements: Tests on vertical-align and form elements.
Images: Tests on vertical-align and images.

XML and CSS
Simple: A basic layout.
Complex 1: A one-column layout.
Complex 2: A one-column layout with a floated box.
Complex 3: A two-colums layout.
Complex 4: A three-columns layout.
Table: A table.