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

   1 <html>
   2 <head>
   3 <title>Differing writing modes test for replaced 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 <div class="container htb">
  26     <img class="child htb tl">
  27     <img class="child htb tr">
  28     <img class="child htb bl">
  29     <img class="child htb br">
  30 </div>
  31 <br>
  32
  33 The test boxes:
  34
  35 <br>
  36 <div class="container htb">
  37     <img class="child htb tl">
  38     <img class="child vlr tr">
  39     <img class="child vrl bl">
  40     <img class="child hbt br">
  41 </div>
  42
  43 <div class="container vlr">
  44     <img class="child htb tl">
  45     <img class="child vlr tr">
  46     <img class="child vrl bl">
  47     <img class="child hbt br">
  48 </div>
  49
  50 <div class="container hbt">
  51     <img class="child htb tl">
  52     <img class="child vlr tr">
  53     <img class="child vrl bl">
  54     <img class="child hbt br">
  55 </div>
  56
  57 <div class="container vrl">
  58     <img class="child htb tl">
  59     <img class="child vlr tr">
  60     <img class="child vrl bl">
  61     <img class="child hbt br">
  62 </div>
  63
  64 <br>
  65
  66 <div class="container htb">
  67     <img class="child htb tr">
  68     <img class="child vlr bl">
  69     <img class="child vrl br">
  70     <img class="child hbt tl">
  71 </div>
  72
  73 <div class="container vlr">
  74     <img class="child htb tr">
  75     <img class="child vlr bl">
  76     <img class="child vrl br">
  77     <img class="child hbt tl">
  78 </div>
  79
  80 <div class="container hbt">
  81     <img class="child htb tr">
  82     <img class="child vlr bl">
  83     <img class="child vrl br">
  84     <img class="child hbt tl">
  85 </div>
  86
  87 <div class="container vrl">
  88     <img class="child htb tr">
  89     <img class="child vlr bl">
  90     <img class="child vrl br">
  91     <img class="child hbt tl">
  92 </div>
  93
  94 <br>
  95
  96 <div class="container htb">
  97     <img class="child htb bl">
  98     <img class="child vlr br">
  99     <img class="child vrl tl">
 100     <img class="child hbt tr">
 101 </div>
 102
 103 <div class="container vlr">
 104     <img class="child htb bl">
 105     <img class="child vlr br">
 106     <img class="child vrl tl">
 107     <img class="child hbt tr">
 108 </div>
 109
 110 <div class="container hbt">
 111     <img class="child htb bl">
 112     <img class="child vlr br">
 113     <img class="child vrl tl">
 114     <img class="child hbt tr">
 115 </div>
 116
 117 <div class="container vrl">
 118     <img class="child htb bl">
 119     <img class="child vlr br">
 120     <img class="child vrl tl">
 121     <img class="child hbt tr">
 122 </div>
 123
 124 <br>
 125
 126 <div class="container htb">
 127     <img class="child htb br">
 128     <img class="child vlr tl">
 129     <img class="child vrl tr">
 130     <img class="child hbt bl">
 131 </div>
 132
 133 <div class="container vlr">
 134     <img class="child htb br">
 135     <img class="child vlr tl">
 136     <img class="child vrl tr">
 137     <img class="child hbt bl">
 138 </div>
 139
 140 <div class="container hbt">
 141     <img class="child htb br">
 142     <img class="child vlr tl">
 143     <img class="child vrl tr">
 144     <img class="child hbt bl">
 145 </div>
 146
 147 <div class="container vrl">
 148     <img class="child htb br">
 149     <img class="child vlr tl">
 150     <img class="child vrl tr">
 151     <img class="child hbt bl">
 152 </div>
 153
 154 </body>
 155 </html>
 156
 157