visibility-collapse-rowcol-002.html (1955B)
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 td { 10 padding: 0; 11 } 12 </style> 13 <h1>Visibility collapse</h1> 14 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> 15 <p> 16 Setting row and spanning column to visibility:collapse changes height and width. 17 </p> 18 <table id="test" style="border-spacing:0;"> 19 <col style="background-color: pink;"> 20 <col style="background-color: green;"> 21 <col span="2" style="background-color: purple; visibility: collapse;"> 22 <tr> 23 <td><div style="width: 25px; height: 25px"></div></td> 24 <td><div style="width: 20px; height: 20px"></div></td> 25 <td><div style="width: 15px; height: 15px"></div></td> 26 <td><div style="width: 10px; height: 10px"></div></td> 27 </tr> 28 <tr> 29 <td rowspan="2" colspan="3"><div style="width: 45px; height: 25px"></div></td> 30 <td><div style="width: 10px; height: 10px"></div></td> 31 </tr> 32 <tr style="visibility: collapse;"> 33 <td><div style="width: 70px; height: 40px"></div></td> 34 </tr> 35 </table> 36 <script> 37 borderWidth = 2; 38 tests = [ 39 [ 40 document.getElementById('test').offsetWidth, 41 45, 42 "spanning row visibility:collapse doesn't change table width" 43 ], 44 [ 45 document.getElementById('test').offsetHeight, 46 35, 47 "spanning row visibility:collapse doesn't change height in this case" 48 ]]; 49 for (i = 0; i< tests.length; i++) { 50 test(function() 51 { 52 assert_equals.apply(this, tests[i]); 53 }, 54 tests[i][2]); 55 }; 56 </script> 57 </html>