<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
<html> | |
<head> | |
<title>CSS 2.1 Test Suite: display/box/float/clear test</title> | |
<style type="text/css"> | |
html { | |
font: 10px/1 Verdana, sans-serif; | |
background-color: blue; | |
color: white; | |
} | |
body { | |
margin: 1.5em; | |
border: .5em solid black; | |
padding: 0; | |
width: 48em; | |
background-color: white; | |
} | |
dl { | |
margin: 0; | |
border: 0; | |
padding: .5em; | |
} | |
dt { | |
background-color: rgb(204,0,0); | |
margin: 0; | |
padding: 1em; | |
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */ | |
height: 28em; | |
border: .5em solid black; | |
float: left; | |
} | |
dd { | |
float: right; | |
margin: 0 0 0 1em; | |
border: 1em solid black; | |
padding: 1em; | |
width: 34em; | |
height: 27em; | |
} | |
ul { | |
margin: 0; | |
border: 0; | |
padding: 0; | |
} | |
li { | |
display: block; /* i.e., suppress marker */ | |
color: black; | |
height: 9em; | |
width: 5em; | |
margin: 0; | |
border: .5em solid black; | |
padding: 1em; | |
float: left; | |
background-color: #FC0; | |
} | |
#bar { | |
background-color: black; | |
color: white; | |
width: 41.17%; /* = 14em */ | |
border: 0; | |
margin: 0 1em; | |
} | |
#baz { | |
margin: 1em 0; | |
border: 0; | |
padding: 1em; | |
width: 10em; | |
height: 10em; | |
background-color: black; | |
color: white; | |
} | |
form { | |
margin: 0; | |
display: inline; | |
} | |
p { | |
margin: 0; | |
} | |
form p { | |
line-height: 1.9; | |
} | |
blockquote { | |
margin: 1em 1em 1em 2em; | |
border-width: 1em 1.5em 2em .5em; | |
border-style: solid; | |
border-color: black; | |
padding: 1em 0; | |
width: 5em; | |
height: 9em; | |
float: left; | |
background-color: #FC0; | |
color: black; | |
} | |
address { | |
font-style: normal; | |
} | |
h1 { | |
background-color: black; | |
color: white; | |
float: left; | |
margin: 1em 0; | |
border: 0; | |
padding: 1em; | |
width: 10em; | |
height: 10em; | |
font-weight: normal; | |
font-size: 1em; | |
} | |
.a { color: #999999; } | |
.b { color: #cc0000; } | |
</style> | |
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html" title="9 Visual formatting model"> | |
</head> | |
<body> | |
<dl> | |
<dt> | |
toggle | |
</dt> | |
<dd> | |
<ul> | |
<li> | |
the way | |
</li> | |
<li id="bar"> | |
<p> | |
the world ends | |
</p> | |
<form action="./" method="get"> | |
<p> | |
bang | |
<input value="off" name="foo" type="radio"> | |
</p> | |
<p> | |
whimper | |
<input value="on" name="foo2" type="radio"> | |
</p> | |
</form> | |
</li> | |
<li> | |
i grow old | |
</li> | |
<li id="baz"> | |
pluot? | |
</li> | |
</ul> | |
<blockquote> | |
<address> | |
bar maids, | |
</address> | |
</blockquote> | |
<h1> | |
sing to me, erbarme dich | |
</h1> | |
</dd> | |
</dl> | |
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both"> | |
This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1 agents should be able to render the document elements above this paragraph indistinguishably (to the pixel) from this | |
<a href="support/css1test5526c.png" class="a">reference rendering,</a> | |
(except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. | |
Please <a href="mailto:public-css-testsuite@w3.org" class="b">report any errors</a> you find between the CSS and the reference rendering. | |
</p> | |
</body> | |
</html> |