<!DOCTYPE html>
<html>
<head>
    <style>
        .test {
            font: 20px/1 Ahem, sans-serif;
            border: 1px solid black;
            line-height: 20px;
        }
        .container {
            width: 60px;
            height: 60px;
            display: inline-block;
        }
        .float {
            width: 40px;
            height: 40px;
        }
        .top {
            height: 20px;
        }
        .right {
            width: 20px;
        }
        .bottom {
            height: 20px;
        }
        .left {
            width: 20px;
        }
    </style>
</head>
<body>
    <div class="test container">
      XXX
      <div style="float: left" class="float top"></div>
      X
      XXX
    </div>
    <div class="test container">
      XXX
      <div style="float: right" class="float top"></div>
      X
      XXX
    </div>
    <div class="test container">
      <div style="float: left" class="float right"></div>
      XX
      XX
      XXX
    </div>
    <div class="test container">
      <div style="float: left" class="float bottom"></div>
      X
      XXX
      XXX
    </div>
    <div class="test container">
      <div style="float: right" class="float bottom"></div>
      X
      XXX
      XXX
    </div>
    <div class="test container">
      <div style="float: right" class="float left"></div>
      XX
      XX
      XXX
    </div>

    <p>Requires Ahem font. Each container contains a different inset shape-outside.
    <p>Bug <a href="http://webkit.org/b/125112">125112</a>: [CSS Shapes] Support inset for shape-outside</p>
</body>
</html>