blob: c08fdca27e38300d9fe67bbef4155828b9b043f0 [file] [log] [blame]
<html>
<head>
<title>Differing writing modes test for replaced positioned elements and their containing blocks</title>
<style>
.htb { -webkit-writing-mode: horizontal-tb }
.hbt { -webkit-writing-mode: horizontal-bt }
.vlr { -webkit-writing-mode: vertical-lr }
.vrl { -webkit-writing-mode: vertical-rl }
.tl { top: 0; left: 0 }
.tr { top: 0; right: 0 }
.bl { bottom: 0; left: 0 }
.br { bottom: 0; right: 0 }
.container { margin:5px; display: inline-block; position: relative; width:50px; height:50px; border-top:1px solid black; border-right:2px solid black; border-bottom:3px solid black; border-left:4px solid black; padding:1px 2px 3px 4px }
.child { position:absolute; width:20px; height:20px; background-color:green }
.failure { width:20px; height:20px; background-color:red }
</style>
</head>
<body>
All of the boxes below should look identical to this one:
<br>
<div class="container htb">
<img class="child htb tl">
<img class="child htb tr">
<img class="child htb bl">
<img class="child htb br">
</div>
<br>
The test boxes:
<br>
<div class="container htb">
<img class="child htb tl">
<img class="child vlr tr">
<img class="child vrl bl">
<img class="child hbt br">
</div>
<div class="container vlr">
<img class="child htb tl">
<img class="child vlr tr">
<img class="child vrl bl">
<img class="child hbt br">
</div>
<div class="container hbt">
<img class="child htb tl">
<img class="child vlr tr">
<img class="child vrl bl">
<img class="child hbt br">
</div>
<div class="container vrl">
<img class="child htb tl">
<img class="child vlr tr">
<img class="child vrl bl">
<img class="child hbt br">
</div>
<br>
<div class="container htb">
<img class="child htb tr">
<img class="child vlr bl">
<img class="child vrl br">
<img class="child hbt tl">
</div>
<div class="container vlr">
<img class="child htb tr">
<img class="child vlr bl">
<img class="child vrl br">
<img class="child hbt tl">
</div>
<div class="container hbt">
<img class="child htb tr">
<img class="child vlr bl">
<img class="child vrl br">
<img class="child hbt tl">
</div>
<div class="container vrl">
<img class="child htb tr">
<img class="child vlr bl">
<img class="child vrl br">
<img class="child hbt tl">
</div>
<br>
<div class="container htb">
<img class="child htb bl">
<img class="child vlr br">
<img class="child vrl tl">
<img class="child hbt tr">
</div>
<div class="container vlr">
<img class="child htb bl">
<img class="child vlr br">
<img class="child vrl tl">
<img class="child hbt tr">
</div>
<div class="container hbt">
<img class="child htb bl">
<img class="child vlr br">
<img class="child vrl tl">
<img class="child hbt tr">
</div>
<div class="container vrl">
<img class="child htb bl">
<img class="child vlr br">
<img class="child vrl tl">
<img class="child hbt tr">
</div>
<br>
<div class="container htb">
<img class="child htb br">
<img class="child vlr tl">
<img class="child vrl tr">
<img class="child hbt bl">
</div>
<div class="container vlr">
<img class="child htb br">
<img class="child vlr tl">
<img class="child vrl tr">
<img class="child hbt bl">
</div>
<div class="container hbt">
<img class="child htb br">
<img class="child vlr tl">
<img class="child vrl tr">
<img class="child hbt bl">
</div>
<div class="container vrl">
<img class="child htb br">
<img class="child vlr tl">
<img class="child vrl tr">
<img class="child hbt bl">
</div>
</body>
</html>