visibility-collapse-rowspan-002-border-separate.html (3353B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <link rel='stylesheet' href='support/base.css' /> 6 <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> 7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering"> 8 <style> 9 table { 10 border-spacing: 0; 11 border-collapse: separate; 12 } 13 table td { 14 border: 1px solid blue; 15 padding: 5px; 16 } 17 </style> 18 <main> 19 <h1>Visibility collapse</h1> 20 <a href="https://drafts.csswg.org/css-tables-3/#visibility-collapse-cell-rendering">Spec</a> 21 <p> 22 Setting a row to visibility:collapse changes table height but not width. 23 Here, the spanning cell is the only cell in its row. 24 </p> 25 <table id="one"> 26 <tr id="spanningRowRef"> 27 <td rowspan="5">B<br>B<br>B<br>B<br>B</td> 28 </tr> 29 <tr id="firstRowRef"> 30 <td>aaaa</td> 31 </tr> 32 <tr> 33 <td>bbbb</td> 34 </tr> 35 <tr id="thirdRowRef"> 36 <td>cccc</td> 37 </tr> 38 <tr id="fourthRowRef"> 39 <td>dddd</td> 40 </tr> 41 </table> 42 Bottom table is identical to top except second row has been collapsed. 43 The spanning cell's height shrinks and is clipped. 44 <table id="two"> 45 <tr id="spanningRow"> 46 <td rowspan="5" id="spanningCell">B<br>B<br>B<br>B<br>B</td> 47 </tr> 48 <tr id="firstRow"> 49 <td>aaaa</td> 50 </tr> 51 <tr id="secondRow" style="visibility: collapse"> 52 <td>bbbb</td> 53 </tr> 54 <tr id="thirdRow"> 55 <td>cccc</td> 56 </tr> 57 <tr id="fourthRow"> 58 <td>dddd</td> 59 </tr> 60 </table> 61 62 This text should not intersect with the table. 63 64 </main> 65 66 <script> 67 tests = [ 68 [ 69 document.getElementById('two').offsetWidth, 70 document.getElementById('one').offsetWidth, 71 "spanning row visibility:collapse doesn't change table width" 72 ], 73 [ 74 document.getElementById('fourthRow').offsetHeight, 75 document.getElementById('fourthRowRef').offsetHeight, 76 "fourth row stays the same height" 77 ], 78 [ 79 document.getElementById('thirdRow').offsetHeight, 80 document.getElementById('thirdRowRef').offsetHeight, 81 "third row stays the same height" 82 ], 83 [ document.getElementById('secondRow').offsetHeight, 84 0, 85 "spanning row visibility:collapse makes row height 0" 86 ], 87 [ 88 document.getElementById('firstRow').offsetHeight, 89 document.getElementById('firstRowRef').offsetHeight, 90 "first row stays the same height" 91 ], 92 [ 93 document.getElementById('spanningCell').offsetHeight, 94 document.getElementById('firstRow').offsetHeight + 95 document.getElementById('thirdRow').offsetHeight + 96 document.getElementById('fourthRow').offsetHeight, 97 "spanning cell shrinks to sum of remaining three rows' height" 98 ]]; 99 for (i = 0; i< tests.length; i++) { 100 test(function() 101 { 102 assert_equals.apply(this, tests[i]); 103 }, 104 tests[i][2]); 105 }; 106 </script> 107 </html>