<!DOCTYPE html>
<title>CSS RefTest Reference</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com">
<meta name="flags" content="ahem">
<style>
#container-border {
    border: 1px solid black; 
    margin: 10px; 
    width: 200px;
}

#container {
    font: 20px/1 Ahem, sans-serif;
    line-height: 20px;
    width: 200px;
    height: 300px;
  }

#float-left {
    float: left;
    position: relative;
    overflow: visible;
    width: 140px;
    height: 100px;
}

#svg-shape {
    position: absolute;
    display:block;
    top: 0px;
    left: 0px;
    width: 142px;
    height: 102px;
}
</style>

<body>
<p>The left edges of the five black squares should follow the right side of the outer rounded rectangle boundary and each square should appear on a subsequent line.</p>
<div id="container">
    <div id="float-left">
        <svg id="svg-shape" xmlns="http://www.w3.org/2000/">
            <rect x="20" y="20" width="100" height="60" fill="none" stroke="green"></rect>
            <rect x="1" y="1" width="140" height="100" rx="20" ry="20" fill="none" stroke="green"></rect>
        </svg>
    </div>
    X<br/>X<br/>X<br/>X<br/>X
</div>
</body>