<!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 {
        -webkit-shape-outside: inset(20px 0 0 0);
    }
    .right {
        -webkit-shape-outside: inset(0 20px 0 0);
    }
    .bottom {
        -webkit-shape-outside: inset(0 0 20px 0);
    }
    .left {
        -webkit-shape-outside: inset(0 0 0 20px);
    }
</style>
</head>
<body>
    <div class="test container">
      <div style="float: left" class="float top"></div>
      XXX
      X
      XXX
    </div>
    <div class="test container">
      <div style="float: right" class="float top"></div>
      XXX
      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.</0>
    <p>Bug <a href="http://webkit.org/b/125112">125112</a>: [CSS Shapes] Support inset for shape-outside</p>
</body>
</html>