third_party/WebKit/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 table {
   6   border-spacing: 0;
   7   border-collapse: collapse;
   8   margin-bottom: 10px;
   9 }
  10
  11 td {
  12   padding: 0;
  13   width: 100px;
  14 }
  15 </style>
  16 </head>
  17 <body>
  18 <p>Test to make sure that wrap-reverse flips the cross axis directions and items
  19 with baseline alignment are aligned to cross axis start.</p>
  20
  21 <table style="background-color: #aaa">
  22 <tr><td colspan=2 style="height: 5px"></td></tr>
  23 <tr>
  24     <td style="vertical-align: top"><div style="background-color: pink">third</div></td>
  25     <td style="background-color: yellow">fourth<br>fourth</td>
  26 </tr>
  27 <tr>
  28     <td style="background-color: lightblue">first<br>first<br>first</td>
  29     <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td>
  30 </tr>
  31 </table>
  32
  33 <table style="background-color: #aaa">
  34 <tr>
  35     <td style="vertical-align: top"><div style="background-color: pink">third</div></td>
  36     <td style="background-color: yellow">fourth<br>fourth</td>
  37 </tr>
  38 <tr><td colspan=2 style="height: 5px"></td></tr>
  39 <tr>
  40     <td style="background-color: lightblue">first<br>first<br>first</td>
  41     <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td>
  42 </tr>
  43 </table>
  44
  45 <table style="background-color: #aaa">
  46 <tr>
  47     <td style="vertical-align: top; background-color: lightblue; height: 100px">first</td>
  48     <td style="vertical-align: bottom"><div style="background-color: lightgreen">second</div><div>&nbsp;</div></td>
  49     <td style="vertical-align: bottom"><div style="background-color: pink">third<br>third</div></td>
  50 </tr>
  51 </table>
  52
  53 </body>
  54 </html>