<!DOCTYPE html>
<html>
    <head>
        <title>CSS Reference File</title>
        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
    </head>
    <style>
        body {
            margin: 0;
        }
        .container {
            position: relative;
            font: 15px Ahem, sans-serif;
            line-height: 20px;
            width: 200px;
            height: 200px;
            color: green;
        }
        .circle {
            z-index: -1;
            width: 160px;
            height: 160px;
            border-radius: 80px;
            background-color: blue;
            overflow: hidden;
        }
        #left-circle-outline {
            position: absolute;
            top: 20px;
            left: 0px;
        }
        .left-circle-float-line {
            float: left;
            clear: left;
            height: 20px;
        }
    </style>
    <body>
        <p>The test passes if all of the squares are green. There should be no red.</p>
        <div class="container">
        X<br/>
            <div id="left-circle-outline"></div>
            <!--   generated left-rounded-rect-float-line divs will be inserted here   -->
        X<br/>
        X<br/>
        X<br/>
        X<br/>
        X<br/>
        X<br/>
        X<br/>
        X<br/>
        X
        </div>
        
        <script src="../support/rounded-rectangle.js"></script>
        <script src="../support/subpixel-utils.js"></script>
        <script>
        genLeftRoundedRectFloatShapeOutsideRefTest({
            roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
            containerWidth: 200,
            containerHeight: 200,
            lineHeight: 20,
            floatElementClassSuffix: "circle-float-line",
            insertElementIdSuffix: "circle-outline"
        });
        </script>
    </body>
</html>