third_party/WebKit/LayoutTests/fast/block/basic/016.html

   1 <head>
   2 <style>
   3 div, center, table {
   4   border: 2px solid blue;
   5 }
   6
   7 div, center {
   8   padding: 2px;
   9 }
  10
  11 .fixedMargin {
  12   margin-left: 2px;
  13   margin-right: 2px;
  14 }
  15
  16 .autoWidth {
  17   border: 4px solid green;
  18 }
  19
  20 .fixedWidth {
  21   border: 4px solid purple;
  22 }
  23
  24 .fixedWidth > * {
  25   width: 400px;
  26 }
  27
  28 .full {
  29   width: 100%;
  30 }
  31
  32 .rtl {
  33   border: none;
  34   direction: rtl;
  35   margin-top: 1em;
  36 }
  37
  38 </style>
  39 </head>
  40
  41 This is a test of all the various HTML alignments using LTR direction.
  42
  43 <div class="autoWidth">
  44   <div>Normal div inside normal div</div>
  45   <div align=left>Left div inside normal div</div>
  46   <div align=center>Center div inside normal div</div>
  47   <div align=right>Right div inside normal div</div>
  48   <center>Center tag inside normal div</center>
  49   <table><tr><td>Normal table.</tr></td></table>
  50   <table align="center"><tr><td>Center aligned table.</tr></td></table>
  51   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
  52 </div>
  53
  54 <div class="fixedWidth">
  55   <div>Normal fixed width div inside normal div</div>
  56   <div align=left>Left fixed width div inside normal div</div>
  57   <div align=center>Center fixed width div inside normal div</div>
  58   <div align=right>Right fixed width div inside normal div</div>
  59   <center>Center tag (fixed width) inside normal div</center>
  60   <table><tr><td>Normal table.</tr></td></table>
  61   <table align="center"><tr><td>Center aligned table.</tr></td></table>
  62   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
  63 </div>
  64
  65 <div align=left class="autoWidth">
  66   <div>Normal div inside align=left div</div>
  67   <div align=left>Left div inside align=left div</div>
  68   <div align=center>Center div inside align=left div</div>
  69   <div align=right>Right div inside align=left div</div>
  70   <center>Center tag inside align=left div</center>
  71   <table><tr><td>Normal table.</tr></td></table>
  72   <table align="center"><tr><td>Center aligned table.</tr></td></table>
  73   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
  74 </div>
  75
  76 <div align=left class="fixedWidth">
  77   <div>Normal fixed width div inside align=left div</div>
  78   <div align=left>Left fixed width div inside align=left div</div>
  79   <div align=center>Center fixed width div inside align=left div</div>
  80   <div align=right>Right fixed width div inside align=left div</div>
  81   <center>Center tag (fixed width) inside align=left div</center>
  82   <table><tr><td>Normal table.</tr></td></table>
  83   <table align="center"><tr><td>Center aligned table.</tr></td></table>
  84   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
  85 </div>
  86
  87 <div align=center class="autoWidth">
  88   <div>Normal div inside align= center div</div>
  89   <div align=left>Left div inside align=center div</div>
  90   <div align=center>Center div inside align=center div</div>
  91   <div align=right>Right div inside align=center div</div>
  92   <center>Center tag inside align=center div</center>
  93   <table><tr><td>Normal table.</tr></td></table>
  94   <table align="center"><tr><td>Center aligned table.</tr></td></table>
  95   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
  96 </div>
  97
  98 <div align=center class="fixedWidth">
  99   <div>Normal fixed width div inside align=center div</div>
 100   <div style="margin-left: auto">Normal fixed width div (auto left margin) inside align=center div</div>
 101   <div style="margin-right: auto">Normal fixed width div (auto right margin) inside align=center div</div>
 102   <div align=left>Left fixed width div inside align=center div</div>
 103   <div align=center>Center fixed width div inside align=center div</div>
 104   <div align=right>Right fixed width div inside align=center div</div>
 105   <center>Center tag (fixed width) inside align=center div</center>
 106   <table><tr><td>Normal table.</tr></td></table>
 107   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 108   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 109 </div>
 110
 111 <div align=right class="autoWidth">
 112   <div>Normal div inside align=right div</div>
 113   <div align=left>Left div inside align=right div</div>
 114   <div align=center>Center div inside align=right div</div>
 115   <div align=right>Right div inside align=right div</div>
 116   <center>Center tag inside align=right div</center>
 117   <table><tr><td>Normal table.</tr></td></table>
 118   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 119   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 120 </div>
 121
 122 <div align=right class="fixedWidth">
 123   <div>Normal fixed width div inside align=right div</div>
 124   <div align=left>Left fixed width div inside align=right div</div>
 125   <div align=center>Center fixed width div inside align=right div</div>
 126   <div align=right>Right fixed width div inside align=right div</div>
 127   <center>Center tag (fixed width) inside align=right div</center>
 128   <table><tr><td>Normal table.</tr></td></table>
 129   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 130   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 131 </div>
 132
 133 <p>
 134 This is a test using TABLE cells (all in the LTR direction).
 135 </p>
 136
 137
 138
 139
 140
 141
 142
 143 <table class="full"><tr><td class="autoWidth">
 144   <div>Normal div inside normal td</div>
 145   <div align=left>Left div inside normal td </div>
 146   <div align=center>Center div inside normal td </div>
 147   <div align=right>Right div inside normal td </div>
 148   <center>Center tag inside normal td </center>
 149   <table><tr><td>Normal table.</tr></td></table>
 150   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 151   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 152 </td></tr></table>
 153
 154 <table class="full"><tr><td class="fixedWidth">
 155   <div>Normal fixed width div inside normal td </div>
 156   <div align=left>Left fixed width div inside normal td </div>
 157   <div align=center>Center fixed width div inside normal td </div>
 158   <div align=right>Right fixed width div inside normal td </div>
 159   <center>Center tag (fixed width) inside normal td </center>
 160   <table><tr><td>Normal table.</tr></td></table>
 161   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 162   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 163 </table>
 164
 165 <table class="full"><tr><td align=left class="autoWidth">
 166   <div>Normal div inside align=left td </div>
 167   <div align=left>Left div inside align=left td </div>
 168   <div align=center>Center div inside align=left td </div>
 169   <div align=right>Right div inside align=left td </div>
 170   <center>Center tag inside align=left td </center>
 171   <table><tr><td>Normal table.</tr></td></table>
 172   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 173   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 174 </table>
 175
 176 <table class="full"><tr><td align=left class="fixedWidth">
 177   <div>Normal fixed width div inside align=left td </div>
 178   <div align=left>Left fixed width div inside align=left td </div>
 179   <div align=center>Center fixed width div inside align=left td </div>
 180   <div align=right>Right fixed width div inside align=left td </div>
 181   <center>Center tag (fixed width) inside align=left td </center>
 182   <table><tr><td>Normal table.</tr></td></table>
 183   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 184   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 185 </table>
 186
 187 <table class="full"><tr><td align=center class="autoWidth">
 188   <div>Normal div inside align= center td </div>
 189   <div align=left>Left div inside align=center td </div>
 190   <div align=center>Center div inside align=center td </div>
 191   <div align=right>Right div inside align=center td </div>
 192   <center>Center tag inside align=center td </center>
 193   <table><tr><td>Normal table.</tr></td></table>
 194   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 195   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 196 </table>
 197
 198 <table class="full"><tr><td align=center class="fixedWidth">
 199   <div>Normal fixed width div inside align=center td </div>
 200   <div align=left>Left fixed width div inside align=center td </div>
 201   <div align=center>Center fixed width div inside align=center td </div>
 202   <div align=right>Right fixed width div inside align=center td </div>
 203   <center>Center tag (fixed width) inside align=center td </center>
 204   <table><tr><td>Normal table.</tr></td></table>
 205   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 206   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 207 </table>
 208
 209 <table class="full"><tr><td align=right class="autoWidth">
 210   <div>Normal div inside align=right td </div>
 211   <div align=left>Left div inside align=right td </div>
 212   <div align=center>Center div inside align=right td </div>
 213   <div align=right>Right div inside align=right td </div>
 214   <center>Center tag inside align=right td </center>
 215   <table><tr><td>Normal table.</tr></td></table>
 216   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 217   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 218 </table>
 219
 220 <table class="full"><tr><td align=right class="fixedWidth">
 221   <div>Normal fixed width div inside align=right td </div>
 222   <div align=left>Left fixed width div inside align=right td </div>
 223   <div align=center>Center fixed width div inside align=right td </div>
 224   <div align=right>Right fixed width div inside align=right td </div>
 225   <center>Center tag (fixed width) inside align=right td </center>
 226   <table><tr><td>Normal table.</tr></td></table>
 227   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 228   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 229 </table>
 230
 231
 232
 233
 234
 235 <div class="rtl">
 236
 237 This is a test of all the various HTML alignments using RTL direction.
 238
 239 <div class="autoWidth">
 240   <div>Normal div inside normal div</div>
 241   <div align=left>Left div inside normal div</div>
 242   <div align=center>Center div inside normal div</div>
 243   <div align=right>Right div inside normal div</div>
 244   <center>Center tag inside normal div</center>
 245   <table><tr><td>Normal table.</tr></td></table>
 246   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 247   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 248 </div>
 249
 250 <div class="fixedWidth">
 251   <div>Normal fixed width div inside normal div</div>
 252   <div align=left>Left fixed width div inside normal div</div>
 253   <div align=center>Center fixed width div inside normal div</div>
 254   <div align=right>Right fixed width div inside normal div</div>
 255   <center>Center tag (fixed width) inside normal div</center>
 256   <table><tr><td>Normal table.</tr></td></table>
 257   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 258   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 259 </div>
 260
 261 <div align=left class="autoWidth">
 262   <div>Normal div inside align=left div</div>
 263   <div align=left>Left div inside align=left div</div>
 264   <div align=center>Center div inside align=left div</div>
 265   <div align=right>Right div inside align=left div</div>
 266   <center>Center tag inside align=left div</center>
 267   <table><tr><td>Normal table.</tr></td></table>
 268   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 269   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 270 </div>
 271
 272 <div align=left class="fixedWidth">
 273   <div>Normal fixed width div inside align=left div</div>
 274   <div align=left>Left fixed width div inside align=left div</div>
 275   <div align=center>Center fixed width div inside align=left div</div>
 276   <div align=right>Right fixed width div inside align=left div</div>
 277   <center>Center tag (fixed width) inside align=left div</center>
 278   <table><tr><td>Normal table.</tr></td></table>
 279   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 280   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 281 </div>
 282
 283 <div align=center class="autoWidth">
 284   <div>Normal div inside align= center div</div>
 285   <div align=left>Left div inside align=center div</div>
 286   <div align=center>Center div inside align=center div</div>
 287   <div align=right>Right div inside align=center div</div>
 288   <center>Center tag inside align=center div</center>
 289   <table><tr><td>Normal table.</tr></td></table>
 290   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 291   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 292 </div>
 293
 294 <div align=center class="fixedWidth">
 295   <div>Normal fixed width div inside align=center div</div>
 296   <div align=left>Left fixed width div inside align=center div</div>
 297   <div align=center>Center fixed width div inside align=center div</div>
 298   <div align=right>Right fixed width div inside align=center div</div>
 299   <center>Center tag (fixed width) inside align=center div</center>
 300   <table><tr><td>Normal table.</tr></td></table>
 301   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 302   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 303 </div>
 304
 305 <div align=right class="autoWidth">
 306   <div>Normal div inside align=right div</div>
 307   <div align=left>Left div inside align=right div</div>
 308   <div align=center>Center div inside align=right div</div>
 309   <div align=right>Right div inside align=right div</div>
 310   <center>Center tag inside align=right div</center>
 311   <table><tr><td>Normal table.</tr></td></table>
 312   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 313   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 314 </div>
 315
 316 <div align=right class="fixedWidth">
 317   <div>Normal fixed width div inside align=right div</div>
 318   <div align=left>Left fixed width div inside align=right div</div>
 319   <div align=center>Center fixed width div inside align=right div</div>
 320   <div align=right>Right fixed width div inside align=right div</div>
 321   <center>Center tag (fixed width) inside align=right div</center>
 322   <table><tr><td>Normal table.</tr></td></table>
 323   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 324   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 325 </div>
 326
 327 <p>
 328 This is a test using TABLE cells (all in the RTL direction).
 329 </p>
 330
 331
 332
 333
 334
 335
 336
 337 <table class="full"><tr><td class="autoWidth">
 338   <div>Normal div inside normal td</div>
 339   <div align=left>Left div inside normal td </div>
 340   <div align=center>Center div inside normal td </div>
 341   <div align=right>Right div inside normal td </div>
 342   <center>Center tag inside normal td </center>
 343   <table><tr><td>Normal table.</tr></td></table>
 344   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 345   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 346 </td></tr></table>
 347
 348 <table class="full"><tr><td class="fixedWidth">
 349   <div>Normal fixed width div inside normal td </div>
 350   <div align=left>Left fixed width div inside normal td </div>
 351   <div align=center>Center fixed width div inside normal td </div>
 352   <div align=right>Right fixed width div inside normal td </div>
 353   <center>Center tag (fixed width) inside normal td </center>
 354   <table><tr><td>Normal table.</tr></td></table>
 355   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 356   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 357 </table>
 358
 359 <table class="full"><tr><td align=left class="autoWidth">
 360   <div>Normal div inside align=left td </div>
 361   <div align=left>Left div inside align=left td </div>
 362   <div align=center>Center div inside align=left td </div>
 363   <div align=right>Right div inside align=left td </div>
 364   <center>Center tag inside align=left td </center>
 365   <table><tr><td>Normal table.</tr></td></table>
 366   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 367   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 368 </table>
 369
 370 <table class="full"><tr><td align=left class="fixedWidth">
 371   <div>Normal fixed width div inside align=left td </div>
 372   <div align=left>Left fixed width div inside align=left td </div>
 373   <div align=center>Center fixed width div inside align=left td </div>
 374   <div align=right>Right fixed width div inside align=left td </div>
 375   <center>Center tag (fixed width) inside align=left td </center>
 376   <table><tr><td>Normal table.</tr></td></table>
 377   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 378   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 379 </table>
 380
 381 <table class="full"><tr><td align=center class="autoWidth">
 382   <div>Normal div inside align= center td </div>
 383   <div align=left>Left div inside align=center td </div>
 384   <div align=center>Center div inside align=center td </div>
 385   <div align=right>Right div inside align=center td </div>
 386   <center>Center tag inside align=center td </center>
 387   <table><tr><td>Normal table.</tr></td></table>
 388   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 389   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 390 </table>
 391
 392 <table class="full"><tr><td align=center class="fixedWidth">
 393   <div>Normal fixed width div inside align=center td </div>
 394   <div align=left>Left fixed width div inside align=center td </div>
 395   <div align=center>Center fixed width div inside align=center td </div>
 396   <div align=right>Right fixed width div inside align=center td </div>
 397   <center>Center tag (fixed width) inside align=center td </center>
 398   <table><tr><td>Normal table.</tr></td></table>
 399   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 400   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 401 </table>
 402
 403 <table class="full"><tr><td align=right class="autoWidth">
 404   <div>Normal div inside align=right td </div>
 405   <div align=left>Left div inside align=right td </div>
 406   <div align=center>Center div inside align=right td </div>
 407   <div align=right>Right div inside align=right td </div>
 408   <center>Center tag inside align=right td </center>
 409   <table><tr><td>Normal table.</tr></td></table>
 410   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 411   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 412 </table>
 413
 414 <table class="full"><tr><td align=right class="fixedWidth">
 415   <div>Normal fixed width div inside align=right td </div>
 416   <div align=left>Left fixed width div inside align=right td </div>
 417   <div align=center>Center fixed width div inside align=right td </div>
 418   <div align=right>Right fixed width div inside align=right td </div>
 419   <center>Center tag (fixed width) inside align=right td </center>
 420   <table><tr><td>Normal table.</tr></td></table>
 421   <table align="center"><tr><td>Center aligned table.</tr></td></table>
 422   <table align="center" class="fixedMargin"><tr><td>Center table (fixed margins).</tr></td></table>
 423 </table>
 424 </div>