OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href='resources/grid.css' rel='stylesheet'> | 2 <link href='resources/flexbox.css' rel='stylesheet'> |
| 3 |
3 <style> | 4 <style> |
4 .grid { | 5 .flexbox { |
5 background-color: lightgrey; | 6 background-color: lightgrey; |
6 } | 7 } |
7 #item1 { | 8 #item1 { |
8 vertical-align: 10px; | 9 vertical-align: 10px; |
9 } | 10 } |
10 #item3 { | 11 #item3 { |
11 vertical-align: 30px; | 12 vertical-align: 30px; |
12 } | 13 } |
13 </style> | 14 </style> |
14 | 15 |
15 <p>This test checks that vertical-align should have no effect on a grid item | 16 <p>This test checks that vertical-align should have no effect on a flex item |
16 i.e grid items' content should not be shifted by the vertical-align</p> | 17 i.e flex items' content should not be shifted by the vertical-align</p> |
17 | 18 |
18 <div class='grid'> | 19 <div class='flexbox'> |
19 <!-- grid item: block child --> | 20 <!-- flex item: block child --> |
20 <div id='item1'>block</div> | 21 <div id='item1'>block</div> |
21 <!-- grid item: anonymous block box around inline content --> | 22 <!-- flex item: anonymous block box around inline content --> |
22 anonymous item 2 | 23 anonymous item 2 |
23 <!-- grid item: inline child --> | 24 <!-- flex item: inline child --> |
24 <span id='item3'>item 3</span> | 25 <span id='item3'>item 3</span> |
25 </div> | 26 </div> |
OLD | NEW |