shape-outside-floats-shape-margin-percent.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: left float, inset + shape-margin, % units</title>
    <script src="../../../resources/ahem.js"></script>
    </head>
    <style>
        #container {
            position: absolute;
            left: 25px;
            top: 50px;
            width: 200px;
            height: 200px;
            font-family: Ahem;
            font-size: 20px;
            background-color: red;
            color: green;
        }
        #test-shape {
            float: left;
            width: 200px;
            height: 200px;
            shape-margin: 10%;
            shape-outside: inset(40px 100px 40px 0px);
        }
        #static-shape {
            position: absolute;
            left: 25px;
            width: 100px;
            height: 120px;
            top: 70px;
            border: 20px solid green;
            background-color: green;
        }
    </style>
    <body>
        <p>The test passes if there is a green square and no red.</p>
        <div id="container">
            <div id="test-shape"></div>
            XXXXXXXXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXXXXXXXX
        </div>
        <div id="static-shape"></div>
    </body>
</html>

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