| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| table { |
| border-spacing: 0; |
| border-collapse: collapse; |
| margin-bottom: 10px; |
| } |
| |
| td { |
| padding: 0; |
| width: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test to make sure that wrap-reverse flips the cross axis directions and items |
| with baseline alignment are aligned to cross axis start.</p> |
| |
| <table style="background-color: #aaa"> |
| <tr><td colspan=2 style="height: 5px"></td></tr> |
| <tr> |
| <td style="vertical-align: top"><div style="background-color: pink">third</div></td> |
| <td style="background-color: yellow">fourth<br>fourth</td> |
| </tr> |
| <tr> |
| <td style="background-color: lightblue">first<br>first<br>first</td> |
| <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td> |
| </tr> |
| </table> |
| |
| <table style="background-color: #aaa"> |
| <tr> |
| <td style="vertical-align: top"><div style="background-color: pink">third</div></td> |
| <td style="background-color: yellow">fourth<br>fourth</td> |
| </tr> |
| <tr><td colspan=2 style="height: 5px"></td></tr> |
| <tr> |
| <td style="background-color: lightblue">first<br>first<br>first</td> |
| <td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td> |
| </tr> |
| </table> |
| |
| <table style="background-color: #aaa"> |
| <tr> |
| <td style="vertical-align: top; background-color: lightblue; height: 100px">first</td> |
| <td style="vertical-align: bottom"><div style="background-color: lightgreen">second</div><div> </div></td> |
| <td style="vertical-align: bottom"><div style="background-color: pink">third<br>third</div></td> |
| </tr> |
| </table> |
| |
| </body> |
| </html> |
