149 lines
4.0 KiB
HTML
149 lines
4.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>Differing writing modes test for 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">
|
|
<div class="child htb tl"></div>
|
|
<div class="child htb tr"></div>
|
|
<div class="child htb bl"></div>
|
|
<div class="child htb br"></div>
|
|
</div><br>
|
|
|
|
The test boxes:<br>
|
|
<div class="container htb">
|
|
<div class="child htb tl"></div>
|
|
<div class="child vlr tr"></div>
|
|
<div class="child vrl bl"></div>
|
|
<div class="child hbt br"></div>
|
|
</div>
|
|
|
|
<div class="container vlr">
|
|
<div class="child htb tl"></div>
|
|
<div class="child vlr tr"></div>
|
|
<div class="child vrl bl"></div>
|
|
<div class="child hbt br"></div>
|
|
</div>
|
|
|
|
<div class="container hbt">
|
|
<div class="child htb tl"></div>
|
|
<div class="child vlr tr"></div>
|
|
<div class="child vrl bl"></div>
|
|
<div class="child hbt br"></div>
|
|
</div>
|
|
|
|
<div class="container vrl">
|
|
<div class="child htb tl"></div>
|
|
<div class="child vlr tr"></div>
|
|
<div class="child vrl bl"></div>
|
|
<div class="child hbt br"></div>
|
|
</div><br>
|
|
|
|
<div class="container htb">
|
|
<div class="child htb tr"></div>
|
|
<div class="child vlr bl"></div>
|
|
<div class="child vrl br"></div>
|
|
<div class="child hbt tl"></div>
|
|
</div>
|
|
|
|
<div class="container vlr">
|
|
<div class="child htb tr"></div>
|
|
<div class="child vlr bl"></div>
|
|
<div class="child vrl br"></div>
|
|
<div class="child hbt tl"></div>
|
|
</div>
|
|
|
|
<div class="container hbt">
|
|
<div class="child htb tr"></div>
|
|
<div class="child vlr bl"></div>
|
|
<div class="child vrl br"></div>
|
|
<div class="child hbt tl"></div>
|
|
</div>
|
|
|
|
<div class="container vrl">
|
|
<div class="child htb tr"></div>
|
|
<div class="child vlr bl"></div>
|
|
<div class="child vrl br"></div>
|
|
<div class="child hbt tl"></div>
|
|
</div><br>
|
|
|
|
<div class="container htb">
|
|
<div class="child htb bl"></div>
|
|
<div class="child vlr br"></div>
|
|
<div class="child vrl tl"></div>
|
|
<div class="child hbt tr"></div>
|
|
</div>
|
|
|
|
<div class="container vlr">
|
|
<div class="child htb bl"></div>
|
|
<div class="child vlr br"></div>
|
|
<div class="child vrl tl"></div>
|
|
<div class="child hbt tr"></div>
|
|
</div>
|
|
|
|
<div class="container hbt">
|
|
<div class="child htb bl"></div>
|
|
<div class="child vlr br"></div>
|
|
<div class="child vrl tl"></div>
|
|
<div class="child hbt tr"></div>
|
|
</div>
|
|
|
|
<div class="container vrl">
|
|
<div class="child htb bl"></div>
|
|
<div class="child vlr br"></div>
|
|
<div class="child vrl tl"></div>
|
|
<div class="child hbt tr"></div>
|
|
</div><br>
|
|
|
|
<div class="container htb">
|
|
<div class="child htb br"></div>
|
|
<div class="child vlr tl"></div>
|
|
<div class="child vrl tr"></div>
|
|
<div class="child hbt bl"></div>
|
|
</div>
|
|
|
|
<div class="container vlr">
|
|
<div class="child htb br"></div>
|
|
<div class="child vlr tl"></div>
|
|
<div class="child vrl tr"></div>
|
|
<div class="child hbt bl"></div>
|
|
</div>
|
|
|
|
<div class="container hbt">
|
|
<div class="child htb br"></div>
|
|
<div class="child vlr tl"></div>
|
|
<div class="child vrl tr"></div>
|
|
<div class="child hbt bl"></div>
|
|
</div>
|
|
|
|
<div class="container vrl">
|
|
<div class="child htb br"></div>
|
|
<div class="child vlr tl"></div>
|
|
<div class="child vrl tr"></div>
|
|
<div class="child hbt bl"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|