Browser Bugs and CSS Implementation Test

Browsers that understand CSS1 and CSS2 and properly implement them should format all of the following blocks identically. They should be 50% wide with red lowercase text against a light peach background. If any of the blocks display differently then the browser has the bug specified in that block. If the block is 100% wide with green small-caps text against a gray background then the browser is ignoring the entire rule set for that block. This is because something in the CSS for that block is throwing off the browser.

XHTML and CSS are all valid

This is the control

div#b0 { font-variant: normal; width: 50%; color: red; background: #fed; }

Character escape of first letter of selector

\html div#b1 { font-variant: normal; width: 50%; color: red; background: #fed; }

Character escape of non-first letter of selector

d\iv#b2 { font-variant: normal; width: 50%; color: red; background: #fed; }

Character escape of first letter of property

div#b3 { font-variant: normal; \width: 50%; color: red; background: #fed; }

Character escape of non-first letter of property

div#b4 { font-variant: normal; w\idth: 50%; color: red; bac\kground: #fed; }

Empty comment right after selector

div#b5/**/ { font-variant: normal; width: 50%; color: red; background: #fed; }

Non-empty comment right after selector

div#b6/* */ { font-variant: normal; width: 50%; color: red; background: #fed; }

Empty comment right after property

div#b7 { font-variant: normal; width/**/: 50%; color: red; background/**/: #fed; }

Empty comment right before value

div#b8 { font-variant: normal; width: /**/50%; color: red; background: /**/#fed; }

Empty comments right after property and right before value

div#b9 { font-variant: normal; width/**/:/**/50%; color: red; background/**/:/**/#fed; }

Empty comment right after value

div#b18 { font-variant: normal; width: 50%/**/; color: red; background: #fed/**/; }

Child selector

html>body div#b12 { font-variant: normal; width: 50%; color: red; background: #fed; }

Adjacent sibling selector

head+body div#b13 { font-variant: normal; width: 50%; color: red; background: #fed; }

:first-child pseudo class selector

:first-child+body div#b14 { font-variant: normal; width: 50%; color: red; background: #fed; }

[xmlns] attribute selector

[xmlns] div#b15 { font-variant: normal; width: 50%; color: red; background: #fed; }

max-width property in lieu of width

div#b16 { font-variant: normal; max-width: 50%; color: red; background: #fed; }

max-width override of width property

div#b17 { font-variant: normal; max-width: 50%; width: 100%; color: red; background: #fed; }

!important rule flushed

div#b19 { font-variant: normal; width: 50%!important; color: red; background: #fed!important; }

!important rule ! flushed then blank space

div#b20 { font-variant: normal; width: 50%! important; color: red; background: #fed! important; }

!important rule with blank space

div#b21 { font-variant: normal; width: 50% !important; color: red; background: #fed !important; }

!important property override of non-!important property

div#b22 { font-variant: normal; width: 50% !important; width: 100%; color: red; background: #fed; }

Non-empty comment right after value

div#b23 { font-variant: normal; width: 50%/* */; color: red; background: #fed/* */; }

Whitespace then empty comment after property

div#b24 { font-variant: normal; width /**/: 50%; color: red; background /**/: #fed; }

Whitespace then non-empty comment after property

div#b25 { font-variant: normal; width /* */: 50%; color: red; background /* */: #fed; }

Non-empty comment right after property

div#b26 { font-variant: normal; width/* */: 50%; color: red; background/* */: #fed; }

Empty comment right before property

div#b27 { font-variant: normal; /**/width: 50%; color: red; /**/background: #fed; }

Non-empty comment right before property

div#b28 { font-variant: normal; /* */width: 50%; color: red; /* */background: #fed; }

Non-Matching Selector

The following blocks are rendered by Internet Explorer 5.x and higher (both for Windows and Mac) like the control block because only IE has this bug. In the following blocks IE has a faulty implementation of the universal selector (asterisk). Because the selectors below do not match any element in the document other browsers correctly ignore the CSS rules and display a 100% wide block with green lowercase text against a light gray background.

Star html selector

* html div#b10 { font-variant: normal; width: 50%; color: red; background: #fed; }

Star star body selector

* * body div#b11 { font-variant: normal; width: 50%; color: red; background: #fed; }