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