<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.float {
float: left;
color: blue;
border: solid purple;
border-width: 4px 24px 12px 16px ;
margin-left: -12px;
}
.regions-container {
padding: 20px 15px 10px 5px;
float: left;
}
.content {
color: green;
border: solid lime;
border-width: 12px 16px 4px 12px;
margin-bottom: -12px;
}
.region {
border: 12px solid black;
/* float: left; to make it a block formatting context */
float: left;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares with differently colored borders:
</p><ul>
<li>Both squares should be inside a vertical black-bordered rectangle that lacks the
bottom border</li>
<li>The first (blue) square should have an irregular width purple border that overlaps
the whole width of the left black border of the containing rectangle</li>
<li>The second (green) square should have an irregular light green border: the top
edge of the border should be invisible (zero width) while the bottom border should
be thin and overlap the whole width of the bottom black border of the containing
rectangle</li>
</ul>
You should see no red.
<p></p>
<div class="regions-container">
<div class="region">
<article>
<div class="float">
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx
</div>
<div class="content">
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx
</div>
</article>
</div>
</div>
</body></html>