third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .inline-flexbox {
   8     display: inline-flex;
   9     background-color: lightgrey;
  10     margin-top: 5px;
  11 }
  12 .flexbox {
  13     display: flex;
  14     background-color: grey;
  15     margin-top: 10px;
  16 }
  17 .column {
  18     flex-flow: column;
  19 }
  20 .column-reverse {
  21     flex-flow: column-reverse;
  22 }
  23 </style>
  24
  25 <body style="position: relative">
  26
  27 <!-- If any of the flex items on the flex container's first line participate
  28 in baseline alignment, the flex container's main-axis baseline is the baseline
  29 of those flex items. -->
  30 <div>
  31 before text
  32 <div class="inline-flexbox" style="height: 50px;">
  33     <div style="align-self: flex-end">below</div>
  34     <div style="align-self: baseline; margin-top: 15px">baseline</div>
  35     <div style="align-self: flex-start">above</div>
  36 </div>
  37 after text
  38 </div>
  39
  40 <!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't
  41 participate in baseline alignment. Instead, the baseline is the first flex
  42 item's baseline. -->
  43 <div>
  44 before text
  45 <div class="inline-flexbox" style="height: 40px">
  46     <div style="align-self: flex-end">baseline</div>
  47     <div style="align-self: baseline; -webkit-writing-mode: vertical-rl"></div>
  48     <div style="align-self: flex-start">above</div>
  49 </div>
  50 after text
  51 </div>
  52
  53 <div>
  54 before text
  55 <div class="inline-flexbox">
  56     <h2>h2 baseline</h2>
  57     <div>above</div>
  58 </div>
  59 after text
  60 </div>
  61
  62 <div>
  63 before text
  64 <div class="inline-flexbox">
  65     <div>baseline</div>
  66     <h2>h2 below</h2>
  67 </div>
  68 after text
  69 </div>
  70
  71 <!-- If the first flex item has an orthogonal baseline, use the synthesized
  72 baseline (bottom of the content box of the first item). -->
  73 <div>
  74 should align with the middle
  75 <div class="inline-flexbox" style="width: 40px; height: 40px">
  76     <div style="-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
  77 </div>
  78 of the grey flexbox
  79 </div>
  80
  81 <!-- If there are no flexitems, align to the bottom of the box. -->
  82 <div>
  83 should align with the bottom
  84 <div class="inline-flexbox" style="width: 30px; height: 30px">
  85 </div>
  86 of the grey flexbox
  87 </div>
  88
  89
  90 <!-- cross-axis (column) test cases. -->
  91 <div>
  92 before text
  93 <div class="inline-flexbox column">
  94     <div>baseline</div>
  95     <div>below</div>
  96 </div>
  97 after text
  98 </div>
  99
 100 <div>
 101 before text
 102 <div class="inline-flexbox column-reverse">
 103     <div>baseline</div>
 104     <div>above</div>
 105 </div>
 106 after text
 107 </div>
 108
 109 <!-- If the first flex item has an orthogonal baseline, use the synthesized
 110 baseline (bottom of the content box of the first item). -->
 111 <div>
 112 should align with the middle
 113 <div class="inline-flexbox column" style="width: 40px; height: 40px;">
 114     <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
 115     <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px"></div>
 116 </div>
 117 of the grey flexbox
 118 </div>
 119
 120 <!-- If there are no flexitems, align to the bottom of the box. -->
 121 <div>
 122 should align with the bottom
 123 <div class="inline-flexbox column" style="width: 30px; height: 30px">
 124 </div>
 125 of the grey flexbox
 126 </div>
 127
 128 <!-- More tests on the right side of the page. -->
 129 <div style="position: absolute; top: 0; left: 400px; width: 360px">
 130
 131 <!-- Ignore absolutely positioned flex items. -->
 132 <div>
 133 before text
 134 <div class="inline-flexbox">
 135     <div style="position: absolute">absolute</div>
 136     <div style="margin-top: 30px">baseline</div>
 137 </div>
 138 after text
 139 </div>
 140
 141 <!-- We don't participate in baseline alignment if there's an auto margin. -->
 142 <div>
 143 before text
 144 <div class="inline-flexbox" style="height: 40px;">
 145     <div>baseline</div>
 146     <div style="align-self: baseline; margin-top: auto">below</div>
 147 </div>
 148 after text
 149 </div>
 150
 151 <div>
 152 before text
 153 <div style="display: inline-block">
 154 <div class="inline-flexbox" style="height: 40px;">
 155     <div>above</div>
 156     <div style="align-self: baseline; margin-top: 10px">baseline</div>
 157     <div>above</div>
 158 </div>
 159 after
 160 </div>
 161 text
 162 </div>
 163
 164 <!-- The spec is a little unclear what should happen here. For now, align to
 165 the last line box. -->
 166 <div>
 167 before text
 168 <div style="display: inline-block">
 169 <div class="flexbox" style="height: 30px;">
 170   baseline
 171 </div>
 172 </div>
 173 after text
 174 </div>
 175
 176 <table style="background-color: lightgrey; margin-top: 5px">
 177 <tr style="height: 50px">
 178   <td style="vertical-align: bottom">bottom</td>
 179   <td style="vertical-align: baseline">baseline</td>
 180   <td style="vertical-align: top">top</td>
 181   <td style="vertical-align: baseline"><div class="flexbox column">
 182       <div>baseline</div>
 183       <div>below</div>
 184   </div></td>
 185   <td style="vertical-align: baseline"><div class="flexbox column-reverse">
 186       <div>baseline</div>
 187       <div>above</div>
 188   </div></td>
 189 </tr>
 190 </table>
 191
 192 <table style="background-color: lightgrey; margin-top: 5px">
 193 <tr style="height: 50px">
 194   <td style="vertical-align: bottom">bottom</td>
 195   <td style="vertical-align: baseline">baseline</td>
 196   <td style="vertical-align: top">top</td>
 197   <td style="vertical-align: baseline"><div class="flexbox">
 198     <h2>h2 baseline</h2>
 199     <div>above</div>
 200   </div></td>
 201 </table>
 202
 203 <!-- If a box contributing a baseline has a scrollbar, the box must be treated
 204 as being in its initial scroll position when computing the baseline. -->
 205 <div>
 206 before text
 207 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
 208     <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
 209         The baseline is based on<br>
 210         the non-scrolled position;<br>
 211         this won't line up.
 212     </div>
 213 </div>
 214 after text
 215 </div>
 216
 217 </div>
 218
 219 <script>
 220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
 221 document.getElementById("flexbox-with-scrollbar").style.width = "auto";
 222 </script>
 223
 224 </body>
 225 </html>