visibility-collapse-rowcol-001.html (2014B)
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="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> 6 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> 7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> 8 <style> 9 table, td { 10 border: 1px solid; 11 height: 32px; 12 min-width: 32px; 13 white-space: nowrap; 14 padding: 0; 15 } 16 </style> 17 <h1>Visibility collapse</h1> 18 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> 19 <p> 20 Setting row and column to visibility:collapse changes both height and width. The 21 collapsed result should have whitespace in the bottom right corner. 22 </p> 23 <table id="test"> 24 <col style="background-color: pink"> 25 <col style="background-color: purple;"> 26 <col style="background-color: black; visibility: collapse;"> 27 <col style="background-color: grey; "> 28 <tbody> 29 <tr> 30 <td></td> 31 <td></td> 32 <td></td> 33 <td></td> 34 </tr> 35 <tr> 36 <td colspan="2" rowspan="2"></td> 37 <td></td> 38 <td></td> 39 </tr> 40 <tr style="visibility:collapse"> 41 <td></td> 42 <td></td> 43 </tr> 44 <tr> 45 <td></td> 46 <td></td> 47 <td colspan="2"></td> 48 </tr> 49 </tbody> 50 </table> 51 <script> 52 tests = [ 53 [ 54 document.getElementById('test').offsetWidth, 55 112, 56 "spanning col visibility:collapse changes table width" 57 ], 58 [ 59 document.getElementById('test').offsetHeight, 60 112, 61 "spanning row visibility:collapse changes height" 62 ]]; 63 for (i = 0; i< tests.length; i++) { 64 test(function() 65 { 66 assert_equals.apply(this, tests[i]); 67 }, 68 tests[i][2]); 69 }; 70 </script> 71 </html>