<!DOCTYPE html>
<title>shape-outside-floats-polygon-001-reference.html</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Bem Jones-Bey" href="mailto:[email protected]">
<meta name="flags" content="ahem">
<style>
.container {
font: 20px/1 Ahem, sans-serif;
line-height: 20px;
width: 400px;
height: 400px;
background: blue;
-webkit-writing-mode: vertical-lr;
}
.float-left {
width: 20px;
float: left;
}
.float-right {
width: 20px;
float: right;
}
</style>
<body>
<div class="container">
<div style="height: 200px" class="float-left"></div>
XXXXXXXXXX
<div style="height: 180px" class="float-left"></div>
XXXXXXXXXXX
<div style="height: 160px" class="float-left"></div>
XXXXXXXXXXXX
<div style="height: 140px" class="float-left"></div>
XXXXXXXXXXXXX
<div style="height: 120px" class="float-left"></div>
XXXXXXXXXXXXXX
<div style="height: 100px" class="float-left"></div>
XXXXXXXXXXXXXXX
<div style="height: 80px" class="float-left"></div>
XXXXXXXXXXXXXXXX
<div style="height: 60px" class="float-left"></div>
XXXXXXXXXXXXXXXXX
<div style="height: 40px" class="float-left"></div>
XXXXXXXXXXXXXXXXXX
<div style="height: 20px" class="float-left"></div>
XXXXXXXXXXXXXXXXXXX
<div style="height: 20px" class="float-right"></div>
XXXXXXXXXXXXXXXXXXX
<div style="height: 40px" class="float-right"></div>
XXXXXXXXXXXXXXXXXX
<div style="height: 60px" class="float-right"></div>
XXXXXXXXXXXXXXXXX
<div style="height: 80px" class="float-right"></div>
XXXXXXXXXXXXXXXX
<div style="height: 100px" class="float-right"></div>
XXXXXXXXXXXXXXX
<div style="height: 120px" class="float-right"></div>
XXXXXXXXXXXXXX
<div style="height: 140px" class="float-right"></div>
XXXXXXXXXXXXX
<div style="height: 160px" class="float-right"></div>
XXXXXXXXXXXX
<div style="height: 180px" class="float-right"></div>
XXXXXXXXXXX
<div style="height: 200px" class="float-right"></div>
XXXXXXXXXX
</div>
</body>