shape-outside-circle-030-ref.html | Explore in Territory

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Reference File</title>
        <link rel="author" title="Rebecca Hauck" href="mailto:[email protected]">
    </head>
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <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>
chromium/third_party/blink/web_tests/external/wpt/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html
