shape-outside-floats-ellipse-margin-bottom.html

<!DOCTYPE html>
<html>
<head>
<style>
#container-border {
    border: 1px solid black; 
    margin: 10px; 
    width: 500px;
}

#container {
    font: 50px/1 Ahem, sans-serif;
    color: grey;
    width: 500px;
    height: 300px;
    overflow: hidden;
  }

#float-left {
    float: left;
    position: relative;
    overflow: visible;
    shape-outside: ellipse(200px 100px at 225px 125px);
    shape-margin: 25px;
    width: 450px;
    height: 250px;
}

#svg-shape-ellipse {
    position: absolute;
    display:block;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 300px;
}
</style>
<body>
<p>The five square grey Ahem-font characters should appear below outermost ellipse boundary, which is defined by the shape-margin.</p>
<div id="container-border">
    <div id="container">
        <div id="float-left">
            <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">
                <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></ellipse>
                <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke="green"></ellipse>
            </svg>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        X X X X X
    </div>
</body>
</html>

chromium/third_party/blink/web_tests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom.html