blob: e3e52a9ccdd8c1a9217e8a4d8b74e1318fd0b23e [file] [log] [blame]
<style>
body {
font-family: Ahem;
font-size: 20px;
position: relative;
}
.container {
width: 100px;
height: 20px;
background-color: green;
}
.floatBox {
float: left;
width: 20px;
height: 20px;
background-color: green;
}
.content {
direction: rtl;
color: red;
}
.ref {
position: absolute;
top: 0px;
color: green;
white-space: pre;
}
</style>
<div class=container>
<div class=floatBox></div>
<div class=content>X</div>
</div>
<div class=ref> X</div>
<div class=container>
<div class=floatBox style="float: right;"></div>
<div class=content>X</div>
</div>
<div class=ref style="top: 20px;"> X </div>
<div class=container>
<div class=floatBox style="float: right; width: 40px;"></div>
<div class=content>X</div>
</div>
<div class=ref style="top: 40px;"> X </div>
<div class=container>
<div class=floatBox></div>
<div class=floatBox style="float: right; width: 60px;"></div>
<div class=content>X</div>
</div>
<div class=ref style="top: 60px;"> X </div>
<div class=container style="height: 40px;">
<div class=floatBox></div>
<div class=floatBox style="float: right; width: 80px;"></div>
<div class=content>X</div>
</div>
<div class=ref style="top: 100px;"> X</div>
<div class=container>
<div class=floatBox style="float: right;"></div>
<div class=content style="border-right: 20px solid green;">X</div>
</div>
<div class=ref style="top: 120px;"> X </div>
<div class=container>
<div class=floatBox style="float: right;"></div>
<div class=content style="border-right: 40px solid green;">X</div>
</div>
<div class=ref style="top: 140px;"> X </div>
<div class=container>
<div class=floatBox style="float: right;"></div>
<div class=content style="border-left: 40px solid green; border-right: 40px solid green;">X</div>
</div>
<div class=ref style="top: 160px;"> X </div>
<div class=container>
<div class=floatBox></div>
<div class=floatBox style="float: right; width: 20px;"></div>
<div class=content>X</div>
</div>
<div class=ref style="top: 180px;"> X </div>
<div class=container>
<div class=floatBox style="width: 40px;"></div>
<div class=floatBox style="float: right; width: 40px;"></div>
<div class=content>X</div>
</div>
<div class=ref style="top: 200px;"> X </div>