align-content-table-cell-003.html (1436B)
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-blocks"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-overflow-position-safe"> 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 This test checks various safe alignments, which should behave as `start`. 11 "> 12 13 <style> 14 table { 15 overflow: hidden; 16 } 17 tr { 18 height: 300px; 19 } 20 td::before { 21 content: ""; 22 display: block; 23 width: 50px; 24 height: 600px; 25 background: linear-gradient(to bottom, green 50%, red 50%); 26 } 27 </style> 28 29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 30 31 <table cellspacing="0" cellpadding="0"> 32 <tr> 33 <td rowspan="2" style="align-content: safe start"></td> 34 <td rowspan="2" style="align-content: safe center"></td> 35 <td rowspan="2" style="align-content: safe end"></td> 36 <td rowspan="2" style="overflow: hidden; align-content: safe start"></td> 37 <td rowspan="2" style="overflow: hidden; align-content: safe center"></td> 38 <td rowspan="2" style="overflow: hidden; align-content: safe end"></td> 39 </tr> 40 <tr style="visibility: collapse"></tr> 41 </table>