third_party/WebKit/LayoutTests/fast/block/positioning/differing-writing-modes.html

   1 <html>
   2 <head>
   3 <title>Differing writing modes test for positioned elements and their containing blocks</title>
   4 <style>
   5 .htb { -webkit-writing-mode: horizontal-tb }
   6 .hbt { -webkit-writing-mode: horizontal-bt }
   7 .vlr { -webkit-writing-mode: vertical-lr }
   8 .vrl { -webkit-writing-mode: vertical-rl }
   9
  10 .tl { top: 0; left: 0 }
  11 .tr { top: 0; right: 0 }
  12 .bl { bottom: 0; left: 0 }
  13 .br { bottom: 0; right: 0 }
  14
  15 .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 }
  16 .child { position:absolute; width:20px; height:20px; background-color:green }
  17
  18 .failure { width:20px; height:20px; background-color:red }
  19
  20 </style>
  21 </head>
  22 <body>
  23 All of the boxes below should look identical to this one:
  24 <br>
  25
  26 <div class="container htb">
  27     <div class="child htb tl"></div>
  28     <div class="child htb tr"></div>
  29     <div class="child htb bl"></div>
  30     <div class="child htb br"></div>
  31 </div>
  32
  33 <br>
  34
  35 The test boxes:
  36
  37 <br>
  38 <div class="container htb">
  39     <div class="child htb tl"></div>
  40     <div class="child vlr tr"></div>
  41     <div class="child vrl bl"></div>
  42     <div class="child hbt br"></div>
  43 </div>
  44
  45 <div class="container vlr">
  46     <div class="child htb tl"></div>
  47     <div class="child vlr tr"></div>
  48     <div class="child vrl bl"></div>
  49     <div class="child hbt br"></div>
  50 </div>
  51
  52 <div class="container hbt">
  53     <div class="child htb tl"></div>
  54     <div class="child vlr tr"></div>
  55     <div class="child vrl bl"></div>
  56     <div class="child hbt br"></div>
  57 </div>
  58
  59 <div class="container vrl">
  60     <div class="child htb tl"></div>
  61     <div class="child vlr tr"></div>
  62     <div class="child vrl bl"></div>
  63     <div class="child hbt br"></div>
  64 </div>
  65
  66 <br>
  67
  68 <div class="container htb">
  69     <div class="child htb tr"></div>
  70     <div class="child vlr bl"></div>
  71     <div class="child vrl br"></div>
  72     <div class="child hbt tl"></div>
  73 </div>
  74
  75 <div class="container vlr">
  76     <div class="child htb tr"></div>
  77     <div class="child vlr bl"></div>
  78     <div class="child vrl br"></div>
  79     <div class="child hbt tl"></div>
  80 </div>
  81
  82 <div class="container hbt">
  83     <div class="child htb tr"></div>
  84     <div class="child vlr bl"></div>
  85     <div class="child vrl br"></div>
  86     <div class="child hbt tl"></div>
  87 </div>
  88
  89 <div class="container vrl">
  90     <div class="child htb tr"></div>
  91     <div class="child vlr bl"></div>
  92     <div class="child vrl br"></div>
  93     <div class="child hbt tl"></div>
  94 </div>
  95
  96 <br>
  97
  98 <div class="container htb">
  99     <div class="child htb bl"></div>
 100     <div class="child vlr br"></div>
 101     <div class="child vrl tl"></div>
 102     <div class="child hbt tr"></div>
 103 </div>
 104
 105 <div class="container vlr">
 106     <div class="child htb bl"></div>
 107     <div class="child vlr br"></div>
 108     <div class="child vrl tl"></div>
 109     <div class="child hbt tr"></div>
 110 </div>
 111
 112 <div class="container hbt">
 113     <div class="child htb bl"></div>
 114     <div class="child vlr br"></div>
 115     <div class="child vrl tl"></div>
 116     <div class="child hbt tr"></div>
 117 </div>
 118
 119 <div class="container vrl">
 120     <div class="child htb bl"></div>
 121     <div class="child vlr br"></div>
 122     <div class="child vrl tl"></div>
 123     <div class="child hbt tr"></div>
 124 </div>
 125
 126 <br>
 127
 128 <div class="container htb">
 129     <div class="child htb br"></div>
 130     <div class="child vlr tl"></div>
 131     <div class="child vrl tr"></div>
 132     <div class="child hbt bl"></div>
 133 </div>
 134
 135 <div class="container vlr">
 136     <div class="child htb br"></div>
 137     <div class="child vlr tl"></div>
 138     <div class="child vrl tr"></div>
 139     <div class="child hbt bl"></div>
 140 </div>
 141
 142 <div class="container hbt">
 143     <div class="child htb br"></div>
 144     <div class="child vlr tl"></div>
 145     <div class="child vrl tr"></div>
 146     <div class="child hbt bl"></div>
 147 </div>
 148
 149 <div class="container vrl">
 150     <div class="child htb br"></div>
 151     <div class="child vlr tl"></div>
 152     <div class="child vrl tr"></div>
 153     <div class="child hbt bl"></div>
 154 </div>
 155
 156 </body>
 157 </html>
 158
 159