Making this test popped into my head after seeing the strange results of a test by Braden McDaniel.
The CSS on this page is:
BODY {
background: white;
color: black;
}
DIV {
background-color: #ccc;
color: red;
}
DIV.first {
padding: 0;
}
DIV.second {
padding: 20px;
}
UL {
border-style: solid;
border-color: #090;
background-color: #060;
color: red;
}
LI {
border-style: solid;
border-color: #900;
background-color: #600;
color: #00f;
}
SPAN {
background-color: #999;
color: #000;
}
UL.one {
margin: 20px;
padding: 20px;
border-width: 20px;
}
LI.one {
margin: 20px;
padding: 20px;
border-width: 20px;
}
UL.two {
margin: 10px;
padding: 10px;
border-width: 10px;
}
LI.two {
margin: 10px;
padding: 10px;
border-width: 10px;
}
UL.three {
margin: 0;
padding: 0;
border-width: 0;
}
LI.three {
margin: 0;
padding: 0;
border-width: 0;
}
In all three sets of tests, I recommend that the bullet is aligned vertically with the line of text, and that the bullet is always positioned a constant distance from the border edge of the LI (i.e., a constant distance outside the red border). This makes the implementation of list bullets forward-compatible with CSS2 markers. However, it is not required.
These three DIVs (one, two,
and three) have CLASS="first".
Vertically, there should be white, 20px of light green, 40px of dark green, 20px of light red, 20px of dark red, the text (with gray background), 20px of dark red, 20px of light red, 20px of dark green, 20px of light red, 20px of dark red, the text (with gray background), 20px of dark red, 20px of light red, 40px of dark green, 20px of light green, 20px of white, then the same pattern repeated with all the units cut in half (except the height of the text), 10px of white, and then the text (with gray background) with dark red to its right.
Horizontally, there should be 20px/10px/0 of light gray, 20px/10px/0 of light green, 40px/20px/0 of dark green, 20px/10px/0 of light red, 20px/10px/0 of dark red, the text (with gray background), a large expanse of dark red (assuming the viewport is wide), 20px/10px/0 of light red, 40px/20px/0 of dark green, 20px/10px/0 of light green, and 20px/10px/0 of light gray. The margin and padding of HTML and BODY should be on either side of that, but nothing else.
These three DIVs (one, two,
and three) have CLASS="second".
The only differences with the previous set of tests should be the vertical and horizontal distribution of light gray. There should be 20px more of light gray on the horizontal sides, everywhere. In the vertical (instead of the white between the lists), there should be 40px above the first test, 70px between the first and second, 50px between the second and third, and 20px below the third.
(Back to CSS Testing Information, David Baron)