<html>
<head>
<style>
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 102px;
    height: 106px;
    background-color: green;
}
</style>
</script>
</head>
<body>
<div class="overlay"></div>
<div class="overlay" style="left: 140px"></div>
<div class="overlay" style="top: 140px"></div>
<div class="overlay" style="top: 140px; left: 140px;"></div>

<p style="margin-top: 280px;">The content should wrap around the triangle shapes, it should fit in the content box, so you should see four green rectangles.
You shouldn't see any red.</p>
<p><a href='https://code.google.com/p/chromium/issues/detail?id=346877'>Issue 346877</a>: [CSS Shapes] Adjust lineTop position to the next available wrapping location at shape-outsides</p>
</body>
</html>