shape-outside-big-box-border-radius-002.html

<!DOCTYPE html>
<style>
#container {
    width: 300px;
    font: 40px/1 Ahem;
    color: green;
    text-align: right;
}

#float {
    float: right;
    width: 240px;
    height: 120px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 120px;
    background-color: blue;
    background-clip: border-box;
    shape-outside: border-box;
    margin-left: 20px; /* demonstrate that the shape defines the char's position */
}
</style>
<body>
    <p>The green square should apear to the left of the blue rounded shape.
    <div id="container">
        <div id="float"></div>
        <br>X
    </div>
</body>

chromium/third_party/blink/web_tests/fast/shapes/shape-outside-floats/shape-outside-big-box-border-radius-002.html