layout/reftests/webkit-box/webkit-box-align-vert-1.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html>
   7 <head>
   8   <title>
   9     CSS Test: vertically-oriented "display: -webkit-box" container,
  10     with all the various -webkit-box-align values.
  11   </title>
  12   <style>
  13     .box {
  14       display: -webkit-box;
  15       -webkit-box-orient: vertical;
  16       border: 1px solid black;
  17       margin: 5px 20px;
  18       float: left; /* For testing in "rows" */
  19       font: 10px serif;
  20     }
  21     .box > *:nth-child(1) {
  22       background: turquoise;
  23       /* auto width */
  24       height: 1em;
  25     }
  26     .box > *:nth-child(2) {
  27       background: salmon;
  28       font-size: 50%;
  29       width: 2em;
  30       /* auto height */
  31     }
  32
  33     .bastart    { -webkit-box-align: start;    }
  34     .bacenter   { -webkit-box-align: center;   }
  35     .baend      { -webkit-box-align: end;      }
  36     .babaseline { -webkit-box-align: baseline; }
  37     .bastretch  { -webkit-box-align: stretch;  }
  38     br { clear: both; }
  39   </style>
  40 </head>
  41 <body>
  42   <!-- FIRST ROW: Default -webkit-box-align -->
  43   <!-- intrinsically sized -->
  44   <div class="box">
  45     <div>a</div><div>b</div>
  46   </div>
  47
  48   <!-- explicit size, extra width -->
  49   <div class="box" style="width: 36px">
  50     <div>a</div><div>b</div>
  51   </div>
  52
  53   <!-- explicit size, extra height -->
  54   <div class="box" style="height: 40px">
  55     <div>a</div><div>b</div>
  56   </div>
  57
  58   <!-- explicit size, extra height and width -->
  59   <div class="box" style="width: 36px; height: 40px">
  60     <div>a</div><div>b</div>
  61   </div>
  62   <br>
  63
  64   <!-- SECOND ROW:  -webkit-box-align: start -->
  65   <!-- intrinsically sized -->
  66   <div class="box bastart">
  67     <div>a</div><div>b</div>
  68   </div>
  69
  70   <!-- explicit size, extra width -->
  71   <div class="box bastart" style="width: 36px">
  72     <div>a</div><div>b</div>
  73   </div>
  74
  75   <!-- explicit size, extra height -->
  76   <div class="box bastart" style="height: 40px">
  77     <div>a</div><div>b</div>
  78   </div>
  79
  80   <!-- explicit size, extra height and width -->
  81   <div class="box bastart" style="width: 36px; height: 40px">
  82     <div>a</div><div>b</div>
  83   </div>
  84   <br>
  85
  86   <!-- THIRD ROW:  -webkit-box-align: center -->
  87   <!-- intrinsically sized -->
  88   <div class="box bacenter">
  89     <div>a</div><div>b</div>
  90   </div>
  91
  92   <!-- explicit size, extra width -->
  93   <div class="box bacenter" style="width: 36px">
  94     <div>a</div><div>b</div>
  95   </div>
  96
  97   <!-- explicit size, extra height -->
  98   <div class="box bacenter" style="height: 40px">
  99     <div>a</div><div>b</div>
 100   </div>
 101
 102   <!-- explicit size, extra height and width -->
 103   <div class="box bacenter" style="width: 36px; height: 40px">
 104     <div>a</div><div>b</div>
 105   </div>
 106   <br>
 107
 108   <!-- FOURTH ROW:  -webkit-box-align: end -->
 109   <!-- intrinsically sized -->
 110   <div class="box baend">
 111     <div>a</div><div>b</div>
 112   </div>
 113
 114   <!-- explicit size, extra width -->
 115   <div class="box baend" style="width: 36px">
 116     <div>a</div><div>b</div>
 117   </div>
 118
 119   <!-- explicit size, extra height -->
 120   <div class="box baend" style="height: 40px">
 121     <div>a</div><div>b</div>
 122   </div>
 123
 124   <!-- explicit size, extra height and width -->
 125   <div class="box baend" style="width: 36px; height: 40px">
 126     <div>a</div><div>b</div>
 127   </div>
 128   <br>
 129
 130   <!-- FIFTH ROW:  -webkit-box-align: baseline -->
 131   <!-- intrinsically sized -->
 132   <div class="box babaseline">
 133     <div>a</div><div>b</div>
 134   </div>
 135
 136   <!-- explicit size, extra width -->
 137   <div class="box babaseline" style="width: 36px">
 138     <div>a</div><div>b</div>
 139   </div>
 140
 141   <!-- explicit size, extra height -->
 142   <div class="box babaseline" style="height: 40px">
 143     <div>a</div><div>b</div>
 144   </div>
 145
 146   <!-- explicit size, extra height and width -->
 147   <div class="box babaseline" style="width: 36px; height: 40px">
 148     <div>a</div><div>b</div>
 149   </div>
 150   <br>
 151   <!-- SIXTH ROW:  -webkit-box-align: stretch -->
 152   <!-- intrinsically sized -->
 153   <div class="box bastretch">
 154     <div>a</div><div>b</div>
 155   </div>
 156
 157   <!-- explicit size, extra width -->
 158   <div class="box bastretch" style="width: 36px">
 159     <div>a</div><div>b</div>
 160   </div>
 161
 162   <!-- explicit size, extra height -->
 163   <div class="box bastretch" style="height: 40px">
 164     <div>a</div><div>b</div>
 165   </div>
 166
 167   <!-- explicit size, extra height and width -->
 168   <div class="box bastretch" style="width: 36px; height: 40px">
 169     <div>a</div><div>b</div>
 170   </div>
 171   <br>
 172
 173 </body>
 174 </html>