| <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> |
| |
| |
