align-content-table-cell-002.html (1623B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12220"> 6 <link rel="match" href="../../reference/ref-filled-green-300px-square.html"> 7 <meta name="assert" content=" 8 The contents of the cells are 600px tall, but since we are collapsing one row, 9 the cells shrink to be only 300px tall. Therefore, the contents overflow. 10 Since the cells have the default `align-content: normal`, the alignment is 11 decided depending on `vertical-align`: 12 - `vertical-align: top` maps to `align-self: safe start` 13 - `vertical-align: middle` maps to `align-self: safe center` 14 - `vertical-align: bottom` maps to `align-self: safe end` 15 "> 16 17 <style> 18 table { 19 overflow: hidden; 20 } 21 tr { 22 height: 300px; 23 } 24 td::before { 25 content: ""; 26 display: block; 27 width: 50px; 28 height: 600px; 29 background: linear-gradient(to bottom, green 50%, red 50%); 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 35 <table cellspacing="0" cellpadding="0"> 36 <tr> 37 <td rowspan="2" style="vertical-align: top"></td> 38 <td rowspan="2" style="vertical-align: middle"></td> 39 <td rowspan="2" style="vertical-align: bottom"></td> 40 <td rowspan="2" style="overflow: hidden; vertical-align: top"></td> 41 <td rowspan="2" style="overflow: hidden; vertical-align: middle"></td> 42 <td rowspan="2" style="overflow: hidden; vertical-align: bottom"></td> 43 </tr> 44 <tr style="visibility: collapse"></tr> 45 </table>