| <!DOCTYPE html> |
| <link href='resources/flexbox.css' rel='stylesheet'> |
| |
| <style> |
| .flexbox { |
| background-color: lightgrey; |
| } |
| #item1 { |
| vertical-align: 10px; |
| } |
| #item3 { |
| vertical-align: 30px; |
| } |
| </style> |
| |
| <p>This test checks that vertical-align should have no effect on a flex item |
| i.e flex items' content should not be shifted by the vertical-align</p> |
| |
| <div class='flexbox'> |
| <!-- flex item: block child --> |
| <div id='item1'>block</div> |
| <!-- flex item: anonymous block box around inline content --> |
| anonymous item 2 |
| <!-- flex item: inline child --> |
| <span id='item3'>item 3</span> |
| </div> |
