LayoutTests/css1/box_properties/acid_test.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
 <html>
 	<head>
 		<title>
 			 display/box/float/clear test
 		</title>
  	<style type="text/css">
 /* last modified: 1 Dec 98 */

 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;
 }
   </style>
 	</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 type="radio" name="foo" value="off">
 					</p>
 					<p>
 					 whimper
 					<input type="radio" name="foo2" value="on">
 					</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="sec5526c.gif">reference rendering,</a>
 		 (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm">parent page</A>.
 		</p>
 	</body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
	<html>
	<head>
	<title>
	display/box/float/clear test
	</title>
	<style type="text/css">
	/* last modified: 1 Dec 98 */

	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;
	}
	</style>
	</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 type="radio" name="foo" value="off">
	</p>
	<p>
	whimper
	<input type="radio" name="foo2" value="on">
	</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="sec5526c.gif">reference rendering,</a>
	(except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm">parent page</A>.
	</p>
	</body>
	</html>