<!DOCTYPE html>
<style>
.container {
width: 150px;
height: 50px;
font: 50px/1 Ahem;
overflow: hidden;
background-color: red;
color: green;
}
.float {
width: 100px;
height: 100px;
float: left;
background-color: green;
margin-top: -50px;
shape-outside: inset(0);
}
</style>
<script src="../../../resources/ahem.js"></script>
<body>
<p>You should see one green rectangle. You should not see any red.</p>
<div class="container">
<div class="float"></div>
X
</div>
</body>