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;
}